/* Оформление личного кабинета loyalty.core.
   Без внешних зависимостей: всё встроено в бинарник, работает без интернета. */

:root {
    /* Тёмная «glazzed»-палитра: стеклянные полупрозрачные панели поверх
       сине-фиолетового градиента. Панели заданы через rgba, а не сплошным
       hex — сквозь них должен просвечивать фон под размытием. */
    --bg: #12162a;                        /* базовый тон под градиентом */
    --panel: rgba(42, 49, 82, 0.55);      /* стекло: полупрозрачная панель */
    --panel-solid: #1d2238;               /* непрозрачный вариант — поля ввода */
    --code-bg: rgba(255, 255, 255, 0.07); /* блоки токенов/паролей */
    --ink: #eaedf6;
    --muted: #9aa1bd;
    --line: rgba(255, 255, 255, 0.12);
    --accent: #7c6dff;
    --accent-ink: #ffffff;
    --accent-glow: rgba(124, 109, 255, 0.38);
    --ok: #34d399;
    --warn: #fbbf24;
    --err: #f87171;
    --radius: 10px;
    --glass: blur(14px) saturate(140%);   /* размытие «стекла» */
    --glow: 0 8px 30px rgba(0, 0, 0, 0.35);
    /* Тёмными становятся и системные элементы: скроллбары, календарь
       input[type=date], подсказки автозаполнения. */
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    /* Фон-градиент фиксирован: цветные «пятна» света в углах не уезжают
       при прокрутке, поэтому стекло панелей выглядит одинаково по всей
       странице. attachment: fixed держит картинку на месте. */
    background-image:
        radial-gradient(1100px 620px at 12% -8%, rgba(124, 109, 255, 0.32), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, rgba(56, 189, 248, 0.16), transparent 55%),
        linear-gradient(180deg, #161b34, #12162a 60%);
    background-attachment: fixed;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Каркас --- */

.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    height: 56px;
    background: rgba(26, 31, 54, 0.65);
    -webkit-backdrop-filter: var(--glass);
    backdrop-filter: var(--glass);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar .brand { font-weight: 600; letter-spacing: -0.01em; }
.topbar nav { display: flex; gap: 18px; flex: 1; }
.topbar nav a { color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent; }
.topbar nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
/* --- Аккаунт-меню в шапке --- */
/* Нативный <details>: переключатель — имя и роль администратора, при клике
   вниз раскрывается меню. Закрытие по клику вне и Escape — account-menu.js. */

.account { position: relative; }

.account-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;               /* убрать стандартный треугольник <summary> */
    user-select: none;
}
.account-btn::-webkit-details-marker { display: none; }
.account-btn:hover { background: rgba(255, 255, 255, 0.05); }

.account-id { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.account-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.account-role { font-size: 11px; color: var(--muted); }

.account .chev { color: var(--muted); transition: transform 0.15s ease; }
.account[open] .chev { transform: rotate(180deg); }

/* Само выпадающее меню — стеклянная панель под переключателем. */
.account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 200px;
    padding: 6px;
    background: rgba(30, 36, 62, 0.92);
    -webkit-backdrop-filter: var(--glass);
    backdrop-filter: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--glow);
    z-index: 20;
}
.account-menu-head {
    padding: 7px 12px 9px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    word-break: break-all;
}
.account-menu form { margin: 0; }
.account-menu a, .account-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    text-decoration: none;
    filter: none;
}

.wrap { max-width: 1180px; margin: 24px auto; padding: 0 24px; }

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 28px 0 12px; }
.subtitle { color: var(--muted); margin: 0 0 20px; font-size: 14px; }

/* --- Панели --- */

.card {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass);
    backdrop-filter: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--glow);
    padding: 18px 20px;
    margin-bottom: 18px;
    /* Широкие таблицы прокручиваются внутри карточки, а не растягивают
       страницу: иначе на узком окне правые колонки просто обрезаются */
    overflow-x: auto;
}

/* Нижний отступ как у .card: под плашками до следующей панели должен быть
   такой же зазор, как между панелями. Перед заголовком h2 (его margin-top
   больше) отступы схлопнутся к большему — на «Обзоре» ничего не съедет. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--panel); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--glow); padding: 16px 18px; }
.stat .label { color: var(--muted); font-size: 13px; }
.stat .value { font-size: 26px; font-weight: 600; margin-top: 4px; letter-spacing: -0.02em; }

/* --- Таблицы --- */

table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
th {
    text-align: left;
    font-weight: 600;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
}
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); padding: 24px 10px; text-align: center; }

/* --- Метки --- */

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
}
.tag.ok { background: rgba(52, 211, 153, 0.16); color: var(--ok); }
.tag.warn { background: rgba(251, 191, 36, 0.16); color: var(--warn); }
.tag.err { background: rgba(248, 113, 113, 0.16); color: var(--err); }

.plus { color: var(--ok); }
.minus { color: var(--err); }

/* --- Формы --- */

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
/* Все текстовые поля ввода + select + textarea. Задаём через отрицания, а не
   перечислением типов: при списке типов новый (datetime-local, time, url…)
   молча остаётся без стиля. Исключены нетекстовые: hidden, флажки/радио,
   кнопки, выбор файла, ползунок. */
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]),
select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    color: var(--ink);
    /* Поля непрозрачны (не стекло): на размытом фоне текст в них читался бы
       хуже, а ввод должен быть чётким. */
    background: var(--panel-solid);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

/* Без appearance:none браузер рисует select своим нативным виджетом: он не
   применяет наши вертикальные паддинги и выходит ниже текстовых полей. Гасим
   нативный вид, чтобы select слушался тех же паддингов, и рисуем свой каретик
   вместо системной стрелки (место под него — padding-right). */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1bd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

.field { margin-bottom: 14px; }

/* Панель фильтров списка: поля в один переносящийся ряд, кнопки справа. */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.filter-bar .field { margin-bottom: 0; }
.filter-bar select, .filter-bar input { min-width: 130px; }
/* «Применить» и «Сбросить» — в один ряд и вровень: внутри flex ссылка-кнопка
   блокифицируется, поэтому её вертикальный паддинг работает как у <button>
   (иначе inline-<a> встаёт ниже native-кнопки). */
.filter-bar .actions { display: flex; gap: 8px; align-items: center; }
/* «Применить» — вспомогательное действие, а не главное: акцентный цвет
   оставлен только создающим кнопкам («Новый X», «Создать»). Здесь — тихая
   нейтральная заливка. Иерархия: акцент (создать) → нейтраль (применить) →
   контур (сбросить). Прозрачная рамка уравнивает высоту с ghost-«Сбросить». */
.filter-bar .actions button {
    background: rgba(255, 255, 255, 0.10);
    color: var(--ink);
    border: 1px solid transparent;
    box-shadow: none;
}
.filter-bar .actions button:hover { background: rgba(255, 255, 255, 0.16); filter: none; }
/* Принудительный перенос ряда: элемент во всю ширину заставляет следующие поля
   начаться с новой строки (у чеков — поиск, чтобы он не поджимался при короткой
   выбранной сети). */
.filter-bar .filter-break { flex-basis: 100%; height: 0; margin: 0; }

/* Постраничник под таблицей: слева «всего», справа номера страниц. */
.pager { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
         justify-content: space-between; margin-top: 14px; }
.pager-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pager .btn { padding: 4px 10px; }
.pager .page-current { background: var(--accent); color: #fff; border-color: var(--accent); cursor: default; }

/* Сетка формы: поля ровными столбцами независимо от длины подписи.
   minmax(0,1fr) не даёт колонкам расползаться по содержимому. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.form-grid .field { margin-bottom: 0; }
/* Ряд с кнопками и поля на всю ширину занимают обе колонки. */
.form-grid .actions, .form-grid .field.wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

button, .btn {
    padding: 9px 16px;
    border: none;
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--accent-glow);
}
button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); filter: none; }

/* --- Сообщения --- */

.alert { padding: 11px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.alert.error { background: rgba(248, 113, 113, 0.14); color: var(--err); border: 1px solid rgba(248, 113, 113, 0.28); }
.alert.info { background: rgba(124, 109, 255, 0.16); color: #cbc4ff; border: 1px solid rgba(124, 109, 255, 0.30); }

/* --- Вход --- */

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { width: 340px; background: var(--panel); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--glow); padding: 28px; }
.login-box h1 { margin-bottom: 20px; font-size: 19px; }

/* --- Мелочи --- */

.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: baseline; }