/*
 * Тема «KasipHub v2» для Filament — из SEO-админки (seo.kasiphub.com, public/themes/v2/theme.css),
 * без разделов про посты, дашборд, канбан и календарь SEO.
 * Все правила — под body.ft2. CSS Filament лежит в каскадных слоях (@layer),
 * поэтому правила без слоя здесь выигрывают у него без гонки специфичности.
 * Цвета — только через токены --ft-*; hex допустим лишь в разделах 1–3.
 *
 *  1. Токены (светлая версия)       11. Поля, карточки, формы
 *  2. Тёмная версия                 12. Таблицы
 *  3. Мост к палитрам Filament      13. Бейджи
 *  4. База                          14. Выпадающие меню, тултипы
 *  5. Шапка                         15. Модальные окна
 *  6. Меню разделов                 16. Уведомления
 *  7. Профиль и переключатель темы  17. Пагинация, вкладки
 *  8. Мобильное меню (drawer)       20. Адаптив
 *  9. Крошки и заголовок страницы
 * 10. Кнопки
 */

/* ===== 1. Токены (светлая версия) ===== */
body.ft2 {
    /* бренд — не меняется между версиями */
    --ft-black: #0F0F0F;
    --ft-lime: #C7FF2E;

    /* светлая версия */
    --ft-base: #0F0F0F;          /* заголовки, плотные плашки */
    --ft-primary: #0F0F0F;       /* акцентный текст и ссылки */
    --ft-primary-hover: #333333;
    --ft-primary-soft: #ECFFC9;  /* мягкая подложка акцента */
    --ft-on-primary: #FFFFFF;
    --ft-on-base: #FFFFFF;
    --ft-on-success: #FFFFFF;
    --ft-accent: #C7FF2E;        /* заливка активного элемента */
    --ft-on-accent: #0F0F0F;
    --ft-fill: #0F0F0F;          /* главная сплошная заливка (кнопка, чекбокс) */
    --ft-on-fill: #FFFFFF;
    --ft-cta: #C7FF2E;           /* CTA «Создать» */
    --ft-cta-hover: #B4EB1C;
    --ft-on-cta: #0F0F0F;
    --ft-bg: #F4F5F3;
    --ft-card: #FFFFFF;
    --ft-card-2: #FAFAF8;        /* зебра, вторичные поверхности */
    --ft-text: #0F0F0F;
    --ft-text-soft: #3A3B36;
    --ft-muted: #63655F;
    --ft-faint: #92948E;
    --ft-border: #E4E5E2;
    --ft-border-strong: #DBDCD8;
    --ft-hover: #F4F5F3;
    --ft-scroll: #D3D4CF;
    --ft-scroll-hover: #B6B7B1;
    --ft-ring: rgba(46, 74, 7, .16);   /* кольцо фокуса */
    --ft-tip-bg: #0F0F0F;
    --ft-tip-text: #FFFFFF;
    --ft-shadow-head: 0 4px 18px -6px rgba(15, 15, 15, .12);
    --ft-overlay: rgba(15, 15, 15, .62); /* подложка модалок */
    --top-bg: rgba(255, 255, 255, .86);

    /* статусы */
    --ft-success: #4C8C0C;  --ft-success-soft: #ECFFC9; --ft-success-ink: #0F0F0F; --ft-success-line: #D3F09B;
    --ft-danger:  #F04438;  --ft-danger-soft:  #FEF3F2; --ft-danger-ink:  #B42318; --ft-danger-line:  #FAC5C1;
    --ft-on-danger: #FFFFFF;  /* текст на красной заливке — белый в обеих версиях */
    --ft-warning: #F79009;  --ft-warning-soft: #FFFAEB; --ft-warning-ink: #B54708; --ft-warning-line: #FBE3AE;
    --ft-info-soft: #F4F5F3; --ft-info-ink: #3A3B36; --ft-info-line: #E4E5E2;  /* info нейтральный */

    /* календарь (макет mockups/calendar-slots-*.html): каналы и статусы карточек — цвет + иконка + подпись */
    --ft-ch-site: #0F766E;       --ft-ch-site-soft: #E0F4F1;
    --ft-ch-instagram: #C13584;  --ft-ch-instagram-soft: #FCE8F3;
    --ft-ch-telegram: #229ED9;   --ft-ch-telegram-soft: #E3F4FC;
    --ft-ch-facebook: #1877F2;   --ft-ch-facebook-soft: #E7F0FE;
    --ft-ch-threads: #3A3B36;    --ft-ch-threads-soft: #ECECEA;
    --ft-cal-ok: #1A7F37;    --ft-cal-ok-soft: #E3F5E8;
    --ft-cal-warn: #9A6700;  --ft-cal-warn-soft: #FFF4D6;
    --ft-cal-info: #1F6FEB;  --ft-cal-info-soft: #E6F0FF;

    /* плашка (шапка дашборда): в светлой — чёрная, в тёмной — лаймовая */
    --ft-slab: #0F0F0F;
    --ft-on-slab: #FFFFFF;
    --ft-on-slab-2: #A5A59E;
    --ft-on-slab-soft: rgba(255, 255, 255, .08);
    --ft-on-slab-line: rgba(255, 255, 255, .14);
    --ft-slab-bar: #C7FF2E;

    /* форма */
    --ft-r-lg: 20px;
    --ft-r-md: 12px;
    --ft-r-sm: 9px;
    --ft-r-pill: 999px;
    --ft-shadow-card: 0 1px 2px rgba(15, 15, 15, .04), 0 8px 26px -16px rgba(15, 15, 15, .14);
    --ft-shadow-pop: 0 18px 44px -22px rgba(15, 15, 15, .26), 0 2px 6px rgba(15, 15, 15, .06);
    --ft-utility-h: 58px;   /* высота шапки */
    --ft-nav-h: 46px;       /* ярус 2 шапки из брифа — не используется: шапка одноярусная */
    --ft-font: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    background: var(--ft-bg);
    color: var(--ft-text);
    font: 14px/1.45 var(--ft-font);
    -webkit-font-smoothing: antialiased;
    color-scheme: light;
}

/* Фон <html> — иначе при overscroll видна белая полоса. Токены живут на body, html их не видит */
html:has(body.ft2) { background: #F4F5F3; }
html[data-mode="dark"]:has(body.ft2) { background: #0F0F0F; }
@media (prefers-color-scheme: dark) {
    html:not([data-mode="light"]):has(body.ft2) { background: #0F0F0F; }
}

/* ===== 2. Тёмная версия ===== */
/* Набор объявлен дважды: для системной темы и для явного выбора. Меняются только значения */
@media (prefers-color-scheme: dark) {
    html:not([data-mode="light"]) body.ft2 {
        --ft-base: #FFFFFF;
        --ft-primary: #C7FF2E;  --ft-primary-hover: #DDFF9B;  --ft-primary-soft: #202B0C;
        --ft-on-primary: #0F0F0F;  --ft-on-base: #0F0F0F;  --ft-on-success: #0F0F0F;
        --ft-fill: #C7FF2E;  --ft-on-fill: #0F0F0F;
        --ft-cta: #C7FF2E;   --ft-cta-hover: #DDFF9B;  --ft-on-cta: #0F0F0F;
        --ft-bg: #0F0F0F;  --ft-card: #171717;  --ft-card-2: #1E1E1E;
        --ft-text: #FFFFFF;  --ft-text-soft: #D4D4CE;  --ft-muted: #A5A59E;  --ft-faint: #77776F;
        --ft-border: #262626;  --ft-border-strong: #343430;  --ft-hover: #1E1E1E;
        --ft-scroll: #343430;  --ft-scroll-hover: #4A4A44;
        --ft-ring: rgba(199, 255, 46, .22);
        --ft-tip-bg: #2E2E2A;
        --ft-shadow-head: 0 6px 20px -6px rgba(0, 0, 0, .62);
        --top-bg: rgba(23, 23, 23, .86);

        --ft-success: #9BD00F;  --ft-success-soft: #202B0C;  --ft-success-ink: #C7FF2E;  --ft-success-line: #33450F;
        --ft-danger-soft: #2A1512;  --ft-danger-ink: #FDA29B;  --ft-danger-line: #542019;
        --ft-warning-soft: #2A1F08; --ft-warning-ink: #FDB022; --ft-warning-line: #533512;
        --ft-info-soft: #1E1E1E;  --ft-info-ink: #D4D4CE;  --ft-info-line: #2E2E2A;
        --ft-ch-site: #2DD4BF;       --ft-ch-site-soft: #0F2A26;
        --ft-ch-instagram: #F472B6;  --ft-ch-instagram-soft: #2E1424;
        --ft-ch-telegram: #4CC2F1;   --ft-ch-telegram-soft: #0D2533;
        --ft-ch-facebook: #6AA6FF;   --ft-ch-facebook-soft: #132139;
        --ft-ch-threads: #D4D4CE;    --ft-ch-threads-soft: #262626;
        --ft-cal-ok: #4AC26B;    --ft-cal-ok-soft: #12261A;
        --ft-cal-warn: #E3B341;  --ft-cal-warn-soft: #2B2111;
        --ft-cal-info: #58A6FF;  --ft-cal-info-soft: #0F2338;

        --ft-slab: #C7FF2E;  --ft-on-slab: #0F0F0F;  --ft-on-slab-2: rgba(15, 15, 15, .68);
        --ft-on-slab-soft: rgba(15, 15, 15, .1);  --ft-on-slab-line: rgba(15, 15, 15, .18);
        --ft-slab-bar: #0F0F0F;

        --ft-shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -20px rgba(0, 0, 0, .7);
        --ft-shadow-pop: 0 24px 60px -28px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

html[data-mode="dark"] body.ft2 {
    --ft-base: #FFFFFF;
    --ft-primary: #C7FF2E;  --ft-primary-hover: #DDFF9B;  --ft-primary-soft: #202B0C;
    --ft-on-primary: #0F0F0F;  --ft-on-base: #0F0F0F;  --ft-on-success: #0F0F0F;
    --ft-fill: #C7FF2E;  --ft-on-fill: #0F0F0F;
    --ft-cta: #C7FF2E;   --ft-cta-hover: #DDFF9B;  --ft-on-cta: #0F0F0F;
    --ft-bg: #0F0F0F;  --ft-card: #171717;  --ft-card-2: #1E1E1E;
    --ft-text: #FFFFFF;  --ft-text-soft: #D4D4CE;  --ft-muted: #A5A59E;  --ft-faint: #77776F;
    --ft-border: #262626;  --ft-border-strong: #343430;  --ft-hover: #1E1E1E;
    --ft-scroll: #343430;  --ft-scroll-hover: #4A4A44;
    --ft-ring: rgba(199, 255, 46, .22);
    --ft-tip-bg: #2E2E2A;
    --ft-shadow-head: 0 6px 20px -6px rgba(0, 0, 0, .62);
    --top-bg: rgba(23, 23, 23, .86);

    --ft-success: #9BD00F;  --ft-success-soft: #202B0C;  --ft-success-ink: #C7FF2E;  --ft-success-line: #33450F;
    --ft-danger-soft: #2A1512;  --ft-danger-ink: #FDA29B;  --ft-danger-line: #542019;
    --ft-warning-soft: #2A1F08; --ft-warning-ink: #FDB022; --ft-warning-line: #533512;
    --ft-info-soft: #1E1E1E;  --ft-info-ink: #D4D4CE;  --ft-info-line: #2E2E2A;
    --ft-ch-site: #2DD4BF;       --ft-ch-site-soft: #0F2A26;
    --ft-ch-instagram: #F472B6;  --ft-ch-instagram-soft: #2E1424;
    --ft-ch-telegram: #4CC2F1;   --ft-ch-telegram-soft: #0D2533;
    --ft-ch-facebook: #6AA6FF;   --ft-ch-facebook-soft: #132139;
    --ft-ch-threads: #D4D4CE;    --ft-ch-threads-soft: #262626;
    --ft-cal-ok: #4AC26B;    --ft-cal-ok-soft: #12261A;
    --ft-cal-warn: #E3B341;  --ft-cal-warn-soft: #2B2111;
    --ft-cal-info: #58A6FF;  --ft-cal-info-soft: #0F2338;

    --ft-slab: #C7FF2E;  --ft-on-slab: #0F0F0F;  --ft-on-slab-2: rgba(15, 15, 15, .68);
    --ft-on-slab-soft: rgba(15, 15, 15, .1);  --ft-on-slab-line: rgba(15, 15, 15, .18);
    --ft-slab-bar: #0F0F0F;

    --ft-shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -20px rgba(0, 0, 0, .7);
    --ft-shadow-pop: 0 24px 60px -28px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* ===== 3. Мост к палитрам Filament ===== */
/* Серая шкала Filament абсолютная (50 — светлый … 950 — тёмный) и общая для обеих версий:
   переводим её на нейтральные цвета бренда, остальные компоненты Filament подтянутся сами */
body.ft2 {
    --gray-50: #F4F5F3;
    --gray-100: #ECEDEA;
    --gray-200: #E4E5E2;
    --gray-300: #DBDCD8;
    --gray-400: #92948E;
    --gray-500: #63655F;
    --gray-600: #3A3B36;
    --gray-700: #343430;
    --gray-800: #262626;
    --gray-900: #171717;
    --gray-950: #0F0F0F;

    /* primary: в светлой версии акцент чёрный, лайм — только мягкая подложка */
    --primary-50: var(--ft-primary-soft);
    --primary-100: var(--ft-primary-soft);
    --primary-200: var(--ft-success-line);
    --primary-300: var(--ft-cta-hover);
    --primary-400: var(--ft-primary);
    --primary-500: var(--ft-primary);
    --primary-600: var(--ft-primary);
    --primary-700: var(--ft-primary);
    --primary-800: var(--ft-primary);
    --primary-900: var(--ft-primary);
    --primary-950: var(--ft-primary);
}

/* в тёмной версии акцент лаймовый: Filament берёт для текста 400, для заливок 500–600 */
@media (prefers-color-scheme: dark) {
    html:not([data-mode="light"]) body.ft2 {
        --primary-50: var(--ft-primary-hover);
        --primary-100: var(--ft-primary-hover);
        --primary-200: var(--ft-primary-hover);
        --primary-300: var(--ft-primary-hover);
        --primary-700: var(--ft-success);
        --primary-800: var(--ft-success-line);
        --primary-900: var(--ft-primary-soft);
        --primary-950: var(--ft-primary-soft);
    }
}

html[data-mode="dark"] body.ft2 {
    --primary-50: var(--ft-primary-hover);
    --primary-100: var(--ft-primary-hover);
    --primary-200: var(--ft-primary-hover);
    --primary-300: var(--ft-primary-hover);
    --primary-700: var(--ft-success);
    --primary-800: var(--ft-success-line);
    --primary-900: var(--ft-primary-soft);
    --primary-950: var(--ft-primary-soft);
}

/* ===== 4. База ===== */
body.ft2 ::selection { background: var(--ft-accent); color: var(--ft-on-accent); }

body.ft2 * { scrollbar-color: var(--ft-scroll) transparent; }
body.ft2 ::-webkit-scrollbar { width: 10px; height: 10px; }
body.ft2 ::-webkit-scrollbar-thumb {
    background: var(--ft-scroll);
    border: 2px solid transparent;
    border-radius: var(--ft-r-pill);
    background-clip: padding-box;
}
body.ft2 ::-webkit-scrollbar-thumb:hover { background-color: var(--ft-scroll-hover); }

body.ft2 a { color: inherit; }
body.ft2 svg[stroke="currentColor"] { stroke-width: 1.8; }

body.ft2 .fi-main-ctn { background: var(--ft-bg); }
body.ft2 .fi-main { padding: 12px 24px 40px; }

/* Числа в таблицах, бейджах и счётчиках — моноширинные цифры */
body.ft2 .fi-ta-table,
body.ft2 .fi-badge,
body.ft2 .fi-wi-stats-overview-stat-value { font-variant-numeric: tabular-nums; }

/* ===== 5. Шапка ===== */
body.ft2 .fi-topbar-ctn {
    position: sticky;
    top: 0;
    z-index: 30;
    transition: box-shadow .2s;
}
body.ft2 .fi-topbar-ctn.is-stuck { box-shadow: var(--ft-shadow-head); }

body.ft2 .fi-topbar {
    height: var(--ft-utility-h);
    min-height: var(--ft-utility-h);
    padding: 0 24px;
    gap: 16px;
    background: var(--top-bg);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--ft-border);
    box-shadow: none;
}

/* Логотип: знак 32px + название. У .fi-logo инлайн-высота 1.5rem — перекрываем */
body.ft2 .fi-logo { height: auto !important; display: flex; }
body.ft2 .ft-logo { display: inline-flex; align-items: center; gap: 10px; }
body.ft2 .ft-logo__mark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--ft-lime);
    color: var(--ft-black);
    font: 800 14px/1 var(--ft-font);
    letter-spacing: -.5px;
}
body.ft2 .ft-logo__text {
    color: var(--ft-text);
    font: 800 16px/1 var(--ft-font);
    letter-spacing: -.3px;
    white-space: nowrap;
}

body.ft2 .fi-topbar-end { gap: 10px; min-width: 0; }

/* Поиск: свёрнут в иконку 36px; по клику раскрывается в поле с нижней линией.
   Поле лежит поверх всей кнопки, иконка — только рисунок, поэтому клик по ней ставит фокус */
body.ft2 .fi-global-search-ctn { flex-shrink: 0; }
body.ft2 .fi-global-search-field .fi-input-wrp {
    position: relative;
    width: 36px;
    min-height: 36px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    transition: width .2s, border-color .2s;
}
body.ft2 .fi-global-search-field .fi-input-wrp:hover .fi-input-wrp-prefix { color: var(--ft-text); }
body.ft2 .fi-global-search-field .fi-input-wrp-prefix {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8px;
    padding: 0;
    pointer-events: none;
    color: var(--ft-muted);
}
body.ft2 .fi-global-search-field .fi-input-wrp-content-ctn { width: 100%; }
body.ft2 .fi-global-search-field .fi-input {
    width: 100%;
    padding-left: 34px;
    cursor: pointer;
}
body.ft2 .fi-global-search-field .fi-input::placeholder { color: transparent; }
/* раскрыт: фокус или введён текст */
body.ft2 .fi-global-search-field .fi-input-wrp:focus-within,
body.ft2 .fi-global-search-field .fi-input-wrp:has(.fi-input:not(:placeholder-shown)) {
    width: 220px;
    border-bottom-color: var(--ft-primary);
    box-shadow: none;
}
body.ft2 .fi-global-search-field .fi-input-wrp:focus-within .fi-input { cursor: text; }
body.ft2 .fi-global-search-field .fi-input-wrp:focus-within .fi-input::placeholder { color: var(--ft-faint); }
body.ft2 .fi-global-search-results-ctn {
    background: var(--ft-card);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-r-md);
    box-shadow: var(--ft-shadow-pop);
}

body.ft2 .ft-help .fi-icon-btn { color: var(--ft-faint); }  /* «?» справочника за поиском — светлее прочих кнопок, как лупа */

/* Плашка лимитов Claude: тихая, без лайма; цвет — только от 80 % (подробности — в title) */
/* Обёртка Livewire плашки: сжимается вместе с ней, иначе плашка выходит за край окна. Где цифр уже не видно (уже 110px),
   остаётся значок; уже 32px обёртка не сжимается, чтобы значок не пропал. Ширина задана явно (220px — предел плашки), а не по содержимому:
   иначе @container не работает, а шапка не оставила бы под плашку места */
body.ft2 .ft-limits-ctn { width: 220px; min-width: 32px; container-type: inline-size; }
body.ft2 .ft-limits-ctn .fi-modal-trigger { justify-content: flex-end; }  /* плашка — у поиска, свободное место — слева */
/* тесная шапка: вместо текста — круглая кнопка-значок, как на телефоне (решение владельца 29.10.2026) */
@container (max-width: 111px) {
    body.ft2 .ft-limits-ctn .ft-limits { width: 32px; height: 32px; padding: 0; justify-content: center; }
    body.ft2 .ft-limits-ctn .ft-limits__text { display: none; }
    body.ft2 .ft-limits-ctn .ft-limits__icon { display: block; }
}
body.ft2 .ft-limits {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-r-pill);
    color: var(--ft-muted);
    font: 600 12px/1 var(--ft-font);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: none;  /* плашка — кнопка окна «Аккаунты ИИ»: без фона кнопки браузера */
    cursor: pointer;
    max-width: 220px;  /* много аккаунтов Claude — текст обрезается многоточием, а не выталкивает поиск и меню */
}
body.ft2 .ft-limits__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.ft2 .ft-limits__icon { display: none; width: 18px; height: 18px; }
body.ft2 .ft-limits.is-warning { background: var(--ft-warning-soft); border-color: var(--ft-warning-line); color: var(--ft-warning-ink); }
body.ft2 .ft-limits.is-danger { background: var(--ft-danger-soft); border-color: var(--ft-danger-line); color: var(--ft-danger-ink); }

/* Окно «Аккаунты ИИ» по клику на плашку: таблица токенов и выбор аккаунта Claude */
body.ft2 .ft-ai { display: grid; gap: 14px; font-size: 14px; }
body.ft2 .ft-ai__muted { color: var(--ft-muted); font-size: 12px; }
body.ft2 .ft-ai__scroll { overflow-x: auto; }
body.ft2 .ft-ai__table { width: 100%; border-collapse: collapse; }
body.ft2 .ft-ai__table th,
body.ft2 .ft-ai__table td { padding: 8px 10px; border-bottom: 1px solid var(--ft-border); text-align: left; vertical-align: top; }
body.ft2 .ft-ai__table th { color: var(--ft-muted); font-size: 12px; font-weight: 600; }
body.ft2 .ft-ai__mode { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
body.ft2 .ft-ai__mode legend { margin-bottom: 6px; font-weight: 600; }
body.ft2 .ft-ai__mode label { display: flex; gap: 8px; align-items: flex-start; }
body.ft2 .ft-ai__email { font-weight: 600; }  /* чей токен — заметнее имени переменной */
body.ft2 .ft-ai__mode label.ft-ai__email-field { display: grid; grid-template-columns: 260px 1fr; align-items: center; }
/* исполнитель · модель · глубина в одну строку (решение владельца 28.10.2026): подпись шага уже, переносится */
body.ft2 .ft-ai__mode .ft-ai__step-field { display: grid; grid-template-columns: 200px 1fr; gap: 0 12px; align-items: center; }
body.ft2 .ft-ai__step-choice { display: grid; grid-template-columns: 96px minmax(0, 1fr) 200px; gap: 8px; }
@media (max-width: 639px) {
    body.ft2 .ft-ai__mode .ft-ai__step-field,
    body.ft2 .ft-ai__step-choice { grid-template-columns: 1fr; gap: 6px; }
}

/* ===== 6. Меню разделов ===== */
/* display не трогаем: ниже 1024px Filament прячет меню и открывает drawer по бургеру */
body.ft2 .fi-topbar-nav-groups {
    align-self: stretch;
    flex-wrap: nowrap;     /* Filament переносит пункты во второй ряд — у нас шапка в одну строку */
    flex-shrink: 0;
    align-items: stretch;
    gap: 2px;
    margin: 0 0 0 12px;
}
body.ft2 .fi-topbar-nav-groups > .fi-dropdown,
body.ft2 .fi-topbar-nav-groups .fi-dropdown-trigger { display: flex; align-items: stretch; }

/* Пункт — вкладка на всю высоту шапки; активный — лаймовая черта 3px снизу */
body.ft2 .fi-topbar-item { display: flex; align-items: stretch; }
body.ft2 .fi-topbar-item-btn {
    position: relative;
    height: 100%;
    padding: 0 12px;
    gap: 6px;
    border-radius: 0;
    background: transparent;
    color: var(--ft-text-soft);
    font: 600 13.5px/1 var(--ft-font);
}
body.ft2 .fi-topbar-item-btn:hover { background: transparent; color: var(--ft-text); }
body.ft2 .fi-topbar-item-label { color: inherit; font: inherit; white-space: nowrap; }
body.ft2 .fi-topbar-item-btn .fi-icon { color: var(--ft-faint); }
body.ft2 .fi-topbar-item.fi-active .fi-topbar-item-btn { background: transparent; color: var(--ft-text); }
body.ft2 .fi-topbar-item.fi-active .fi-topbar-item-label { color: var(--ft-text); }
body.ft2 .fi-topbar-item.fi-active .fi-topbar-item-btn .fi-icon { color: var(--ft-text); }
body.ft2 .fi-topbar-item.fi-active .fi-topbar-item-btn::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ft-accent);
}

/* Большая группа (от 7 пунктов) — мега-панель в две колонки.
   Предел ширины Filament ставит с !important — его задаёт группа (AdminPanelProvider, width lg) */
body.ft2 .fi-dropdown-panel:has(> .fi-dropdown-list > :nth-child(7)) { width: 32rem; }
body.ft2 .fi-dropdown-list:has(> :nth-child(7)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4px;
}

/* ===== 7. Профиль и переключатель темы ===== */
body.ft2 .fi-topbar-end .fi-user-menu { flex-shrink: 0; }  /* в тесной шапке место уступает плашка лимитов, а не аватар */
body.ft2 .fi-user-menu-trigger { border-radius: var(--ft-r-pill); }
body.ft2 .fi-user-avatar {
    width: 34px;
    height: 34px;
    box-shadow: 0 0 0 2px var(--ft-card), 0 0 0 3px var(--ft-border-strong);
}

/* Почта под именем в меню профиля */
body.ft2 .fi-dropdown-header:has(+ .ft-profile-email) { border-bottom: 0; padding-bottom: 2px; }
body.ft2 .ft-profile-email {
    padding: 0 12px 10px 38px;
    color: var(--ft-muted);
    font-size: 12.5px;
    border-bottom: 1px solid var(--ft-border);
    overflow-wrap: anywhere;
}

body.ft2 .ft-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ft-border);
}
body.ft2 .ft-mode__label { color: var(--ft-muted); font: 600 12px/1 var(--ft-font); }

/* Сегмент: две кнопки в капсуле, выбранная — сплошная заливка */
body.ft2 .ft-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--ft-r-pill);
    background: var(--ft-hover);
    border: 1px solid var(--ft-border);
}
body.ft2 .ft-seg__btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 26px;
    border-radius: var(--ft-r-pill);
    color: var(--ft-muted);
    cursor: pointer;
}
body.ft2 .ft-seg__btn:hover { color: var(--ft-text); }
body.ft2 .ft-seg__btn[aria-pressed="true"] { background: var(--ft-fill); color: var(--ft-on-fill); }
body.ft2 .ft-seg__btn svg { width: 16px; height: 16px; }

/* ===== 8. Мобильное меню (drawer) ===== */
/* На узком экране Filament прячет меню разделов и открывает боковую панель по бургеру */
body.ft2 .fi-sidebar {
    background: var(--ft-card);
    border-right: 1px solid var(--ft-border);
}
body.ft2 .fi-sidebar-header { height: var(--ft-utility-h); border-bottom: 1px solid var(--ft-border); box-shadow: none; }
body.ft2 .fi-sidebar-close-overlay { background: var(--ft-overlay); }
body.ft2 .fi-sidebar-group-label {
    color: var(--ft-faint);
    font: 700 11px/1 var(--ft-font);
    letter-spacing: .06em;
    text-transform: uppercase;
}
body.ft2 .fi-sidebar-item-btn {
    min-height: 40px;
    border-radius: var(--ft-r-sm);
    color: var(--ft-text-soft);
    font-weight: 500;
}
body.ft2 .fi-sidebar-item-btn:hover { background: var(--ft-hover); }
body.ft2 .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    position: relative;
    background: var(--ft-primary-soft);
}
body.ft2 .fi-sidebar-item.fi-active .fi-sidebar-item-label,
body.ft2 .fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-icon { color: var(--ft-text); }
body.ft2 .fi-sidebar-item.fi-active .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ft-accent);
}

/* ===== 9. Крошки и заголовок страницы ===== */
body.ft2 .ft-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    color: var(--ft-muted);
    font: 500 12.5px/1.4 var(--ft-font);
}
body.ft2 .ft-crumbs a { color: var(--ft-muted); text-decoration: none; }
body.ft2 .ft-crumbs a:hover { color: var(--ft-primary); }
body.ft2 .ft-crumbs__sep { color: var(--ft-faint); }

body.ft2 .fi-page-header-main-ctn { gap: 20px; padding-top: 8px; }
body.ft2 .fi-header { align-items: center; gap: 12px 20px; }
body.ft2 .fi-header-heading {
    color: var(--ft-base);
    font: 800 24px/1.2 var(--ft-font);
    letter-spacing: -.4px;
}
body.ft2 .fi-header-subheading { color: var(--ft-muted); font-size: 13.5px; }
/* Подсказка «что это» внизу страницы — ссылка в справочник (view filament.theme.page-hint) */
body.ft2 .ft-page-hint { margin: 4px 0 0; color: var(--ft-muted); font-size: 13.5px; }
body.ft2 .ft-page-hint a { color: var(--ft-primary); text-decoration: none; }
body.ft2 .ft-page-hint a:hover { text-decoration: underline; }

/* Действия шапки: CTA (primary) — сразу за заголовком слева, остальные прижаты вправо */
body.ft2 .fi-header-actions-ctn { flex: 1; }
body.ft2 .fi-header-actions-ctn > .fi-ac { width: 100%; justify-content: flex-end; gap: 8px; }
/* CTA одна на страницу: последняя primary-кнопка шапки (Filament ставит «Создать» последней) */
body.ft2 .fi-header-actions-ctn .fi-btn.fi-color-primary:not(:has(~ .fi-btn.fi-color-primary)) { order: -1; margin-right: auto; }

/* ===== 10. Кнопки ===== */
/* Secondary / default: карточка с рамкой; hover — рамка и текст акцента, мягкая подложка */
body.ft2 .fi-btn {
    min-height: 38px;
    padding: 0 16px;
    gap: 6px;
    border-radius: var(--ft-r-pill);
    font: 600 13.5px/1 var(--ft-font);
    background: var(--ft-card);
    color: var(--ft-text);
    border: 1px solid var(--ft-border-strong);
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
body.ft2 .fi-btn:not(.fi-disabled):not([disabled]):hover {
    background: var(--ft-primary-soft);
    border-color: var(--ft-primary);
    color: var(--ft-primary);
}
body.ft2 .fi-btn .fi-icon { color: currentColor; }
body.ft2 .fi-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ft-ring); }

/* Primary — сплошная заливка; в тёмной версии она лаймовая, текст — парный токен */
body.ft2 .fi-btn.fi-color-primary:not(.fi-outlined) {
    background: var(--ft-fill);
    border-color: var(--ft-fill);
    color: var(--ft-on-fill);
}
body.ft2 .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
    background: var(--ft-primary-hover);
    border-color: var(--ft-primary-hover);
    color: var(--ft-on-fill);
}

/* Danger — только настоящее удаление */
body.ft2 .fi-btn.fi-color-danger:not(.fi-outlined) {
    background: var(--ft-danger);
    border-color: var(--ft-danger);
    color: var(--ft-on-danger);
}
body.ft2 .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
    background: var(--ft-danger-ink);
    border-color: var(--ft-danger-ink);
    color: var(--ft-on-danger);
}

/* Success / warning / info — мягкие, по статусным токенам */
body.ft2 .fi-btn.fi-color-success:not(.fi-outlined) {
    background: var(--ft-success-soft); border-color: var(--ft-success-line); color: var(--ft-success-ink);
}
body.ft2 .fi-btn.fi-color-warning:not(.fi-outlined) {
    background: var(--ft-warning-soft); border-color: var(--ft-warning-line); color: var(--ft-warning-ink);
}
body.ft2 .fi-btn.fi-color-info:not(.fi-outlined) {
    background: var(--ft-info-soft); border-color: var(--ft-info-line); color: var(--ft-info-ink);
}

/* CTA страницы (primary в шапке): лайм, пилюля 36px, 700 13px UPPERCASE, подъём на hover */
body.ft2 .fi-header-actions-ctn .fi-btn.fi-color-primary:not(.fi-outlined):not(:has(~ .fi-btn.fi-color-primary)) {
    min-height: 36px;
    background: var(--ft-cta);
    border-color: var(--ft-cta);
    color: var(--ft-on-cta);
    font: 700 13px/1 var(--ft-font);
    letter-spacing: .02em;
    text-transform: uppercase;
}
body.ft2 .fi-header-actions-ctn .fi-btn.fi-color-primary:not(.fi-outlined):not(:has(~ .fi-btn.fi-color-primary)):not(.fi-disabled):not([disabled]):hover {
    background: var(--ft-cta-hover);
    border-color: var(--ft-cta-hover);
    color: var(--ft-on-cta);
    transform: translateY(-1px);
}

/* Кнопки тулбара в шапке страницы: 36px, r-md, без uppercase */
body.ft2 .fi-header-actions-ctn .fi-btn:not(.fi-color-primary),
body.ft2 .fi-header-actions-ctn .fi-btn.fi-color-primary:has(~ .fi-btn.fi-color-primary) {
    min-height: 36px;
    border-radius: var(--ft-r-md);
    font: 600 12px/1 var(--ft-font);
}

/* Размеры */
body.ft2 .fi-btn.fi-size-xs { min-height: 28px; padding: 0 10px; font-size: 12px; }
body.ft2 .fi-btn.fi-size-sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
body.ft2 .fi-btn.fi-size-lg,
body.ft2 .fi-btn.fi-size-xl { min-height: 44px; padding: 0 20px; }

/* Иконочные кнопки и ссылки-действия */
body.ft2 .fi-icon-btn { border-radius: var(--ft-r-sm); color: var(--ft-muted); }
body.ft2 .fi-icon-btn:hover { background: var(--ft-hover); color: var(--ft-text); }
body.ft2 .fi-link { font-weight: 600; }
body.ft2 .fi-link.fi-color-primary { color: var(--ft-primary); }

/* ===== 11. Поля, карточки, формы ===== */
body.ft2 .fi-fo-field-label-content,
body.ft2 .fi-fieldset > legend { color: var(--ft-text); font: 600 13px/1.3 var(--ft-font); }
body.ft2 .fi-fo-field-label-required-mark { color: var(--ft-danger); }
body.ft2 .fi-sc-text { color: var(--ft-muted); font-size: 12.5px; }
body.ft2 .fi-fo-field-wrp-error-message { color: var(--ft-danger-ink); font-size: 12.5px; }

/* Поле: 40px, рамка, r-md; фокус — рамка акцента + кольцо */
body.ft2 .fi-input-wrp {
    min-height: 40px;
    background: var(--ft-card);
    border: 1px solid var(--ft-border-strong);
    border-radius: var(--ft-r-md);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
body.ft2 .fi-input-wrp:focus-within {
    border-color: var(--ft-primary);
    box-shadow: 0 0 0 3px var(--ft-ring);
}
body.ft2 .fi-input-wrp.fi-invalid { border-color: var(--ft-danger); }
body.ft2 .fi-input-wrp.fi-invalid:focus-within { box-shadow: 0 0 0 3px var(--ft-danger-line); }
body.ft2 .fi-input-wrp.fi-disabled { background: var(--ft-hover); }
body.ft2 .fi-input-wrp.fi-disabled .fi-input,
body.ft2 .fi-input-wrp.fi-disabled .fi-select-input { color: var(--ft-muted); }
body.ft2 .fi-input,
body.ft2 .fi-select-input,
body.ft2 .fi-fo-textarea textarea { color: var(--ft-text); font-size: 14px; background: transparent; }
body.ft2 .fi-input::placeholder,
body.ft2 .fi-fo-textarea textarea::placeholder { color: var(--ft-faint); }
body.ft2 .fi-input-wrp-prefix,
body.ft2 .fi-input-wrp-suffix { color: var(--ft-faint); }
body.ft2 .fi-input-wrp-label { color: var(--ft-muted); }
body.ft2 .fi-select-input option { background: var(--ft-card); color: var(--ft-text); }

/* Чекбоксы и радио — нативные с accent-color: браузер сам подберёт цвет галочки к лайму */
body.ft2 .fi-checkbox-input,
body.ft2 .fi-radio-input {
    appearance: auto;
    width: 16px;
    height: 16px;
    background: none;
    box-shadow: none;
    accent-color: var(--ft-fill);
}
body.ft2 .fi-checkbox-input:focus-visible,
body.ft2 .fi-radio-input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ft-ring); }

/* Переключатель да/нет: включён — сплошная заливка, ручка — парный цвет */
body.ft2 .fi-toggle { background: var(--ft-border-strong); }
body.ft2 .fi-toggle > :first-child { background: var(--ft-card); }
body.ft2 .fi-toggle.fi-toggle-on { background: var(--ft-fill); }
body.ft2 .fi-toggle.fi-toggle-on > :first-child { background: var(--ft-on-fill); }
body.ft2 .fi-toggle.fi-toggle-on .fi-icon { color: var(--ft-fill); }

/* Карточка: секции, виджеты, контейнеры таблиц */
body.ft2 .fi-section:not(.fi-section-not-contained),
body.ft2 .fi-wi-stats-overview-stat,
body.ft2 .fi-ta-ctn,
body.ft2 .fi-fo-repeater-item,
body.ft2 .fi-fo-builder-item {
    background: var(--ft-card);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-r-lg);
    box-shadow: var(--ft-shadow-card);
}
/* отступы — только у секций-карточек; «не в рамке» (плитки виджетов) оставляем как есть */
body.ft2 .fi-section:not(.fi-section-not-contained) > .fi-section-header { padding: 18px 20px; gap: 10px; }
body.ft2 .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-content { padding: 18px 20px; }
body.ft2 .fi-section-content-ctn { border-color: var(--ft-border); }
body.ft2 .fi-section-header-heading { color: var(--ft-base); font: 700 15px/1.3 var(--ft-font); }
body.ft2 .fi-section-header-description { color: var(--ft-muted); font-size: 13px; }
body.ft2 .fi-section-footer { border-color: var(--ft-border); padding: 14px 20px; }

/* Форма на странице — карточки-шаги: номер 26px, r 8px, мягкая подложка акцента */
body.ft2 .fi-page .fi-sc-form { counter-reset: ftr; }
body.ft2 .fi-page .fi-sc-form .fi-section-header-heading::before {
    counter-increment: ftr;
    content: counter(ftr);
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: 10px;
    border-radius: 8px;
    background: var(--ft-primary-soft);
    color: var(--ft-text);
    font: 700 13px/1 var(--ft-font);
    vertical-align: middle;
}
/* Одноколоночная форма страницы — не шире 760px (бриф, §9: ftr-layout--single) */
body.ft2 .fi-page .fi-sc-form { max-width: 760px; }

/* Простая форма без секций — сама карточка */
body.ft2 .fi-page .fi-sc-form:not(:has(.fi-section)) {
    padding: 18px 20px;
    background: var(--ft-card);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-r-lg);
    box-shadow: var(--ft-shadow-card);
}
/* Кнопки формы — отдельной полосой снизу */
body.ft2 .fi-page .fi-sc-form .fi-sc-actions { padding-top: 4px; }

/* Раскрывающиеся секции: шапка кликабельна */
body.ft2 .fi-section.fi-collapsible .fi-section-header { cursor: pointer; }

/* Вложенные блоки и разделители */
body.ft2 .fi-fieldset { border-color: var(--ft-border); border-radius: var(--ft-r-md); }
body.ft2 .fi-fo-repeater-item-header { border-color: var(--ft-border); }

/* Callout / алерт: фон *-soft, рамка *-line, текст *-ink; info — нейтральный */
body.ft2 .fi-callout {
    border-radius: var(--ft-r-md);
    box-shadow: none;
    background: var(--ft-info-soft);
    border: 1px solid var(--ft-info-line);
    color: var(--ft-info-ink);
}
body.ft2 .fi-callout.fi-color-success { background: var(--ft-success-soft); border-color: var(--ft-success-line); color: var(--ft-success-ink); }
body.ft2 .fi-callout.fi-color-danger { background: var(--ft-danger-soft); border-color: var(--ft-danger-line); color: var(--ft-danger-ink); }
body.ft2 .fi-callout.fi-color-warning { background: var(--ft-warning-soft); border-color: var(--ft-warning-line); color: var(--ft-warning-ink); }
body.ft2 .fi-callout .fi-callout-heading,
body.ft2 .fi-callout .fi-callout-description { color: inherit; }

/* ===== 12. Таблицы ===== */
body.ft2 .fi-ta-ctn { overflow: hidden; }
body.ft2 .fi-ta-header-ctn,
body.ft2 .fi-ta-header-toolbar { border-color: var(--ft-border); }
body.ft2 .fi-ta-header-toolbar { padding: 12px 16px; }
body.ft2 .fi-ta-header-heading { color: var(--ft-base); font: 700 15px/1.3 var(--ft-font); }

/* Горизонтальный скролл — внутри карточки, вертикальный — у страницы */
body.ft2 .fi-ta-content-ctn { overflow-x: auto; padding: 0 10px; border-color: var(--ft-border); }
body.ft2 .fi-ta-table > thead > tr > th:first-child { border-top-left-radius: var(--ft-r-md); }
body.ft2 .fi-ta-table > thead > tr > th:last-child { border-top-right-radius: var(--ft-r-md); }
body.ft2 .fi-ta-table { font-size: 13px; }
body.ft2 .fi-ta-table > :not(:last-child) { border-color: var(--ft-border); }
body.ft2 .fi-ta-table > tbody { border-color: var(--ft-border); }
body.ft2 .fi-ta-table tr { border-color: var(--ft-border); }

/* Шапка: фон hover, 600 12px, выравнивание по верху */
body.ft2 .fi-ta-table > thead > tr { background: transparent; }
body.ft2 .fi-ta-table > thead th {
    padding: 9px 8px;
    vertical-align: top;
    background: var(--ft-hover);
    color: var(--ft-text-soft);
    font: 600 12px/1.35 var(--ft-font);
    text-align: left;
}
body.ft2 .fi-ta-header-cell-sort-btn { color: var(--ft-text-soft); font: inherit; gap: 4px; }
body.ft2 .fi-ta-header-cell-sort-btn .fi-icon { color: var(--ft-faint); }
body.ft2 .fi-ta-header-cell-sorted .fi-ta-header-cell-sort-btn,
body.ft2 .fi-ta-header-cell-sorted .fi-ta-header-cell-sort-btn .fi-icon { color: var(--ft-text); }

/* Подпись колонки — одна строка с многоточием, ширину колонки не задаёт.
   Призрак-«пол» даёт колонке минимум под подпись, но не шире 140px (theme.js) */
body.ft2 th.ft-th { position: relative; }
body.ft2 .ft-th-floor {
    display: block;
    max-width: 140px;
    height: 1.35em;
    overflow: hidden;
    visibility: hidden;
}
body.ft2 .ft-th-label {
    position: absolute;
    top: 9px;
    left: 8px;
    right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Строки: зебра, разделитель, hover */
body.ft2 .fi-ta-row { background: var(--ft-card); transition: background-color .12s; }
body.ft2 .fi-ta-row:nth-child(even) { background: var(--ft-card-2); }
body.ft2 .fi-ta-row:hover,
body.ft2 .fi-ta-row.fi-clickable:hover { background: var(--ft-hover); }
body.ft2 .fi-ta-row.fi-selected { background: var(--ft-primary-soft); }
body.ft2 .fi-ta-cell { color: var(--ft-text); vertical-align: middle; }

/* Плотность: отступы содержимого ячеек 6px 8px */
body.ft2 .fi-ta-text,
body.ft2 .fi-ta-icon,
body.ft2 .fi-ta-image,
body.ft2 .fi-ta-color,
body.ft2 .fi-ta-select,
body.ft2 .fi-ta-toggle,
body.ft2 .fi-ta-text-input,
body.ft2 .fi-ta-cell > .fi-ta-actions { padding: 6px 8px; }
body.ft2 .fi-ta-text-item { color: var(--ft-text); font-size: 13px; }
body.ft2 .fi-ta-text-description { color: var(--ft-muted); font-size: 12px; }
/* Колонка с переносом (название) не сжимается в узкую полосу — иначе строка вырастает на пол-экрана */
body.ft2 .fi-ta-text.fi-wrapped { min-width: 22rem; }
/* Описание под названием — не больше двух строк */
body.ft2 .fi-ta-text.fi-wrapped .fi-ta-text-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.ft2 .fi-ta-selection-cell,
body.ft2 .fi-ta-cell:has(> .fi-ta-record-checkbox) { padding: 6px 8px; }

/* Колонка «Действия» закреплена справа, ширина — по содержимому (кебаб → 40px) */
body.ft2 .fi-ta-actions-header-cell,
body.ft2 .fi-ta-row > .fi-ta-cell:last-child:has(> .fi-ta-actions) {
    position: sticky;
    right: 0;
    z-index: 1;
    width: 1%;
    white-space: nowrap;
}
body.ft2 .fi-ta-row > .fi-ta-cell:last-child:has(> .fi-ta-actions) {
    padding: 0;            /* у Filament тут 16px сверху/снизу — строка раздувается до 65px */
    background: inherit;
    box-shadow: -1px 0 0 var(--ft-border);
}
body.ft2 .fi-ta-actions-header-cell { box-shadow: -1px 0 0 var(--ft-border); }
body.ft2 .fi-ta-cell > .fi-ta-actions { justify-content: flex-end; min-width: 40px; }

/* Прилипающая клон-шапка (theme.js): настоящая внутри overflow-x прилипнуть не может */
body.ft2 .ft-sticky-head {
    position: fixed;
    z-index: 20;
    overflow: hidden;
    display: none;
    border-bottom: 1px solid var(--ft-border);
    box-shadow: var(--ft-shadow-head);
    background: var(--ft-hover);
}
body.ft2 .ft-sticky-head.is-on { display: block; }
body.ft2 .ft-sticky-head table { table-layout: fixed; border-collapse: collapse; }

/* Пустое состояние, фильтры, индикаторы */
body.ft2 .fi-ta-empty-state-heading { color: var(--ft-text); }
body.ft2 .fi-ta-empty-state-description { color: var(--ft-muted); }
body.ft2 .fi-ta-empty-state-icon-bg { background: var(--ft-hover); }
body.ft2 .fi-ta-filter-indicators { border-color: var(--ft-border); background: var(--ft-card-2); }
body.ft2 .fi-ta-filters-dropdown .fi-dropdown-panel { padding: 4px; }
body.ft2 .fi-ta-group-header { background: var(--ft-card-2); color: var(--ft-text-soft); }
body.ft2 .fi-ta-summary-row { background: var(--ft-card-2); }
body.ft2 .fi-ta-selection-indicator { background: var(--ft-primary-soft); color: var(--ft-text); }

/* ===== 13. Бейджи ===== */
/* Пилюля 24px, 600 12px, фон *-soft, текст *-ink */
body.ft2 .fi-badge {
    min-height: 24px;
    padding: 2px 10px;
    border-radius: var(--ft-r-pill);
    font: 600 12px/1.2 var(--ft-font);
    background: var(--ft-info-soft);
    color: var(--ft-info-ink);
    box-shadow: inset 0 0 0 1px var(--ft-info-line);
}
body.ft2 .fi-badge.fi-size-sm { padding: 1px 9px; }
body.ft2 .fi-badge.fi-color-primary,
body.ft2 .fi-badge.fi-color-success {
    background: var(--ft-success-soft);
    color: var(--ft-success-ink);
    box-shadow: inset 0 0 0 1px var(--ft-success-line);
}
body.ft2 .fi-badge.fi-color-danger {
    background: var(--ft-danger-soft);
    color: var(--ft-danger-ink);
    box-shadow: inset 0 0 0 1px var(--ft-danger-line);
}
body.ft2 .fi-badge.fi-color-warning {
    background: var(--ft-warning-soft);
    color: var(--ft-warning-ink);
    box-shadow: inset 0 0 0 1px var(--ft-warning-line);
}
body.ft2 .fi-badge .fi-icon { color: currentColor; }

/* ===== 14. Выпадающие меню, тултипы ===== */
body.ft2 .fi-dropdown-panel {
    background: var(--ft-card);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-r-md);
    box-shadow: var(--ft-shadow-pop);
    overflow: hidden;
}
body.ft2 .fi-dropdown-list { padding: 4px; }
body.ft2 .fi-dropdown-list + .fi-dropdown-list,
body.ft2 .fi-dropdown-panel > * + .fi-dropdown-list { border-top: 1px solid var(--ft-border); }
body.ft2 .fi-dropdown-header {
    padding: 12px;
    color: var(--ft-text);
    font: 700 13.5px/1.3 var(--ft-font);
    border-bottom: 1px solid var(--ft-border);
}
body.ft2 .fi-dropdown-list-item {
    min-height: 36px;
    border-radius: var(--ft-r-sm);
    color: var(--ft-text-soft);
    font: 500 13.5px/1.3 var(--ft-font);
}
body.ft2 .fi-dropdown-list-item:hover,
body.ft2 .fi-dropdown-list-item:focus-visible { background: var(--ft-hover); color: var(--ft-text); }
body.ft2 .fi-dropdown-list-item .fi-icon { color: var(--ft-faint); }
body.ft2 .fi-dropdown-list-item-label { color: inherit; }
/* Активный пункт меню разделов: мягкая подложка и чёрный (в тёмной — белый) текст */
body.ft2 .fi-dropdown-list-item[aria-current="page"] { background: var(--ft-primary-soft); color: var(--ft-text); }
body.ft2 .fi-dropdown-list-item[aria-current="page"] .fi-dropdown-list-item-label,
body.ft2 .fi-dropdown-list-item[aria-current="page"] .fi-icon { color: var(--ft-text); }
body.ft2 .fi-dropdown-list-item.fi-color-danger,
body.ft2 .fi-dropdown-list-item.fi-color-danger .fi-dropdown-list-item-label,
body.ft2 .fi-dropdown-list-item.fi-color-danger .fi-icon { color: var(--ft-danger-ink); }

/* Тултипы (tippy) */
body.ft2 .tippy-box {
    background: var(--ft-tip-bg);
    color: var(--ft-tip-text);
    border-radius: var(--ft-r-sm);
    font: 500 12px/1.4 var(--ft-font);
    box-shadow: var(--ft-shadow-pop);
}
body.ft2 .tippy-box .tippy-arrow { color: var(--ft-tip-bg); }

/* ===== 15. Модальные окна ===== */
body.ft2 .fi-modal-close-overlay { background: var(--ft-overlay); }
body.ft2 .fi-modal-window {
    background: var(--ft-card);
    border: 1px solid var(--ft-border);
    border-radius: 24px;
    box-shadow: var(--ft-shadow-pop);
}
body.ft2 .fi-modal-slide-over .fi-modal-window { border-radius: 24px 0 0 24px; }
body.ft2 .fi-modal-header {
    padding: 22px 26px;
    border-bottom: 1px solid var(--ft-border);
}
body.ft2 .fi-modal-heading {
    color: var(--ft-base);
    font: 300 22px/1.25 var(--ft-font);
    letter-spacing: -.03em;
}
body.ft2 .fi-modal-description { color: var(--ft-muted); font-size: 13.5px; }
body.ft2 .fi-modal-content { padding: 22px 26px; }
body.ft2 .fi-modal-footer {
    padding: 16px 26px 22px;
    border-top: 1px solid var(--ft-border);
}
body.ft2 .fi-modal-footer-actions { gap: 8px; }
/* Иерархия футера: действие — сплошная заливка (primary), закрытие — контурная (secondary) */
body.ft2 .fi-modal-icon-bg { background: var(--ft-hover); }
body.ft2 .fi-modal-icon-bg.fi-color-danger { background: var(--ft-danger-soft); }
body.ft2 .fi-modal-icon-bg.fi-color-danger .fi-icon { color: var(--ft-danger-ink); }

/* ===== 16. Уведомления ===== */
/* Тост: карточка + тень pop + цветная полоса 4px слева по статусу */
body.ft2 .fi-no-notification {
    background: var(--ft-card);
    border: 1px solid var(--ft-border);
    border-left: 4px solid var(--ft-border-strong);
    border-radius: var(--ft-r-md);
    box-shadow: var(--ft-shadow-pop);
}
body.ft2 .fi-no-notification.fi-status-success { border-left-color: var(--ft-success); }
body.ft2 .fi-no-notification.fi-status-danger { border-left-color: var(--ft-danger); }
body.ft2 .fi-no-notification.fi-status-warning { border-left-color: var(--ft-warning); }
body.ft2 .fi-no-notification.fi-status-info { border-left-color: var(--ft-muted); }
body.ft2 .fi-no-notification-title { color: var(--ft-text); font-weight: 700; }
body.ft2 .fi-no-notification-body { color: var(--ft-text-soft); }
body.ft2 .fi-no-notification-date { color: var(--ft-faint); }

/* ===== 17. Пагинация, вкладки ===== */
body.ft2 .fi-pagination { padding: 10px 16px; border-color: var(--ft-border); }
body.ft2 .fi-pagination-overview { color: var(--ft-muted); font-size: 12.5px; }
body.ft2 .fi-pagination-items {
    border: 1px solid var(--ft-border-strong);
    border-radius: var(--ft-r-pill);
    box-shadow: none;
    overflow: hidden;
    background: var(--ft-card);
}
body.ft2 .fi-pagination-item { border-color: var(--ft-border); }
body.ft2 .fi-pagination-item-btn { color: var(--ft-text-soft); font-weight: 600; min-width: 34px; }
body.ft2 .fi-pagination-item-btn:hover { background: var(--ft-hover); }
body.ft2 .fi-pagination-item.fi-active .fi-pagination-item-btn { background: var(--ft-fill); }
body.ft2 .fi-pagination-item.fi-active .fi-pagination-item-label { color: var(--ft-on-fill); }
body.ft2 .fi-pagination-records-per-page-select .fi-input-wrp { min-height: 32px; }

body.ft2 .fi-tabs {
    gap: 4px;
    padding: 4px;
    background: var(--ft-card);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-r-pill);
    box-shadow: none;
}
body.ft2 .fi-tabs-item {
    border-radius: var(--ft-r-pill);
    color: var(--ft-muted);
    font: 600 13px/1 var(--ft-font);
}
body.ft2 .fi-tabs-item:hover { background: var(--ft-hover); color: var(--ft-text); }
body.ft2 .fi-tabs-item.fi-active { background: var(--ft-fill); }
body.ft2 .fi-tabs-item.fi-active .fi-tabs-item-label,
body.ft2 .fi-tabs-item.fi-active .fi-icon { color: var(--ft-on-fill); }

/* ===== 20. Адаптив ===== */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* средняя ширина и масштаб 110–150 %: шапка остаётся в одну строку и не обрезается —
       меню важнее названия рядом с логотипом, отступы плотнее */
    body.ft2 .fi-topbar { padding: 0 16px; gap: 8px; }
    body.ft2 .fi-topbar-start { margin-inline-end: 8px; }
    body.ft2 .fi-topbar .ft-logo__text { display: none; }
    body.ft2 .fi-topbar-nav-groups { gap: 0; margin-left: 4px; }
    body.ft2 .fi-topbar-end { gap: 8px; }  /* не меньше полей кнопок-значков (−8px): подсветка «?» не заходит на колокольчик */
    body.ft2 .fi-topbar-item-btn { padding: 0 8px; }
    body.ft2 .fi-topbar-item.fi-active .fi-topbar-item-btn::after { left: 8px; right: 8px; }
}
@media (max-width: 1023px) {
    body.ft2 .fi-topbar { padding: 0 12px; gap: 8px; }
    body.ft2 .fi-main { padding: 8px 16px 32px; }
}
@media (max-width: 640px) {
    /* узкий экран: прячем поиск и название логотипа; плашка лимитов — круглая кнопка-значок, окно открывается так же */
    body.ft2 .fi-global-search-ctn,
    body.ft2 .fi-topbar .ft-logo__text { display: none; }
    body.ft2 .ft-limits-ctn { width: auto; container-type: normal; }
    body.ft2 .ft-limits { width: 32px; height: 32px; padding: 0; justify-content: center; }
    body.ft2 .ft-limits__text { display: none; }
    body.ft2 .ft-limits__icon { display: block; }
    body.ft2 .fi-header-heading { font-size: 21px; }
    body.ft2 .fi-modal-header,
    body.ft2 .fi-modal-content { padding: 18px 18px; }
    body.ft2 .fi-modal-footer { padding: 14px 18px 18px; }
}