/* ═══════════════════════════════════════════════════════════════
   RootCode Brand Design System
   Palette:
     --rc-blue:   #0000BB  (основной синий)
     --rc-navy:   #000066  (тёмно-синий)
     --rc-light:  #D9E1FF  (светло-голубой)
     --rc-grey:   #F5F5F5  (светло-серый)
     --rc-black:  #020A0A  (почти чёрный)
   Font: Onest (400 / 500 / 600 / 700 / 800)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rc-blue:   #0000BB;
  --rc-navy:   #000066;
  --rc-light:  #D9E1FF;
  --rc-grey:   #F5F5F5;
  --rc-black:  #020A0A;

  /* UI accents (brand blue, адаптированный для тёмного фона) */
  --ac:        #2255EE;
  --ac2:       #0000BB;
  --ac-dim:    rgba(34, 85, 238, .15);
  --ac-border: rgba(34, 85, 238, .38);
  --ac-light:  #D9E1FF;
}

/* Шрифт задаётся ОДИН раз на корне документа и дальше расходится обычным
   наследованием. Селектор `*` здесь был неверен: его специфичность нулевая, и
   правило Bootstrap `body { font-family: var(--bs-body-font-family) }`
   выигрывало — computed font-family у body был системным, а Onest доставался
   элементам только потому, что `*` применялся к каждому из них по отдельности.
   Пары `html, body` достаточно: custom.css подключается после Bootstrap, и при
   равной специфичности побеждает он. Элементы, которым Bootstrap назначает
   шрифт явно (code/pre/kbd — моноширинный), как и раньше остаются при своём. */
html, body { font-family: 'Onest', system-ui, sans-serif; }

/* Формы Bootstrap не наследуют шрифт сами: браузер даёт полям и кнопкам
   системный шрифт агентским стилем, а Reboot возвращает наследование. Правило
   продублировано здесь явно, чтобы поведение не зависело от того, доехал ли
   Bootstrap (CDN может быть недоступен). */
button, input, optgroup, select, textarea { font-family: inherit; }

/* ─── Auth page ─── */
body.auth-page {
    min-height: 100vh;
    background: linear-gradient(-45deg, #000033, #000066, #010120, #020A0A);
    background-size: 400% 400%;
    animation: gradientShift 14s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ─── Glassmorphism card ─── */
.glass-card {
    background: rgba(0, 0, 40, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(217, 225, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 8px 48px rgba(0, 0, 100, 0.4);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    color: #f0f0f0;
}

.glass-card .card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    height: 60px;
}
.glass-card .card-logo-img {
    max-height: 60px;
    width: auto;
    display: block;
}
/* Auth-page всегда имеет тёмный фон (см. body.auth-page выше),
   поэтому логотип ВСЕГДА показываем в dark-варианте независимо от
   localStorage темы пользователя. */
.glass-card .card-logo-light { display: none; }
.glass-card .card-logo-dark  { display: block; }

.glass-card h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 0.25rem;
}

.glass-card .subtitle {
    text-align: center;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1.75rem;
}

/* ─── Form inputs ─── */
.glass-card .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.glass-card .form-control {
    background: rgba(217, 225, 255, 0.07);
    border: 1px solid rgba(217, 225, 255, 0.18);
    border-radius: 10px;
    color: #fff;
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.glass-card .form-control:focus {
    background: rgba(217, 225, 255, 0.12);
    border-color: var(--ac);
    box-shadow: 0 0 0 3px rgba(34, 85, 238, 0.22);
    color: #fff;
    outline: none;
}

.glass-card .form-control::placeholder {
    color: rgba(255,255,255,0.3);
}

.glass-card .input-group .btn {
    background: rgba(217, 225, 255, 0.07);
    border: 1px solid rgba(217, 225, 255, 0.18);
    border-left: none;
    color: rgba(255,255,255,0.6);
    border-radius: 0 10px 10px 0;
}

.glass-card .input-group .btn:hover {
    background: rgba(217, 225, 255, 0.14);
    color: #fff;
}

.glass-card .input-group .form-control {
    border-radius: 10px 0 0 10px;
}

/* ─── Captcha box ─── */
.captcha-box {
    background: rgba(34, 85, 238, 0.12);
    border: 1px dashed rgba(217, 225, 255, 0.35);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ac-light);
    text-align: center;
    user-select: none;
    margin-bottom: 0.4rem;
}

/* ─── Submit button ─── */
.btn-auth {
    background: linear-gradient(135deg, var(--rc-navy), var(--rc-blue));
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.7rem;
    width: 100%;
    transition: opacity 0.2s, transform 0.1s;
    box-shadow: 0 4px 20px rgba(0, 0, 187, 0.4);
    letter-spacing: 0.02em;
}

.btn-auth:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #fff;
}

.btn-auth:active {
    transform: translateY(0);
}

.btn-microsoft {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #000066, #2255EE);
    color: #fff;
    border: 1px solid rgba(34, 85, 238, .4);
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.7rem;
    width: 100%;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.1s, opacity 0.15s;
    box-shadow: 0 3px 14px rgba(34, 85, 238, .35);
}

.btn-microsoft:hover {
    box-shadow: 0 4px 18px rgba(34, 85, 238, .5);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
    opacity: .92;
}

.btn-microsoft:active {
    transform: translateY(0);
}

[data-theme="light"] .btn-microsoft {
    background: linear-gradient(135deg, var(--rc-navy), var(--ac));
    border-color: rgba(0, 0, 187, .3);
    box-shadow: 0 3px 14px rgba(0, 0, 187, .2);
}

/* ─── Links ─── */
.glass-card a {
    color: var(--ac-light);
    text-decoration: none;
}

.glass-card a:hover {
    color: #fff;
    text-decoration: underline;
}

.glass-card .divider {
    border-top: 1px solid rgba(217, 225, 255, 0.1);
    margin: 1.25rem 0;
}

/* ─── Alert overrides ─── */
.alert {
    border-radius: 10px;
    font-size: 0.875rem;
    padding: 0.6rem 1rem;
}

/* ─── Checkbox ─── */
.form-check-input {
    background-color: rgba(217, 225, 255, 0.08);
    border-color: rgba(217, 225, 255, 0.28);
}

.form-check-input:checked {
    background-color: var(--rc-blue);
    border-color: var(--rc-blue);
}

.form-check-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
}

/* В светлой теме базовые стили выше дают почти невидимый чекбокс
   (голубоватый прозрачный фон на белой подложке). Делаем контрастный
   серый. */
[data-theme="light"] .form-check-input {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .form-check-input:checked {
    background-color: var(--rc-blue);
    border-color: var(--rc-blue);
}
[data-theme="light"] .form-check-label {
    color: rgba(0, 0, 0, 0.7);
}

/* ─── Popup скрытого входа администратора ─── */
.admin-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-login-popup {
    background: rgba(0, 0, 40, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(217, 225, 255, 0.12);
    border-radius: 18px;
    padding: 2rem 2rem 1.5rem;
    min-width: 340px;
    max-width: 420px;
    width: 90vw;
    position: relative;
    box-shadow: 0 16px 64px rgba(0,0,0,.6);
}
.admin-popup-close {
    position: absolute;
    top: .6rem;
    right: .75rem;
    background: none;
    border: none;
    color: rgba(255,255,255,.4);
    font-size: 1.4rem;
    cursor: pointer;
    padding: .15rem .4rem;
    border-radius: 6px;
    line-height: 1;
    transition: color .15s;
}
.admin-popup-close:hover { color: #fff; }
.admin-popup-title {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 1.2rem 0;
    text-align: center;
}
/* Формы внутри popup наследуют стили glass-card */
.admin-login-popup .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .3rem;
}
.admin-login-popup .form-control {
    background: rgba(217, 225, 255, 0.07);
    border: 1px solid rgba(217, 225, 255, 0.18);
    border-radius: 10px;
    color: #fff;
    padding: .6rem .85rem;
    font-size: .92rem;
}
.admin-login-popup .form-control:focus {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac-dim);
    background: rgba(217, 225, 255, 0.1);
}
.admin-login-popup .form-control::placeholder { color: rgba(255,255,255,.25); }
.admin-login-popup .input-group .btn {
    background: rgba(217, 225, 255, 0.07);
    border: 1px solid rgba(217, 225, 255, 0.18);
    border-left: none;
    color: rgba(255,255,255,.5);
    border-radius: 0 10px 10px 0;
}
.admin-login-popup .form-check-label {
    font-size: .85rem;
    color: rgba(255,255,255,.65);
}
.admin-login-popup .form-check-input {
    background-color: rgba(217, 225, 255, .08);
    border-color: rgba(217, 225, 255, .28);
}
.admin-login-popup .form-check-input:checked {
    background-color: var(--rc-blue);
    border-color: var(--rc-blue);
}

/* Светлая тема — popup */
[data-theme="light"] .admin-login-popup {
    background: rgba(255,255,255,.95);
    border-color: rgba(0,0,0,.1);
    box-shadow: 0 16px 64px rgba(0,0,0,.2);
}
[data-theme="light"] .admin-popup-close { color: rgba(0,0,0,.35); }
[data-theme="light"] .admin-popup-close:hover { color: var(--rc-black); }
[data-theme="light"] .admin-popup-title { color: var(--rc-black); }
[data-theme="light"] .admin-login-popup .form-label { color: rgba(0,0,0,.6); }
[data-theme="light"] .admin-login-popup .form-control {
    background: #fff;
    border-color: rgba(0,0,0,.15);
    color: var(--rc-black);
}
[data-theme="light"] .admin-login-popup .form-control:focus {
    border-color: var(--rc-blue);
    background: #fff;
}
[data-theme="light"] .admin-login-popup .form-control::placeholder { color: rgba(0,0,0,.3); }
[data-theme="light"] .admin-login-popup .input-group .btn {
    background: #fff;
    border-color: rgba(0,0,0,.15);
    color: rgba(0,0,0,.45);
}
[data-theme="light"] .admin-login-popup .form-check-label { color: rgba(0,0,0,.6); }
[data-theme="light"] .admin-login-popup .form-check-input {
    background-color: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.2);
}

/* ─── App layout ─── */
/* Каркас портала занимает РОВНО высоту окна и сам не прокручивается.
   Высоту внутренних областей задаёт раскладка, а не вычисления: шапка берёт
   сколько ей нужно, область содержимого забирает остаток, прокрутка живёт
   внутри неё (`.page-content`) и внутри контейнера широкой таблицы.

   Так убран целый класс дефектов. Раньше высота областей подбиралась
   формулами вида `calc(100vh - <высота шапки>)` и порогами в процентах
   вьюпорта — а шапка переносится и растёт (74px → 114px и выше), пагинатор
   тоже (47px → 251px). Сумма «шапка + область» переставала помещаться в окно,
   и у страницы появлялась вторая полоса прокрутки рядом с полосой таблицы.
   Остаток, посчитанный раскладкой, переполниться арифметически не может.

   dvh — видимый вьюпорт мобильного без скачков адресной строки; строка выше
   на vh оставлена фолбэком для движков без поддержки dvh. */
body.app-layout {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #080814;
    color: #e0e0e0;
}

body.main-page {
    background: #080814;
    min-height: 100vh;
    color: #e0e0e0;
}

/* ─── Role badges ─── */
.role-badge {
    font-size: 0.7rem;
    padding: 0.25em 0.6em;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.role-badge.admin    { background: rgba(0,0,187,.22); color: var(--ac-light);     border: 1px solid rgba(34,85,238,.4); }
.role-badge.manager  { background: rgba(0,0,102,.30); color: #aab8ff;             border: 1px solid rgba(0,0,102,.5); }
.role-badge.employee { background: rgba(217,225,255,.08); color: rgba(217,225,255,.7); border: 1px solid rgba(217,225,255,.18); }

/* ─── Sidebar ─── */
.app-sidebar {
    width: 232px;
    min-height: 100vh;
    background: rgba(0, 0, 20, 0.7);
    border-right: 1px solid rgba(217, 225, 255, 0.07);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 200;
    overflow-y: auto;

    /* Тихий скроллбар. `overflow-y: auto` остаётся: на невысоком окне меню не
       помещается целиком (1210px содержимого), и без прокрутки нижние пункты
       недостижимы. Но рядом с полосой прокрутки страницы дефолтная полоса
       читалась вторым полноценным скроллбаром. Поэтому она тонкая и в покое
       почти прозрачная, а при наведении на сайдбар — отчётливая.
       Полоса именно приглушена, а не спрятана: ширина ненулевая, так что
       перетаскивание мышью продолжает работать наравне с колесом и клавишами. */
    --sb-thumb:       color-mix(in srgb, var(--rc-light) 12%, transparent);
    --sb-thumb-hover: color-mix(in srgb, var(--rc-light) 40%, transparent);
    scrollbar-width: thin;                        /* Firefox + стандарт */
    scrollbar-color: var(--sb-thumb) transparent;
    transition: scrollbar-color .18s ease;
}
.app-sidebar:hover { scrollbar-color: var(--sb-thumb-hover) transparent; }

/* Chromium/WebKit: свой набор псевдоэлементов. Трек объявлен ЯВНО и прозрачным —
   объявленный ::-webkit-scrollbar без ::-webkit-scrollbar-track включает в
   Chromium отрисовку дефолтного серого трека (та же грабля, что описана у
   ленты обращения ниже). */
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: 3px;
    transition: background .18s ease;
}
.app-sidebar:hover::-webkit-scrollbar-thumb { background: var(--sb-thumb-hover); }

/* Светлая тема: на белом фоне светлый бегунок не виден — берём тёмный токен. */
[data-theme="light"] .app-sidebar {
    --sb-thumb:       color-mix(in srgb, var(--rc-black) 15%, transparent);
    --sb-thumb-hover: color-mix(in srgb, var(--rc-black) 42%, transparent);
}

/* `min-width: 0` — ключевое правило раскладки, не косметика.
   `.app-main` — flex-элемент внутри `body.app-layout`, а у flex-элемента
   автоматический минимальный размер равен min-content содержимого. Без явного
   нуля колонка не может сжаться уже самого широкого блока внутри: широкая
   таблица (сотрудники, отчёты, логи) растягивала `.app-main` за пределы
   вьюпорта, вместе с ней уезжала липкая шапка и прижатый к её правому краю
   колокольчик, а горизонтальная прокрутка получалась у всей страницы вместо
   собственного контейнера таблицы. Правило общее для портала: любая широкая
   таблица в любом модуле прокручивается внутри себя. */
/* `min-height: 0` — по вертикали та же причина, что и `min-width: 0` по
   горизонтали: flex-элемент по умолчанию не сжимается меньше своего
   min-content, и без явного нуля высота снова потекла бы мимо окна. */
.app-main {
    margin-left: 232px;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 1.1rem 1rem 1rem;
    border-bottom: 1px solid rgba(217, 225, 255, 0.07);
    flex-shrink: 0;
}

/* Лого: имитация RC_ из брендбука — синяя подложка */
.sidebar-brand-logo {
    width: 34px; height: 34px;
    background: var(--rc-blue);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 14px rgba(0, 0, 187, .45);
}

.sidebar-nav { flex: 1; padding: 0.75rem 0.65rem; }

.nav-section-label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(217, 225, 255, 0.22);
    padding: 0.9rem 0.75rem 0.3rem;
}

.nav-link-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 9px;
    color: rgba(217, 225, 255, 0.48);
    text-decoration: none;
    font-size: 0.855rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    margin-bottom: 0.1rem;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.nav-link-item i { font-size: 0.95rem; width: 1.1rem; text-align: center; flex-shrink: 0; }
.nav-link-item:hover  { background: rgba(217,225,255,.06); color: rgba(255,255,255,.85); }
/* Активный пункт заметно доминирует над hover (правило идёт после :hover при
   равной специфичности): плотный акцентный фон, левая полоса и НЕОНОВОЕ
   свечение уровня подсветки тура (.rc-tour-spot-ring), но статичное — без
   пульсации. Свечение многослойное: inset-слои горят ВНУТРИ пункта (их не
   режет клиппинг скролл-контейнера .app-sidebar: overflow-y:auto заставляет и
   overflow-x клиппить внешний ореол) + внешние акцентные слои дают ореол. */
.nav-link-item.active {
    background: rgba(34,85,238,.26);
    color: #fff;
    font-weight: 600;
    border-left: 3px solid var(--ac);
    padding-left: calc(0.75rem - 3px);
    box-shadow:
        inset 0 0 0 1px var(--ac-border),
        inset 0 0 12px rgba(34,85,238,.30),
        0 0 0 1px var(--ac),
        0 0 14px 1px rgba(34,85,238,.55),
        0 0 26px 5px rgba(34,85,238,.32);
}
.nav-link-item.active i { color: var(--ac-light); }
.nav-link-item.danger { color: rgba(248,113,113,0.6); }
.nav-link-item.danger:hover { background: rgba(239,68,68,0.1); color: #fca5a5; }

.sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid rgba(217, 225, 255, 0.07);
    flex-shrink: 0;
}

.sidebar-user-avatar {
    width: 32px; height: 32px;
    background: rgba(0, 0, 187, .22);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Ярлык версии в подвале сайдбара. Служебный — приглушённый,
   но читаемый на обеих темах. До фикса было rgba(255,255,255,.2) —
   почти сливалось с фоном. */
.sidebar-version {
    margin-top: .6rem;
    padding: .3rem .5rem;
    font-size: .65rem;
    text-align: right;
    letter-spacing: .04em;
    color: rgba(217, 225, 255, .55);
}

/* ─── Topbar ─── */
/* `flex-wrap: wrap` — на широком экране ничего не меняет (содержимое и так
   помещается в строку), а на узком даёт элементам перенестись вместо выхода
   за правый край. `min-width: 0` — та же причина, что и у `.app-main`: шапка
   сама является flex-элементом колонки и не должна расширяться содержимым. */
.app-topbar {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(217, 225, 255, 0.06);
    background: #0a0a18;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    flex-shrink: 0;
    min-width: 0;
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Прямые блоки шапки (заголовок, группа контролов) тоже обязаны уметь
   сжиматься — иначе длинный заголовок или подпись снова распирают строку. */
.app-topbar > div { min-width: 0; }

.app-topbar h1       { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0; }
.app-topbar .subtitle { font-size: 0.78rem; color: rgba(217,225,255,0.4); margin: 0; }

/* Область содержимого забирает остаток высоты и прокручивается САМА. Каркас
   не прокручивается, поэтому без этой прокрутки низ длинных страниц (новости,
   идеи, обращения, отчёты) стал бы недостижим. */
.page-content {
    padding: 1.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Страницы без `.page-content` держат свою полноэкранную область содержимого
   (таблица сотрудников, орг. структура, лента обращения) — им прокрутка не
   нужна, у них есть собственный скролл-контейнер. Исключение — страница
   ошибки: содержимое короткое, но на низком окне должно оставаться доступным. */
.app-main > .error-page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ─── Modal dark ─── */
.modal-dark .modal-content {
    background: #0c0c22;
    border: 1px solid rgba(217,225,255,.1);
    border-radius: 16px;
    color: rgba(255,255,255,.82);
}
.modal-dark .modal-header { border-bottom: 1px solid rgba(217,225,255,.08); }
.modal-dark .modal-footer { border-top:    1px solid rgba(217,225,255,.08); }
.modal-dark .btn-close { filter: invert(1) grayscale(1); }

.navbar-dark-custom {
    background: rgba(0,0,20,0.6);
    border-bottom: 1px solid rgba(217,225,255,0.07);
    backdrop-filter: blur(10px);
}

/* ─── Sidebar logo ─── */
.sidebar-brand { padding: .85rem 1rem; border-bottom: 1px solid rgba(217,225,255,.07); flex-shrink: 0; }
.sidebar-logo-link { display: block; }
.sidebar-logo   { display: block; width: 100%; height: auto; max-height: 36px; object-fit: contain; object-position: left center; }

/* Dark theme: show inverted logo (white text), hide standard */
[data-theme="dark"]  .sidebar-logo-dark  { display: block; }
[data-theme="dark"]  .sidebar-logo-light { display: none; }
/* Light theme: show standard logo (black text), hide inverted */
[data-theme="light"] .sidebar-logo-light { display: block; }
[data-theme="light"] .sidebar-logo-dark  { display: none; }

/* ─── Theme toggle button labels/icons ─── */
[data-theme="dark"]  .theme-icon-light  { display: none; }
[data-theme="dark"]  .theme-icon-dark   { display: inline; }
[data-theme="dark"]  .theme-label-light { display: none; }
[data-theme="dark"]  .theme-label-dark  { display: inline; }
[data-theme="light"] .theme-icon-dark   { display: none; }
[data-theme="light"] .theme-icon-light  { display: inline; }
[data-theme="light"] .theme-label-dark  { display: none; }
[data-theme="light"] .theme-label-light { display: inline; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] body.app-layout { background: var(--rc-grey); color: var(--rc-black); }

[data-theme="light"] .app-sidebar {
    background: #fff;
    border-right: 1px solid rgba(0,0,0,.08);
}
[data-theme="light"] .sidebar-brand { border-bottom-color: rgba(0,0,0,.07); }
[data-theme="light"] .sidebar-footer { border-top-color: rgba(0,0,0,.07); }
[data-theme="light"] .sidebar-version { color: rgba(10, 16, 32, .55); }
[data-theme="light"] .nav-section-label { color: rgba(0,0,0,.35); }
[data-theme="light"] .nav-link-item { color: rgba(0,0,0,.55); }
[data-theme="light"] .nav-link-item:hover { background: rgba(0,0,187,.05); color: var(--rc-blue); }
/* Светлая тема: тот же неоновый приём, но мягче — на светлом фоне ореол
   тусклее, при этом пункт явно выделяется и текст остаётся читаемым. */
[data-theme="light"] .nav-link-item.active {
    background: rgba(34,85,238,.14);
    color: var(--rc-blue);
    font-weight: 600;
    border-left-color: var(--ac);
    box-shadow:
        inset 0 0 0 1px rgba(34,85,238,.30),
        inset 0 0 10px rgba(34,85,238,.14),
        0 0 0 1px rgba(34,85,238,.55),
        0 0 12px 1px rgba(34,85,238,.30),
        0 0 20px 4px rgba(34,85,238,.16);
}
[data-theme="light"] .nav-link-item.active i { color: var(--ac); }
[data-theme="light"] .nav-link-item.danger { color: #dc2626; }
[data-theme="light"] .nav-link-item.danger:hover { background: rgba(220,38,38,.08); }

[data-theme="light"] .sidebar-user-avatar { background: rgba(0,0,187,.1); }
[data-theme="light"] .sidebar-user-avatar i { color: var(--rc-blue) !important; }
[data-theme="light"] .sidebar-footer .text-white { color: var(--rc-black) !important; }

[data-theme="light"] .app-topbar {
    background: #fff;
    border-bottom-color: rgba(0,0,0,.08);
}
[data-theme="light"] .app-topbar h1       { color: var(--rc-black); }
[data-theme="light"] .app-topbar .subtitle { color: rgba(0,0,0,.45); }
[data-theme="light"] .app-topbar strong   { color: var(--rc-blue) !important; }

[data-theme="light"] .role-badge.admin    { background: rgba(0,0,187,.1); color: var(--rc-blue); border-color: rgba(0,0,187,.25); }
[data-theme="light"] .role-badge.manager  { background: rgba(0,0,102,.08); color: var(--rc-navy); border-color: rgba(0,0,102,.2); }
[data-theme="light"] .role-badge.employee { background: rgba(0,0,0,.05); color: rgba(0,0,0,.5); border-color: rgba(0,0,0,.12); }

[data-theme="light"] .modal-dark .modal-content { background: #fff; border-color: rgba(0,0,0,.1); color: var(--rc-black); }
[data-theme="light"] .modal-dark .modal-header  { border-bottom-color: rgba(0,0,0,.08); }
[data-theme="light"] .modal-dark .modal-footer  { border-top-color: rgba(0,0,0,.08); }
[data-theme="light"] .modal-dark .modal-title   { color: var(--rc-black) !important; }
[data-theme="light"] .modal-dark .btn-close     { filter: none; }

/* ─── Light theme: employees table ─── */
[data-theme="light"] .emp-table thead th {
    background: #fff;
    color: rgba(0,0,0,.5);
    border-bottom-color: rgba(0,0,0,.08);
}
[data-theme="light"] .emp-table tbody tr { border-bottom-color: rgba(0,0,0,.05); }
[data-theme="light"] .emp-table tbody tr:hover { background: rgba(0,0,187,.04); }
[data-theme="light"] .emp-table td { color: var(--rc-black); }
[data-theme="light"] .table-wrap {
    background: #fff;
    border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .search-input {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.12);
    color: var(--rc-black);
}
[data-theme="light"] .search-input:focus { border-color: var(--rc-blue); background: #fff; }
[data-theme="light"] .search-input::placeholder { color: rgba(0,0,0,.3); }
[data-theme="light"] .ctrl-btn {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.12);
    color: rgba(0,0,0,.65);
}
[data-theme="light"] .ctrl-btn:hover { background: rgba(0,0,0,.08); color: var(--rc-black); }
[data-theme="light"] .dept-badge { background: rgba(0,0,187,.1); color: var(--rc-navy); }
[data-theme="light"] .cell-empty { color: rgba(0,0,0,.25); }
[data-theme="light"] td.col-num { color: rgba(0,0,0,.3); }
[data-theme="light"] .col-picker-panel {
    background: #fff;
    border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .col-row label { color: rgba(0,0,0,.7); }
[data-theme="light"] .col-row:hover { background: rgba(0,0,187,.04); }
[data-theme="light"] .page-btn { color: rgba(0,0,0,.45); background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .page-btn:hover,
[data-theme="light"] .page-btn.active { background: rgba(0,0,187,.1); color: var(--rc-blue); border-color: rgba(0,0,187,.3); }

/* ─── Light theme: orgchart ─── */
[data-theme="light"] .chart-vp {
    background:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,.04) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,0,0,.04) 40px);
}
[data-theme="light"] .org-card {
    background: #fff;
    border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .org-card:hover { border-color: rgba(0,0,187,.35); }
[data-theme="light"] .c-name  { color: var(--rc-black); }
[data-theme="light"] .c-title { color: rgba(0,0,0,.45); }
[data-theme="light"] .c-dept  { color: rgba(0,0,0,.35); }
[data-theme="light"] .c-email { color: var(--rc-blue); }
[data-theme="light"] .tb-btn  { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.6); }
[data-theme="light"] .tb-btn:hover { background: rgba(0,0,0,.1); color: var(--rc-black); }
[data-theme="light"] .z-btn   { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.55); }
[data-theme="light"] .z-btn:hover { background: rgba(0,0,187,.08); color: var(--rc-blue); border-color: rgba(0,0,187,.25); }
[data-theme="light"] .chart-topbar h1 { color: var(--rc-black); }
[data-theme="light"] .chart-topbar .sub { color: rgba(0,0,0,.4); }

/* ═══════════════════════════════════════════════════════════════════
   Dashboard hero — theme-aware
   ═══════════════════════════════════════════════════════════════════ */
.dashboard-hero {
    max-width: 560px;
    margin: 3rem auto;
    text-align: center;
}
.dashboard-logo {
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
}
.dashboard-logo-img {
    max-height: 90px;
    width: auto;
    display: block;
}
/* Переключение вариантов логотипа по теме */
[data-theme="dark"]  .dashboard-logo-light { display: none; }
[data-theme="dark"]  .dashboard-logo-dark  { display: block; }
[data-theme="light"] .dashboard-logo-dark  { display: none; }
[data-theme="light"] .dashboard-logo-light { display: block; }
.dashboard-title {
    font-weight: 700;
    color: #fff;
    margin-bottom: .5rem;
}
.dashboard-subtitle {
    color: rgba(255,255,255,.55);
    font-size: .95rem;
    line-height: 1.55;
}
.dashboard-access {
    display: inline-block;
    margin-top: 1.5rem;
    padding: .9rem 1.25rem;
    background: rgba(34,85,238,.12);
    border: 1px solid rgba(34,85,238,.32);
    border-radius: 12px;
}
.dashboard-access-label {
    font-size: .72rem;
    color: var(--ac-light);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.dashboard-access-value {
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
    margin-top: .3rem;
}
.btn-dashboard-secondary {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.82);
    border-radius: 10px;
    padding: .6rem 1.25rem;
    text-decoration: none;
    font-size: .9rem;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-dashboard-secondary:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    color: #fff;
}

/* Светлая тема — dashboard */
[data-theme="light"] .dashboard-title    { color: var(--rc-black); }
[data-theme="light"] .dashboard-subtitle { color: rgba(0,0,0,.55); }
[data-theme="light"] .dashboard-access {
    background: rgba(0,0,187,.06);
    border-color: rgba(0,0,187,.22);
}
[data-theme="light"] .dashboard-access-label { color: var(--rc-blue); }
[data-theme="light"] .dashboard-access-value { color: var(--rc-black); }
[data-theme="light"] .btn-dashboard-secondary {
    background: #fff;
    border-color: rgba(0,0,0,.15);
    color: rgba(0,0,0,.7);
}
[data-theme="light"] .btn-dashboard-secondary:hover {
    background: var(--rc-grey);
    border-color: rgba(0,0,187,.3);
    color: var(--rc-blue);
}

/* ═══════════════════════════════════════════════════════════════════
   Светлая тема — общие правила для всех admin-страниц
   ═══════════════════════════════════════════════════════════════════ */

/* Универсальное переопределение Bootstrap text-white через каскад темы.
   Использует max-specificity, потому что text-white в Bootstrap имеет !important. */
[data-theme="light"] .text-white { color: var(--rc-black) !important; }

/* Карточки с белым полупрозрачным фоном (sync.html, import_users.html и пр.) */
[data-theme="light"] .stat-card {
    background: #fff !important;
    border-color: rgba(0,0,0,.08) !important;
}
[data-theme="light"] .stat-card .label {
    color: rgba(0,0,0,.45) !important;
}
[data-theme="light"] .stat-card .value {
    color: var(--rc-black) !important;
}
[data-theme="light"] .stat-card .sub {
    color: rgba(0,0,0,.4) !important;
}
[data-theme="light"] .dot-none { background: rgba(0,0,0,.2) !important; }

/* Логи синхронизации и табличные поля */
[data-theme="light"] .log-table thead th {
    background: #fff !important;
    color: rgba(0,0,0,.45) !important;
    border-bottom-color: rgba(0,0,0,.08) !important;
}
[data-theme="light"] .log-table td {
    color: rgba(0,0,0,.7) !important;
    border-bottom-color: rgba(0,0,0,.05) !important;
}
[data-theme="light"] .log-table tr:hover td {
    background: rgba(0,0,187,.04) !important;
}

/* Поля настроек подключения (sync.html) */
[data-theme="light"] .field-group label {
    color: rgba(0,0,0,.55) !important;
}
[data-theme="light"] .field-input {
    background: #fff !important;
    border-color: rgba(0,0,0,.15) !important;
    color: var(--rc-black) !important;
}
[data-theme="light"] .field-input:focus {
    background: #fff !important;
    border-color: var(--rc-blue) !important;
}
[data-theme="light"] .field-input::placeholder {
    color: rgba(0,0,0,.3) !important;
}
[data-theme="light"] .field-value {
    color: var(--rc-black) !important;
}

/* Outline-кнопки */
[data-theme="light"] .btn-outline-sm {
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: rgba(0,0,0,.7) !important;
}
[data-theme="light"] .btn-outline-sm:hover {
    background: rgba(0,0,187,.08) !important;
    color: var(--rc-blue) !important;
}

/* Универсальное правило для inline-style цветов на белом — контейнеры
   и текст с rgba(255,255,255,*) перекрашиваются на тёмный текст.
   Применяется к элементам внутри .page-content на светлой теме. */
[data-theme="light"] .page-content {
    color: var(--rc-black);
}
[data-theme="light"] .page-content h6 {
    color: var(--rc-black) !important;
}
[data-theme="light"] .page-content p,
[data-theme="light"] .page-content small,
[data-theme="light"] .page-content span,
[data-theme="light"] .page-content div,
[data-theme="light"] .page-content label {
    /* Не трогаем явно — пусть остаётся inline, только если белое */
}
/* Перекрасить ВСЕ inline-стили с белыми оттенками внутри page-content
   Используем атрибутный селектор: */
[data-theme="light"] .page-content [style*="color:#fff"],
[data-theme="light"] .page-content [style*="color: #fff"] {
    color: var(--rc-black) !important;
}
[data-theme="light"] .page-content [style*="color:#ccc"],
[data-theme="light"] .page-content [style*="color: #ccc"] {
    color: rgba(0,0,0,.7) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.85"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.85"] {
    color: rgba(0,0,0,.85) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.75"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.75"] {
    color: rgba(0,0,0,.7) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.7"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.7"] {
    color: rgba(0,0,0,.65) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.6"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.6"] {
    color: rgba(0,0,0,.55) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.55"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.55"] {
    color: rgba(0,0,0,.5) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.5"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.5"] {
    color: rgba(0,0,0,.5) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.45"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.45"] {
    color: rgba(0,0,0,.45) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.4"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.4"] {
    color: rgba(0,0,0,.4) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.35"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.35"] {
    color: rgba(0,0,0,.4) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.3"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.3"] {
    color: rgba(0,0,0,.35) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.25"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.25"] {
    color: rgba(0,0,0,.3) !important;
}
[data-theme="light"] .page-content [style*="color:rgba(255,255,255,.2"],
[data-theme="light"] .page-content [style*="color: rgba(255,255,255,.2"] {
    color: rgba(0,0,0,.25) !important;
}

/* Контейнеры с белым полупрозрачным фоном — на белом делаем чуть темнее */
[data-theme="light"] .page-content [style*="background:rgba(255,255,255,.04"],
[data-theme="light"] .page-content [style*="background: rgba(255,255,255,.04"],
[data-theme="light"] .page-content [style*="background:rgba(255,255,255,.05"],
[data-theme="light"] .page-content [style*="background: rgba(255,255,255,.05"],
[data-theme="light"] .page-content [style*="background:rgba(255,255,255,.06"],
[data-theme="light"] .page-content [style*="background: rgba(255,255,255,.06"],
[data-theme="light"] .page-content [style*="background:rgba(255,255,255,.07"],
[data-theme="light"] .page-content [style*="background: rgba(255,255,255,.07"] {
    background: #fff !important;
    border-color: rgba(0,0,0,.08) !important;
}
[data-theme="light"] .page-content [style*="border:1px solid rgba(255,255,255,.08"],
[data-theme="light"] .page-content [style*="border: 1px solid rgba(255,255,255,.08"],
[data-theme="light"] .page-content [style*="border:1px solid rgba(255,255,255,.09"],
[data-theme="light"] .page-content [style*="border: 1px solid rgba(255,255,255,.09"],
[data-theme="light"] .page-content [style*="border:1px solid rgba(255,255,255,.1"],
[data-theme="light"] .page-content [style*="border: 1px solid rgba(255,255,255,.1"],
[data-theme="light"] .page-content [style*="border:1px solid rgba(255,255,255,.12"],
[data-theme="light"] .page-content [style*="border: 1px solid rgba(255,255,255,.12"],
[data-theme="light"] .page-content [style*="border:1px solid rgba(255,255,255,.15"],
[data-theme="light"] .page-content [style*="border: 1px solid rgba(255,255,255,.15"] {
    border-color: rgba(0,0,0,.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Dashboard — приветствие, именинники, новые сотрудники
   ═══════════════════════════════════════════════════════════════════ */

.dash-greeting {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: rgba(34,85,238,.08);
    border: 1px solid rgba(34,85,238,.2);
    border-radius: 16px;
    margin-bottom: 1.75rem;
}
.dash-greeting-avatar { flex-shrink: 0; }
.dash-greeting-text { min-width: 0; flex: 1; }
.dash-greeting-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .35rem 0;
    line-height: 1.2;
}
.dash-greeting-sub {
    font-size: .92rem;
    color: rgba(255,255,255,.7);
    font-weight: 500;
}
.dash-greeting-dept {
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    margin-top: .2rem;
}

/* Секции */
.dash-section { margin-bottom: 2rem; }
.dash-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
}

/* Подзаголовки внутри блока именинников */
.dash-bday-today-label,
.dash-bday-week-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.4);
    margin: .5rem 0 .65rem 0;
}
.dash-bday-week-label { margin-top: 1.1rem; }

/* Сетка карточек */
.dash-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .85rem;
}

/* Одна карточка сотрудника */
.dash-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    transition: border-color .15s, background .15s;
}
.dash-card:hover {
    border-color: rgba(34,85,238,.35);
    background: rgba(34,85,238,.05);
}
.dash-card-body { flex: 1; min-width: 0; }
.dash-card-name {
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-card-meta {
    font-size: .74rem;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .1rem;
}
.dash-card-meta-dim {
    font-size: .7rem;
    color: rgba(255,255,255,.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .05rem;
}
.dash-card-badge {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    white-space: nowrap;
}
.dash-card-badge-today {
    background: rgba(245,158,11,.18);
    color: #fbbf24;
}
.dash-card-badge-new {
    background: rgba(16,185,129,.15);
    color: #34d399;
}
.dash-card-bday-today {
    border-color: rgba(245,158,11,.35);
    background: rgba(245,158,11,.06);
}

/* Аватары сотрудников */
.emp-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.08);
}
.emp-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #000066, #2255EE);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Пустое состояние */
.dash-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: rgba(255,255,255,.4);
}
.dash-empty i { font-size: 2.5rem; display: block; margin-bottom: .75rem; }
.dash-empty p { font-size: .9rem; max-width: 420px; margin: 0 auto; line-height: 1.5; }

/* ─── Светлая тема ─── */
[data-theme="light"] .dash-greeting {
    background: rgba(0,0,187,.05);
    border-color: rgba(0,0,187,.18);
}
[data-theme="light"] .dash-greeting-title { color: var(--rc-black); }
[data-theme="light"] .dash-greeting-sub   { color: rgba(0,0,0,.65); }
[data-theme="light"] .dash-greeting-dept  { color: rgba(0,0,0,.45); }
[data-theme="light"] .dash-section-title  { color: var(--rc-black); }
[data-theme="light"] .dash-bday-today-label,
[data-theme="light"] .dash-bday-week-label { color: rgba(0,0,0,.5); }
[data-theme="light"] .dash-card {
    background: #fff;
    border-color: rgba(0,0,0,.09);
}
[data-theme="light"] .dash-card:hover {
    background: rgba(0,0,187,.03);
    border-color: rgba(0,0,187,.25);
}
[data-theme="light"] .dash-card-name { color: var(--rc-black); }
[data-theme="light"] .dash-card-meta { color: rgba(0,0,0,.6); }
[data-theme="light"] .dash-card-meta-dim { color: rgba(0,0,0,.4); }
[data-theme="light"] .dash-card-badge {
    background: rgba(0,0,0,.05);
    color: rgba(0,0,0,.6);
}
[data-theme="light"] .dash-card-badge-today {
    background: rgba(245,158,11,.15);
    color: #b45309;
}
[data-theme="light"] .dash-card-badge-new {
    background: rgba(16,185,129,.12);
    color: #047857;
}
[data-theme="light"] .dash-card-bday-today {
    border-color: rgba(245,158,11,.4);
    background: rgba(245,158,11,.04);
}
[data-theme="light"] .emp-avatar { border-color: rgba(0,0,0,.1); }
[data-theme="light"] .dash-empty { color: rgba(0,0,0,.4); }

/* ═══════════════════════════════════════════════════════════════════
   Portal homepage layout (dashboard) — двухколоночный
   ═══════════════════════════════════════════════════════════════════ */

/* Жёсткая перезагрузка главной: резервируем полосу прокрутки, чтобы её
   появление (после дорисовки контента) не сдвигало вёрстку по горизонтали.
   Скоуп через :has — только когда показана главная, прочие страницы не трогаем.
   Прокручивается корневой элемент (документ), поэтому свойство на html. */
html:has(.portal-page[data-page="dashboard"]) { scrollbar-gutter: stable; }

.portal-page { padding: 1.25rem 1.5rem; }

.portal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .portal-grid { grid-template-columns: 1fr; }
}

.portal-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.portal-sidebar { display: flex; flex-direction: column; gap: 1rem; }

/* ─── Hero ─── */
.portal-hero {
    background: linear-gradient(135deg, rgba(34,85,238,.16), rgba(34,85,238,.04));
    border: 1px solid rgba(34,85,238,.25);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
}
.portal-hero-greeting {
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.01em;
}
/* Подзаголовок и дата — одной строкой: текст слева, дата справа,
   по общей базовой линии. На узком экране переносится. */
.portal-hero-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin-top: .35rem;
}
.portal-hero-sub {
    font-size: .88rem;
    color: rgba(255,255,255,.65);
    min-width: 0;
}
.portal-hero-date {
    font-size: .75rem;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
}

/* ─── Quick actions ─── */
/* minmax(0, 1fr), а не 1fr: подписи в плитках однострочные (nowrap +
   многоточие), их min-content распирал бы колонки и вылезал за контейнер. */
.portal-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
@media (max-width: 880px) {
    .portal-quick-actions { grid-template-columns: 1fr; }
}
/* Компактная плитка: иконка слева, справа название и подпись. */
.qa-card {
    position: relative;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: .6rem .75rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s, transform .15s;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.qa-card:hover {
    border-color: rgba(34,85,238,.4);
    background: rgba(34,85,238,.06);
    transform: translateY(-1px);
}
.qa-body { min-width: 0; flex: 1 1 auto; }
.qa-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: 0 0 auto;
}
.qa-icon-blue  { background: rgba(34,85,238,.18);  color: #6e9bff; }
.qa-icon-cyan  { background: rgba(34,211,238,.15); color: #67e8f9; }
.qa-icon-amber { background: rgba(245,158,11,.18); color: #fbbf24; }
.qa-icon-pink  { background: rgba(236,72,153,.16); color: #f472b6; }
.qa-label {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qa-desc {
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qa-soon {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .12rem .4rem;
    border-radius: 5px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.45);
}
/* Значок «откроется в новой вкладке» в углу плитки. */
.qa-ext {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: .72rem;
    color: rgba(255,255,255,.35);
}
.qa-card:hover .qa-ext { color: var(--ac-light); }
/* Плитка-заглушка: некликабельна и приглушена. */
.qa-disabled { cursor: default; opacity: .65; }
.qa-disabled:hover {
    transform: none;
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.09);
}

/* ─── Section headers ─── */
.portal-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .65rem;
}
.portal-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
}
.portal-section-soon {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .15rem .5rem;
    border-radius: 5px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.45);
}

/* ─── Объявления ─── */
.portal-announcements { display: flex; flex-direction: column; gap: .65rem; }
.ann-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 11px;
    padding: .9rem 1rem;
    display: flex;
    gap: .85rem;
}
.ann-badge {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: .4rem;
}
.ann-badge-green { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.ann-badge-blue  { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.ann-badge-amber { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.ann-body { flex: 1; min-width: 0; }
.ann-title { font-size: .87rem; font-weight: 600; color: #fff; margin-bottom: .2rem; }
.ann-text { font-size: .78rem; color: rgba(255,255,255,.6); line-height: 1.5; margin-bottom: .35rem; }
.ann-meta { font-size: .68rem; color: rgba(255,255,255,.35); }

/* ─── Tools grid ─── */
.portal-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
}
@media (max-width: 720px) {
    .portal-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
.tool-item {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    padding: .7rem .85rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color .15s, background .15s;
}
.tool-item:hover {
    border-color: rgba(34,85,238,.4);
    background: rgba(34,85,238,.05);
}
.tool-name { font-size: .82rem; font-weight: 600; color: #fff; margin-bottom: .15rem; }
.tool-hint { font-size: .68rem; color: rgba(255,255,255,.4); }
.tool-disabled { cursor: default; }
.tool-disabled:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }

/* ─── Sidebar profile card ─── */
.profile-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 1.1rem 1rem;
    text-align: center;
}
.profile-card-avatar { display: flex; justify-content: center; margin-bottom: .65rem; }
.profile-card-name { font-size: .98rem; font-weight: 700; color: #fff; }
.profile-card-role { font-size: .78rem; color: rgba(255,255,255,.6); margin-top: .15rem; }
.profile-card-dept { font-size: .7rem; color: rgba(255,255,255,.4); margin-top: .15rem; }

/* Баллы и ранг в карточке профиля — плашка-ссылка на рейтинги целиком.
   Раньше это был широкий баннер .rt-banner в основной колонке дашборда. */
.profile-points {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .85rem;
    padding: .55rem .65rem;
    border-radius: 10px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: var(--ac-dim);
    border: 1px solid var(--ac-border);
    transition: background .15s, border-color .15s;
}
.profile-points:hover {
    background: rgba(34,85,238,.22);
    border-color: rgba(34,85,238,.5);
    color: inherit;
}
.profile-points__icon { flex: 0 0 auto; font-size: 1.25rem; color: #FFD54A; line-height: 1; }
.profile-points__body { flex: 1 1 auto; min-width: 0; }
.profile-points__label {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255,255,255,.5);
}
.profile-points__value {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.profile-points__arrow { flex: 0 0 auto; font-size: .8rem; color: rgba(255,255,255,.4); }

/* ─── Sidebar sections ─── */
.sidebar-section {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: .85rem 1rem;
}
.sidebar-section-title {
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .65rem;
    display: flex;
    align-items: center;
}
.sidebar-sublabel {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.35);
    margin: .55rem 0 .35rem;
}
.sidebar-sublabel:first-of-type { margin-top: 0; }
.sidebar-emp-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem 0;
    border-top: 1px solid rgba(255,255,255,.05);
}
.sidebar-emp-row:first-of-type { border-top: none; padding-top: 0; }
/* Кликабельное имя+аватар → карточка профиля. Ссылка повторяет флекс-раскладку
   строки (аватар + инфо), бейдж остаётся вне ссылки. Ненавязчивый стиль:
   наследует цвет, акцент/подчёркивание только на hover. */
.sidebar-emp-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.sidebar-emp-link:hover .sidebar-emp-name {
    color: var(--ac);
    text-decoration: underline;
}
.sidebar-emp-info { flex: 1; min-width: 0; }
.sidebar-emp-name {
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-emp-meta {
    font-size: .68rem;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .1rem;
}
.sidebar-mini-badge {
    flex-shrink: 0;
    font-size: .65rem;
    font-weight: 600;
    padding: .2rem .45rem;
    border-radius: 6px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.6);
    white-space: nowrap;
}
.sidebar-mini-badge-today {
    background: rgba(245,158,11,.18);
    color: #fbbf24;
    font-size: .85rem;
    padding: .1rem .4rem;
}
.sidebar-mini-badge-new { background: rgba(16,185,129,.15); color: #34d399; }
.sidebar-emp-row-bday {
    background: rgba(245,158,11,.05);
    margin: .15rem -.55rem;
    padding: .45rem .55rem;
    border-radius: 8px;
    border-top: none;
}

/* ─── Tasks ─── */
.task-item {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .5rem 0;
    border-top: 1px solid rgba(255,255,255,.05);
}
.task-item:first-of-type { border-top: none; padding-top: .15rem; }
.task-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,.25);
    flex-shrink: 0;
    margin-top: .12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
}
.task-check-done { background: #10b981; border-color: #10b981; color: #fff; }
.task-text { font-size: .78rem; color: #fff; line-height: 1.35; }
.task-text-done { color: rgba(255,255,255,.4); text-decoration: line-through; }
.task-due { font-size: .65rem; color: rgba(255,255,255,.4); margin-top: .1rem; }
.task-due-done { color: #34d399; }
.task-due-warn { color: #fbbf24; }

/* ─── Светлая тема для portal ─── */
[data-theme="light"] .portal-hero {
    background: linear-gradient(135deg, rgba(0,0,187,.08), rgba(0,0,187,.02));
    border-color: rgba(0,0,187,.2);
}
[data-theme="light"] .portal-hero-greeting { color: var(--rc-black); }
[data-theme="light"] .portal-hero-sub      { color: rgba(0,0,0,.65); }
[data-theme="light"] .portal-hero-date     { color: rgba(0,0,0,.45); }

[data-theme="light"] .qa-card,
[data-theme="light"] .ann-card,
[data-theme="light"] .tool-item,
[data-theme="light"] .profile-card,
[data-theme="light"] .sidebar-section {
    background: #fff;
    border-color: rgba(0,0,0,.09);
}
[data-theme="light"] .qa-card:hover,
[data-theme="light"] .tool-item:hover {
    background: rgba(0,0,187,.03);
    border-color: rgba(0,0,187,.25);
}
[data-theme="light"] .qa-label,
[data-theme="light"] .ann-title,
[data-theme="light"] .tool-name,
[data-theme="light"] .profile-card-name,
[data-theme="light"] .sidebar-section-title,
[data-theme="light"] .sidebar-emp-name,
[data-theme="light"] .profile-points__value,
[data-theme="light"] .task-text,
[data-theme="light"] .portal-section-title { color: var(--rc-black); }

[data-theme="light"] .qa-desc          { color: rgba(0,0,0,.5); }
[data-theme="light"] .ann-text         { color: rgba(0,0,0,.6); }
[data-theme="light"] .ann-meta         { color: rgba(0,0,0,.4); }
[data-theme="light"] .tool-hint        { color: rgba(0,0,0,.45); }
[data-theme="light"] .profile-card-role { color: rgba(0,0,0,.6); }
[data-theme="light"] .profile-card-dept { color: rgba(0,0,0,.45); }
[data-theme="light"] .profile-points        { background: rgba(0,0,187,.05); border-color: rgba(0,0,187,.2); }
[data-theme="light"] .profile-points:hover  { background: rgba(0,0,187,.09); border-color: rgba(0,0,187,.35); }
[data-theme="light"] .profile-points__label { color: rgba(0,0,0,.5); }
[data-theme="light"] .profile-points__arrow { color: rgba(0,0,0,.4); }
[data-theme="light"] .profile-points__icon  { color: #d9a300; }
[data-theme="light"] .sidebar-sublabel  { color: rgba(0,0,0,.4); }
[data-theme="light"] .sidebar-emp-meta  { color: rgba(0,0,0,.5); }
[data-theme="light"] .sidebar-emp-row   { border-top-color: rgba(0,0,0,.06); }
[data-theme="light"] .sidebar-mini-badge { background: rgba(0,0,0,.05); color: rgba(0,0,0,.6); }
[data-theme="light"] .sidebar-mini-badge-today { background: rgba(245,158,11,.15); color: #b45309; }
[data-theme="light"] .sidebar-mini-badge-new { background: rgba(16,185,129,.12); color: #047857; }
[data-theme="light"] .sidebar-emp-row-bday { background: rgba(245,158,11,.06); }
[data-theme="light"] .qa-soon,
[data-theme="light"] .portal-section-soon { background: rgba(0,0,0,.05); color: rgba(0,0,0,.5); }
[data-theme="light"] .qa-ext { color: rgba(0,0,0,.35); }
[data-theme="light"] .qa-card:hover .qa-ext { color: var(--rc-blue); }
[data-theme="light"] .qa-disabled:hover {
    background: #fff;
    border-color: rgba(0,0,0,.09);
}
[data-theme="light"] .qa-icon-blue  { background: rgba(34,85,238,.12);  color: var(--rc-blue); }
[data-theme="light"] .qa-icon-cyan  { background: rgba(8,145,178,.12);  color: #0e7490; }
[data-theme="light"] .qa-icon-amber { background: rgba(245,158,11,.15); color: #b45309; }
[data-theme="light"] .qa-icon-pink  { background: rgba(236,72,153,.12); color: #be185d; }

[data-theme="light"] .task-check        { border-color: rgba(0,0,0,.25); }
[data-theme="light"] .task-text-done    { color: rgba(0,0,0,.4); }
[data-theme="light"] .task-due          { color: rgba(0,0,0,.5); }
[data-theme="light"] .task-item         { border-top-color: rgba(0,0,0,.06); }

/* ═══════════════════════════════════════════════════════════════════
   News (список, детальная, таблица управления, форма)
   ═══════════════════════════════════════════════════════════════════ */

.news-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}
.news-card {
    position: relative;
    display: block;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s, background .15s;
}
.news-card:hover {
    border-color: rgba(34,85,238,.4);
    background: rgba(34,85,238,.05);
    transform: translateY(-2px);
}
.news-pinned-badge {
    display: inline-flex;
    align-items: center;
    font-size: .65rem;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(245,158,11,.15);
    padding: .2rem .5rem;
    border-radius: 5px;
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.news-pinned-badge i { margin-right: .25rem; }
.news-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
.news-category {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .2rem .5rem;
    border-radius: 5px;
    background: rgba(34,85,238,.18);
    color: #6e9bff;
}
.news-category-hr     { background: rgba(16,185,129,.18); color: #34d399; }
.news-category-it     { background: rgba(59,130,246,.18); color: #60a5fa; }
.news-category-event  { background: rgba(245,158,11,.18); color: #fbbf24; }
.news-category-general { background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); }
.news-date {
    font-size: .7rem;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
}
.news-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .4rem;
    line-height: 1.3;
}
.news-card-preview {
    font-size: .82rem;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
    margin-bottom: .75rem;
}
.news-card-footer {
    font-size: .7rem;
    color: rgba(255,255,255,.4);
}

/* Детальная страница новости */
.news-detail {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.5rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
}
.news-detail-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.news-detail-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.25rem;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.news-detail-content {
    font-size: .95rem;
    color: rgba(255,255,255,.8);
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
}
/* Автоссылки (email/URL) в тексте новости — акцентный цвет, подчёркивание при
   наведении. Обе темы: цвет из --ac с фолбэком на фирменный синий. */
.news-detail-content a {
    color: var(--ac, #2255EE);
    text-decoration: none;
    word-break: break-word;
}
.news-detail-content a:hover {
    text-decoration: underline;
}
.news-detail-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.news-detail-author-name { font-size: .85rem; }
.news-detail-actions {
    margin-top: 1rem;
    display: flex;
    gap: .5rem;
}
.news-draft-badge {
    font-size: .65rem;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.07);
    padding: .2rem .5rem;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Таблица управления */
.news-manage-wrap {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    margin: 0 1.5rem;
    overflow: hidden;
}
.news-manage-table {
    width: 100%;
    border-collapse: collapse;
}
.news-manage-table thead th {
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.5);
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.news-manage-table tbody td {
    padding: .85rem 1rem;
    color: rgba(255,255,255,.8);
    font-size: .88rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    vertical-align: middle;
}
.news-manage-table tbody tr:last-child td { border-bottom: none; }
.news-manage-table tbody tr:hover { background: rgba(34,85,238,.05); }
.news-manage-title-link {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.news-manage-title-link:hover { color: #6e9bff; }
.news-status-pub {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 5px;
    background: rgba(16,185,129,.16);
    color: #34d399;
}
.news-status-draft {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 5px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.55);
}
.news-status-pending {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 5px;
    background: rgba(245,158,11,.16);
    color: #fbbf24;
}
.news-status-rejected {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 5px;
    background: rgba(220,38,38,.16);
    color: #f87171;
}
/* Причина отклонения в «Моих предложениях» — под заголовком новости */
.news-reject-reason {
    margin-top: .3rem;
    font-size: .76rem;
    color: #f87171;
}

/* ─── Очередь модерации новостей ─── */
.news-mod-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: .35rem;
    border-radius: 9px;
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    background: rgba(245,158,11,.9);
    color: #1a1a1a;
}
.news-mod-thumb {
    width: 48px;
    height: 34px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.news-mod-preview {
    margin-top: .25rem;
    font-size: .76rem;
    color: rgba(255,255,255,.45);
    max-width: 420px;
}
/* Кнопки решения — В ОДИН РЯД; раскрытая форма отклонения уходит вниз,
   «Опубликовать» остаётся на месте (align-items: flex-start). */
.news-mod-decision {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: flex-start;
}
.news-mod-btn {
    width: auto;
    padding: .35rem .8rem;
    font-size: .8rem;
    min-width: 148px;      /* одинаковая ширина с «Отклонить» (по самой широкой) */
    text-align: center;
    justify-content: center;
}
/* Триггер «Отклонить» — кнопочный вид в тон ряду (красный секондари) */
.news-mod-reject-toggle {
    display: inline-block;
    cursor: pointer;
    font-size: .8rem;
    padding: .35rem .8rem;
    min-width: 148px;      /* в ряд с «Опубликовать», одинаковая ширина */
    text-align: center;
    border: 1px solid rgba(220,38,38,.45);
    border-radius: 8px;
    color: #f87171;
    list-style: none;
    user-select: none;
    transition: background .12s;
    box-sizing: border-box;
}
.news-mod-reject-toggle:hover { background: rgba(220,38,38,.12); }
.news-mod-reject[open] .news-mod-reject-toggle { background: rgba(220,38,38,.12); }
.news-mod-reject-toggle::-webkit-details-marker { display: none; }
.news-mod-reject-form {
    margin-top: .4rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 220px;
}
.news-actions {
    display: flex;
    gap: .25rem;
    align-items: center;
}
.news-action {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.65);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
    text-decoration: none;
    padding: 0;
}
.news-action:hover {
    background: rgba(34,85,238,.18);
    color: #6e9bff;
}
.news-action-danger:hover { background: rgba(220,38,38,.18); color: #f87171; }

/* Пустое состояние новостей */
.news-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    color: rgba(255,255,255,.45);
}
.news-empty i { font-size: 3rem; display: block; margin-bottom: .75rem; }
.news-empty p { font-size: .9rem; }

/* ─── Светлая тема для news ─── */
[data-theme="light"] .news-card,
[data-theme="light"] .news-detail,
[data-theme="light"] .news-manage-wrap {
    background: #fff;
    border-color: rgba(0,0,0,.09);
}
[data-theme="light"] .news-card:hover {
    background: rgba(0,0,187,.03);
    border-color: rgba(0,0,187,.25);
}
[data-theme="light"] .news-card-title,
[data-theme="light"] .news-detail-title,
[data-theme="light"] .news-manage-title-link { color: var(--rc-black); }
[data-theme="light"] .news-card-preview,
[data-theme="light"] .news-detail-content { color: rgba(0,0,0,.7); }
[data-theme="light"] .news-card-footer,
[data-theme="light"] .news-detail-footer,
[data-theme="light"] .news-date { color: rgba(0,0,0,.45); }
[data-theme="light"] .news-manage-table thead th {
    color: rgba(0,0,0,.5);
    border-bottom-color: rgba(0,0,0,.1);
}
[data-theme="light"] .news-manage-table tbody td {
    color: rgba(0,0,0,.75);
    border-bottom-color: rgba(0,0,0,.06);
}
[data-theme="light"] .news-manage-table tbody tr:hover { background: rgba(0,0,187,.03); }
[data-theme="light"] .news-status-pub {
    background: rgba(16,185,129,.14);
    color: #047857;
}
[data-theme="light"] .news-status-draft {
    background: rgba(0,0,0,.06);
    color: rgba(0,0,0,.55);
}
[data-theme="light"] .news-status-pending {
    background: rgba(245,158,11,.14);
    color: #b45309;
}
[data-theme="light"] .news-status-rejected {
    background: rgba(220,38,38,.12);
    color: #b91c1c;
}
[data-theme="light"] .news-reject-reason { color: #b91c1c; }
[data-theme="light"] .news-mod-preview { color: rgba(0,0,0,.5); }
[data-theme="light"] .news-mod-reject-toggle {
    color: #b91c1c;
    border-color: rgba(185,28,28,.35);
}
[data-theme="light"] .news-mod-reject-toggle:hover,
[data-theme="light"] .news-mod-reject[open] .news-mod-reject-toggle {
    background: rgba(220,38,38,.08);
}

/* Блок модерации и причина отклонения на детальной странице новости */
.news-detail-moderation {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.news-detail-moderation-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255,255,255,.45);
    margin-bottom: .5rem;
}
.news-detail-reject {
    margin: .75rem 0 0;
    padding: .6rem .8rem;
    border-radius: 8px;
    background: rgba(220,38,38,.1);
    border: 1px solid rgba(220,38,38,.3);
    color: #f87171;
    font-size: .85rem;
}
[data-theme="light"] .news-detail-moderation { border-top-color: rgba(0,0,0,.1); }
[data-theme="light"] .news-detail-moderation-label { color: rgba(0,0,0,.45); }
[data-theme="light"] .news-detail-reject {
    background: rgba(220,38,38,.06);
    border-color: rgba(185,28,28,.25);
    color: #b91c1c;
}

/* Неактивная иконка действия (например, edit отклонённой в manage) */
.news-action--disabled {
    opacity: .35;
    cursor: not-allowed;
}
[data-theme="light"] .news-draft-badge {
    background: rgba(0,0,0,.06);
    color: rgba(0,0,0,.55);
}
[data-theme="light"] .news-pinned-badge {
    background: rgba(245,158,11,.14);
    color: #b45309;
}
[data-theme="light"] .news-category-hr     { background: rgba(16,185,129,.14); color: #047857; }
[data-theme="light"] .news-category-it     { background: rgba(59,130,246,.14); color: #1d4ed8; }
[data-theme="light"] .news-category-event  { background: rgba(245,158,11,.14); color: #b45309; }
[data-theme="light"] .news-category-general { background: rgba(0,0,0,.05); color: rgba(0,0,0,.6); }
[data-theme="light"] .news-category { background: rgba(34,85,238,.12); color: var(--rc-blue); }
[data-theme="light"] .news-action {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.1);
    color: rgba(0,0,0,.6);
}
[data-theme="light"] .news-action:hover {
    background: rgba(34,85,238,.1);
    color: var(--rc-blue);
}
[data-theme="light"] .news-action-danger:hover {
    background: rgba(220,38,38,.1);
    color: #b91c1c;
}
[data-theme="light"] .news-empty { color: rgba(0,0,0,.4); }
[data-theme="light"] .news-detail-footer { border-top-color: rgba(0,0,0,.08); }

/* ═══════════════════════════════════════════════════════════════════
   Employee profile page
   ═══════════════════════════════════════════════════════════════════ */

.profile-page { padding: 1.25rem 1.5rem; }
.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1100px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-main { display: flex; flex-direction: column; gap: 1.25rem; }
.profile-sidebar { display: flex; flex-direction: column; gap: 1rem; }

/* Hero card */
.profile-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    background: rgba(34,85,238,.1);
    border: 1px solid rgba(34,85,238,.25);
    border-radius: 14px;
}
.profile-hero-info { flex: 1; min-width: 0; }
.profile-hero-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 .3rem 0;
}
.profile-hero-title {
    font-size: .92rem;
    color: rgba(255,255,255,.7);
    margin-bottom: .6rem;
}
.profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.25rem;
    font-size: .8rem;
    color: rgba(255,255,255,.55);
}
.profile-hero-meta i { color: rgba(255,255,255,.4); }
.profile-email { color: #6e9bff; text-decoration: none; }
.profile-email:hover { text-decoration: underline; }
.profile-edit-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .7rem;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.profile-edit-btn:hover { background: rgba(34,85,238,.2); color: #fff; }

/* Sections */
.profile-section {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}
.profile-section-title {
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
}
.profile-section-title i { color: rgba(255,255,255,.5); }

/* Person cards (manager, reports) */
.profile-person-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .65rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.profile-person-card:hover { background: rgba(34,85,238,.08); }
.profile-person-mini { padding: .4rem .5rem; }
.profile-person-name { font-size: .85rem; font-weight: 600; color: #fff; }
.profile-person-title { font-size: .72rem; color: rgba(255,255,255,.5); }

/* Fields (проект, функционал, о себе) */
.profile-field { margin-bottom: .85rem; }
.profile-field:last-child { margin-bottom: 0; }
.profile-field-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.45);
    margin-bottom: .25rem;
}
.profile-field-value {
    font-size: .9rem;
    color: rgba(255,255,255,.85);
    line-height: 1.5;
    white-space: pre-wrap;
}
.profile-field-empty {
    font-size: .82rem;
    color: rgba(255,255,255,.35);
    font-style: italic;
}
.profile-field-empty a { color: #6e9bff; text-decoration: none; }
.profile-field-empty a:hover { text-decoration: underline; }

/* Sidebar cards */
.profile-sidebar-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: .85rem 1rem;
}
.profile-sidebar-title {
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
}
.profile-sidebar-title i { color: rgba(255,255,255,.5); }

/* Tags */
.profile-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.interest-badge {
    display: inline-block;
    font-size: .68rem;
    padding: .18rem .5rem;
    border-radius: 6px;
    background: rgba(168,85,247,.18);
    color: #c084fc;
    white-space: nowrap;
}

/* Mini org tree widget */
.mini-tree-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background .12s;
}
.mini-tree-card:hover { background: rgba(34,85,238,.08); }
.mini-tree-current {
    border: 1.5px solid rgba(34,85,238,.5);
    background: rgba(34,85,238,.08);
}
.mini-tree-name { font-size: .78rem; font-weight: 600; color: #fff; }
.mini-tree-title { font-size: .65rem; color: rgba(255,255,255,.45); }
.mini-tree-connector {
    text-align: center;
    color: rgba(255,255,255,.2);
    font-size: .65rem;
    line-height: 1;
    padding: .1rem 0;
}
.mini-tree-reports {
    border-left: 1px solid rgba(255,255,255,.1);
    margin-left: 1.5rem;
    padding-left: .5rem;
}

/* ─── Светлая тема для профиля ─── */
[data-theme="light"] .profile-hero {
    background: rgba(0,0,187,.06);
    border-color: rgba(0,0,187,.2);
}
[data-theme="light"] .profile-hero-name { color: var(--rc-black); }
[data-theme="light"] .profile-hero-title { color: rgba(0,0,0,.65); }
[data-theme="light"] .profile-hero-meta { color: rgba(0,0,0,.55); }
[data-theme="light"] .profile-hero-meta i { color: rgba(0,0,0,.4); }
[data-theme="light"] .profile-email { color: var(--rc-blue); }
[data-theme="light"] .profile-edit-btn {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.15);
    color: rgba(0,0,0,.65);
}
[data-theme="light"] .profile-section,
[data-theme="light"] .profile-sidebar-card {
    background: #fff;
    border-color: rgba(0,0,0,.09);
}
[data-theme="light"] .profile-section-title,
[data-theme="light"] .profile-sidebar-title,
[data-theme="light"] .profile-person-name,
[data-theme="light"] .mini-tree-name { color: var(--rc-black); }
[data-theme="light"] .profile-field-label { color: rgba(0,0,0,.5); }
[data-theme="light"] .profile-field-value { color: rgba(0,0,0,.8); }
[data-theme="light"] .profile-field-empty { color: rgba(0,0,0,.4); }
[data-theme="light"] .profile-field-empty a { color: var(--rc-blue); }
[data-theme="light"] .profile-person-title,
[data-theme="light"] .mini-tree-title { color: rgba(0,0,0,.5); }
[data-theme="light"] .profile-person-card:hover,
[data-theme="light"] .mini-tree-card:hover { background: rgba(0,0,187,.04); }
[data-theme="light"] .mini-tree-current {
    border-color: rgba(0,0,187,.35);
    background: rgba(0,0,187,.05);
}
[data-theme="light"] .mini-tree-connector { color: rgba(0,0,0,.2); }
[data-theme="light"] .mini-tree-reports { border-left-color: rgba(0,0,0,.1); }
[data-theme="light"] .interest-badge {
    background: rgba(168,85,247,.12);
    color: #7c3aed;
}

/* ═══════════════════════════════════════════════════════════════════
   Orgchart popup card
   ═══════════════════════════════════════════════════════════════════ */

.emp-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
}
.emp-popup {
    position: relative;
    background: #1c2033;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 1.5rem 1.75rem 1.25rem;
    min-width: 340px;
    max-width: 420px;
    box-shadow: 0 12px 48px rgba(0,0,0,.6);
    cursor: pointer;
    color: #fff;
    will-change: transform, opacity;
}
.emp-popup-close {
    position: absolute;
    top: .65rem;
    right: .75rem;
    background: none;
    border: none;
    color: rgba(255,255,255,.45);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: .15rem .35rem;
    border-radius: 6px;
    transition: background .12s, color .12s;
}
.emp-popup-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.emp-popup-name { font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.emp-popup-sub  { font-size: .82rem; color: rgba(255,255,255,.6); margin-top: .15rem; }
.emp-popup-email { font-size: .75rem; color: rgba(255,255,255,.4); margin-top: .1rem; }
.emp-popup-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.4);
    margin-bottom: .2rem;
}
.emp-popup-value {
    font-size: .85rem;
    color: rgba(255,255,255,.8);
    line-height: 1.4;
    white-space: pre-wrap;
    max-height: 4.2em;
    overflow: hidden;
}
.emp-popup-mgr-name { font-size: .82rem; font-weight: 600; }
.emp-popup-mgr-title { font-size: .7rem; color: rgba(255,255,255,.5); }
.emp-popup-hint {
    text-align: center;
    font-size: .65rem;
    color: rgba(255,255,255,.3);
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* ─── Светлая тема ─── */
[data-theme="light"] .emp-popup {
    background: #fff;
    border-color: rgba(0,0,0,.1);
    color: var(--rc-black);
    box-shadow: 0 12px 48px rgba(0,0,0,.2);
}
[data-theme="light"] .emp-popup-close { color: rgba(0,0,0,.4); }
[data-theme="light"] .emp-popup-close:hover { background: rgba(0,0,0,.06); color: var(--rc-black); }
[data-theme="light"] .emp-popup-name { color: var(--rc-black); }
[data-theme="light"] .emp-popup-sub  { color: rgba(0,0,0,.6); }
[data-theme="light"] .emp-popup-email { color: rgba(0,0,0,.45); }
[data-theme="light"] .emp-popup-label { color: rgba(0,0,0,.45); }
[data-theme="light"] .emp-popup-value { color: rgba(0,0,0,.75); }
[data-theme="light"] .emp-popup-mgr-name { color: var(--rc-black); }
[data-theme="light"] .emp-popup-mgr-title { color: rgba(0,0,0,.5); }
[data-theme="light"] .emp-popup-hint { color: rgba(0,0,0,.35); border-top-color: rgba(0,0,0,.08); }

/* ─── Drag-and-drop сайдбара ───────────────────────────────────── */
.nav-reorderable .nav-link-item {
    position: relative;
}
/* Ручка перетаскивания: появляется при hover, слева */
.drag-handle {
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    margin-right: .15rem;
    color: rgba(255,255,255,.35);
    cursor: grab;
    font-size: .9rem;
    transition: opacity .15s;
}
.nav-link-item:hover .drag-handle { opacity: 1; }
.drag-handle:active { cursor: grabbing; }
[data-theme="light"] .drag-handle { color: rgba(0,0,0,.35); }

/* Состояния drag */
.nav-reorderable .nav-link-item.is-dragging {
    opacity: .35;
}
.nav-reorderable .nav-link-item.drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--ac, #2255EE);
}
.nav-reorderable .nav-link-item.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--ac, #2255EE);
}

/* Sprint H: закреплённые сверху пункты «Главная» и «Орг. структура»
   не перетаскиваются. Прячем grip-handle и выключаем drag-курсор. */
.nav-item--pinned { cursor: default; }
.nav-item--pinned [data-drag-handle],
.nav-item--pinned .drag-handle { display: none; }
.nav-link-item.nav-item--pinned:hover .drag-handle { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════
   Service Desk — badge-классы для статусов и приоритетов
   ═══════════════════════════════════════════════════════════════ */
.ts-badge, .tp-badge {
    display: inline-block;
    padding: .15em .55em;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: .02em;
}
.ts-new       { background: var(--ac-dim); color: var(--ac); }
.ts-in_progress { background: rgba(255,193,7,.18); color: #b8860b; }
.ts-resolved  { background: rgba(25,135,84,.15); color: #198754; }
.ts-closed    { background: rgba(108,117,125,.15); color: #6c757d; }
.tp-low       { background: rgba(25,135,84,.12); color: #198754; }
.tp-medium    { background: rgba(255,193,7,.15); color: #b8860b; }
.tp-high      { background: rgba(220,53,69,.15); color: #dc3545; }

[data-theme="dark"] .ts-new       { background: rgba(34,85,238,.2); color: #6ea8fe; }
[data-theme="dark"] .ts-in_progress { background: rgba(255,193,7,.15); color: #ffc107; }
[data-theme="dark"] .ts-resolved  { background: rgba(25,135,84,.2); color: #75b798; }
[data-theme="dark"] .ts-closed    { background: rgba(108,117,125,.2); color: #adb5bd; }
[data-theme="dark"] .tp-low       { background: rgba(25,135,84,.15); color: #75b798; }
[data-theme="dark"] .tp-medium    { background: rgba(255,193,7,.12); color: #ffc107; }
[data-theme="dark"] .tp-high      { background: rgba(220,53,69,.2); color: #ea868f; }

/* ═══════════════════════════════════════════════════════════════════
   Service Desk — страница обращения и список (переработка целиком)

   ЦВЕТА. Ни одного нового hex/rgb: весь набор поверхностей выведен
   из палитры проекта (--rc-light, --rc-grey, --rc-black, --rc-blue,
   --rc-navy, --ac, --ac-light) через color-mix. Токены объявлены на
   :root и переопределены в светлой теме — их видят и лента, и панель
   файлов, и попапы (модалки живут вне .page-content, поэтому объявлять
   токены на самой ленте, как было раньше, нельзя).

   КРАЯ ЛЕНТЫ. Никаких overlay-приёмов: ни ::before/::after со sticky/
   fixed, ни mask-image, ни градиентных затуханий. Отступ у краёв — это
   обычный padding, а кастомный скроллбар ОБЯЗАН объявлять и трек:
   объявленный ::-webkit-scrollbar без ::-webkit-scrollbar-track
   включает в Chromium отрисовку дефолтного серого трека — именно он
   читался «серой полосой» у края ленты (в Safari её не было, потому
   что там работает scrollbar-width).
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Тёмная тема (базовая): поверхности — светлая палитра с малым альфа. */
    --tk-area-bg:      transparent;
    --tk-card-bg:      color-mix(in srgb, var(--rc-light)  6%, transparent);
    --tk-card-bg-2:    color-mix(in srgb, var(--rc-light) 10%, transparent);
    --tk-card-border:  color-mix(in srgb, var(--rc-light) 12%, transparent);
    --tk-text:         color-mix(in srgb, var(--rc-light) 92%, transparent);
    --tk-muted:        color-mix(in srgb, var(--rc-light) 58%, transparent);
    --tk-faint:        color-mix(in srgb, var(--rc-light) 42%, transparent);
    --tk-hover:        color-mix(in srgb, var(--rc-light)  9%, transparent);
    --tk-out-bg:       color-mix(in srgb, var(--ac) 28%, transparent);
    --tk-out-border:   color-mix(in srgb, var(--ac) 44%, transparent);
    --tk-out-text:     var(--ac-light);
    --tk-out-muted:    color-mix(in srgb, var(--ac-light) 62%, transparent);
    --tk-chip-bg:      color-mix(in srgb, var(--rc-light) 10%, transparent);
    --tk-chip-hover:   color-mix(in srgb, var(--rc-light) 17%, transparent);
    --tk-chip-border:  color-mix(in srgb, var(--rc-light) 12%, transparent);
    --tk-chip-text:    var(--ac-light);
    --tk-thumb:        color-mix(in srgb, var(--rc-light) 20%, transparent);

    /* Подсветка пузыря при переходе из панели файлов — ЕДИНАЯ точка правки:
       и оформление, и длительность. Длительность отсюда же читает
       ticket-live.js (flashDurationMs), поэтому таймер снятия класса не может
       разъехаться с анимацией.

       На тёмной теме пузырь почти чёрный (--tk-card-bg — светлое с 6% альфы), и
       синий контур с малой альфой (--ac-dim/--ac-border) на нём не читался.
       Берём светлый акцент палитры: на тёмном фоне он контрастен, и на своём
       (синеватом) пузыре тоже. */
    --tk-flash-color:  var(--ac-light);
    --tk-flash-glow:   color-mix(in srgb, var(--ac-light) 40%, transparent);
    --tk-flash-ring:   3px;
    --tk-flash-dur:    2.8s;
}

[data-theme="light"] {
    /* Светлая тема: фон страницы — var(--rc-grey), светлее него в палитре
       ничего нет. Поэтому рабочую область слегка тонируем голубым, а
       карточки/пузыри оставляем на --rc-grey — они читаются приподнятыми. */
    --tk-area-bg:      color-mix(in srgb, var(--rc-light) 34%, var(--rc-grey));
    --tk-card-bg:      var(--rc-grey);
    --tk-card-bg-2:    color-mix(in srgb, var(--rc-light) 22%, var(--rc-grey));
    --tk-card-border:  color-mix(in srgb, var(--rc-blue) 14%, transparent);
    --tk-text:         var(--rc-black);
    --tk-muted:        color-mix(in srgb, var(--rc-black) 55%, transparent);
    --tk-faint:        color-mix(in srgb, var(--rc-black) 38%, transparent);
    --tk-hover:        color-mix(in srgb, var(--ac) 9%, transparent);
    --tk-out-bg:       color-mix(in srgb, var(--ac) 18%, var(--rc-grey));
    --tk-out-border:   color-mix(in srgb, var(--ac) 34%, transparent);
    --tk-out-text:     var(--rc-black);
    --tk-out-muted:    color-mix(in srgb, var(--rc-navy) 58%, transparent);
    --tk-chip-bg:      color-mix(in srgb, var(--ac) 10%, transparent);
    --tk-chip-hover:   color-mix(in srgb, var(--ac) 18%, transparent);
    --tk-chip-border:  color-mix(in srgb, var(--ac) 20%, transparent);
    --tk-chip-text:    var(--rc-blue);
    --tk-thumb:        color-mix(in srgb, var(--rc-black) 20%, transparent);

    /* На светлой теме пузырь — почти белый (--rc-grey), и светлый акцент на нём
       пропал бы. Контур берём насыщенный синий. Длительность и толщина общие
       для обеих тем, поэтому переопределяем только цвет. */
    --tk-flash-color:  var(--ac);
    --tk-flash-glow:   color-mix(in srgb, var(--ac) 40%, transparent);
}

/* ─── Карточка обращения в списке ──────────────────────────────────── */
.ticket-card {
    position: relative;
    display: block;
    padding: .85rem 1rem;
    border-radius: 10px;
    background: var(--tk-card-bg);
    border: 1px solid var(--tk-card-border);
    text-decoration: none;
    color: inherit;
    transition: background .15s, border-color .15s;
    margin-bottom: .5rem;
}
.ticket-card:hover {
    background: var(--tk-hover);
    border-color: var(--ac-border);
}
.ticket-card-subject {
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: .3rem;
    color: var(--tk-text);
}
.ticket-card-meta {
    font-size: .75rem;
    color: var(--tk-muted);
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}
/* Признак нового ответа — точка у правого верхнего угла карточки.
   Ставит/снимает живой опрос списка (tickets-list-live.js), сравнивая
   последнее прочитанное сообщение с последним пришедшим. */
.ticket-card__new {
    position: absolute;
    top: .7rem;
    right: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--ac);
}
.ticket-card__new::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ac);
}
.ticket-card__new[hidden] { display: none; }

/* ─── Раскладка страницы обращения ─────────────────────────────────
   Страница заперта по высоте вьюпорта: прокручивается ТОЛЬКО лента.
   Скоуп через :has(.ticket-chat) — чтобы не задеть остальные страницы. */
.app-main:has(.ticket-chat) {
    height: 100vh;
    height: 100dvh;   /* видимый вьюпорт мобильного, без скачков адресной строки */
    min-height: 0;
    overflow: hidden;
}
.ticket-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1rem 1.25rem 1.1rem;
    background: var(--tk-area-bg);
}
/* Две колонки: слева переписка (не меньше 75% ширины), справа файлы. */
.ticket-layout {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}
.ticket-col-chat {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ticket-col-chat > #ticketActions { flex: 0 0 auto; }
/* Обёртка ленты: растёт по содержимому, сжимается при нехватке места.
   position:relative — якорь для указателя «новое сообщение». */
.ticket-chat .ticket-feed-wrap {
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Лента — собственная область прокрутки. Отступы у краёв — обычный
   padding, никаких наложений. */
.ticket-chat #ticketFeed {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .25rem .5rem 0 .1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--tk-thumb) transparent;
}
/* Кастомный скроллбар Chromium. ТРЕК ОБЪЯВЛЕН ЯВНО И ПРОЗРАЧЕН —
   без этого правила Chromium рисует свой серый трек во всю высоту
   ленты (та самая «полоса у края», невидимая в Safari). */
.ticket-chat #ticketFeed::-webkit-scrollbar { width: 8px; }
.ticket-chat #ticketFeed::-webkit-scrollbar-track { background: transparent; }
.ticket-chat #ticketFeed::-webkit-scrollbar-thumb {
    background: var(--tk-thumb);
    border-radius: 4px;
}
/* Закреплённый низ колонки: форма ответа / баннер закрытого обращения. */
.ticket-col-chat > .ticket-reply { flex: 0 0 auto; }

/* ─── Лента сообщений ──────────────────────────────────────────────── */
.ticket-feed {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ticket-msg {
    display: flex;
    /* Аватар по ВЕРХУ содержимого — по строке с именем автора. */
    align-items: flex-start;
    gap: .5rem;
    max-width: 100%;
}
/* Сотрудник портала — правый край, сторона поддержки (Трекер) — левый. */
.ticket-msg--portal  { flex-direction: row-reverse; }
.ticket-msg--support { flex-direction: row; }

.ticket-msg__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
}
.ticket-msg__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ticket-msg__initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ac-dim);
    color: var(--ac);
    text-transform: uppercase;
}
.ticket-msg__gear {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tk-chip-bg);
    color: var(--tk-chip-text);
    font-size: .9rem;
}

/* Колонка содержимого ограничивает ширину пузыря. */
.ticket-msg__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: min(74%, 560px);
}
.ticket-msg--portal  .ticket-msg__content { align-items: flex-end; }
.ticket-msg--support .ticket-msg__content { align-items: flex-start; }

/* Шапка пузыря — только имя автора (у первого сообщения группы). */
.ticket-msg__head {
    display: flex;
    align-items: baseline;
    margin: 0 .15rem .15rem;
    line-height: 1.2;
}
.ticket-msg-author {
    font-weight: 600;
    font-size: .74rem;
    color: var(--tk-muted);
}

/* Пузырь: текст → вложения → время внизу (порядок задаёт разметка,
   одинаково в шаблоне и в ticket-live.js). */
.ticket-msg-body {
    max-width: 100%;
    padding: .5rem .75rem;
    border-radius: 12px;
    font-size: .88rem;
    line-height: 1.4;
    background: var(--tk-card-bg);
    border: 1px solid var(--tk-card-border);
    color: var(--tk-text);
}
.ticket-msg-body__text {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: inherit;
}
.ticket-msg-body__time {
    display: block;
    margin-top: .3rem;
    font-size: .62rem;
    line-height: 1;
    text-align: right;
    color: var(--tk-faint);
}
/* Своё сообщение — акцентный пузырь, угол у аватара срезан. */
.ticket-msg--portal .ticket-msg-body {
    background: var(--tk-out-bg);
    border-color: var(--tk-out-border);
    color: var(--tk-out-text);
    border-bottom-right-radius: 4px;
}
.ticket-msg--portal .ticket-msg-body__time { color: var(--tk-out-muted); }
.ticket-msg--support .ticket-msg-body { border-bottom-left-radius: 4px; }

/* Группировка: у не-первого сообщения группы аватар скрыт (место
   сохранено), шапки нет — остаётся только пузырь. */
.ticket-msg--grouped .ticket-msg__avatar { visibility: hidden; }
.ticket-msg--grouped .ticket-msg__head   { display: none; }

/* Подсветка пузыря при переходе из панели файлов.

   Только box-shadow: рамка рисуется ВНЕ потока, поэтому текст ничем не
   перекрывается, а размеры пузыря не меняются — раскладку не дёргает.
   Контур держится видимым большую часть времени и гаснет к концу: цвет,
   толщина и длительность — из переменных выше (одна точка правки, разные темы
   переопределяют только цвет). */
@keyframes ticketMsgFlash {
    0%   { box-shadow: 0 0 0 0 transparent; }
    10%  { box-shadow: 0 0 0 var(--tk-flash-ring) var(--tk-flash-color),
                       0 0 14px 2px var(--tk-flash-glow); }
    65%  { box-shadow: 0 0 0 var(--tk-flash-ring) var(--tk-flash-color),
                       0 0 14px 2px var(--tk-flash-glow); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.ticket-msg--flash .ticket-msg-body {
    animation: ticketMsgFlash var(--tk-flash-dur) ease-out;
}

/* Мягкое появление сообщения, дописанного живым обновлением. */
@keyframes ticketMsgAppear {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ticket-msg--appear { animation: ticketMsgAppear .28s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .ticket-msg--appear { animation: none; }
    /* Анимацию не проигрываем, но сообщение всё равно надо ВЫДЕЛИТЬ: иначе
       переход из панели файлов заканчивался бы ничем. Ставим тот же контур
       статично — класс снимет тот же таймер, и подсветка так же погаснет. */
    .ticket-msg--flash .ticket-msg-body {
        animation: none;
        box-shadow: 0 0 0 var(--tk-flash-ring) var(--tk-flash-color);
    }
}

/* ─── Вложения внутри пузыря ───────────────────────────────────────── */
.ticket-msg__attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .3rem;
    margin-top: .4rem;
    max-width: 100%;
}
/* Если текста нет, вложение стоит первым — верхний отступ не нужен. */
.ticket-msg-body .ticket-msg__attachments:first-child { margin-top: 0; }

/* Чип неграфического вложения (в т.ч. SVG и исполняемые — они НИКОГДА
   не показываются превью, только скачивание). */
.ticket-attachment {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 6px;
    background: var(--tk-chip-bg);
    border: 1px solid var(--tk-chip-border);
    color: var(--tk-chip-text);
    font-size: .75rem;
    text-decoration: none;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.ticket-attachment:hover {
    background: var(--tk-chip-hover);
    color: var(--tk-chip-text);
}

/* Компактная превью-миниатюра картинки. Обёртка обнимает картинку
   (width:fit-content) и обрезает всё за скруглением, поэтому пустых
   отрезов фона у краёв нет. max-width — только АБСОЛЮТНАЯ длина: с
   процентом intrinsic-ширина обёртки считается без ограничения и
   справа остаётся полоса фона пузыря. */
.ticket-attachment-image {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    line-height: 0;
    border-radius: 10px;
    border: 1px solid var(--tk-card-border);
    cursor: zoom-in;
    transition: border-color .15s, filter .15s;
}
.ticket-attachment-image:hover {
    border-color: var(--ac-border);
    filter: brightness(1.05);
}
.ticket-attachment-image img {
    display: block;
    max-width: 240px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ─── Правая панель «Приложенные файлы» ────────────────────────────── */
.ticket-files {
    flex: 0 0 24%;
    min-width: 190px;
    max-width: 320px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: .75rem .8rem;
    border-radius: 12px;
    background: var(--tk-card-bg);
    border: 1px solid var(--tk-card-border);
}
/* Заголовок панели отделён от списка И линией, И собственной подложкой:
   отрицательные поля растягивают его на всю ширину панели поверх её
   внутренних отступов, поэтому разделитель идёт от края до края. Обычная
   граница и фон — никаких наложений поверх области прокрутки. */
.ticket-files__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: -.75rem -.8rem .6rem;
    padding: .5rem .8rem;
    border-bottom: 1px solid var(--tk-card-border);
    border-radius: 12px 12px 0 0;
    background: var(--tk-card-bg-2);
    font-size: .78rem;
    font-weight: 600;
    color: var(--tk-chip-text);
}
.ticket-files__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    scrollbar-width: thin;
    scrollbar-color: var(--tk-thumb) transparent;
}
.ticket-files__list::-webkit-scrollbar { width: 8px; }
.ticket-files__list::-webkit-scrollbar-track { background: transparent; }
.ticket-files__list::-webkit-scrollbar-thumb {
    background: var(--tk-thumb);
    border-radius: 4px;
}
/* Только имена файлов, без превью. Сторона повторяет сторону в чате:
   файлы из Трекера прижаты влево, файлы сотрудника — вправо. */
.ticket-files__item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    max-width: 92%;
    padding: .35rem .55rem;
    border: 1px solid var(--tk-chip-border);
    border-radius: 8px;
    background: var(--tk-chip-bg);
    color: var(--tk-chip-text);
    font: inherit;
    font-size: .75rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ticket-files__item:hover {
    background: var(--tk-chip-hover);
    border-color: var(--ac-border);
}
.ticket-files__item--tracker { align-self: flex-start; }
.ticket-files__item--local   { align-self: flex-end; text-align: right; }
.ticket-files__name {
    display: block;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
/* Строка метаданных файла: только время сообщения, к которому файл приложен
   (размер не показываем). Приглушено так же, как время в переписке. */
.ticket-files__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem;
    font-size: .66rem;
    color: var(--tk-muted);
}
.ticket-files__item--local .ticket-files__meta { justify-content: flex-end; }
.ticket-files__time { color: var(--tk-faint); }
.ticket-files__empty {
    font-size: .75rem;
    color: var(--tk-faint);
    padding: .3rem .1rem;
}
.ticket-files__empty[hidden] { display: none; }

/* Компактная иконка «Вложения» в шапке — открывает попап со списком.
   На широком экране не нужна: список виден в правой панели. */
.ticket-files-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: auto;
    min-width: 34px;
    height: 34px;
    padding: 0 .5rem;
    margin-left: auto;
    border: 1px solid var(--tk-card-border);
    border-radius: 999px;
    background: var(--tk-card-bg);
    color: var(--tk-muted);
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ticket-files-trigger:hover {
    background: var(--tk-hover);
    border-color: var(--ac-border);
    color: var(--ac);
}
.ticket-files-trigger > .bi {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.ticket-files-trigger > .bi::before { vertical-align: 0; line-height: 1; }
.ticket-files-trigger__count {
    font-size: .7rem;
    font-weight: 600;
    color: var(--ac);
}
.ticket-files-trigger__count:empty { display: none; }

/* Список файлов в попапе: те же элементы, высота ограничена диалогом. */
.modal .ticket-files__list { max-height: 60vh; }

/* ─── Шапка обращения ──────────────────────────────────────────────── */
.ticket-head { min-width: 0; }
.ticket-head__title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.05rem;
    min-width: 0;
}
.ticket-head__back {
    color: var(--ac);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.ticket-head__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
    font-size: .8rem;
}
/* Факты шапки (департамент, автор) — БЕЗ зашитого белого инлайна:
   на светлой теме он давал белый текст на белом фоне. */
.ticket-head__fact {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--tk-muted);
}

/* Иконка часов → попап истории. */
.ticket-history-trigger {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--tk-muted);
    font-size: inherit;
    cursor: pointer;
}
.ticket-history-trigger:hover { color: var(--ac); }

/* Список истории в попапе. */
.ticket-history-list {
    display: flex;
    flex-direction: column;
}
.ticket-history-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .8rem;
    color: var(--tk-muted);
    padding: .4rem 0;
    border-bottom: 1px solid var(--tk-card-border);
}
.ticket-history-item:last-child { border-bottom: none; }
.ticket-history-item__who { color: var(--tk-text); font-weight: 500; }
.ticket-history-item__time { flex: 0 0 auto; color: var(--tk-faint); font-size: .72rem; }
.ticket-history-empty { color: var(--tk-faint); font-size: .85rem; margin: 0; text-align: center; }

/* Компактная иконка переоткрытия в строке статуса. В палитре проекта
   красного нет — берём акцент (ближайшая подходящая переменная). */
.ticket-reopen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 1.5em;
    height: 1.5em;
    border: none;
    background: none;
    color: var(--ac);
    font-size: inherit;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}
.ticket-reopen-btn:hover { background: var(--ac-dim); }
.ticket-reopen-btn[hidden] { display: none; }
/* Панель действий живой опрос прячет атрибутом hidden; у контейнера
   класс .d-flex (display:flex!important), поэтому нужен оверрайд. */
#ticketActions[hidden] { display: none !important; }

/* Бейдж обращений в сайдбаре живёт в разметке всегда, чтобы живой опрос
   списка обновлял его без создания узлов. При нуле он помечен hidden, но у
   бутстраповского .badge есть display:inline-block — правила браузера для
   [hidden] ему уступают, поэтому прячем явно (иначе виден пустой кружок). */
#navTicketsBadge[hidden] { display: none !important; }

/* Обязательное поле в диалоге переоткрытия. */
.ticket-required-mark { color: var(--ac); }
.ticket-form-hint { font-size: .76rem; color: var(--tk-muted); }

/* Кнопки в попапах обращения. Раньше их цвета были зашиты инлайном и на
   светлой теме не перекрашивались: модалки лежат вне .page-content, куда
   заскоуплена общая перекраска inline-стилей. */
.ticket-modal-btn {
    border: 1px solid var(--tk-card-border);
    border-radius: 8px;
    padding: .4rem .9rem;
    font-size: .85rem;
    background: var(--tk-card-bg);
    color: var(--tk-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ticket-modal-btn:hover {
    background: var(--tk-hover);
    border-color: var(--ac-border);
    color: var(--tk-text);
}
.ticket-modal-btn--primary {
    background: var(--ac);
    border-color: var(--ac);
    color: var(--ac-light);
}
.ticket-modal-btn--primary:hover {
    background: var(--ac);
    border-color: var(--ac);
    color: var(--ac-light);
    filter: brightness(1.1);
}

/* ─── Указатель «новое сообщение» и ошибка отправки ────────────────── */
.ticket-newmsg-pill {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .95rem;
    border: 1px solid var(--tk-out-border);
    border-radius: 999px;
    background: var(--ac);
    color: var(--ac-light);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}
.ticket-newmsg-pill:hover { filter: brightness(1.1); }
.ticket-newmsg-pill[hidden] { display: none; }
/* Каретка «вниз» — чистый CSS-треугольник, без иконочного глифа. */
.ticket-newmsg-pill::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

/* Ненавязчивое сообщение об ошибке асинхронной отправки. */
.ticket-reply-error {
    margin-top: .5rem;
    padding: .35rem .6rem;
    border-left: 2px solid var(--ac);
    border-radius: 4px;
    background: var(--ac-dim);
    font-size: .78rem;
    color: var(--tk-chip-text);
}
.ticket-reply-error:empty { display: none; }

/* Подсказка «обращение отправляется в Трекер» на месте кнопок статуса.
   Ненавязчиво: та же полоса отступов, что у панели действий, приглушённый
   текст и иконка из акцента. Прячется атрибутом hidden — правило ниже нужно
   потому, что элемент флексовый. */
.ticket-queued-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
    font-size: .78rem;
    color: var(--tk-muted);
}
.ticket-queued-note[hidden] { display: none; }
.ticket-queued-note .bi { color: var(--ac); }

/* Баннер закрытого обращения вместо формы ответа. */
.ticket-closed-note {
    text-align: center;
    padding: .9rem 0;
    font-size: .85rem;
    color: var(--tk-faint);
}

/* ─── Поле ввода (композер) ────────────────────────────────────────── */
.ticket-reply.ticket-composer { padding-top: .7rem; }
.ticket-composer__form { margin: 0; }
/* align-items:flex-end — скрепка и кнопка отправки прижаты к НИЗУ,
   поэтому при росте поля кнопка остаётся у нижнего края. */
.ticket-composer__row {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    padding: .3rem .4rem;
    border: 1px solid var(--tk-card-border);
    border-radius: 18px;
    background: var(--tk-card-bg);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.ticket-composer__row:focus-within { border-color: var(--ac-border); }
.ticket-composer.is-dragover .ticket-composer__row {
    border-color: var(--ac);
    background: var(--ac-dim);
    box-shadow: 0 0 0 3px var(--ac-dim);
}

/* Скрепка — label с натуральным открытием системного диалога.
   БЕЗ фильтра по типам: любой формат. */
.ticket-composer__attach {
    flex: 0 0 auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 50%;
    color: var(--tk-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ticket-composer__attach:hover { background: var(--tk-hover); color: var(--ac); }
/* Нативный input прячем — открытие идёт кликом по label-скрепке. */
.ticket-composer__file {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Поле ввода: одна строка, растёт до 3 строк, дальше внутренний скролл
   (высоту задаёт autoGrow в ticket-live.js по этому max-height). */
.ticket-composer__input {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    color: var(--tk-text);
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.4;
    padding: .35rem .15rem;
    max-height: calc(1.4em * 3 + .7rem);
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--tk-thumb) transparent;
}
.ticket-composer__input::placeholder { color: var(--tk-faint); }

/* Кнопка отправки — акцентный круг в правом нижнем углу поля. */
.ticket-composer__send {
    flex: 0 0 auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ac);
    color: var(--ac-light);
    font-size: 1rem;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
}
.ticket-composer__send:hover:not(:disabled) { filter: brightness(1.1); }
.ticket-composer__send:disabled { opacity: .4; cursor: default; }

/* Глиф Bootstrap Icons смещён базовой линией (vertical-align:-.125em у
   .bi::before) и внутри круглой кнопки вставал ниже центра. Делаем сам
   <i> флекс-контейнером: к флекс-элементу vertical-align не применяется,
   и глиф центрируется точно. */
.ticket-composer__attach > .bi,
.ticket-composer__send > .bi {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 1 1 auto;
    line-height: 1;
}
.ticket-composer__attach > .bi::before,
.ticket-composer__send > .bi::before {
    vertical-align: 0;
    line-height: 1;
}

/* Выбранные, но ещё не отправленные файлы. Разметку строит общий компонент
   загрузки (rc-file-upload.buildFileItem), поэтому изображение показывается
   плиткой с превью, а документ — строкой с иконкой: ровно так же, как в
   остальных формах портала. Стили элементов и их токены приходят оттуда же
   (.rc-file__list в rc-file-upload.css), здесь только поведение контейнера. */
.ticket-composer__files:not(:empty) { margin-top: .5rem; }

/* Высота ОГРАНИЧЕНА, а не задана: несколько вложений не должны выдавливать
   поле ввода за край экрана и не должны возвращать прокрутку всей страницы —
   список прокручивается внутри себя, как и лента переписки. Скроллбар тихий,
   теми же токенами, что у ленты и панели файлов. */
.ticket-composer__files {
    max-height: 11.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tk-thumb) transparent;
}
.ticket-composer__files::-webkit-scrollbar { width: 8px; }
.ticket-composer__files::-webkit-scrollbar-track { background: transparent; }
.ticket-composer__files::-webkit-scrollbar-thumb {
    background: var(--tk-thumb);
    border-radius: 4px;
}

/* Отступ ленты снизу отделяет последнее сообщение от закреплённой формы. */
.ticket-chat #ticketFeed { padding-bottom: .85rem; }

/* ─── Адаптив ──────────────────────────────────────────────────────
   Узкий экран/планшет: правая панель сворачивается в иконку «Вложения»
   в шапке, попап показывает тот же список. Чат — на всю ширину. */
@media (max-width: 1199.98px) {
    .ticket-files { display: none; }
    .ticket-files-trigger { display: inline-flex; }
}
@media (max-width: 767.98px) {
    .ticket-chat { padding: .75rem .8rem .85rem; }
    .ticket-msg__content { max-width: 84%; }
    .ticket-attachment-image img { max-width: 190px; max-height: 150px; }
    .ticket-composer__row { padding: .25rem .3rem; gap: .25rem; }
    .ticket-composer__attach,
    .ticket-composer__send { width: 32px; height: 32px; }
    .ticket-head__title { font-size: .95rem; }
    .ticket-head__meta { gap: .35rem; font-size: .74rem; }
    /* Длинная тема не выдавливает иконку вложений и колокольчик за край. */
    .ticket-head__title > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media (max-width: 479.98px) {
    .ticket-chat { padding: .6rem .55rem .7rem; }
    .ticket-msg__content { max-width: 88%; }
    .ticket-msg__avatar { width: 28px; height: 28px; }
    .ticket-attachment-image img { max-width: 160px; max-height: 130px; }
}

/* ─── Отчёты — SLA-бейджи ─── */
.sla-met      { display:inline-block; padding:.15em .5em; border-radius:6px; font-size:.72rem; font-weight:500; background:#d1e7dd; color:#0f5132; }
.sla-at-risk  { display:inline-block; padding:.15em .5em; border-radius:6px; font-size:.72rem; font-weight:500; background:#fff3cd; color:#664d03; }
.sla-breached { display:inline-block; padding:.15em .5em; border-radius:6px; font-size:.72rem; font-weight:500; background:#f8d7da; color:#842029; }
.sla-pending  { display:inline-block; padding:.15em .5em; border-radius:6px; font-size:.72rem; font-weight:500; background:var(--ac-dim); color:var(--ac); }

[data-theme="dark"] .sla-met      { background:rgba(34,197,94,.15); color:#86efac; }
[data-theme="dark"] .sla-at-risk  { background:rgba(234,179,8,.15); color:#fde047; }
[data-theme="dark"] .sla-breached { background:rgba(239,68,68,.15); color:#fca5a5; }
[data-theme="dark"] .sla-pending  { background:var(--ac-dim); color:var(--ac-light); }

/* ─── Отчёты — KPI карточки ─── */
.report-kpi-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: .8rem;
    text-align: center;
}
[data-theme="light"] .report-kpi-card {
    background: #fff;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.report-kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.report-kpi-label { font-size: .72rem; color: rgba(255,255,255,.5); margin-top: .15rem; }
[data-theme="light"] .report-kpi-label { color: rgba(0,0,0,.5); }
.report-kpi-extra { font-size: .68rem; color: var(--ac); margin-top: .15rem; }

/* ─── Отчёты — графики и секции ─── */
.report-chart-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 1rem;
}
[data-theme="light"] .report-chart-card {
    background: #fff;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.report-section {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 1rem;
}
[data-theme="light"] .report-section {
    background: #fff;
    border-color: rgba(0,0,0,.06);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.report-section-title {
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .7rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* ─── Настройка — вкладки ─── */
.settings-tabs {
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.settings-tabs .nav-link {
    color: rgba(255,255,255,.5);
    border: none;
    border-bottom: 2px solid transparent;
    padding: .6rem 1rem;
    font-size: .85rem;
    font-weight: 500;
    transition: color .15s, border-color .15s;
}
.settings-tabs .nav-link:hover {
    color: rgba(255,255,255,.75);
    border-bottom-color: rgba(255,255,255,.15);
}
.settings-tabs .nav-link.active {
    color: var(--ac);
    border-bottom-color: var(--ac);
    background: transparent;
}
[data-theme="light"] .settings-tabs {
    border-bottom-color: rgba(0,0,0,.1);
}
[data-theme="light"] .settings-tabs .nav-link {
    color: rgba(0,0,0,.45);
}
[data-theme="light"] .settings-tabs .nav-link:hover {
    color: rgba(0,0,0,.7);
    border-bottom-color: rgba(0,0,0,.15);
}
[data-theme="light"] .settings-tabs .nav-link.active {
    color: var(--ac);
    border-bottom-color: var(--ac);
}

/* ─── Таблица сотрудников /employees — кастомные классы ─── */

/* Нативный <select> в контролах (не имеет Bootstrap .form-select) */
[data-theme="dark"] select.ctrl-btn {
    background-color: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
}
[data-theme="dark"] select.ctrl-btn option {
    background: #1a1e2e;
    color: #fff;
}

[data-theme="light"] .blocked-hint {
    background: #fff;
    border-color: rgba(220,38,38,.35);
    color: #dc2626;
    box-shadow: 0 4px 18px rgba(0,0,0,.15);
}

/* Видимость и роль — светлая тема */
[data-theme="light"] .vis-btn:hover { background: rgba(0,0,0,.06); }
[data-theme="light"] .vis-off { color: rgba(0,0,0,.3); }
[data-theme="light"] .adm-btn:hover { background: rgba(0,0,0,.06); }
[data-theme="light"] .adm-off { color: rgba(0,0,0,.3); }
[data-theme="light"] .role-btn:hover:not(:disabled) { background: rgba(0,0,0,.06); }

/* Column picker — светлая тема (дополнения к основному блоку выше) */
[data-theme="light"] .col-picker-panel .picker-title {
    color: rgba(0,0,0,.4);
    border-bottom-color: rgba(0,0,0,.08);
}
[data-theme="light"] .col-picker-panel .picker-hint { color: rgba(0,0,0,.25); }
[data-theme="light"] .col-picker-panel .col-row:hover { background: rgba(0,0,187,.04); }
[data-theme="light"] .col-row .drag-handle { color: rgba(0,0,0,.2); }
[data-theme="light"] .col-row:hover .drag-handle { color: rgba(0,0,0,.4); }
[data-theme="light"] .col-row label { color: rgba(0,0,0,.7); }

/* Поиск — светлая тема */
[data-theme="light"] .search-wrap .si { color: rgba(0,0,0,.3); }
[data-theme="light"] .search-clear { color: rgba(0,0,0,.3); }
[data-theme="light"] .search-clear:hover { color: #dc2626; }

/* Ячейки таблицы сотрудников — светлая тема */
[data-theme="light"] .emp-table td a { color: var(--rc-black) !important; }
[data-theme="light"] .cell-empty { color: rgba(0,0,0,.22); }
[data-theme="light"] td.col-num { color: rgba(0,0,0,.35); }

/* ─── Частые вопросы: иконка-триггер и список в попапе ───────────────
   Раскрывающегося списка в теле страницы больше нет — вопросы живут в
   модалке (штатная механика modal-policy.js). Иконка «?» стоит в одну
   строку с кнопкой «Создать обращение» и повторяет её высоту. */
.faq-trigger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--tk-card-border);
    border-radius: 50%;
    background: var(--tk-card-bg);
    color: var(--tk-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.faq-trigger:hover {
    background: var(--tk-hover);
    border-color: var(--ac-border);
    color: var(--ac);
}
.faq-trigger > .bi {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.faq-trigger > .bi::before { vertical-align: 0; line-height: 1; }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.faq-entry {
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--tk-card-border);
}
.faq-entry:last-child { padding-bottom: 0; border-bottom: none; }
.faq-question {
    font-size: .85rem;
    font-weight: 600;
    color: var(--tk-text);
    margin-bottom: .25rem;
}
.faq-answer {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--tk-muted);
}

/* ─── Список обращений: строка фильтров и шапка ──────────────────── */
.tickets-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .82rem;
    margin-bottom: .9rem;
}
.tickets-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--tk-faint);
}
.tickets-empty__hint { font-size: .82rem; }

/* ═══════════════════════════════════════════════════════════════════
   Страницы ошибок портала (404 / 403 / 500)

   ЦВЕТА. Ни одного нового hex/rgb: поверхности и текст берутся из уже
   объявленных токенов (--tk-card-bg, --tk-card-border, --tk-text,
   --tk-muted, --tk-faint) и акцента (--ac, --ac-dim, --ac-border,
   --ac-light). Токены объявлены на :root и переопределены в светлой
   теме, поэтому обе темы чистые без отдельных правил.

   КРАЯ. Никаких overlay-приёмов: ни sticky/fixed псевдоэлементов, ни
   mask-image, ни градиентных затуханий — обычная центрированная
   карточка на потоке.
   ═══════════════════════════════════════════════════════════════════ */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    min-height: 60vh;
    /* Своего фона у обёртки НЕТ намеренно: она не растягивается на всю высоту
       колонки .app-main, и тонированная подложка обрывалась бы посреди экрана
       заметной границей (в тёмной теме токен прозрачный, поэтому дефект было
       бы видно только в светлой). Карточка отделяется от фона собственной
       поверхностью — см. .error-page__card ниже. */
}
/* Гостевой вариант (страница без каркаса) центрируется по всему экрану. */
body.error-page-standalone { min-height: 100vh; }
body.error-page-standalone .error-page { min-height: 100vh; }

.error-page__card {
    width: 100%;
    max-width: 460px;
    text-align: center;
    padding: 2.25rem 1.75rem;
    border-radius: 16px;
    /* Поверхность второго уровня: в светлой теме фон страницы — это уже
       --rc-grey, и обычный --tk-card-bg слился бы с ним, оставив карточку на
       одной рамке. */
    background: var(--tk-card-bg-2);
    border: 1px solid var(--tk-card-border);
}
.error-page__code {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--tk-faint);
}
.error-page__icon {
    font-size: 1.6rem;
    line-height: 1;
    margin: .6rem 0 .9rem;
    color: var(--ac);
}
.error-page__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--tk-text);
}
.error-page__text {
    font-size: .85rem;
    line-height: 1.55;
    margin: 0 0 1.4rem;
    color: var(--tk-muted);
}
.error-page__actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.error-page__btn {
    display: inline-flex;
    align-items: center;
    padding: .45rem .95rem;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: var(--tk-chip-bg);
    border: 1px solid var(--tk-chip-border);
    color: var(--tk-text);
    transition: background .15s, border-color .15s;
}
.error-page__btn:hover {
    background: var(--tk-chip-hover);
    border-color: var(--ac-border);
    color: var(--tk-text);
}
.error-page__btn--primary {
    background: var(--ac-dim);
    border-color: var(--ac-border);
    color: var(--ac);
}
.error-page__btn--primary:hover {
    /* Тот же акцент, чуть плотнее — цвет текста не меняем, иначе в светлой
       теме получилась бы светлая подпись на светлой заливке. */
    background: color-mix(in srgb, var(--ac) 24%, transparent);
    border-color: var(--ac);
    color: var(--ac);
}