/*
 * Стиль панели zapomni: своя «мягкая» тема (Soft) поверх штатного CSS Filament.
 * Без сборки Tailwind — только CSS-переменные Filament (--gray-*, --primary-*, --radius-*)
 * и классы компонентов .fi-*. Подключается render-hook'ом в AdminPanelProvider.
 * Палитра (primary/gray) и шрифт задаются там же — ->colors() и ->font().
 */

/* ── Без теней ───────────────────────────────────────────────── */
/* Тени Filament обнуляем через переменную Tailwind: рамки полей и кнопок (ring — тоже box-shadow) остаются */
* , ::before, ::after { --tw-shadow: 0 0 #0000 !important; --tw-inset-shadow: 0 0 #0000 !important; }

/* ── Токены темы ─────────────────────────────────────────────── */
:root {
    /* Скругления — вдвое меньше штатных (просьба 09.10: «border-radius везде −50%») */
    --radius-xs: .0625rem;
    --radius-sm: .125rem;
    --radius-md: .3125rem;
    --radius-lg: .375rem;
    --radius-xl: .5625rem;
    --radius-2xl: .5rem;
    --radius-3xl: .75rem;

    --soft-bg: #fff;
    --soft-surface: #fff;
    --soft-shadow: none;
    --soft-shadow-hover: none;
    --soft-shadow-pop: none;
    --soft-line: var(--gray-200);
    --soft-input: color-mix(in oklab, var(--gray-100) 60%, #fff);
    /* Стиль zapomni.ru (12.10): акцент — золото #cba150. Активный пункт, выбранный фильтр — светлое золото */
    --soft-accent-bg: var(--primary-100);
    --soft-accent-fg: var(--primary-800);
    /* Заливки золотом: полоски продаж, счётчики; текст на золоте тёмный (#201600) — у белого контраст 2,3:1 */
    --zp-accent: var(--primary-500);
    --zp-accent-fg: var(--primary-950);
    /* Подложка заголовков секций и плашек — самое светлое золото */
    --soft-header-bg: var(--primary-50);
    --soft-border: var(--gray-200);
    --zp-topbar: #202020;
}
:root.dark {
    /* Тёмная тема — как сайт и виджет zapomni.ru: фон #202020, карточки #2b2b2b, линии #3d3d3d */
    --soft-bg: #202020;
    --soft-surface: #2b2b2b;
    --soft-shadow: none;
    --soft-shadow-hover: none;
    --soft-shadow-pop: none;
    --soft-line: #3d3d3d;
    --soft-input: color-mix(in oklab, #fff 4%, transparent);
    --soft-accent-bg: color-mix(in oklab, var(--primary-500) 18%, transparent);
    --soft-accent-fg: var(--primary-200);
    --zp-accent: var(--primary-500);
    --zp-accent-fg: var(--primary-950);
    --soft-header-bg: #252525;
    --soft-border: #3d3d3d;
    --zp-topbar: #161616;
}

/* ── Фон, шапка, меню ────────────────────────────────────────── */
.fi-body { background-color: var(--soft-bg); }

/* Шапка — чёрная, как на zapomni.ru (фон сайта #202020), в обеих темах; логотип всегда белый */
.fi-topbar {
    background-color: var(--zp-topbar);
    box-shadow: none; border-bottom: 1px solid rgb(255 255 255 / .06);
    color: #fff;
}
.fi-topbar .fi-logo-light { display: none !important; }
.fi-topbar .fi-logo-dark { display: block !important; }
.fi-topbar .fi-icon-btn:not(.fi-input-wrp .fi-icon-btn) {
    background: transparent; border-color: rgb(255 255 255 / .16); color: rgb(255 255 255 / .72);
}
.fi-topbar .fi-icon-btn:not(.fi-input-wrp .fi-icon-btn):hover { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .28); }
.fi-topbar .fi-input-wrp { background-color: rgb(255 255 255 / .08) !important; --tw-ring-color: rgb(255 255 255 / .14) !important; }
.fi-topbar .fi-input-wrp :is(input, .fi-icon) { color: #fff; }
.fi-topbar .fi-input-wrp input::placeholder { color: rgb(255 255 255 / .5); }
.fi-topbar .fi-input-wrp:focus-within { background-color: rgb(255 255 255 / .12) !important; }

@media (min-width: 64rem) {
    .fi-sidebar { background-color: transparent; }
}
.fi-sidebar-item-btn { border-radius: var(--radius-lg); padding-block: .5rem; }
.fi-sidebar-item-btn:hover { background-color: color-mix(in oklab, var(--gray-500) 8%, transparent); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) {
    background-color: var(--soft-accent-bg);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--soft-accent-fg); }
.fi-sidebar-group-label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }

/* ── Карточки: секции, таблицы, показатели, виджеты ──────────── */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart .fi-section,
.fi-ta-record {
    background-color: var(--soft-surface);
    box-shadow: var(--soft-shadow) !important;
    /* Фон страницы белый — карточки отделяет тонкая рамка, а не цвет */
    border: 1px solid var(--soft-line);
}
.dark :is(.fi-section:not(.fi-section-not-contained), .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-ta-record) { border-color: var(--soft-line); }
.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn,
.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    border-color: var(--soft-line);
}
.fi-section-header-heading { font-weight: 650; }
/* Шапка секции — лёгкая нейтральная подложка */
.fi-section:not(.fi-section-not-contained) > .fi-section-header:has(.fi-section-header-heading) {
    background-color: var(--soft-header-bg);
    border-top-left-radius: inherit; border-top-right-radius: inherit;
}
.fi-section:not(.fi-section-not-contained).fi-collapsed > .fi-section-header { border-radius: inherit; }

.fi-ta-record { transition: box-shadow .15s ease, transform .15s ease; }
.fi-ta-record:hover { border-color: color-mix(in oklab, var(--primary-500) 40%, transparent); transform: translateY(-2px); }

/* Строки таблиц и разделители — тоньше и светлее */
.fi-ta-ctn :is(thead, tbody, tr, .fi-ta-header, .fi-ta-header-toolbar, .fi-pagination) { border-color: var(--soft-line); }
.fi-ta-ctn thead th { background: color-mix(in oklab, var(--gray-500) 4%, transparent); }

/* ── Поля ввода ──────────────────────────────────────────────── */
.fi-input-wrp:not(.fi-disabled) { background-color: var(--soft-input); }
.fi-input-wrp {
    --tw-ring-color: color-mix(in oklab, var(--gray-400) 22%, transparent) !important;
    --tw-shadow: 0 0 #0000 !important;
}
.fi-input-wrp:focus-within {
    background-color: var(--soft-surface);
    --tw-ring-color: var(--primary-500) !important;
    box-shadow: 0 0 0 1px var(--primary-500) !important;
}

/* ── Иконки-кнопки: аккуратные, в рамке, меньше штатных ─────────── */
/* Кроме кнопок внутри полей ввода (очистить, показать пароль) — там рамка лишняя */
.fi-icon-btn:not(.fi-input-wrp .fi-icon-btn) {
    margin: 0; width: 2rem; height: 2rem;
    border: 1px solid var(--soft-border); border-radius: var(--radius-md);
    background-color: var(--soft-surface); color: var(--gray-500);
}
.fi-icon-btn:not(.fi-input-wrp .fi-icon-btn):hover {
    color: var(--gray-950); border-color: var(--gray-400);
    background-color: var(--soft-header-bg);
}
.dark .fi-icon-btn:not(.fi-input-wrp .fi-icon-btn):hover { color: #fff; border-color: var(--gray-500); }
.fi-icon-btn:not(.fi-input-wrp .fi-icon-btn) > .fi-icon { width: 1rem; height: 1rem; }
.fi-icon-btn.fi-color:not(.fi-color-gray):not(.fi-input-wrp .fi-icon-btn) { color: var(--color-600, var(--primary-600)); }

/* ── Кнопки, всплывающие окна ────────────────────────────────── */
.fi-btn { border-radius: var(--radius-lg); }

.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--radius-xl);
    border: 1px solid var(--soft-line);
}
.fi-modal-window { background-color: var(--soft-surface); }

.fi-badge { border-radius: 999px; }

/* ── Показатели (stats overview) ─────────────────────────────── */
/* Цифры карточек-показателей: штатные 30px слишком крупные для плотного дашборда */
.fi-wi-stats-overview-stat-value { font-size: 1.375rem; line-height: 1.75rem; }
/* Карточки состояния синхронизации — текстовые значения, ещё компактнее */
[wire\:name$="sync-status"] .fi-wi-stats-overview-stat-value { font-size: 1.125rem; line-height: 1.5rem; }
/* Показатель: [иконка акцентом][цифра] в первой строке, ниже заголовок и пояснение */
.fi-wi-stats-overview-stat-content { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .75rem; }
.fi-wi-stats-overview-stat-content > * { grid-column: 1 / -1; }
.fi-wi-stats-overview-stat-label-ctn { display: contents; }
.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    grid-column: 1; grid-row: 1; box-sizing: content-box; width: 1.5rem; height: 1.5rem; padding: .5rem; border-radius: .375rem;
    color: var(--primary-600); background: color-mix(in oklab, var(--primary-500) 12%, transparent);
}
.dark .fi-wi-stats-overview-stat-label-ctn > .fi-icon { color: var(--primary-400); background: color-mix(in oklab, var(--primary-400) 16%, transparent); }
.fi-wi-stats-overview-stat-content > .fi-wi-stats-overview-stat-value { grid-column: 2; grid-row: 1; }
.fi-wi-stats-overview-stat-label { grid-column: 1 / -1; grid-row: 2; margin-top: .625rem; white-space: nowrap; }

/* ── Select ──────────────────────────────────────────────────── */
/* Выбранное значение — в одну строку с многоточием (длинные «дата — название мероприятия») */
.fi-select-input-value-ctn { min-width: 0; }
.fi-select-input-value-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Подсказки по пунктам (App\Filament\Support\Notes) ───────── */
.zp-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.zp-notes > li { position: relative; padding-inline-start: .875rem; }
.zp-notes > li::before { content: ""; position: absolute; inset-inline-start: .125rem; top: .6em; width: .3rem; height: .3rem; border-radius: 999px; background: var(--gray-400); }
.zp-notes > li.zp-notes-total { margin-top: .25rem; font-weight: 600; color: var(--gray-700); }
.dark .zp-notes > li.zp-notes-total { color: var(--gray-200); }
.zp-notes > li.zp-notes-total::before { display: none; }
.zp-notes > li.zp-notes-total { padding-inline-start: 0; }
.zp-var { font-family: var(--mono-font-family, ui-monospace), monospace; font-size: .85em; padding: .05rem .375rem; border-radius: .1875rem;
    color: var(--gray-800); background: var(--soft-header-bg); border: 1px solid var(--soft-line); }
.dark .zp-var { color: var(--gray-200); }

/* ── Превью SMS (resources/views/filament/sms/preview.blade.php) ─ */
.zp-sms { display: grid; gap: .5rem; }
.zp-sms-label { font-size: .875rem; font-weight: 500; color: var(--gray-950); }
.dark .zp-sms-label { color: #fff; }
.zp-sms-phone { max-width: 22rem; border-radius: .75rem; padding: .625rem; background: #1c1c1e; box-shadow: var(--soft-shadow); }
.zp-sms-head { display: flex; align-items: center; gap: .625rem; padding: .375rem .5rem .625rem; border-bottom: 1px solid rgb(255 255 255 / .08); color: #fff; }
.zp-sms-head > span:last-child { display: grid; line-height: 1.2; }
.zp-sms-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--primary-500); color: #fff; font-weight: 700; }
.zp-sms-sender { font-weight: 600; font-size: .875rem; }
.zp-sms-sub { font-size: .7rem; opacity: .55; }
.zp-sms-body { min-height: 7rem; padding: .875rem .375rem .375rem; border-radius: .5rem; background: #000; }
.zp-sms-bubble { max-width: 88%; padding: .5rem .75rem; border-radius: .5625rem .5625rem .5625rem .1875rem; background: #2c2c2e; color: #f2f2f7;
    font-size: .875rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.zp-sms-time { margin: .25rem 0 0 .5rem; font-size: .65rem; color: rgb(255 255 255 / .4); }
.zp-sms-empty { padding: 1.5rem .5rem; text-align: center; font-size: .8rem; color: rgb(255 255 255 / .45); }
.zp-sms-meta { font-size: .8rem; color: var(--gray-500); }

/* ── Плитка мероприятий: карточки сами по себе, без общей рамки таблицы ─ */
/* Панель поиска/фильтров, строка сортировки и пагинация — отдельными плашками */
.zp-tiles .fi-ta-ctn { background: transparent; border: 0 !important; overflow: visible; }
.zp-tiles .fi-ta-header-toolbar,
.zp-tiles .fi-ta-content-header,
.zp-tiles .fi-ta-ctn > .fi-pagination,
.zp-tiles .fi-ta-main + .fi-pagination {
    border: 1px solid var(--soft-line) !important; border-radius: var(--radius-xl); background: var(--soft-surface);
}
.zp-tiles .fi-ta-header-ctn { margin-bottom: 1rem; }
.zp-tiles .fi-ta-content-header { margin-bottom: 1rem; }
.zp-tiles .fi-ta-content-ctn, .zp-tiles .fi-ta-content { background: transparent; border: 0 !important; }
.zp-tiles .fi-ta-content-grid { padding: 0 !important; gap: 1.25rem; }
.zp-tiles .fi-pagination { margin-top: 1rem; padding: .75rem 1.25rem; }

/* ── Таблица с заголовком (вкладки карточек, relation managers): заголовок и поиск/фильтры — одной строкой ─ */
.fi-ta-header-ctn:has(> .fi-ta-header) { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--soft-line); }
.fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header { flex: 1 1 18rem; border-bottom: 0; }
.fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header-toolbar { flex: 0 1 auto; margin-inline-start: auto; border-bottom: 0; }
/* Пустая левая часть строки поиска (нет кнопок) не занимает места */
.fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) { display: none; }

/* ── Плотность: меньше вертикальных отступов везде ─────────────── */
/* Промежутки между блоками страницы и полями схем */
.fi-sc.fi-sc-has-gap { gap: calc(var(--spacing) * 4); }
.fi-sc-form { gap: calc(var(--spacing) * 4); }
.fi-sc-flex { gap: calc(var(--spacing) * 4); }
.fi-page-content, .fi-page-main { row-gap: calc(var(--spacing) * 4); }
.fi-in-entry, .fi-in-entry .fi-in-entry-content-col,
.fi-fo-field, .fi-fo-field .fi-fo-field-label-col, .fi-fo-field .fi-fo-field-content-col { row-gap: calc(var(--spacing) * 1); }
/* Подписи полей карточки (infolist) — кеглем текста панели */
.fi-in-entry .fi-in-entry-label { font-size: 1rem; }
/* Секции */
.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header { padding-block: calc(var(--spacing) * 2.5); }
.fi-section:not(.fi-section-not-contained).fi-compact:not(.fi-aside) > .fi-section-header { padding-block: calc(var(--spacing) * 2); }
.fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content,
.fi-section:not(.fi-section-not-contained).fi-divided > .fi-section-content-ctn > .fi-section-content > * { padding-block: calc(var(--spacing) * 4); }
.fi-section:not(.fi-section-not-contained).fi-compact:not(.fi-divided) > .fi-section-content-ctn > .fi-section-content { padding-block: calc(var(--spacing) * 3); }
.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer { padding-block: calc(var(--spacing) * 2.5); }
.fi-sc-tabs .fi-tabs { padding-block: calc(var(--spacing) * 1.5); }
/* Таблицы: строки и шапка */
:is(.fi-ta-text, .fi-ta-icon, .fi-ta-checkbox, .fi-ta-color, .fi-ta-image, .fi-ta-select, .fi-ta-text-input, .fi-ta-toggle):not(.fi-inline) { padding-block: calc(var(--spacing) * 2); }
.fi-ta-cell:has(.fi-ta-actions), .fi-ta-cell:has(.fi-ta-record-checkbox), .fi-ta-cell.fi-ta-selection-cell { padding-block: calc(var(--spacing) * 2); }
.fi-ta-header-cell { padding-block: calc(var(--spacing) * 2.5); }
.fi-ta-ctn .fi-ta-header-toolbar, .fi-ta-ctn .fi-ta-header, .fi-ta-ctn .fi-pagination { padding-block: calc(var(--spacing) * 2); }
/* Модальные окна */
.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-content { padding-block: calc(var(--spacing) * 4); }
/* Показатели дашборда */
.fi-wi-stats-overview-stat { padding: calc(var(--spacing) * 4); }
/* Меню «Столбцы»: пункты плотнее (штатно 16px сверху у каждого) */
.fi-ta-col-manager .fi-ta-col-manager-item { padding-top: calc(var(--spacing) * 1.5); }
.fi-ta-col-manager .fi-ta-col-manager-items { row-gap: 0; }
/* Подзаголовок страницы — обычный текст панели, а не крупный (штатно ~18px), см. CLAUDE.md */
.fi-header-subheading { font-size: var(--text-sm); line-height: 1.45; color: var(--gray-500); max-width: 44rem; margin-top: .25rem; }

/* Плитка: сортировка — в той же строке, что поиск и фильтры (левая часть строки поиска пустая).
   Разные родители в разметке Filament — поэтому строка сортировки ставится поверх строки поиска */
.zp-tiles .fi-ta-main { position: relative; }
.zp-tiles .fi-ta-content-ctn { position: static; }
.zp-tiles .fi-ta-content-header {
    position: absolute; top: 0; left: 0; z-index: 1;
    height: var(--zp-toolbar-h, 3.25rem); margin: 0 !important; padding: 0 1rem;
    display: flex; align-items: center;
    border: 0 !important; background: transparent !important;
}
.zp-tiles .fi-ta-header-ctn { min-height: var(--zp-toolbar-h, 3.25rem); }

/* Шапка секции с пояснением: акцентная полоса — только под строкой заголовка, пояснение — на обычном фоне под ней
   (Filament кладёт description внутрь .fi-section-header, и общий фон заливал текст пояснения) */
.fi-section:not(.fi-section-not-contained) > .fi-section-header:has(.fi-section-header-heading):has(.fi-section-header-description) {
    position: relative; background-color: transparent;
}
.fi-section:not(.fi-section-not-contained) > .fi-section-header:has(.fi-section-header-heading):has(.fi-section-header-description)::before {
    content: ""; position: absolute; inset: 0 0 auto 0; pointer-events: none;
    height: calc(var(--spacing) * 11); /* отступ 2.5 + строка заголовка 6 + отступ 2.5 */
    background-color: var(--soft-header-bg); border-bottom: 1px solid var(--soft-line);
    border-top-left-radius: inherit; border-top-right-radius: inherit;
}
.fi-section:not(.fi-section-not-contained) > .fi-section-header:has(.fi-section-header-description) > * { position: relative; }
.fi-section-header:has(.fi-section-header-heading) .fi-section-header-description { margin-top: calc(var(--spacing) * 3); }

/* Вкладки кластера («Сотрудники · Роли», «Общие · Поля гостя») — у левого края, под заголовком, а не по центру */
.fi-page-sub-navigation-tabs { margin-inline: 0 !important; justify-self: start; align-self: start; }

/* ── Правки по визуальному аудиту 09.10 ───────────────────────── */
/* Бейджи — не мельче 12px, чтобы не выглядели «мелким шрифтом» рядом с текстом таблиц */
.fi-badge { font-size: .75rem; line-height: 1rem; }
/* Тёмная тема: плейсхолдеры читаемее (контраст ~3:1 был мало) */
.dark .fi-input::placeholder, .dark .fi-select-input-placeholder, .dark .zr-placeholder { color: #8b93a7; opacity: 1; }
/* Строка поиска без кнопок слева — ниже (не «пустой ряд» 52px) */
.fi-ta-ctn .fi-ta-header-toolbar { padding-block: calc(var(--spacing) * 1.5); }
/* Последняя ячейка таблицы не упирается в рамку */
.fi-ta-table td:last-child > *, .fi-ta-table th:last-child { padding-inline-end: calc(var(--spacing) * 4); }
/* Показатель-ссылка: подпись «открыть список» — цветом ссылки */
/* Дашборд на телефоне: показатели по два в ряд, график не сплющивается */
@media (max-width: 640px) {
    .fi-wi-stats-overview-stats-ctn { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .fi-wi-chart canvas { min-height: 220px; }
}
/* Карточка: кнопка раскрытия (глаз) — сразу после значения, а не у правого края колонки
   (Filament растягивает значение на всю ширину: .fi-in-text-affixed-content { flex: 1 }) */
.fi-in-text-affixed { align-items: center; gap: calc(var(--spacing) * 2); }
.fi-in-text-affixed-content { flex: 0 1 auto; }
/* Превью SMS: пояснения не мельче основного мелкого текста */
.zp-sms-meta { font-size: .8125rem; }
/* Бейдж в узкой колонке переносится, а не вылезает */
.fi-ta-cell .fi-badge { white-space: normal; text-align: start; }
/* Окно подтверждения центрирует текст — список пунктов (Notes) ставим блоком по центру, а пункты внутри — по левому краю */
.fi-modal .zp-notes { width: fit-content; max-width: 100%; margin-inline: auto; text-align: start; }