/* ============================================================
   Фирменный стиль AiPlus (по образцу системы «Зарплаты»):
   тёмный сайдбар, янтарные акценты, белые карточки.
   Приём: переопределяем CSS-переменные Bootstrap, чтобы кнопки,
   ссылки и бейджи подхватили палитру без правки каждого шаблона.
   ============================================================ */

:root {
    /* Палитра AiPlus */
    --amber:            #f0a500;
    --amber-hover:      #d99400;
    --amber-active:     #c98a00;
    --amber-dark:       #b9791a;   /* текст ссылок/контурных элементов */
    --amber-text:       #e8a33d;   /* текст пунктов меню */
    --sidebar-bg:       #1f1a14;   /* тёмно-коричневый, почти чёрный */
    --content-bg:       #f2f3f5;   /* светло-серый фон контента */
    --ink:              #2b2622;   /* тёмный текст заголовков */
    --card-radius:      12px;
    --sidebar-w:        250px;
    --sidebar-w-min:    64px;

    /* Переопределения Bootstrap */
    --bs-primary:            #f0a500;
    --bs-primary-rgb:        240, 165, 0;
    --bs-body-bg:            #f2f3f5;
    --bs-border-radius:      0.6rem;
    --bs-link-color:         #b9791a;
    --bs-link-color-rgb:     185, 121, 26;
    --bs-link-hover-color:   #8a5a12;
    --bs-link-hover-color-rgb: 138, 90, 18;
}

body {
    min-height: 100vh;
    background: var(--content-bg);
}

/* Заголовки страниц — с засечками, тёмные */
h1, .page-title {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--ink);
}

/* ---- Кнопки: янтарные, скруглённые ------------------------- */
.btn-primary {
    --bs-btn-bg: var(--amber);
    --bs-btn-border-color: var(--amber);
    --bs-btn-color: #1f1a14;
    --bs-btn-hover-bg: var(--amber-hover);
    --bs-btn-hover-border-color: var(--amber-hover);
    --bs-btn-hover-color: #1f1a14;
    --bs-btn-active-bg: var(--amber-active);
    --bs-btn-active-border-color: var(--amber-active);
    --bs-btn-active-color: #1f1a14;
    --bs-btn-focus-shadow-rgb: 240, 165, 0;
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--amber-dark);
    --bs-btn-border-color: var(--amber);
    --bs-btn-hover-bg: var(--amber);
    --bs-btn-hover-border-color: var(--amber);
    --bs-btn-hover-color: #1f1a14;
    --bs-btn-active-bg: var(--amber);
    --bs-btn-active-border-color: var(--amber);
    --bs-btn-active-color: #1f1a14;
    --bs-btn-focus-shadow-rgb: 240, 165, 0;
    font-weight: 600;
}

/* ---- Карточки: скруглённые, лёгкая тень -------------------- */
.card {
    border: 1px solid #e9ecef;
    border-radius: var(--card-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
}

/* ---- Стат-карточки дашборда -------------------------------- */
.stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: var(--card-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
    color: inherit;
}
.stat-label {
    color: #8a94a6;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .35rem;
}
.stat-value {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}
.stat-value.positive { color: #22a05b; }
.stat-value.negative { color: #c0392b; }
.stat-icon { font-size: 1.9rem; opacity: .85; }

/* ---- Бейджи статусов заявки: осмысленная гамма ------------- */
.status-badge {
    display: inline-block;
    padding: .28em .65em;
    border-radius: 1rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.status-badge-lg { font-size: .95rem; padding: .4em .85em; }

.status-draft            { background: #9ca3af; color: #fff; }                       /* Черновик — серый */
.status-pending_approval { background: var(--amber); color: #1f1a14; }               /* На утверждении — янтарный */
.status-on_approval      { background: transparent; color: var(--amber-dark);        /* На согласовании — янтарный контурный */
                           border: 1.5px solid var(--amber); }
.status-queued           { background: #2f80ed; color: #fff; }                       /* В очереди — синий */
.status-paid             { background: #22a05b; color: #fff; }                       /* Оплачено — зелёный */
.status-reconciled       { background: #12633a; color: #fff; }                       /* Сверено — тёмно-зелёный */
.status-reconciled::before { content: "✓ "; }
.status-rejected         { background: #e03131; color: #fff; }                       /* Отказано — красный */
.status-rework           { background: #f76707; color: #fff; }                       /* На доработке — оранжевый */

/* ============================================================
   Макет: тёмный сайдбар слева + контент справа
   ============================================================ */

.app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
    color: #cbb89a;
    z-index: 1030;
    overflow-x: hidden;
    transition: width .2s ease, transform .2s ease;
}
html.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-min); }

.app-brand-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem .75rem 1.25rem;
}
.app-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    color: var(--amber);
    white-space: nowrap;
}
.app-brand:hover { color: var(--amber); }
.app-brand-mark { font-size: 1.5rem; }
html.sidebar-collapsed .app-brand-text { display: none; }

.sidebar-collapse-btn {
    background: none;
    border: none;
    color: #8a7c66;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
    transition: transform .2s ease, color .15s ease;
}
.sidebar-collapse-btn:hover { color: var(--amber); }
html.sidebar-collapsed .sidebar-collapse-btn { transform: rotate(180deg); }

.app-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .5rem 0;
}
.nav-section {
    color: #6b5f4d;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .9rem 1.25rem .35rem;
    white-space: nowrap;
}
html.sidebar-collapsed .nav-section {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    font-size: .58rem;
    color: #4d4437;
}

.side-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1.25rem;
    color: #cbb89a;
    text-decoration: none;
    white-space: nowrap;
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease;
}
.side-link:hover {
    color: var(--amber-text);
    background: rgba(255, 255, 255, .03);
}
.side-link.active {
    color: var(--amber);
    background: rgba(240, 165, 0, .12);
    border-left-color: var(--amber);
    font-weight: 600;
}
.side-ic {
    flex: 0 0 auto;
    width: 1.4rem;
    text-align: center;
    font-size: 1.05rem;
}
html.sidebar-collapsed .side-label { display: none; }
html.sidebar-collapsed .side-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.side-badge {
    display: inline-block;
    margin-left: auto;
    line-height: 1;
}
html.sidebar-collapsed .side-badge { display: none; }

.app-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: .85rem 1.25rem;
}
.side-user {
    color: #a89a80;
    font-size: .85rem;
    margin-bottom: .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.sidebar-collapsed .side-user { display: none; }
html.sidebar-collapsed .app-sidebar-footer { padding: .85rem .5rem; text-align: center; }
.side-logout {
    --bs-btn-color: #cbb89a;
    --bs-btn-border-color: rgba(255, 255, 255, .18);
    --bs-btn-hover-bg: rgba(255, 255, 255, .06);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .3);
    --bs-btn-hover-color: #fff;
    width: 100%;
}
html.sidebar-collapsed .side-logout-label { display: none; }

/* ---- Область контента -------------------------------------- */
.app-main {
    margin-left: var(--sidebar-w);
    transition: margin-left .2s ease;
}
html.sidebar-collapsed .app-main { margin-left: var(--sidebar-w-min); }
.content-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 3rem;
}

/* ---- Мобильный топбар и офф-канвас -------------------------- */
.app-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-w);
        box-shadow: 2px 0 14px rgba(0, 0, 0, .3);
    }
    .app-sidebar.open { transform: translateX(0); }
    html.sidebar-collapsed .app-sidebar { width: var(--sidebar-w); }
    html.sidebar-collapsed .app-brand-text,
    html.sidebar-collapsed .side-label,
    html.sidebar-collapsed .side-user,
    html.sidebar-collapsed .nav-section { display: revert; }
    .sidebar-collapse-btn { display: none; }

    .app-main { margin-left: 0 !important; }

    .app-topbar {
        display: flex;
        align-items: center;
        gap: .75rem;
        position: sticky;
        top: 0;
        z-index: 1020;
        background: var(--sidebar-bg);
        padding: .6rem 1rem;
    }
    .app-topbar-brand {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.2rem;
        color: var(--amber);
        text-decoration: none;
    }
    .burger {
        background: none;
        border: none;
        color: var(--amber);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
    }
    .app-topbar-bell {
        margin-left: auto;
        color: var(--amber);
        text-decoration: none;
        font-size: 1.3rem;
        position: relative;
    }
    .content-wrap { padding: 1rem 1rem 2.5rem; }
    .sidebar-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1025;
    }
}

/* ============================================================
   Страницы входа (без сайдбара) — в той же гамме
   ============================================================ */
.auth-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--content-bg);
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    color: var(--amber);
    margin-bottom: 1.25rem;
}
.auth-brand-mark { font-size: 2.1rem; }
.auth-card { width: 100%; max-width: 420px; }

/* ============================================================
   Мобильная устойчивость (M12, адаптив-QA пилота)
   ============================================================ */
/* Длинные строки (имена Kaspi, комментарии 1С, e-mail) не распирают вёрстку. */
.card, .table td, .table th, .stat-label, .stat-value { overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    /* Узкие экраны 360–430px: гасим горизонтальный скролл страницы —
       широкие таблицы прокручиваются внутри своих .table-responsive. */
    html, body { max-width: 100%; overflow-x: hidden; }
    .content-wrap { padding: .85rem .8rem 2.5rem; }
    .card-body { padding: 1rem; }
    /* Инлайновые формы действий (напр. «Игнорировать» в сверке) переносим. */
    .d-flex.gap-1 { flex-wrap: wrap; }

    /* Таблица внутри .table-responsive обязана ПРОКРУЧИВАТЬСЯ, а не сжиматься.
       Без этого Bootstrap ужимает колонки до 8 px и слово «Номер» рассыпается
       по буквам в столбик — ровно то, что видно было на телефоне. */
    .table-responsive > .table { min-width: 620px; }
    .table-responsive > .table td,
    .table-responsive > .table th { white-space: nowrap; }
    /* Кроме ячеек, которым перенос нужен: длинные названия и аналитика 1С. */
    .table-responsive > .table td.wrap,
    .table-responsive > .table td small { white-space: normal; }

    /* Действия под палец: кнопка во всю ширину, поля не мельче 16px —
       иначе iOS зумит страницу при фокусе. */
    .btn-block-sm { display: block; width: 100%; }
    .form-control, .form-select { font-size: 16px; }
}

/* ============================================================
   Панель отбора заявок (M14): одна на список, доску и кассу.
   ============================================================ */
/* Рамку рисует не панель, а раскрывающаяся часть: свёрнутая панель — это одна
   кнопка, и коробка вокруг неё выглядела бы пустой. */
.filter-box {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: .75rem;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    align-items: center;
}

/* Плашка активного фильтра: видно, почему список короткий, и снимается в один клик. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: #fff3cd;
    border: 1px solid #ffe08a;
    color: #664d03;
    font-size: .8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.chip:hover { background: #ffe69c; color: #664d03; }
.chip-x { opacity: .55; font-size: .75rem; }
.chip:hover .chip-x { opacity: 1; }

.chip-reset {
    background: transparent;
    border-color: transparent;
    color: #6c757d;
    text-decoration: underline;
}

.chip-reset:hover { background: transparent; color: #343a40; }

/* ============================================================
   Мобильные карточки списков (M13): на телефоне таблица заменяется
   списком карточек, на компьютере всё остаётся таблицей.
   ============================================================ */
.mobile-cards { display: none; }

@media (max-width: 767.98px) {
    .mobile-cards { display: block; }
    .desktop-table { display: none; }
}

.m-card {
    display: block;
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    color: inherit;
    text-decoration: none;
}
.m-card:last-child { border-bottom: 0; }
.m-card:active { background: rgba(0, 0, 0, .04); }
.m-card-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}
.m-card-code { font-weight: 600; font-size: .95rem; }
.m-card-amount { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.m-card-title { margin-top: .15rem; line-height: 1.3; }
.m-card-meta {
    margin-top: .4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    font-size: .85rem;
    color: var(--bs-secondary-color, #6c757d);
}
.m-card-actions { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.m-card-actions .btn { flex: 1 1 auto; }
/* Поле и кнопка «Сумма/Дата/Период» — одной строкой: поле тянется, кнопка по
   содержимому. Иначе на 360 px поле сжимается до двух символов. */
.m-card-actions .form-control,
.m-card-actions .form-select { flex: 1 1 8rem; min-width: 0; }
.m-card-actions .btn { flex: 0 0 auto; }
.m-card.overdue { border-left: 3px solid var(--bs-danger, #dc3545); }

/* ============================================================
   Форма заявки на телефоне: кнопки отправки всегда под рукой
   ============================================================ */
@media (max-width: 767.98px) {
    .form-actions {
        position: sticky;
        bottom: 0;
        z-index: 1010;
        margin: 0 -.8rem -2.5rem;   /* компенсируем padding .content-wrap */
        padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
        background: var(--bs-body-bg, #fff);
        border-top: 1px solid var(--bs-border-color, #dee2e6);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
    }
    .form-actions .btn { flex: 1 1 0; padding-top: .6rem; padding-bottom: .6rem; }
    /* Разбивка по городам — строками, а не в три колонки на 360 px. */
    #percent-rows .col-6 { flex: 0 0 100%; max-width: 100%; }
}

/* ============================================================
   Доска (Trello-стиль): горизонтальная лента из 8 колонок-статусов
   ============================================================ */
/* У доски своя область прокрутки, а не страничная. Только так работает
   закрепление шапок: sticky отсчитывается от ближайшего прокручиваемого
   предка, а `overflow-x: auto` уже делает таким предком саму ленту. Без
   ограничения высоты лента просто растёт вниз, никуда не прокручивается, и
   закреплять шапке не от чего — при скролле страницы она уезжает вверх, и
   становится непонятно, к какой колонке относится карточка. */
.board {
    display: flex;
    gap: .75rem;
    overflow: auto;
    max-height: calc(100vh - 13rem);
    overscroll-behavior: contain;
    padding-bottom: .5rem;
    align-items: flex-start;
}
.board-col {
    flex: 0 0 250px;
    max-width: 250px;
    background: rgba(0, 0, 0, .035);
    border-radius: .6rem;
    display: flex;
    flex-direction: column;
}
.board-col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    border-radius: .6rem .6rem 0 0;
    font-weight: 600;
    font-size: .82rem;
    /* Шапка держится наверху, пока прокручиваешь колонку вниз. */
    position: sticky;
    top: 0;
    z-index: 2;
}
/* «На согласовании» — контурный статус с прозрачным фоном. У закреплённой шапки
   прозрачность недопустима: карточки просвечивали бы сквозь неё при прокрутке. */
.board-col-head.status-on_approval { background: #fff; }

.board-col-title { overflow-wrap: anywhere; }
.board-col-count {
    background: rgba(0, 0, 0, .18);
    border-radius: 1rem;
    padding: 0 .55em;
    font-size: .78rem;
    flex: 0 0 auto;
}
.board-col-body {
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 56px;
}
.board-card {
    display: block;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: .5rem;
    padding: .5rem .6rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: border-color .12s, box-shadow .12s;
}
.board-card:hover {
    border-color: var(--amber, #f0a500);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.board-card-top {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
}
.board-card-code { font-weight: 600; color: var(--amber-dark, #b06f00); }
.board-card-amount { font-weight: 600; white-space: nowrap; }
.board-card-title { font-size: .9rem; margin: .2rem 0; overflow-wrap: anywhere; }
.board-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .7rem;
    font-size: .74rem;
    color: #6b7280;
}
.board-empty { text-align: center; color: #9ca3af; font-size: .85rem; padding: .4rem 0; }
/* Группа канцтоваров/хозтоваров: одна карточка на много заявок. Пунктир —
   чтобы с первого взгляда отличалась от обычной карточки-заявки. */
.board-group { border-style: dashed; border-color: var(--amber, #f0a500); }
.board-group-list { margin-top: .35rem; font-size: .76rem; }
.board-group-list summary { cursor: pointer; color: var(--amber-dark, #b06f00); }
.board-group-list div { margin-top: .2rem; overflow-wrap: anywhere; }
.board-card-stage {
    margin-top: .35rem;
    display: inline-block;
    font-size: .72rem;
    color: var(--amber-dark, #b06f00);
    background: rgba(240, 165, 0, .12);
    border-radius: 1rem;
    padding: .05rem .5em;
}

/* ============================================================
   Таймлайн истории заявки (длительности этапов)
   ============================================================ */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.1rem;
    border-left: 2px solid rgba(0, 0, 0, .1);
}
.timeline-item {
    position: relative;
    padding: 0 0 1rem .6rem;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -1.55rem;
    top: .2rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--amber, #f0a500);
    box-shadow: 0 0 0 2px #fff;
}
.timeline-item.tl-payment::before { background: #22a05b; }
.timeline-item.tl-owner_decision::before,
.timeline-item.tl-approver_decision::before { background: #2f80ed; }
.timeline-item.tl-adjustment::before,
.timeline-item.tl-adjustment_decision::before { background: #f76707; }
.timeline-when { font-size: .74rem; color: #6b7280; }
.timeline-title { font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.timeline-who { font-size: .78rem; color: #6b7280; }
.timeline-gap {
    font-size: .74rem;
    color: #9ca3af;
    margin-top: .25rem;
}
.timeline-ongoing {
    margin-top: .25rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--amber-dark, #b06f00);
    background: rgba(240, 165, 0, .12);
    border-radius: .4rem;
    padding: .3rem .55rem;
}

/* ============================================================
   Доска на телефоне: колонка = ширина экрана, листается «страницами»
   ============================================================ */
/* Полоса вкладок-статусов над доской: видно, где ты, и сколько где заявок.
   На компьютере не нужна — там все восемь колонок и так на виду. */
.board-tabs { display: none; }

@media (max-width: 767.98px) {
    .board-tabs {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        padding-bottom: .5rem;
        margin-bottom: .5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .board-tabs::-webkit-scrollbar { display: none; }
    .board-tab {
        flex: 0 0 auto;
        border: 1px solid var(--bs-border-color, #dee2e6);
        background: #fff;
        border-radius: 999px;
        padding: .35rem .7rem;
        font-size: .85rem;
        white-space: nowrap;
        color: inherit;
    }
    .board-tab.active {
        background: var(--amber, #f0a500);
        border-color: var(--amber, #f0a500);
        color: #1f2937;
        font-weight: 600;
    }
    .board-tab-count {
        display: inline-block;
        margin-left: .3rem;
        font-size: .75rem;
        opacity: .75;
    }

    /* Ленту листаем «страницами»: колонка прилипает к краю экрана, поэтому
       свайп всегда останавливается ровно на статусе, а не между двумя. */
    .board {
        scroll-snap-type: x mandatory;
        scroll-padding-left: .8rem;
        gap: .6rem;
        /* На телефоне сверху ещё лента вкладок статусов — оставляем ей место. */
        max-height: calc(100vh - 16rem);
    }
    .board-col {
        flex: 0 0 88vw;
        max-width: 88vw;
        scroll-snap-align: start;
    }
    .board-col-body { max-height: none; }
}

/* ---- Разделы карточки заявки: у каждого свой цвет -----------
   Все шапки были одинаково серые, и «Участники / Согласование /
   Обсуждение» сливались (заказчик, 02.09.2026). Первый заход дал
   слишком бледные подложки — цвет читался как тот же серый, поэтому
   тон насыщеннее, заголовок в цвет раздела, полоска шире. */
.sec { border-left: 5px solid var(--sec, #adb5bd); }
.sec > .card-header {
    background: var(--sec-bg, #eef0f2);
    color: var(--sec-ink, var(--ink));
    border-bottom: 1px solid var(--sec-line, rgba(0, 0, 0, .08));
    font-weight: 600;
}
.sec-main       { --sec: #5a6470; --sec-bg: #e4e7ea; --sec-ink: #3c444d; --sec-line: #d2d7dc; }
.sec-money      { --sec: #2e7d32; --sec-bg: #d8ecd9; --sec-ink: #1f5c23; --sec-line: #bcdcbe; }
.sec-split      { --sec: #0e7490; --sec-bg: #d3eaf1; --sec-ink: #0a5568; --sec-line: #b3dae5; }
.sec-files      { --sec: #6f42c1; --sec-bg: #e5dcf7; --sec-ink: #52309a; --sec-line: #d0c1ef; }
.sec-people     { --sec: #1d6fb8; --sec-bg: #d8e8f7; --sec-ink: #15537f; --sec-line: #bcd8ef; }
.sec-approval   { --sec: #f0a500; --sec-bg: #fbe8bd; --sec-ink: #8a6100; --sec-line: #f0d79a; }
.sec-discussion { --sec: #d35400; --sec-bg: #fbdfcb; --sec-ink: #9c3f00; --sec-line: #f2c8ab; }
.sec-history    { --sec: #7d7d86; --sec-bg: #e6e6ea; --sec-ink: #4f4f57; --sec-line: #d5d5db; }

/* Блок «Возвраты» на карточке сотрудника: второй раздел сайта — своим цветом,
   чтобы галочки возвратов не путались с ролями расходов. */
.returns-block {
    background: #e6f2f5;
    border-left: 4px solid #0e7490;
    border-radius: 6px;
    padding: .5rem .75rem;
}

/* Инструкция в верхней полосе на телефоне — сразу за колокольчиком. На
   компьютере полоса скрыта, там ссылка в левом меню. */
.app-topbar-help {
    color: var(--amber);
    text-decoration: none;
    font-size: 1.3rem;
}