/* ============================================================
   §AB2. CASCADE LAYERS — порядок приоритета (2026-10-03).

   Legacy §0..§AA2 обёрнут в @layer legacy.
   Новые правила — в @layer modern (перебивают legacy без !important).

   ⚠️ НЕ добавлять правила между объявлением @layer и @layer legacy {.
   Unlayered CSS имеет ВЫСШИЙ приоритет над любым слоем — это
   ломает иерархию.

   Новые правила добавлять ТОЛЬКО внутри @layer modern { ... }
   в конце файла.
   ============================================================ */
@layer legacy, modern;

@layer legacy {

/* ============================================================
   ВАЙЗЕР · admin.css
   Единый структурированный стиль для админ-панели
   ============================================================ */

/* ============================================================
   0. CSS-ПЕРЕМЕННЫЕ
   ============================================================ */
:root {
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --accent-red: #f87171;
    --accent-green: #34d399;
}
[data-theme="light"] {
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --accent-red: #dc2626;
    --accent-green: #059669;
}

/* ============================================================
   1. ГЛОБАЛЬНЫЕ
   ============================================================ */
* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: #0f172a;
    color: #f1f5f9;
    padding: 10px 0;
    margin: 0;
    transition: background 0.3s ease, color 0.3s ease;
}
.container { max-width: 100%; margin: 0 auto; padding: 0; }
.card {
    background: #1e293b;
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 20px;
    border: 1px solid #334155;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.card h3 { display: none; }
.flex { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hidden { display: none; }
.error { color: #f87171; }
.success { color: #34d399; }

/* ============================================================
   EMPTY STATE — заглушка «нет данных» с опциональной кнопкой «Добавить»
   Используется в модулях: clients, suppliers, workers, managers,
   announcements, deadlines, soft-merch, reports, audit.
   Кнопка добавляется через data-empty-add="<id существующей кнопки>".
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.5;
}
.empty-state__icon {
    display: block;
    font-size: 34px;
    margin-bottom: 10px;
    opacity: 0.65;
    line-height: 1;
}
.empty-state__text {
    display: block;
    margin-bottom: 14px;
}
.empty-state__text strong { color: #cbd5e1; font-weight: 700; }
.empty-state__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #60a5fa;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.1s ease;
}
.empty-state__btn:hover { background: #2563eb; }
.empty-state__btn:active { transform: scale(0.97); }
[data-theme="light"] .empty-state { color: #64748b; }
[data-theme="light"] .empty-state__text strong { color: #334155; }
[data-theme="light"] .empty-state__btn { background: #3b82f6; }
[data-theme="light"] .empty-state__btn:hover { background: #2563eb; }

/* ============================================================
   2. ЭЛЕМЕНТЫ УПРАВЛЕНИЯ
   ============================================================ */
input, select, button, textarea {
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #334155;
    color: white;
    font-size: 13px;
    font-family: inherit;
}
button {
    background: #60a5fa;
    cursor: pointer;
    transition: 0.3s;
    border: none;
}
button:hover { background: #2563eb; }
.btn-danger { background: #f87171; }
.btn-danger:hover { background: #dc2626; }
.btn-secondary { background: #475569; }
.btn-secondary:hover { background: #334155; }
.btn-success { background: #34d399; color: #0f172a; }
.btn-success:hover { background: #16a34a; }
.export-btn {
    background: #34d399;
    color: #0f172a;
    padding: 4px 12px;
    border-radius: 20px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.export-btn:hover { background: #16a34a; }
.reset-filters {
    background: #475569;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    border: none;
    color: white;
    cursor: pointer;
}
.reset-filters:hover { background: #334155; }
.tab-btn {
    background: #334155;
    padding: 5px 10px;
    border: none;
    border-radius: 40px;
    font-size: 12px;
    color: #cbd5e1;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap;
}
.tab-btn.active { background: #60a5fa; color: white; }
.tab-btn:hover { background: #475569; }
.refresh-btn {
    background: #475569;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}
.refresh-btn:hover { background: #334155; }

/* ============================================================
   3. КНОПКА ТЕМЫ И ЛОГОТИП
   ============================================================ */
.icon-btn-theme {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #334155;
    color: #f1f5f9;
    font-size: 16px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.icon-btn-theme:hover { background: #475569; }
.icon-btn-theme:active { transform: scale(0.92); }

img.admin-logo,
.admin-logo {
    display: block;
    width: 70px;
    height: 20px;
    min-width: 70px;
    max-width: 70px;
    min-height: 20px;
    max-height: 20px;
    object-fit: contain;
    object-position: left center;
    flex: 0 0 70px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

/* §3.5–3.6 удалены в сессии 48: плоские вкладки + нет page-header. */

/* ============================================================
   4. ШАПКА
   ============================================================ */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* §75-fix: было 16px — вместе с padding-top карточки (20px)
       давало 36px зазора между вкладками и панелью фильтров.
       Теперь 8px + 10px = 18px — ровно вдвое меньше. */
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}
.tab-bar {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 2px;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar > .tab-btn { flex: 0 0 auto; }
.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #cbd5e1;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}
.user-info #adminName {
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}
.user-info #adminRole {
    color: #94a3b8;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}
.user-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.user-area .user-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.btn-logout-small {
    background: #334155;
    color: #f1f5f9;
    border: none;
    border-radius: 40px;
    padding: 4px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}
.btn-logout-small:hover { background: #475569; }

/* ============================================================
   5. ТАБЛИЦЫ (общие)
   ============================================================ */
.table-wrap { overflow-x: auto; margin-top: 10px; }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}
th, td {
    padding: 4px;
    border-bottom: 1px solid #334155;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
th {
    background: #3a4a63;
    color: #e2e8f0;
    padding: 8px 6px;
    font-weight: 600;
    position: relative;
    white-space: nowrap;
}
/* §5.3. Единый стиль фильтров в шапке таблиц (задания + магазины).
   Сессия 2026-10-01 v4. Стиль 1:1 как у старых .store-filter-select:
   bg #1e293b, border #334155, radius 8, padding 4×8, font 12.
   th > .th-inner = flex: [input] [▼] [↕].
   Sticky-скролл сохраняется через §55. */
#tasksTableWrap thead th,
#storesTableWrap thead th {
    overflow: visible;
    padding: 4px 6px;
}
#tasksTableWrap thead th .th-inner,
#storesTableWrap thead th .th-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
#tasksTableWrap thead th .th-inner > .filter-select,
#tasksTableWrap thead th .th-inner > .filter-input,
#storesTableWrap thead th .th-inner > .filter-select,
#storesTableWrap thead th .th-inner > .filter-input {
    /* перебивает старое §5: `th .filter-input { display: none }` */
    display: inline-block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 26px;
    padding: 4px 8px;
    font-size: 12px;
    box-sizing: border-box;
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
    border-radius: 8px;
    font-family: inherit;
    line-height: 1.2;
}
#tasksTableWrap thead th .th-inner > .filter-select:focus,
#tasksTableWrap thead th .th-inner > .filter-input:focus,
#storesTableWrap thead th .th-inner > .filter-select:focus,
#storesTableWrap thead th .th-inner > .filter-input:focus {
    outline: none;
    border-color: #60a5fa;
}
#tasksTableWrap thead th .th-inner > .filter-select,
#storesTableWrap thead th .th-inner > .filter-select {
    cursor: pointer;
}
#tasksTableWrap thead th .th-inner > .filter-input::placeholder,
#storesTableWrap thead th .th-inner > .filter-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}
/* Столбцы без фильтра — стиль совпадает с placeholder в input'ах. */
#tasksTableWrap thead th .th-inner > .th-label,
#storesTableWrap thead th .th-inner > .th-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #94a3b8;
    font-weight: 400;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 0;
}
#tasksTableWrap thead th .th-inner > .sort-btn,
#storesTableWrap thead th .th-inner > .sort-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 26px;
    padding: 0 2px;
    margin-left: 0;
    line-height: 1;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
}
#tasksTableWrap thead th .th-inner > .sort-btn:hover,
#storesTableWrap thead th .th-inner > .sort-btn:hover {
    background: rgba(96,165,250,0.10);
    color: #60a5fa;
}
[data-theme="light"] #tasksTableWrap thead th .th-inner > .filter-input,
[data-theme="light"] #storesTableWrap thead th .th-inner > .filter-input {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}
[data-theme="light"] #tasksTableWrap thead th .th-inner > .th-label,
[data-theme="light"] #storesTableWrap thead th .th-inner > .th-label {
    color: #64748b;
}

/* §5.4. Кнопка ▼ и dropdown уникальных значений (задания + магазины).
   Сессия 2026-10-01 v4. */
#tasksTableWrap thead th .filter-toggle,
#storesTableWrap thead th .filter-toggle {
    flex: 0 0 auto;
    width: 20px;
    height: 26px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
#tasksTableWrap thead th .filter-toggle:hover,
#storesTableWrap thead th .filter-toggle:hover {
    background: rgba(96,165,250,0.12);
    color: #60a5fa;
}
#tasksTableWrap thead th .filter-dropdown,
#storesTableWrap thead th .filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    max-width: 300px;
    max-height: 280px;
    overflow-y: auto;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    z-index: 500;
    padding: 4px 0;
}
#tasksTableWrap thead th .filter-dropdown[hidden],
#storesTableWrap thead th .filter-dropdown[hidden] {
    display: none;
}
#tasksTableWrap .filter-dropdown__item,
#storesTableWrap .filter-dropdown__item {
    /* Наследование от th (§91 ADULT THEME): text-transform / font-weight /
       letter-spacing / font-size — сбрасываем явно. */
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.35;
    padding: 6px 12px;
    color: #cbd5e1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tasksTableWrap .filter-dropdown__item:hover,
#storesTableWrap .filter-dropdown__item:hover {
    background: #334155;
    color: #ffffff;
}
[data-theme="light"] #tasksTableWrap thead th .filter-dropdown,
[data-theme="light"] #storesTableWrap thead th .filter-dropdown {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(15,23,42,0.15);
}
[data-theme="light"] #tasksTableWrap .filter-dropdown__item,
[data-theme="light"] #storesTableWrap .filter-dropdown__item {
    color: #0f172a;
}
[data-theme="light"] #tasksTableWrap .filter-dropdown__item:hover,
[data-theme="light"] #storesTableWrap .filter-dropdown__item:hover {
    background: #f1f5f9;
}

th .filter-input {
    display: none;
    width: 100%;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #475569;
    background: #0f172a;
    color: white;
    font-size: 11px;
    margin-top: 2px;
}
th .filter-input.active { display: block; }

.filter-row td {
    padding: 4px 4px;
    background: #1e293b;
}
.filter-row input,
.filter-row select.filter-select {
    width: 100%;
    height: 24px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid #475569;
    background: #0f172a;
    color: white;
    font-size: 12px;
    box-sizing: border-box;
}
.filter-row input:focus,
.filter-row select.filter-select:focus {
    outline: none;
    border-color: #60a5fa;
}
.filter-row select.filter-select { cursor: pointer; }

.sort-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    margin-left: 6px;
    padding: 0 4px;
    transition: color 0.2s;
}
.sort-btn:hover { color: #60a5fa; }
.sort-btn.active-asc { color: #34d399; }
.sort-btn.active-desc { color: #f87171; }

.th-link {
    display: inline-block;
    background: rgba(91, 141, 239, 0.1);
    border: 1px solid rgba(91, 141, 239, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--accent-blue) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.th-link:hover {
    background: rgba(91, 141, 239, 0.25);
    border-color: var(--accent-blue);
}

/* ============================================================
   6. МАГАЗИНЫ
   ============================================================ */
.stores-toolbar__actions {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}
.stores-toolbar__actions .limit-badge {
    display: inline-flex;
}

#storesTableWrap { font-size: 12px; }
/* Сессия 2026-10-01 v4. Ширины увеличены под фильтры в шапке (только desktop).
   На mobile — карточки, ширины не применяются. */
@media (min-width: 641px) {
    #storesTableWrap .col-name { width: 130px; max-width: 130px; }
    #storesTableWrap .col-city { width: 110px; max-width: 110px; }
    #storesTableWrap .col-client { width: 110px; max-width: 110px; }
}
#storesTableWrap .col-price { width: 60px; max-width: 60px; }
#storesTableWrap .col-timing { width: 60px; max-width: 60px; }

/* Inline-edit: двойной клик по col-price / col-timing (сессия 59b).
   Только desktop — на mobile эти td открываются тапом-модалкой. */
@media (min-width: 641px) {
    #storesTableWrap td.col-price,
    #storesTableWrap td.col-timing {
        cursor: text;
        transition: background 0.15s ease;
    }
    #storesTableWrap td.col-price:hover,
    #storesTableWrap td.col-timing:hover {
        background: rgba(96, 165, 250, 0.12);
    }
    [data-theme="light"] #storesTableWrap td.col-price:hover,
    [data-theme="light"] #storesTableWrap td.col-timing:hover {
        background: #eff6ff;
    }
}

/* v85: dblclick по строке магазина открывает модалку.
   Курсор-pointer на tr — визуальная подсказка. td.col-price/td.col-timing
   перебивают его своим cursor:text (см. блок выше). */
@media (min-width: 641px) {
    #storesTableWrap tbody.store-group tr {
        cursor: pointer;
    }
}
#storesTableWrap .col-url { width: 100px; max-width: 100px; }
#storesTableWrap .col-comment { width: 80px; max-width: 80px; }
#storesTableWrap .col-actions { width: 90px; max-width: 90px; }
#storesTableWrap .col-schedule {
    width: auto;
    min-width: 220px;
    max-width: none;
    flex-shrink: 0;
}
#storesTableWrap .day-indicators {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    justify-content: flex-start;
}
#storesTableWrap .day-dot {
    width: 18px;
    height: 18px;
    font-size: 8px;
    flex-shrink: 0;
}

/* 6.0. Несколько ссылок в колонке «Стандарты» (мульти-поставщики) */
#storesTableWrap td.col-url .multi-url {
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#storesTableWrap td.col-url .multi-url + .multi-url {
    border-top: 1px dashed #334155;
    padding-top: 1px;
    margin-top: 1px;
}
[data-theme="light"] #storesTableWrap td.col-url .multi-url + .multi-url {
    border-top-color: #e2e8f0;
}

/* Кнопка «Стандарты» — построчно в колонке col-url (сессия 49) */
#storesTableWrap td.col-url a.standard-link {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.3;
    transition: background 0.15s, border-color 0.15s;
}
#storesTableWrap td.col-url a.standard-link:hover {
    background: rgba(96, 165, 250, 0.28);
    border-color: #60a5fa;
}
[data-theme="light"] #storesTableWrap td.col-url a.standard-link {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
[data-theme="light"] #storesTableWrap td.col-url a.standard-link:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.store-global-filter {
    flex: 1 1 120px;
    min-width: 90px;
    max-width: 240px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 12px;
    box-sizing: border-box;
}
.store-global-filter:focus { outline: none; border-color: #60a5fa; }
.store-global-filter::placeholder { color: #94a3b8; }

/* Кнопки действий внутри .store-filters-row — компактные круглые */
.store-filters-row .icon-btn-theme {
    width: 30px;
    height: 30px;
    font-size: 14px;
    flex-shrink: 0;
    padding: 0;
}
.store-filters-row .icon-btn-theme svg { width: 16px; height: 16px; }
.store-filters-row .icon-btn-theme--accent {
    background: #34d399;
    color: #0f172a;
}
.store-filters-row .icon-btn-theme--accent:hover { background: #16a34a; }
.store-filters-row .limit-badge { flex-shrink: 0; margin-left: auto; }
.store-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.store-filter-select {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 12px;
    max-width: 170px;
    min-width: 0;
}
.store-filter-select:focus { outline: none; border-color: #60a5fa; }
.store-reset-filters {
    padding: 5px 10px;
    border-radius: 8px;
    border: none;
    background: #475569;
    color: #f1f5f9;
    font-size: 12px;
    cursor: pointer;
}
.store-reset-filters:hover { background: #334155; }
#storeResetFiltersBtn {
    min-width: 32px;
    padding: 5px 8px;
    text-align: center;
    font-weight: 700;
}

#storesTableWrap tbody tr.store-row-hidden,
#storesTableWrap tbody.store-row-hidden {
    display: none;
}

/* ============================================================
   7. РАБОТНИКИ
   ============================================================ */
#workersList { font-size: 12px; }
#workersList .filter-select {
    width: 100%;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid #475569;
    background: #0f172a;
    color: white;
    font-size: 12px;
    cursor: pointer;
    box-sizing: border-box;
}
#workersList .filter-select:focus { outline: none; border-color: #60a5fa; }
#workersList tbody tr.worker-row-hidden { display: none; }

/* ============================================================
   8. ЗАДАНИЯ
   ============================================================ */
#tasksTableWrap { font-size: 12px; }
/* Сессия 2026-10-01, v2. Убран «Дата» — фильтр даты уже есть в тулбаре.
   Освободившееся (100 усл. ед.) распределено:
   Город +30, Поставщик +20, Работник +25, Адрес +10, Комментарий +15.
   Начато/Завершено — 68px (−15% от типовых 80px). */
#tasksTableWrap .col-store      { width: 100px; max-width: 100px; }
#tasksTableWrap .col-city       { width: 100px; max-width: 100px; }
#tasksTableWrap .col-address    { width: 210px; max-width: 210px; }
#tasksTableWrap .col-supplier   { width: 120px; max-width: 120px; }
#tasksTableWrap .col-worker     { width: 135px; max-width: 135px; }
#tasksTableWrap .col-price      { width: 60px; max-width: 60px; }
#tasksTableWrap .col-started    { width: 68px; max-width: 68px; }
#tasksTableWrap .col-completed  { width: 68px; max-width: 68px; }
#tasksTableWrap .col-source     { width: 90px; max-width: 90px; }
#tasksTableWrap .col-comments   { width: 75px; max-width: 75px; }

#tasksTableWrap tbody tr { cursor: pointer; transition: background 0.2s; }
#tasksTableWrap tbody tr:hover { background: #2d3748; }
#tasksTableWrap tbody tr .edit-task-btn { pointer-events: auto; }
#tasksTableWrap tbody tr:hover .edit-task-btn { background: #60a5fa; }

#tasksTableWrap tr.task-moved {
    background-color: rgba(100, 116, 139, 0.3);
    opacity: 0.6;
    text-decoration: line-through;
}
#tasksTableWrap tr.task-moved td { color: #94a3b8; }

#tasksTableWrap tr.task-started  { background-color: rgba(96, 165, 250, 0.20); }
#tasksTableWrap tr.task-redo     { background-color: rgba(245, 158, 11, 0.20); }
#tasksTableWrap tr.task-rejected { background-color: rgba(248, 113, 113, 0.20); }
#tasksTableWrap tr.task-completed { background-color: rgba(52, 211, 153, 0.20); }
#tasksTableWrap tr.task-not-done { background-color: transparent; }
#tasksTableWrap tr.task-not-done td { color: #f1f5f9; }
#tasksTableWrap tbody tr.task-row-hidden { display: none; }

/* ============================================================
   9. ПЛАНЫ (таблица — старая версия)
   ============================================================ */
#plansTable { width: 100%; table-layout: fixed; }
#plansTable th, #plansTable td {
    padding: 4px 2px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#plansTable .col-name { width: 90px; max-width: 90px; }
#plansTable .col-city { width: 75px; max-width: 75px; }
#plansTable .col-address { width: 150px; max-width: 150px; }
#plansTable .col-client { width: 90px; max-width: 90px; }
#plansTable .col-supplier { width: 120px; max-width: 120px; }
#plansTable .col-price { width: 55px; max-width: 55px; }
#plansTable .col-timing { width: 65px; max-width: 65px; }
#plansTable .col-schedule {
    width: auto;
    min-width: 320px;
    max-width: none;
    white-space: normal;
}
#plansTable .day-indicators {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-start;
}
#plansTable .day-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 3px;
    flex-shrink: 0;
}
#plansTable .day-dot {
    width: 24px;
    height: 24px;
    font-size: 11px;
    line-height: 24px;
    border-width: 2px;
}
#plansTable .order-input {
    width: 24px;
    font-size: 11px;
    padding: 0;
    margin-top: 2px;
    border: 1px solid #475569;
    background: #0f172a;
    color: white;
    text-align: center;
}

/* Группировка строк планов по склейке (name+address+city+client) */
#plansTable tbody.plan-group + tbody.plan-group tr:first-child td {
    border-top: 2px solid #475569;
}
#plansTable tbody.plan-group tr td[rowspan] {
    vertical-align: middle;
}
#plansTable tbody.plan-group tr td {
    vertical-align: top;
}
#plansTable tbody.plan-group .col-supplier {
    color: #cbd5e1;
}
[data-theme="light"] #plansTable tbody.plan-group + tbody.plan-group tr:first-child td {
    border-top-color: #cbd5e1;
}
[data-theme="light"] #plansTable tbody.plan-group .col-supplier {
    color: #334155;
}

/* ============================================================
   10. ДНИ НЕДЕЛИ (общий компонент)
   ============================================================ */
.day-indicators { display: flex; gap: 2px; justify-content: center; flex-wrap: nowrap; }
.day-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #475569;
    background: #1e293b;
    font-size: 8px;
    font-weight: 600;
    color: #94a3b8;
    flex-shrink: 0;
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
}
.day-dot.active { background: #34d399; border-color: #34d399; color: #0f172a; }
.day-dot.inactive { background: #1e293b; border-color: #334155; color: #475569; }
.day-dot.locked { background: #f59e0b; border-color: #f59e0b; color: #0f172a; }
.order-input {
    width: 30px;
    padding: 2px;
    margin-left: 4px;
    border-radius: 4px;
    border: 1px solid #60a5fa;
    background: #0f172a;
    color: white;
    text-align: center;
    font-size: 11px;
}
.order-input:focus { outline: none; border-color: #34d399; }
.day-wrapper { display: flex; flex-direction: column; align-items: center; margin: 0 2px; }
.day-wrapper .day-dot { margin-bottom: 2px; }

/* ============================================================
   11. ДЕТАЛИ ЗАДАНИЯ (сессия 48e — v2)
   ============================================================ */
#taskDetailContent {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 14px 16px;
    align-items: start;
}
#taskDetailModal .modal-content { position: relative; }
/* Ряд 1: 5 полей по 2 колонки (Магазин, Поставщик, Работник, Статус, Цена). */
#taskDetailContent > .tdc-field { grid-column: span 2; }
.tdc-field {
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
/* Комментарии: 2 поля по 5 колонок. */
#taskDetailContent > .tdc-field.tdc-wide { grid-column: span 5; }

/* Крестик закрытия в правом верхнем углу. */
.tdc-close {
    position: absolute; top: 10px; right: 12px;
    width: 30px; height: 30px; border-radius: 50%;
    background: transparent; border: none;
    color: var(--text-muted); font-size: 16px;
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center;
    z-index: 5; font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.tdc-close:hover { background: #334155; color: #f1f5f9; }
[data-theme="light"] .tdc-close:hover { background: #e2e8f0; color: #0f172a; }
.tdc-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-muted); line-height: 1.3;
}
.tdc-value {
    font-size: 14px; color: var(--text-primary);
    word-break: break-word; overflow-wrap: anywhere;
    line-height: 1.4; min-width: 0;
}
.tdc-value.is-empty { color: var(--text-muted); font-style: italic; }

#taskDetailContent > .tdc-photos {
    grid-column: span 5;
    display: flex; flex-direction: column; gap: 8px; min-width: 0;
    padding: 10px 12px;
    background: #0f172a;
    border-radius: 10px;
    border-left: 3px solid #475569;
}
.tdc-photos--start { border-left-color: #60a5fa; }
.tdc-photos--end   { border-left-color: #34d399; }
[data-theme="light"] .tdc-photos { background: #f8fafc; border-left-color: #cbd5e1; }
[data-theme="light"] .tdc-photos--start { border-left-color: #3b82f6; }
[data-theme="light"] .tdc-photos--end   { border-left-color: #059669; }
.tdc-photos-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-muted);
}
.tdc-photos-time {
    margin-left: auto;
    font-size: 11px; font-weight: 600;
    color: var(--text-secondary);
    text-transform: none; letter-spacing: 0;
    white-space: nowrap;
}
.tdc-photos-time:empty { display: none; }
.tdc-photos-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: 9px; background: #334155; color: #cbd5e1;
    font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.tdc-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
}
.tdc-photos-grid:empty::before {
    content: '—'; color: var(--text-muted);
    font-style: italic; grid-column: 1 / -1; padding: 4px 0;
}
.tdc-photos-grid img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: 8px; border: 1px solid #334155;
    cursor: pointer; transition: transform 0.15s, border-color 0.15s;
}
.tdc-photos-grid img:hover { transform: scale(1.03); border-color: #60a5fa; }
[data-theme="light"] .tdc-photos-count { background: #e2e8f0; color: #475569; }
[data-theme="light"] .tdc-photos-grid img { border-color: #cbd5e1; }
[data-theme="light"] .tdc-value { color: #0f172a; }
[data-theme="light"] .tdc-label { color: #64748b; }

.detail-photos-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.detail-photos-row img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #334155;
    cursor: pointer;
    transition: transform 0.2s;
}
.detail-photos-row img:hover { transform: scale(1.05); border-color: #60a5fa; }

/* ============================================================
   12. ПРОСМОТРЩИК ФОТО
   ============================================================ */
.photo-viewer {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.photo-viewer.active { display: flex; }
.photo-viewer img {
    max-width: 95%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.8);
}
.photo-viewer .viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    font-size: 40px;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    z-index: 10000;
}
.photo-viewer .viewer-nav:hover { background: rgba(255,255,255,0.4); }
.photo-viewer .viewer-nav.prev { left: 20px; }
.photo-viewer .viewer-nav.next { right: 20px; }
.photo-viewer .viewer-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: transform 0.2s;
    z-index: 10000;
}
.photo-viewer .viewer-close:hover { transform: scale(1.2); }
.photo-viewer .viewer-counter {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 18px;
    background: rgba(0,0,0,0.5);
    padding: 6px 16px;
    border-radius: 30px;
    z-index: 10000;
}

/* ============================================================
   13. МОДАЛЬНЫЕ ОКНА
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
.modal-overlay.active { display: flex; }
.modal-content {
    background: #1e293b;
    padding: 24px;
    border-radius: 16px;
    max-width: 700px;
    width: 95%;
    border: 1px solid #334155;
    max-height: 90vh;
    overflow-y: auto;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.modal-content h2 { margin-bottom: 16px; margin-top: 0; }
.modal-content .field { margin-bottom: 12px; }
.modal-content .field label {
    display: block;
    margin-bottom: 4px;
    color: #cbd5e1;
    font-weight: 500;
}
.modal-content .field input,
.modal-content .field select { width: 100%; padding: 8px; }
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
}

.edit-task-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.edit-task-field { flex: 1; min-width: 120px; }
.edit-task-field label {
    display: block;
    margin-bottom: 4px;
    color: #cbd5e1;
    font-weight: 500;
    font-size: 13px;
}
.edit-task-field input,
.edit-task-field select {
    width: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #334155;
    color: white;
    font-size: 13px;
}
.edit-task-field input:disabled { opacity: 0.7; cursor: not-allowed; }

/* ============================================================
   14. АВТОКОМПЛИТ (для отчётов)
   ============================================================ */
.ac-wrap { position: relative; display: inline-block; }
.ac-wrap > input { width: 100%; min-width: 140px; }
.ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1500;
    display: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    margin-top: 2px;
}
.ac-dropdown.open { display: block; }
.ac-dropdown .ac-item {
    padding: 8px 12px;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 13px;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-dropdown .ac-item:hover,
.ac-dropdown .ac-item.active { background: #334155; color: #fff; }
.ac-dropdown .ac-empty {
    padding: 10px 12px;
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

/* ============================================================
   15. ПРОЧЕЕ
   ============================================================ */
.worker-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.worker-filters input { width: 140px; }
.day-filter-select {
    background: #0f172a;
    border: 1px solid #475569;
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 13px;
}
.day-filter-select:focus { outline: none; border-color: #60a5fa; }
.coord-row { display: flex; gap: 10px; }
.coord-row .field { flex: 1; }

.comment-block {
    margin: 8px 0;
    padding: 8px 12px;
    background: #0f172a;
    border-radius: 8px;
    border-left: 3px solid #60a5fa;
}
.comment-block strong { color: #cbd5e1; }

.edit-task-btn, .edit-store-btn {
    padding: 2px 8px;
    font-size: 11px;
    white-space: nowrap;
    border-radius: 4px;
    border: none;
    background: #60a5fa;
    color: white;
    cursor: pointer;
    transition: 0.2s;
}
.edit-task-btn:hover, .edit-store-btn:hover { background: #2563eb; }

.photo-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.photo-thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #334155;
    cursor: pointer;
    transition: 0.2s;
}
.photo-thumbs img:hover { transform: scale(1.03); border-color: #60a5fa; }
.slider-container { display: none; flex-direction: column; align-items: center; margin-top: 10px; }
.slider-container.active { display: flex; }
.slider-image-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0f172a;
    border-radius: 12px;
    padding: 10px;
    min-height: 300px;
}
.slider-image-wrap img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 32px;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    z-index: 10;
}
.slider-btn:hover { background: rgba(255,255,255,0.3); }
.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }
.slider-counter { color: #94a3b8; font-size: 14px; margin-top: 8px; }
.back-to-grid {
    background: #475569;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    margin-top: 12px;
    cursor: pointer;
    font-size: 13px;
}
.back-to-grid:hover { background: #334155; }
.photo-grid-container { display: block; }
.photo-grid-container.hidden { display: none; }
.no-photos { color: #94a3b8; text-align: center; padding: 20px 0; }

.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #475569;
    border-radius: 34px;
    transition: 0.3s;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider { background: #34d399; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.save-worker-btn {
    background: #60a5fa;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
}
.save-worker-btn:hover { background: #2563eb; }

/* ============================================================
   16. БЕЙДЖ ЛИМИТА
   ============================================================ */
.limit-badge {
    display: none;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid;
    line-height: 1.4;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.limit-badge.limit-ok { background: rgba(52,211,153,0.12); color: #34d399; border-color: rgba(52,211,153,0.4); }
.limit-badge.limit-full { background: rgba(245,158,11,0.15); color: #f59e0b; border-color: rgba(245,158,11,0.5); }
.limit-badge.limit-over { background: rgba(248,113,113,0.15); color: #f87171; border-color: rgba(248,113,113,0.5); }

/* §131: .limit-badge--header удалён вместе с .topbar. */

/* Бейдж лимита магазинов из фильтр-строки на мобиле убран —
   дублирует общий .limit-badge[data-limit="stores"] в .stores-toolbar__actions. */
@media (max-width: 640px) {
    .store-filters-row .limit-badge[data-limit="stores"] {
        display: none;
    }
}

/* ============================================================
   17. СВЕТЛАЯ ТЕМА
   ============================================================ */
[data-theme="light"] body { background: #f8fafc; color: #0f172a; }
[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
[data-theme="light"] input::placeholder { color: #94a3b8; }

[data-theme="light"] button { color: #0f172a; }
[data-theme="light"] .btn-success { color: #ffffff; }
[data-theme="light"] .btn-danger  { color: #ffffff; }
[data-theme="light"] .export-btn  { color: #0f172a; }
[data-theme="light"] .btn-secondary { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .btn-secondary:hover { background: #cbd5e1; }
[data-theme="light"] .btn-logout-small { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .btn-logout-small:hover { background: #cbd5e1; }
[data-theme="light"] .icon-btn-theme { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .icon-btn-theme:hover { background: #cbd5e1; }

[data-theme="light"] th { background: #f1f5f9; color: #0f172a; }
[data-theme="light"] td { border-bottom-color: #e2e8f0; color: #0f172a; }
[data-theme="light"] .filter-row td { background: #ffffff; }
[data-theme="light"] .filter-row input,
[data-theme="light"] .filter-row select.filter-select { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
[data-theme="light"] .sort-btn { color: #94a3b8; }
[data-theme="light"] .sort-btn:hover { color: #3b82f6; }

[data-theme="light"] .tab-btn { background: #e2e8f0; color: #475569; }
[data-theme="light"] .tab-btn.active { background: #3b82f6; color: #ffffff; }
[data-theme="light"] .tab-btn:hover { background: #cbd5e1; }

[data-theme="light"] .refresh-btn { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .refresh-btn:hover { background: #cbd5e1; }
[data-theme="light"] .reset-filters { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .reset-filters:hover { background: #cbd5e1; }
[data-theme="light"] .mobile-filters-toggle { background: #e2e8f0; color: #0f172a; }

[data-theme="light"] .user-info { color: #475569; }
[data-theme="light"] .user-info #adminName { color: #0f172a; }
[data-theme="light"] .user-info #adminRole { color: #64748b; }

[data-theme="light"] .modal-overlay { background: rgba(15, 23, 42, 0.5); }
[data-theme="light"] .modal-content { background: #ffffff; border-color: #e2e8f0; color: #0f172a; }
[data-theme="light"] .modal-content .field label { color: #475569; }
[data-theme="light"] .edit-task-field label { color: #475569; }
[data-theme="light"] .edit-task-field input,
[data-theme="light"] .edit-task-field select { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
[data-theme="light"] .edit-task-field input:disabled { background: #f1f5f9; opacity: 0.7; }

[data-theme="light"] .day-dot { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
[data-theme="light"] .day-dot.active { background: #10b981; color: #ffffff; border-color: #10b981; }
[data-theme="light"] .day-dot.inactive { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }
[data-theme="light"] .order-input { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
[data-theme="light"] .day-filter-select { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }

[data-theme="light"] #tasksTableWrap tbody tr:hover { background: #f1f5f9; }
[data-theme="light"] #tasksTableWrap tr.task-started  { background-color: rgba(96, 165, 250, 0.12); }
[data-theme="light"] #tasksTableWrap tr.task-redo     { background-color: rgba(245, 158, 11, 0.12); }
[data-theme="light"] #tasksTableWrap tr.task-rejected { background-color: rgba(248, 113, 113, 0.12); }
[data-theme="light"] #tasksTableWrap tr.task-completed { background-color: rgba(52, 211, 153, 0.12); }
[data-theme="light"] #tasksTableWrap tr.task-not-done { background-color: transparent; }
[data-theme="light"] #tasksTableWrap tr.task-not-done td { color: #000000; }
[data-theme="light"] #tasksTableWrap tr.task-moved { background-color: rgba(100,116,139,0.12); }
[data-theme="light"] #tasksTableWrap tr.task-moved td { color: #64748b; }

[data-theme="light"] .multi-select .selected-display { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
[data-theme="light"] .multi-select .selected-display::after { color: #64748b; }
[data-theme="light"] .multi-select .dropdown { background: #ffffff; border-color: #cbd5e1; }
[data-theme="light"] .multi-select .dropdown label { color: #0f172a; }
[data-theme="light"] .multi-select .dropdown label:hover { background: #f1f5f9; }
[data-theme="light"] .multi-select .dropdown .select-all { border-bottom-color: #e2e8f0; }
[data-theme="light"] .multi-select .dropdown .select-all label { color: #0f172a; }

[data-theme="light"] .comment-block { background: #f8fafc; }
[data-theme="light"] .comment-block strong { color: #0f172a; }
[data-theme="light"] #editTaskMerchComment { background: #f8fafc; color: #334155; }

[data-theme="light"] .toggle-slider { background: #cbd5e1; }
[data-theme="light"] .toggle-switch input:checked + .toggle-slider { background: #10b981; }

[data-theme="light"] .back-to-grid { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .no-photos { color: #64748b; }
[data-theme="light"] .photo-thumbs img { border-color: #cbd5e1; }
[data-theme="light"] .detail-photos-row img { border-color: #cbd5e1; }

[data-theme="light"] #extraTaskModal p[style*="background: #0f172a"] {
    background: #f0fdf4;
    color: #166534;
}
[data-theme="light"] #supplierHint { background: #eff6ff; border-left-color: #3b82f6; }
[data-theme="light"] #supplierHint p { color: #1e40af; }

[data-theme="light"] .limit-badge.limit-ok { background: #ecfdf5; color: #047857; border-color: #6ee7b7; }
[data-theme="light"] .limit-badge.limit-full { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
[data-theme="light"] .limit-badge.limit-over { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

[data-theme="light"] .store-global-filter,
[data-theme="light"] .store-filter-select { background: #fff; color: #0f172a; border-color: #cbd5e1; }
[data-theme="light"] .store-global-filter::placeholder { color: #64748b; }
[data-theme="light"] .store-reset-filters { background: #e2e8f0; color: #0f172a; }

/* ============================================================
   18. ПЛАНШЕТ (900px)
   ============================================================ */
@media (max-width: 900px) {
    .user-info #adminName,
    .user-info #adminRole { display: none; }
    .admin-logo {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
        height: 18px;
        min-height: 18px;
        max-height: 18px;
        flex: 0 0 60px;
    }
}

/* ============================================================
   19. МОБИЛЬНЫЙ РЕЖИМ (≤ 768px) — общая адаптация таблиц
   ============================================================ */
.mobile-filters-toggle { display: none; }

@media (max-width: 768px) {
    .table-wrap { overflow-x: visible; }

    .mobile-filters-toggle {
        display: inline-block;
        background: #475569;
        color: white;
        border: 1px solid #334155;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 10px;
        cursor: pointer;
    }
    [data-theme="light"] .mobile-filters-toggle { background: #eef2f7; border-color: #dbe3ee; color: #0f172a; }

    .table-wrap thead tr.filter-row { display: none; }
    .table-wrap thead tr.filter-row.mobile-visible {
        display: block;
        background: #1e293b;
        border-radius: 12px;
        padding: 10px;
        margin-bottom: 12px;
        border: 1px solid #334155;
    }
    [data-theme="light"] .table-wrap thead tr.filter-row.mobile-visible { background: #f1f5f9; border-color: #cbd5e1; }

    .table-wrap thead tr.filter-row td[data-label] {
        display: block;
        width: 100%;
        max-width: none;
        padding: 0;
        border: none;
        margin-bottom: 10px;
    }
    .table-wrap thead tr.filter-row td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-bottom: 3px;
    }
    [data-theme="light"] .table-wrap thead tr.filter-row td[data-label]::before { color: #64748b; }
    .table-wrap thead tr.filter-row td:empty { display: none; }

    .table-wrap thead tr.filter-row input,
    .table-wrap thead tr.filter-row select.filter-select {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        background: #0f172a;
        border-radius: 8px;
        box-sizing: border-box;
    }
    [data-theme="light"] .table-wrap thead tr.filter-row input,
    [data-theme="light"] .table-wrap thead tr.filter-row select.filter-select { background: #ffffff; color: #0f172a; }

    .table-wrap thead tr:not(.filter-row) { display: none; }
    .table-wrap table { display: block; width: 100%; table-layout: auto; }
    .table-wrap thead, .table-wrap tbody { display: block; width: 100%; }

    .table-wrap tbody tr {
        display: block;
        position: relative;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }
    [data-theme="light"] .table-wrap tbody tr { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

    .table-wrap tbody tr.task-started   { border-left: 4px solid #60a5fa; }
    .table-wrap tbody tr.task-redo      { border-left: 4px solid #f59e0b; }
    .table-wrap tbody tr.task-rejected  { border-left: 4px solid #f87171; }
    .table-wrap tbody tr.task-completed { border-left: 4px solid #34d399; }
    .table-wrap tbody tr.task-moved { opacity: 0.6; }
    .table-wrap tbody tr.task-moved td { color: #94a3b8; }

    .table-wrap tbody td {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 5px 0;
        border: none;
        width: auto;
        max-width: none;
        min-width: 0;
        font-size: 13px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.4;
    }
    .table-wrap tbody td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        width: 90px;
        font-weight: 600;
        color: #94a3b8;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        padding-top: 2px;
    }
    [data-theme="light"] .table-wrap tbody td[data-label]::before { color: #64748b; }

    .table-wrap tbody td:empty { display: none; }
    .table-wrap tbody td:first-child:has(input[type="checkbox"]) {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 0;
        width: auto;
    }
    .table-wrap tbody td:not([data-label]) { justify-content: flex-end; }
    .table-wrap tbody td.col-actions,
    .table-wrap tbody td:last-child {
        border-top: 1px solid #334155;
        padding-top: 10px;
        margin-top: 8px;
    }
    [data-theme="light"] .table-wrap tbody td.col-actions,
    [data-theme="light"] .table-wrap tbody td:last-child { border-top-color: #e2e8f0; }
    .table-wrap tbody td.col-schedule { flex-direction: column; align-items: flex-start; }
    .table-wrap tbody td.col-schedule .day-indicators { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
    .table-wrap .sort-btn { display: none; }

    .table-wrap tbody .edit-store-btn,
    .table-wrap tbody .edit-task-btn,
    .table-wrap tbody .worker-edit-btn,
    .table-wrap tbody .worker-delete-btn,
    .table-wrap tbody .manager-edit-btn,
    .table-wrap tbody .manager-delete-btn,
    .table-wrap tbody .supplier-edit-btn,
    .table-wrap tbody .supplier-delete-btn {
        padding: 6px 14px;
        font-size: 14px;
    }
}

/* ============================================================
   20. ТЕЛЕФОН (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
    body { padding: 8px 0; }
    .card { padding: 10px; margin-bottom: 10px; border-radius: 12px; }
    table { font-size: 12px; }
    .modal-content { padding: 16px; }
    .photo-thumbs { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
    .coord-row { flex-direction: column; gap: 4px; }
    .worker-filters input { width: 100%; }
    th, td { font-size: 11px; padding: 4px 3px; }
    .sort-btn { font-size: 12px; }
    .order-input { width: 24px; font-size: 10px; }
    /* taskDetailContent — см. §11: 2 колонки на mobile через @media ниже */
    .detail-photos-row img { width: 70px; height: 70px; }

    /* Тулбар магазинов: только actions со скроллом */
    .stores-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .stores-toolbar__actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .stores-toolbar__actions::-webkit-scrollbar { display: none; }
    .stores-toolbar__actions > * { flex: 0 0 auto; }

    /* Шапка — 2 строки, 3 колонки */
    .dashboard-header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "tabs    tabs     tabs"
            "user    battery  actions";
        gap: 6px;
        margin-bottom: 10px;
        align-items: center;
        flex-direction: unset;
    }
    .tab-bar {
        grid-area: tabs;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        gap: 4px;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-btn { flex: 0 0 auto; padding: 6px 12px; font-size: 12px; white-space: nowrap; }
    .user-info {
        grid-area: user;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
        justify-content: flex-start;
        flex-wrap: nowrap;
        font-size: 11px;
    }
    .user-info #adminName,
    .user-info #adminRole { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .today-progress--mobile { grid-area: battery; justify-self: center; }
    .user-area { grid-area: actions; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
    .user-area .user-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; justify-content: flex-end; }
    .admin-logo {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 13px;
        min-height: 13px;
        max-height: 13px;
        flex: 0 0 44px;
    }
    .icon-btn-theme { width: 30px; height: 30px; font-size: 14px; }
    .btn-logout-small { padding: 3px 10px; font-size: 11px; border-radius: 30px; }

    /* Верхняя панель кнопок в карточках — одна строка, скролл */
    .card > .flex:first-child > div:first-child:empty { display: none; }
    .card > .flex:first-child > .flex,
    .card > .flex:first-child > div[style*="display:flex"],
    .card > .flex:first-child > div[style*="display: flex"] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        min-width: 0;
        flex: 1;
        justify-content: flex-start;
        margin-left: 0;
    }
    .card > .flex:first-child > .flex::-webkit-scrollbar,
    .card > .flex:first-child > div[style*="display:flex"]::-webkit-scrollbar { display: none; }
    .card > .flex:first-child > .flex > *,
    .card > .flex:first-child > div[style*="display:flex"] > * { flex: 0 0 auto; }

    .btn-success, .refresh-btn, .export-btn, .btn-secondary, .btn-danger, .reset-filters {
        padding: 5px 10px;
        font-size: 11px;
        white-space: nowrap;
        line-height: 1.2;
        flex: 0 0 auto;
    }
    .btn-success { padding: 5px 12px; }
    .limit-badge { font-size: 10px; padding: 3px 8px; white-space: nowrap; flex-shrink: 0; }

    /* Тулбар заданий */
    .tasks-toolbar {
        flex-wrap: wrap;
        background: #0b1220;
        border: 1px solid #1f2a44;
        border-radius: 12px;
        padding: 10px;
        margin-bottom: 12px;
        justify-content: flex-start;
    }
    [data-theme="light"] .tasks-toolbar { background: #eef2f7; border-color: #dbe3ee; }
    
    /* ============================================================
       МОБИЛЬНАЯ КАРТОЧКА МАГАЗИНА (склейка мульти-поставщиков)
       Чистые div'ы — не пересекается со стилями .table-wrap
       ============================================================ */
    .stores-mobile-holder { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
      .store-group-mobile {
        position: relative;
        padding: 8px 10px;
        background: #283a5a;
        border: 1px solid #3e5278;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.28);
        font-size: 12px;
    }
    [data-theme="light"] .store-group-mobile { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15,23,42,0.06); }
    .store-group-mobile.store-row-hidden { display: none; }

    .store-group-mobile .store-mobile-check {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 18px;
        height: 18px;
        accent-color: #60a5fa;
        cursor: pointer;
        margin: 0;
        z-index: 1;
    }

    .store-group-mobile .smc-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 4px;
        margin-bottom: 6px;
        padding-right: 26px;
    }
    .store-group-mobile .smc-name {
        justify-self: start;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .store-group-mobile .smc-addr-inline {
        justify-self: center;
        min-width: 0;
        max-width: 100%;
        padding: 2px 9px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
        color: #dbeafe;
        background: rgba(96, 165, 250, 0.18);
        border: 1px solid rgba(96, 165, 250, 0.45);
        border-radius: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    [data-theme="light"] .store-group-mobile .smc-addr-inline {
        color: #1e40af;
        background: #e0efff;
        border-color: #93c5fd;
    }
    .store-group-mobile .smc-city {
        justify-self: end;
        font-size: 11px;
        color: var(--text-muted);
        white-space: nowrap;
    }
    .store-group-mobile .smc-addr { display: none; }
    .store-group-mobile .smc-meta {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        font-size: 11px;
        color: var(--text-secondary);
        margin-bottom: 6px;
        flex-wrap: wrap;
    }
    .store-group-mobile .smc-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .store-group-mobile .smc-suppliers {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 6px 0;
        border-top: 1px solid #3e5278;
        border-bottom: 1px solid #3e5278;
        margin-bottom: 6px;
    }
    [data-theme="light"] .store-group-mobile .smc-suppliers { border-color: #d5dde7; }

    #batchEditBtn, #saveBatchBtn, #cancelBatchBtn { display: none; }

    #plansTable .day-indicators { flex-wrap: wrap; }
    #plansTable .col-schedule { min-width: 0; }

    /* ============================================================
       МОБИЛЬНАЯ МОДАЛКА МАГАЗИНА — карточки поставщиков
       ============================================================ */
    #editStoreSuppliersList.store-suppliers-list,
    #editStoreSuppliersList {
        background: transparent;
        border: none;
        overflow: visible;
        border-radius: 0;
        margin-bottom: 8px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    #editStoreSuppliersList > table { display: none; }

    .store-sup-mobile {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 10px;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 10px;
        overflow: hidden;
    }
    [data-theme="light"] .store-sup-mobile { background: #f8fafc; border-color: #cbd5e1; }

    .store-sup-mobile__name {
        font-weight: 700;
        font-size: 13px;
        color: #f1f5f9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    [data-theme="light"] .store-sup-mobile__name { color: #0f172a; }

    .store-sup-mobile__row {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        width: 100%;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .store-sup-mobile__field { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
    .store-sup-mobile__field .icon { font-size: 12px; opacity: 0.75; line-height: 1; }

    .store-sup-mobile__input {
        width: 38px;
        min-width: 38px;
        max-width: 38px;
        padding: 3px 2px;
        font-size: 11px;
        text-align: center;
        border-radius: 5px;
        background: #1e293b;
        border: 1px solid #334155;
        color: #f1f5f9;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: textfield;
        appearance: none;
    }
    .store-sup-mobile__input::-webkit-outer-spin-button,
    .store-sup-mobile__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    [data-theme="light"] .store-sup-mobile__input {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #0f172a;
    }

    .store-sup-mobile__days {
        display: inline-flex;
        align-items: center;
        gap: 1px;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .store-sup-mobile__days .day-dot {
        width: 16px;
        height: 16px;
        min-width: 16px;
        font-size: 8px;
        line-height: 16px;
        padding: 0;
        border-width: 1px;
        flex: 0 0 auto;
    }

    .store-sup-mobile__comment-btn {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        padding: 0;
        font-size: 14px;
        line-height: 1;
        background: transparent;
        border: 1px solid #334155;
        border-radius: 6px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.6;
        transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    }
    .store-sup-mobile__comment-btn.has-comment {
        opacity: 1;
        background: rgba(96,165,250,0.18);
        border-color: #60a5fa;
    }
    .store-sup-mobile__comment-btn:hover,
    .store-sup-mobile__comment-btn:active { opacity: 1; border-color: #60a5fa; }

    .store-sup-mobile__url-btn {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        padding: 0;
        font-size: 13px;
        line-height: 1;
        background: transparent;
        border: 1px solid #334155;
        border-radius: 6px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.6;
        transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    }
    .store-sup-mobile__url-btn.has-url {
        opacity: 1;
        background: rgba(96,165,250,0.18);
        border-color: #60a5fa;
    }
    .store-sup-mobile__url-btn:hover,
    .store-sup-mobile__url-btn:active { opacity: 1; border-color: #60a5fa; }

    .store-sup-mobile__remove {
        flex: 0 0 auto;
        width: 20px;
        height: 22px;
        padding: 0;
        font-size: 15px;
        line-height: 1;
        background: transparent;
        border: none;
        color: #f87171;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .store-sup-mobile__remove:hover { color: #ef4444; }
    /* Контейнер вкладки «Задания»: карточки до краёв .card */
    #tab-tasks,
    #tab-stores,
    #tab-workers,
    #tab-suppliers,
    #tab-managers,
    #tab-announcements {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }
    #tab-tasks > .card,
    #tab-stores > .card,
    #tab-workers > .card,
    #tab-suppliers > .card,
    #tab-managers > .card,
    #tab-announcements > .card {
        padding: 8px 4px;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }
    #tab-tasks .tasks-toolbar,
    #tab-tasks .stores-toolbar,
    #tab-tasks .tasks-filters-grid {
        min-width: 0;
        max-width: 100%;
    }
    .tasks-mobile-holder,
    .stores-mobile-holder {
        min-width: 0;
        max-width: 100%;
    }
}

/* ============================================================
   21. ОЧЕНЬ УЗКИЕ ЭКРАНЫ (≤ 400px)
   ============================================================ */
@media (max-width: 400px) {
    .btn-success, .refresh-btn, .export-btn, .btn-secondary, .btn-danger { padding: 4px 8px; font-size: 10px; }
    .tab-btn { padding: 5px 10px; font-size: 11px; }
    .table-wrap tbody td[data-label]::before { width: 58px; font-size: 9px; }
    .card { padding: 8px; }
    #tasksTableWrap tbody td[data-label="Магазин"],
    #storesTableWrap tbody td.col-name { font-size: 13px; }
    #storesTableWrap tbody td.col-schedule .day-dot { width: 20px; height: 20px; font-size: 9px; }
}

/* ============================================================
   22. ПРОГРЕСС ЗАДАНИЙ (батарейка)
   ============================================================ */
.today-progress { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
.today-progress__caption { font-size: 10px; color: #94a3b8; white-space: nowrap; margin-right: 4px; }
[data-theme="light"] .today-progress__caption { color: #64748b; }
.today-progress--mobile { display: none; }
.today-progress--desktop { display: flex; }

@media (max-width: 900px) {
    .today-progress--mobile { display: flex; }
    .today-progress--desktop { display: none; }
}

.today-progress[hidden] { display: none; }

.tasks-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.tasks-toolbar .filter-group { min-width: 0; }
.tasks-toolbar .today-progress--desktop { justify-self: center; }

@media (max-width: 640px) {
    .tasks-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
}

.battery { display: flex; align-items: center; }
.battery__body {
    position: relative;
    width: 120px;
    height: 24px;
    border: 2px solid #94a3b8;
    border-radius: 999px;
    padding: 2px;
    background: transparent;
    overflow: hidden;
}
.battery__fill {
    position: absolute;
    top: 2px; left: 2px; bottom: 2px;
    width: 0;
    background: #34d399;
    border-radius: 999px;
    transition: width .4s ease, background .3s ease;
}
.battery__fill[data-level="mid"] { background: #f59e0b; }
.battery__fill[data-level="low"] { background: #f87171; }
.battery__label {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #f1f5f9;
    text-shadow: 0 0 3px rgba(0,0,0,0.65), 0 0 6px rgba(0,0,0,0.4);
    z-index: 2;
    white-space: nowrap;
    pointer-events: none;
}
.battery__label-word { font-weight: 400; font-size: 10px; color: #e2e8f0; }
.battery__cap {
    display: none;
}
[data-theme="light"] .battery__body { border-color: #64748b; }
[data-theme="light"] .battery__cap { background: #64748b; }
[data-theme="light"] .battery__label { color: #0f172a; text-shadow: 0 0 3px rgba(255,255,255,0.85); }
[data-theme="light"] .battery__label-word { color: #1e293b; }

@media (max-width: 900px) {
    .battery__body { width: 88px; height: 20px; padding: 1.5px; }
    .battery__fill { top: 1.5px; left: 1.5px; bottom: 1.5px; }
    .battery__cap { height: 8px; width: 3px; }
    .battery__label { font-size: 10px; gap: 3px; }
    .battery__label-word { font-size: 9px; }
}
@media (max-width: 640px) {
    .battery__body { width: 64px; height: 18px; }
    .battery__label { font-size: 9px; }
}

/* ============================================================
   23. МУЛЬТИ-ПОСТАВЩИКИ — чекбоксы, карточки, сводка (модалка магазина)
   ============================================================ */
.store-suppliers-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    margin-bottom: 10px;
    max-height: 140px;
    overflow-y: auto;
}
.store-suppliers-checkboxes:empty::before {
    content: "Нет доступных поставщиков — создайте первого кнопкой ниже";
    color: #64748b;
    font-size: 12px;
    font-style: italic;
    padding: 4px;
}
.store-suppliers-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    color: #cbd5e1;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.store-suppliers-checkbox:hover { border-color: #60a5fa; }
.store-suppliers-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #34d399;
    margin: 0;
    cursor: pointer;
}
.store-suppliers-checkbox.checked {
    background: rgba(52,211,153,0.15);
    border-color: #34d399;
    color: #f1f5f9;
}

.store-suppliers-list {
    overflow-x: auto;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #0f172a;
    margin-bottom: 10px;
}
.store-suppliers-list:empty { display: none; }

.store-suppliers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: auto;
}
.store-suppliers-table thead th {
    background: #1e293b;
    color: #94a3b8;
    font-weight: 600;
    font-size: 11px;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #334155;
    white-space: nowrap;
}
.store-suppliers-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #1f2a44;
    vertical-align: middle;
    white-space: nowrap;
}
.store-suppliers-table tbody tr:last-child td { border-bottom: none; }

.store-suppliers-table .col-supplier-name {
    color: #f1f5f9;
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.store-suppliers-table input.sup-price,
.store-suppliers-table input.sup-timing {
    width: 70px;
    padding: 4px 6px;
    font-size: 12px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
    border-radius: 6px;
}
.store-suppliers-table input.sup-comment {
    width: 120px;
    padding: 4px 6px;
    font-size: 12px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
    border-radius: 6px;
}
.store-suppliers-table input.sup-price:focus,
.store-suppliers-table input.sup-timing:focus,
.store-suppliers-table input.sup-comment:focus { outline: none; border-color: #60a5fa; }

.store-suppliers-table .sup-days {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
}
.store-suppliers-table td.sup-days-cell {
    overflow: visible;
    white-space: normal;
    padding: 6px 8px;
    vertical-align: middle;
}
.store-suppliers-table .sup-days .day-dot {
    width: 22px;
    height: 22px;
    font-size: 10px;
    line-height: 22px;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.store-suppliers-table .sup-days .day-dot.active { background: #34d399; border-color: #34d399; color: #0f172a; }
.store-suppliers-table .sup-days .day-dot.inactive { background: #1e293b; border-color: #334155; color: #475569; }
.store-suppliers-table .sup-days .day-dot:hover { border-color: #60a5fa; }

.store-suppliers-table .sup-remove {
    background: transparent;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
}
.store-suppliers-table .sup-remove:hover { color: #ef4444; }

.store-suppliers-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    background: #0b1220;
    border: 1px solid #1f2a44;
    border-radius: 8px;
    font-size: 12px;
    color: #cbd5e1;
    margin-bottom: 8px;
}
.store-suppliers-summary.hidden { display: none; }
.store-suppliers-summary .sum-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #1e293b;
    border: 1px solid #334155;
}
.store-suppliers-summary .sum-item.empty { opacity: 0.5; }
.store-suppliers-summary .sum-item.busy {
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.5);
    color: #f59e0b;
    font-weight: 600;
}
.store-suppliers-summary .sum-item.heavy {
    background: rgba(248,113,113,0.15);
    border-color: rgba(248,113,113,0.5);
    color: #f87171;
    font-weight: 700;
}
.store-suppliers-summary .sum-label { color: #94a3b8; margin-right: 4px; }

[data-theme="light"] .store-suppliers-checkboxes { background: #f8fafc; border-color: #cbd5e1; }
[data-theme="light"] .store-suppliers-checkbox { background: #ffffff; border-color: #cbd5e1; color: #334155; }
[data-theme="light"] .store-suppliers-checkbox.checked { background: #ecfdf5; border-color: #10b981; color: #065f46; }
[data-theme="light"] .store-suppliers-list { background: #ffffff; border-color: #cbd5e1; }
[data-theme="light"] .store-suppliers-table thead th { background: #f1f5f9; color: #64748b; border-bottom-color: #e2e8f0; }
[data-theme="light"] .store-suppliers-table tbody td { border-bottom-color: #e2e8f0; }
[data-theme="light"] .store-suppliers-table .col-supplier-name { color: #0f172a; }
[data-theme="light"] .store-suppliers-table input.sup-price,
[data-theme="light"] .store-suppliers-table input.sup-timing,
[data-theme="light"] .store-suppliers-table input.sup-comment { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
[data-theme="light"] .store-suppliers-table .sup-days .day-dot.inactive { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8; }
[data-theme="light"] .store-suppliers-summary { background: #f8fafc; border-color: #e2e8f0; color: #334155; }
[data-theme="light"] .store-suppliers-summary .sum-item { background: #ffffff; border-color: #cbd5e1; }

@media (max-width: 640px) {
    .store-suppliers-table { font-size: 11px; }
    .store-suppliers-table thead th,
    .store-suppliers-table tbody td { padding: 5px 6px; }
    .store-suppliers-table .sup-days .day-dot { width: 20px; height: 20px; font-size: 9px; line-height: 20px; }
    .store-suppliers-table input.sup-price,
    .store-suppliers-table input.sup-timing { width: 60px; }
    .store-suppliers-table input.sup-comment { width: 90px; }
}

/* ============================================================
   24. ГРУППИРОВКА МАГАЗИНОВ (desktop, rowspan по поставщикам)
   ============================================================ */
#storesTableWrap tbody.store-group + tbody.store-group tr:first-child td {
    border-top: 2px solid #475569;
}
#storesTableWrap tbody.store-group tr:first-child td[rowspan] {
    vertical-align: middle;
}
#storesTableWrap tbody.store-group tr td {
    vertical-align: top;
}

/* ============================================================
   25. МОДАЛКА МАГАЗИНА — широкая сетка (editStoreModal)
   ============================================================ */
.modal-content.modal-content--wide {
    max-width: 960px;
}
.modal-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.modal-row > .field {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}
.modal-row--3 > .field { flex-basis: calc(33.333% - 7px); }
.modal-row--2 > .field { flex-basis: calc(50% - 5px); }

.modal-field-inline {
    display: flex;
    gap: 8px;
}
.modal-field-inline > select {
    flex: 1 1 auto;
    min-width: 0;
}
.modal-field-inline > button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .modal-content.modal-content--wide { max-width: 95%; }
    .modal-row { flex-direction: column; gap: 8px; }
    .modal-row > .field { flex-basis: 100%; margin-bottom: 4px; }

    /* Исключения: эти строки остаются в 2 колонки на мобиле */
    .modal-row--keep-row { flex-direction: row; gap: 8px; }
    .modal-row--keep-row > .field {
        flex-basis: calc(50% - 4px);
        margin-bottom: 4px;
    }
}

/* ============================================================
   26. МОДАЛКА МАГАЗИНА — блок поставщиков: чипы + кнопка «Создать»
   ============================================================ */
.store-suppliers-toolbar {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.store-suppliers-toolbar .store-suppliers-checkboxes {
    flex: 1 1 auto;
    margin-bottom: 0;
    min-width: 0;
}
.store-suppliers-toolbar #addSupplierFromStoreBtn {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 6px 12px;
    white-space: nowrap;
    align-self: flex-start;
}

/* Инпут «Стандарты» в таблице поставщиков */
.store-suppliers-table input.sup-url {
    /* SALE_POINTS_V2B2_FIX1: было 120px — теперь 80px,
       чтобы в таблице поставщиков освободить место под ТТ. */
    width: 80px;
    padding: 4px 6px;
    font-size: 12px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
    border-radius: 6px;
}
.store-suppliers-table input.sup-url:focus {
    outline: none;
    border-color: #60a5fa;
}

[data-theme="light"] .store-suppliers-table input.sup-url {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

@media (max-width: 640px) {
    .store-suppliers-toolbar { flex-direction: column; align-items: stretch; }
    .store-suppliers-toolbar #addSupplierFromStoreBtn { align-self: stretch; }
    .store-suppliers-table input.sup-url { width: 90px; }
}

/* ============================================================
   27. МОБИЛЬНАЯ КАРТОЧКА МАГАЗИНА — плашки поставщиков
   ============================================================ */
@media (max-width: 640px) {
        .store-group-mobile .smc-sup {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 5px 8px;
        margin-bottom: 6px;
        background: #374e7a;
        border: 1px solid #4d6796;
        border-radius: 8px;
    }
    [data-theme="light"] .store-group-mobile .smc-sup {
        background: #eef2f7;
        border-color: #d5dde7;
    }
    .store-group-mobile .smc-sup:last-child { margin-bottom: 0; }

    .store-group-mobile .smc-sup-name {
        font-weight: 600;
        font-size: 12px;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .store-group-mobile .smc-sup-row {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .store-group-mobile .smc-sup-metric {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex: 0 0 auto;
        padding: 2px 6px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 5px;
        font-size: 11px;
        color: #f1f5f9;
    }
    [data-theme="light"] .store-group-mobile .smc-sup-metric {
        background: #ffffff;
        border-color: #cbd5e1;
        color: #0f172a;
    }
    .store-group-mobile .smc-sup-metric .icon {
        font-size: 11px;
        opacity: 0.75;
    }
    .store-group-mobile .smc-sup-metric .val {
        font-weight: 600;
    }

    .store-group-mobile .smc-sup-days {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .store-group-mobile .smc-sup-days .day-indicators {
        justify-content: flex-start;
        gap: 2px;
        flex-wrap: nowrap;
    }
    .store-group-mobile .smc-sup-days .day-dot {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 9px;
        line-height: 20px;
        padding: 0;
    }

    .store-group-mobile .smc-sup-btn {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        padding: 0;
        font-size: 12px;
        line-height: 1;
        background: transparent;
        border: 1px solid #334155;
        border-radius: 6px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.55;
        transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    }
    .store-group-mobile .smc-sup-btn.has-value {
        opacity: 1;
        background: rgba(96,165,250,0.18);
        border-color: #60a5fa;
    }
    .store-group-mobile .smc-sup-btn:hover,
    .store-group-mobile .smc-sup-btn:active {
        opacity: 1;
        border-color: #60a5fa;
    }
}

/* ============================================================
   28. ОТЧЁТЫ — тулбар фильтров (v2, компактный)

   §28-v1 задала высокие поля (28px) и «резиновый» .ac-wrap
   (flex: 1 1 70px, max 130px). На широких экранах 5 таких полей
   растягивались по всей строке — тулбар выглядел громоздко.

   v2 сжимает: высота полей 28 → 26, шрифт 12 → 11, .ac-wrap
   фиксируем на 110px (перестаёт растягиваться), датам даём
   фиксированные 110px вместо 130. Гэпы и margin-bottom плотнее.

   Desktop (≥641px): одна строка без скролла.
   Mobile (≤640px):  3 поля в ряд, лейбл сверху.
   ============================================================ */
.report-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 10px;
    min-width: 0;
}
.report-toolbar .rt-field {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    min-width: 0;
}
.report-toolbar .rt-field > label {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    flex: 0 0 auto;
    margin: 0;
}
.report-toolbar .rt-field > select {
    width: 100px;
    box-sizing: border-box;
    min-width: 0;
    font-size: 11px;
    padding: 2px 4px;
    height: 26px;
}
.report-toolbar .rt-field > input[type="number"] {
    width: 50px;
    box-sizing: border-box;
    min-width: 0;
    font-size: 11px;
    padding: 2px 4px;
    height: 26px;
}
.report-toolbar .rt-field > input[type="date"] {
    width: 110px;
    box-sizing: border-box;
    min-width: 0;
    font-size: 11px;
    padding: 2px 4px;
    height: 26px;
}
.report-toolbar .rt-field > .ac-wrap {
    flex: 0 0 110px;
    width: 110px;
    min-width: 0;
    max-width: 110px;
}
.report-toolbar .rt-field > .ac-wrap > input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 11px;
    padding: 2px 6px;
    height: 26px;
}
.report-toolbar > button {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 2px 10px;
    white-space: nowrap;
    height: 26px;
    box-sizing: border-box;
    margin-left: auto;
}

[data-theme="light"] .report-toolbar .rt-field > label {
    color: #64748b;
}

@media (max-width: 640px) {
    .report-toolbar {
        flex-wrap: wrap;
        gap: 4px;
        align-items: stretch;
    }
    .report-toolbar .rt-field {
        flex: 0 0 calc(33.333% - 3px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        min-width: 0;
    }
    .report-toolbar .rt-field > label {
        font-size: 10px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .report-toolbar .rt-field > select,
    .report-toolbar .rt-field > input[type="number"],
    .report-toolbar .rt-field > input[type="date"],
    .report-toolbar .rt-field > .ac-wrap {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }
    .report-toolbar .rt-field > select,
    .report-toolbar .rt-field > input[type="number"],
    .report-toolbar .rt-field > input[type="date"],
    .report-toolbar .rt-field > .ac-wrap > input {
        height: 28px;
        font-size: 11px;
        padding: 3px 6px;
    }
    .report-toolbar > #generateReportBtn {
        flex: 0 0 calc(66.666% - 3px);
        height: 28px;
        font-size: 12px;
        padding: 4px 10px;
        align-self: flex-end;
    }
}

/* ============================================================
   29. Кнопки отчётов в шапке (только на вкладке «Отчёты»)
   ============================================================ */
.header-report-btn {
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .header-report-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}

/* ============================================================
   30. МОБИЛЬНАЯ КАРТОЧКА ЗАДАНИЯ
   ============================================================ */
@media (max-width: 640px) {
    .tasks-mobile-holder { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

       .task-group-mobile {
        position: relative;
        padding: 8px 10px;
        background: #283a5a;
        border: 1px solid #3e5278;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.28);
        font-size: 12px;
        cursor: pointer;
    }
    [data-theme="light"] .task-group-mobile { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15,23,42,0.06); }

    .task-group-mobile.task-started   { border-left: 4px solid #60a5fa; }
    .task-group-mobile.task-redo      { border-left: 4px solid #f59e0b; }
    .task-group-mobile.task-rejected  { border-left: 4px solid #f87171; }
    .task-group-mobile.task-completed { border-left: 4px solid #34d399; }
    .task-group-mobile.task-cancelled { border-left: 4px solid #f87171; }
    .task-group-mobile.task-moved     { opacity: 0.7; }
    .task-group-mobile.task-row-hidden { display: none; }

    .task-group-mobile .tmc-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 4px;
        margin-bottom: 6px;
    }
    .task-group-mobile .tmc-name {
        justify-self: start;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .task-group-mobile .tmc-addr-inline {
        justify-self: center;
        min-width: 0;
        max-width: 100%;
        padding: 2px 9px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
        color: #dbeafe;
        background: rgba(96, 165, 250, 0.18);
        border: 1px solid rgba(96, 165, 250, 0.45);
        border-radius: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    [data-theme="light"] .task-group-mobile .tmc-addr-inline {
        color: #1e40af;
        background: #e0efff;
        border-color: #93c5fd;
    }
    .task-group-mobile .tmc-city {
        justify-self: end;
        font-size: 11px;
        color: var(--text-muted);
        white-space: nowrap;
    }

    .task-group-mobile .tmc-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
        min-width: 0;
    }
    .task-group-mobile .tmc-worker {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 11px;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .task-group-mobile .tmc-source {
        flex: 0 0 auto;
        padding: 3px 8px;
        border-radius: 8px;
        background: #334155;
        border: 1px solid #475569;
        color: #cbd5e1;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }
    [data-theme="light"] .task-group-mobile .tmc-source { background: #e2e8f0; color: #475569; border-color: #cbd5e1; }

       .task-group-mobile .tmc-suppliers {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-top: 6px;
        border-top: 1px solid #3e5278;
    }
    [data-theme="light"] .task-group-mobile .tmc-suppliers { border-top-color: #d5dde7; }

       .task-group-mobile .tmc-sup {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 5px 8px;
        background: #374e7a;
        border: 1px solid #4d6796;
        border-radius: 8px;
    }
    [data-theme="light"] .task-group-mobile .tmc-sup { background: #eef2f7; border-color: #d5dde7; }

    .task-group-mobile .tmc-sup.task-started   { border-left: 3px solid #60a5fa; }
    .task-group-mobile .tmc-sup.task-redo      { border-left: 3px solid #f59e0b; }
    .task-group-mobile .tmc-sup.task-rejected  { border-left: 3px solid #f87171; }
    .task-group-mobile .tmc-sup.task-completed { border-left: 3px solid #34d399; }
    .task-group-mobile .tmc-sup.task-cancelled { border-left: 3px solid #f87171; }

    .task-group-mobile .tmc-sup-name {
        font-weight: 600;
        font-size: 12px;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .task-group-mobile .tmc-sup-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
        flex-wrap: nowrap;
    }
    .task-group-mobile .tmc-sup-left {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex: 0 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
    }
    .task-group-mobile .tmc-sup-right {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }
    .task-group-mobile .tmc-sup-metric {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex: 0 0 auto;
        padding: 2px 6px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 5px;
        font-size: 11px;
        color: #f1f5f9;
    }
    [data-theme="light"] .task-group-mobile .tmc-sup-metric { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
    .task-group-mobile .tmc-sup-metric .icon { font-size: 11px; opacity: 0.75; }
    .task-group-mobile .tmc-sup-metric .val { font-weight: 600; }

    .task-group-mobile .tmc-status {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 8px;
        background: #334155;
        color: #cbd5e1;
        white-space: nowrap;
    }
    .task-group-mobile .tmc-sup.task-started   .tmc-status { background: #60a5fa; color: #fff; }
    .task-group-mobile .tmc-sup.task-redo      .tmc-status { background: #f59e0b; color: #0f172a; }
    .task-group-mobile .tmc-sup.task-completed .tmc-status { background: #34d399; color: #0f172a; }
    .task-group-mobile .tmc-sup.task-cancelled .tmc-status,
    .task-group-mobile .tmc-sup.task-rejected  .tmc-status { background: #f87171; color: #fff; }
    .task-group-mobile .tmc-sup.task-moved     .tmc-status { background: #64748b; color: #fff; }
    .task-group-mobile .tmc-sup.task-planned   .tmc-status { background: #60a5fa; color: #fff; }
    .task-group-mobile .tmc-sup.task-not-done  .tmc-status { background: #94a3b8; color: #fff; }

    .task-group-mobile .tmc-date {
        font-size: 10px;
        color: var(--text-muted);
        white-space: nowrap;
    }
}

/* ============================================================
   31. МОБИЛЬНАЯ КАРТОЧКА ПЛАНА РАБОТНИКА + ИТОГИ
   ============================================================ */
@media (max-width: 640px) {
    .plans-mobile-holder {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
    }
      .plan-group-mobile {
        position: relative;
        padding: 8px 10px;
        background: #283a5a;
        border: 1px solid #3e5278;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.28);
        font-size: 12px;
    }
    [data-theme="light"] .plan-group-mobile {
        background: #ffffff;
        border-color: #cbd5e1;
        box-shadow: 0 2px 8px rgba(15,23,42,0.06);
    }

    .plan-group-mobile .pmc-top {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 6px;
    }
    .plan-group-mobile .pmc-name {
        flex: 0 1 auto;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .plan-group-mobile .pmc-addr-inline {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 11px;
        color: var(--text-secondary);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .plan-group-mobile .pmc-city {
        flex: 0 0 auto;
        font-size: 11px;
        color: var(--text-muted);
        white-space: nowrap;
    }

    .plan-group-mobile .pmc-suppliers {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
        .plan-group-mobile .pmc-sup {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 6px 8px;
        background: #374e7a;
        border: 1px solid #4d6796;
        border-radius: 8px;
    }
    [data-theme="light"] .plan-group-mobile .pmc-sup {
        background: #eef2f7;
        border-color: #d5dde7;
    }
    .plan-group-mobile .pmc-sup-name {
        font-weight: 600;
        font-size: 12px;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .plan-group-mobile .pmc-sup-metrics {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }
    .plan-group-mobile .pmc-sup-metric {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 6px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 5px;
        font-size: 11px;
        color: #f1f5f9;
        min-width: 40px;
    }
    [data-theme="light"] .plan-group-mobile .pmc-sup-metric {
        background: #ffffff;
        border-color: #cbd5e1;
        color: #0f172a;
    }
    .plan-group-mobile .pmc-sup-metric .icon { opacity: 0.75; }
    .plan-group-mobile .pmc-sup-metric .val { font-weight: 600; }

    .plan-group-mobile .pmc-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }
    .plan-group-mobile .pmc-day {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 0;
    }
    .plan-group-mobile .pmc-day .day-dot {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 9px;
        line-height: 20px;
        padding: 0;
        border-width: 1px;
    }
    .plan-group-mobile .pmc-day .order-input {
        width: 100%;
        max-width: 34px;
        padding: 2px 2px;
        font-size: 11px;
        text-align: center;
        border-radius: 5px;
        background: #1e293b;
        border: 1px solid #334155;
        color: #f1f5f9;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: textfield;
        appearance: none;
    }
    .plan-group-mobile .pmc-day .order-input::-webkit-outer-spin-button,
    .plan-group-mobile .pmc-day .order-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .plan-group-mobile .pmc-day .order-input[readonly] {
        background: transparent;
        border-color: transparent;
        font-weight: 600;
        color: #cbd5e1;
    }
    [data-theme="light"] .plan-group-mobile .pmc-day .order-input {
        background: #ffffff;
        border-color: #cbd5e1;
        color: #0f172a;
    }
    [data-theme="light"] .plan-group-mobile .pmc-day .order-input[readonly] {
        color: #334155;
    }
}

/* Итоги — общие для desktop и mobile */
.plans-totals {
    margin-top: 12px;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}
[data-theme="light"] .plans-totals {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.plans-totals .plans-totals__day { color: #cbd5e1; }
[data-theme="light"] .plans-totals .plans-totals__day { color: #334155; }
.plans-totals .plans-totals__week {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed #334155;
    font-weight: 700;
    color: #f1f5f9;
    font-size: 14px;
}
[data-theme="light"] .plans-totals .plans-totals__week {
    border-top-color: #cbd5e1;
    color: #0f172a;
}

/* ============================================================
   32. ЗАДАНИЯ: построчные строки с rowspan + мобильные плашки
   ============================================================ */

/* Колонка действий в desktop — под «✎ Поставщик» */
#tasksTableWrap .col-actions-header { width: 130px; max-width: 130px; }
#tasksTableWrap .col-actions { width: 130px; max-width: 130px; }
#tasksTableWrap .edit-task-btn {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    display: inline-block;
}

/* Тонкая пунктирная граница между задачами внутри одной группы */
#tasksTableWrap tbody.task-group tr td {
    border-bottom: 1px dashed #2a3757;
}
#tasksTableWrap tbody.task-group tr:last-child td {
    border-bottom: 1px solid #334155;
}
[data-theme="light"] #tasksTableWrap tbody.task-group tr td {
    border-bottom-color: #dbe3ee;
}
[data-theme="light"] #tasksTableWrap tbody.task-group tr:last-child td {
    border-bottom-color: #e2e8f0;
}

/* Rowspan-ячейки: вертикальное выравнивание по центру */
#tasksTableWrap tbody.task-group tr td[rowspan] {
    vertical-align: middle;
}

/* Mobile: плашка поставщика кликабельна + ✎ в правой части */
@media (max-width: 640px) {
    .task-group-mobile .tmc-sup {
        cursor: pointer;
        transition: background 0.15s ease;
    }
    .task-group-mobile .tmc-sup:active {
        background: rgba(96, 165, 250, 0.10);
    }

    /* Комментарий-плашка внутри .tmc-sup-right */
    .task-group-mobile .tmc-comments {
        flex: 0 0 auto;
        padding: 2px 7px;
        border-radius: 8px;
        background: #334155;
        border: 1px solid #475569;
        color: #93c5fd;
        font-size: 10px;
        cursor: pointer;
        white-space: nowrap;
    }
    [data-theme="light"] .task-group-mobile .tmc-comments {
        background: #e2e8f0; color: #475569; border-color: #cbd5e1;
    }

    /* Маленькая ✎ внутри плашки */
    .task-group-mobile .tmc-sup-btn {
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
        padding: 0;
        border-radius: 6px;
        background: #60a5fa;
        border: none;
        color: #ffffff;
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s;
    }
    .task-group-mobile .tmc-sup-btn:active { background: #2563eb; }

    /* .tmc-sup-right теперь выравнивается вправо; дата и статус переносятся если тесно */
    .task-group-mobile .tmc-sup-right {
        gap: 4px;
    }
    .task-group-mobile .tmc-sup-right .tmc-date {
        font-size: 10px;
    }
}
/* ============================================================
   33. ТУЛБАР ЗАДАНИЙ — фильтры (desktop ≥641px — одна строка;
   mobile ≤640px — 2 строки: лейблы сверху, инпуты снизу, 3 колонки)
   ============================================================ */
.tasks-filters-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}
.tasks-filters-grid .tf-field {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.tasks-filters-grid .tf-field--mobile-only { display: none; }
.tasks-filters-grid .tf-label {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}
.tasks-filters-grid .tf-field input[type="date"],
.tasks-filters-grid .tf-field select {
    font-size: 12px;
    padding: 3px 6px;
    min-width: 0;
    box-sizing: border-box;
}
.tasks-filters-grid .tf-field input[type="date"] { width: 117px; }
.tasks-filters-grid .tf-field select { min-width: 90px; }
[data-theme="light"] .tasks-filters-grid .tf-label { color: #64748b; }

@media (max-width: 640px) {
    .tasks-filters-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px;
        width: 100%;
    }
       .tasks-filters-grid .tf-field {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        min-width: 0;
    }
    .tasks-filters-grid .tf-field--mobile-only { display: flex; }
    .tasks-filters-grid .tf-label {
        font-size: 10px;
        line-height: 1.2;
        padding-left: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tasks-filters-grid .tf-field input[type="date"],
    .tasks-filters-grid .tf-field select {
        width: 100%;
        min-width: 0;
        font-size: 11px;
        padding: 4px 6px;
    }
    #clientFilterContainer { display: none; }
}
/* ============================================================
   34. ТУЛБАР ЗАДАНИЙ — actions (одна строка) + кнопка «Очистить старые» в tab-bar
   ============================================================ */
.tasks-toolbar__actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: 0;
}
.tasks-toolbar__actions > * { flex: 0 0 auto; }

/* Кнопка «Очистить старые» в tab-bar. Визуально — как вкладка, но с красным
   акцентом. НЕ имеет класса .tab-btn (иначе перехватит делегированный
   обработчик вкладок из admin.js). */
.tab-btn-cleanup {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.35);
    padding: 5px 10px;
    border-radius: 40px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}
.tab-btn-cleanup:hover {
    background: rgba(248, 113, 113, 0.22);
    border-color: rgba(248, 113, 113, 0.6);
}
.tab-btn-cleanup:active { transform: scale(0.97); }

[data-theme="light"] .tab-btn-cleanup {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
[data-theme="light"] .tab-btn-cleanup:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

@media (max-width: 640px) {
    .tasks-toolbar__actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
        justify-content: flex-start;
    }
    .tasks-toolbar__actions::-webkit-scrollbar { display: none; }

    .tab-btn-cleanup {
        padding: 6px 12px;
        font-size: 12px;
    }
}
/* ============================================================
   35. МОБИЛЬНАЯ КАРТОЧКА ЗАДАНИЯ — скрытие под-карточек при фильтрации
   ============================================================ */
@media (max-width: 640px) {
    .task-group-mobile .tmc-sup.task-sub-row-hidden { display: none; }
}
/* ============================================================
   36. МОБИЛЬНАЯ ТАБЛИЦА РАБОТНИКОВ — компактные карточки с плашками
   Итоговый layout (≤768px):
     [Гомель] [Иванов Иван Павлович]
     [Балтика]
     [🏪 1] [📅 1] [📋] [💰 0.00]         [✎] [🗑]
   ============================================================ */

/* 36.1. Базовые стили плашек (работают на всех экранах) */
.wk-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    border: none;
    font-family: inherit;
    box-sizing: border-box;
}
.wk-chip--city {
    background: #334155;
    color: #cbd5e1;
    font-weight: 600;
}
.wk-chip--name {
    background: #334155;
    color: #f1f5f9;
    font-weight: 600;
    font-size: 12.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    padding: 3px 10px;
}
.wk-chip--client {
    background: #1e293b;
    color: #94a3b8;
    font-size: 11px;
    padding: 2px 9px;
}
.wk-chip--metric {
    background: #334155;
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.15s;
    padding: 3px 9px;
}
.wk-chip--metric:hover { background: #475569; }
.wk-chip--salary {
    background: transparent;
    color: var(--text-secondary);
    padding: 3px 0;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.wk-chip--action {
    background: #475569;
    color: #f1f5f9;
    cursor: pointer;
    padding: 4px 9px;
    font-size: 12px;
    transition: background 0.15s;
}
.wk-chip--action:hover { background: #334155; }
.wk-chip--danger { background: #f87171; color: #fff; }
.wk-chip--danger:hover { background: #dc2626; }

[data-theme="light"] .wk-chip--city    { background: #e2e8f0; color: #334155; }
[data-theme="light"] .wk-chip--name    { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .wk-chip--client  { background: #f1f5f9; color: #64748b; }
[data-theme="light"] .wk-chip--metric  { background: #e2e8f0; color: #334155; }
[data-theme="light"] .wk-chip--metric:hover { background: #cbd5e1; }
[data-theme="light"] .wk-chip--salary  { color: #334155; }
[data-theme="light"] .wk-chip--action  { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .wk-chip--action:hover { background: #cbd5e1; }

/* 36.2. Мобильная перестройка (≤768px) */
@media (max-width: 768px) {
    /* tr становится flex-wrap контейнером, td — «растворяются» */
    #workersList tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        padding: 10px 12px;
    }
    #workersList tbody td {
        display: contents;
    }
    #workersList tbody td[data-label]::before { display: none; }
    #workersList tbody td:last-child {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }

    /* Строка 1: город + ФИО */
    #workersList .wk-chip--city {
        order: 1;
        flex: 0 0 auto;
    }
    #workersList .wk-chip--name {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Строка 2: клиент */
    #workersList .wk-chip--client {
        order: 3;
        flex: 0 0 100%;
    }

    /* Строка 3: метрики — слева */
    #workersList .wk-chip--metric {
        order: 4;
        flex: 0 0 auto;
        padding: 4px 9px;
    }
    #workersList .wk-chip--salary {
        order: 4;
        flex: 0 0 auto;
        padding: 4px 0;
    }

    /* Строка 3: действия — справа */
    #workersList .worker-edit-btn {
        order: 5;
        flex: 0 0 auto;
        margin-left: auto;
    }
    #workersList .worker-delete-btn {
        order: 5;
        flex: 0 0 auto;
        margin-left: 0;
    }

    #workersList .worker-active-btn {
        order: 3;
        flex: 0 0 auto;
        margin-left: auto;
        padding: 2px 8px;
        border-radius: 6px;
        background: rgba(148,163,184,0.1);
        font-size: 11px !important;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    #workersList .worker-active-btn span {
        font-size: 11px !important;
    }

    .table-wrap tbody tr.row-hidden {
        display: none !important;
    }
}

/* 36.3. Кнопки модалки «Планы работника» — на мобиле только иконки */
@media (max-width: 640px) {
    .plans-btn {
        font-size: 0;
        min-width: 34px;
        padding: 6px 10px;
        line-height: 1;
    }
    .plans-btn::before {
        content: attr(data-icon);
        font-size: 16px;
        line-height: 1;
    }
    .plans-actions {
        display: flex;
        gap: 4px;
        flex-wrap: nowrap;
    }
    .plans-actions > button { margin: 0; }
}
/* §37 удалён в сессии 48e — новый дизайн §11. */

@media (max-width: 768px) {
    #taskDetailContent { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
    #taskDetailContent > .tdc-field { grid-column: span 1; }
    #taskDetailContent > .tdc-field:nth-child(5) { grid-column: span 2; }
    #taskDetailContent > .tdc-field.tdc-wide { grid-column: span 2; }
    .tdc-photos         { grid-column: span 2; }
    .tdc-value { font-size: 13px; }
    .tdc-photos-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* ============================================================
   38. СОФТ-МЕРЧ — мобильная карточка работника
   Итог (≤768px):
     [👤 Иванов Иван Иванович]           ← строка 1
     [💰 toggle] [⏰ toggle]    [💾]     ← строка 2
   ============================================================ */
@media (max-width: 768px) {
    #softMerchTableWrap thead { display: none; }
    #softMerchTableWrap table,
    #softMerchTableWrap tbody { display: block; width: 100%; }

    #softMerchTableWrap tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        padding: 10px 12px;
        margin-bottom: 8px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    }
    [data-theme="light"] #softMerchTableWrap tbody tr {
        background: #ffffff;
        border-color: #e2e8f0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    /* td — flex-элементы (без display:contents, чтобы сохранить чип-обёртки) */
    #softMerchTableWrap tbody td {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border: none;
        border-radius: 10px;
        background: transparent;
        width: auto;
        max-width: none;
        min-width: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Скрыть псевдо-лейблы §19 */
    #softMerchTableWrap tbody td[data-label]::before { display: none; }

    /* Строка 1: имя работника */
    #softMerchTableWrap tbody td[data-label="Работник"] {
        order: 1;
        flex: 1 1 100%;
        padding: 0;
    }
    #softMerchTableWrap .smc-worker-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    [data-theme="light"] #softMerchTableWrap .smc-worker-name { color: #0f172a; }

    /* Строка 2: чипы с иконкой + toggle */
    #softMerchTableWrap tbody td[data-label="Цена"],
    #softMerchTableWrap tbody td[data-label="Тайминг"] {
        order: 2;
        background: #334155;
    }
    [data-theme="light"] #softMerchTableWrap tbody td[data-label="Цена"],
    [data-theme="light"] #softMerchTableWrap tbody td[data-label="Тайминг"] {
        background: #e2e8f0;
    }
    #softMerchTableWrap .smc-toggle-label {
        font-size: 14px;
        line-height: 1;
    }

    /* Компактный toggle */
    #softMerchTableWrap .toggle-switch { width: 34px; height: 19px; }
    #softMerchTableWrap .toggle-slider::before {
        height: 14px;
        width: 14px;
        left: 2.5px;
        bottom: 2.5px;
    }
    #softMerchTableWrap .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(15px);
    }

    /* Строка 2: кнопка сохранения — только 💾, прижата вправо */
    #softMerchTableWrap tbody td[data-label="Действия"] {
        order: 3;
        margin-left: auto;
        padding: 0;
    }
    #softMerchTableWrap .save-worker-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        font-size: 0;
        min-width: 40px;
    }
    #softMerchTableWrap .save-worker-btn .smc-save-icon { font-size: 16px; line-height: 1; }
    #softMerchTableWrap .save-worker-btn .smc-save-text { display: none; }
}
/* ============================================================
   39. РАЗРЕШЕНИЯ МЕНЕДЖЕРА
   Desktop: grid 130px + 4 колонки действий, шапка с подписями.
   Mobile:  grid, ресурс слева + 4 pill-кнопки справа, шапка скрыта.
   ============================================================ */
#managerPermissionsContainer {
    display: grid;
    grid-template-columns: 130px repeat(4, minmax(90px, 1fr));
    gap: 2px 14px;
    align-items: center;
    margin-top: 4px;
}

.perm-header {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0 0 6px 0;
    border-bottom: 1px solid #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
[data-theme="light"] .perm-header { border-bottom-color: #cbd5e1; }

.perm-resource-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="light"] .perm-resource-label { color: #0f172a; }

.perm-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 0;
    border-radius: 6px;
    transition: background 0.15s ease;
}
[data-theme="light"] .perm-action { color: #475569; }

@media (hover: hover) and (pointer: fine) {
    .perm-action:hover { background: rgba(96,165,250,0.10); }
    [data-theme="light"] .perm-action:hover { background: #e0efff; }
}

/* Desktop: вместо чекбокса — toggle-переключатель (пилюля) */
@media (min-width: 641px) {
    .perm-action input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        position: relative;
        width: 34px;
        height: 20px;
        border-radius: 20px;
        background: #475569;
        border: none;
        cursor: pointer;
        margin: 0;
        flex: 0 0 auto;
        transition: background 0.2s ease;
        outline: none;
    }
    .perm-action input[type="checkbox"]::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.35);
        transition: transform 0.2s ease;
    }
    .perm-action input[type="checkbox"]:checked { background: #34d399; }
    .perm-action input[type="checkbox"]:checked::before { transform: translateX(14px); }

    [data-theme="light"] .perm-action input[type="checkbox"] { background: #cbd5e1; }
    [data-theme="light"] .perm-action input[type="checkbox"]:checked { background: #10b981; }

    .perm-action input[type="checkbox"]:focus-visible {
        box-shadow: 0 0 0 2px rgba(96,165,250,0.55);
    }
}

/* §W2: SVG-иконки действий (Lucide) вместо эмодзи. */
/* §X2: гарантированный inline-flex + видимость (сессия X) */
.perm-action-icon.perm-action-icon--x2-visible {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
}
.perm-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    line-height: 1;
}
.perm-action-icon > svg {
    width: 16px;
    height: 16px;
    display: block;
}
/* Активный чекбокс — иконка в акцентном цвете. :has() поддерживается
   всеми современными браузерами; если фолбэк не сработает —
   иконка остаётся серой, ничего не ломается. */
.perm-action:has(input[type="checkbox"]:checked) .perm-action-icon {
    color: var(--accent);
}
.perm-action-text { display: none; }

@media (max-width: 640px) {
    #managerPermissionsContainer {
        grid-template-columns: max-content repeat(4, max-content);
        gap: 3px 6px;
        justify-content: start;
        margin-top: 6px;
    }
    .perm-header { display: none; }
    .perm-resource-label {
        font-size: 12px;
        padding: 6px 8px 6px 0;
    }
    .perm-action {
        gap: 4px;
        padding: 4px 8px;
        background: #334155;
        border-radius: 8px;
        justify-content: center;
        min-width: 44px;
    }
    .perm-action-icon { width: 14px; height: 14px; }
    .perm-action-icon > svg { width: 14px; height: 14px; }
    .perm-action-text { display: none; }
    [data-theme="light"] .perm-action { background: #e2e8f0; }
}

@media (max-width: 400px) {
    #managerPermissionsContainer { gap: 3px 4px; }
    .perm-resource-label { font-size: 11px; padding-right: 4px; }
    .perm-action { padding: 4px 5px; gap: 3px; min-width: 36px; }
    .perm-action-icon { width: 12px; height: 12px; }
    .perm-action-icon > svg { width: 12px; height: 12px; }
}
[data-theme="light"] .perm-action { background: #e2e8f0; }

/* ============================================================
   53. Тонкая обводка групп заданий (desktop).
   ============================================================ */
@media (min-width: 641px) {
    #tasksTableWrap table {
        border-collapse: separate;
        border-spacing: 0;
    }
    /* Верхняя граница — все td первой строки */
    #tasksTableWrap tbody.task-group > tr:first-child > td {
        border-top: 1px solid #4d6796;
    }
    /* Нижняя граница — последняя строка + rowspan-ячейки первой строки */
    #tasksTableWrap tbody.task-group > tr:last-child > td,
    #tasksTableWrap tbody.task-group > tr:first-child > td[rowspan] {
        border-bottom: 1px solid #4d6796;
    }
    /* Левая вертикаль + оба левых скругления — rowspan-ячейка (col-city) */
    #tasksTableWrap tbody.task-group > tr:first-child > td:first-child {
        border-left: 1px solid #4d6796;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }
    /* Правая вертикаль — каждая строка (col-actions без rowspan) */
    #tasksTableWrap tbody.task-group > tr > td:last-child {
        border-right: 1px solid #4d6796;
    }
    #tasksTableWrap tbody.task-group > tr:first-child > td:last-child {
        border-top-right-radius: 8px;
    }
    #tasksTableWrap tbody.task-group > tr:last-child > td:last-child {
        border-bottom-right-radius: 8px;
    }
    /* Между группами — толще */
    #tasksTableWrap tbody.task-group + tbody.task-group > tr:first-child > td {
        border-top: 2px solid #4d6796;
    }
}
@media (min-width: 641px) {
    [data-theme="light"] #tasksTableWrap tbody.task-group > tr:first-child > td,
    [data-theme="light"] #tasksTableWrap tbody.task-group > tr:last-child > td,
    [data-theme="light"] #tasksTableWrap tbody.task-group > tr:first-child > td[rowspan],
    [data-theme="light"] #tasksTableWrap tbody.task-group > tr > td:first-child,
    [data-theme="light"] #tasksTableWrap tbody.task-group > tr > td:last-child {
        border-color: #d5dde7;
    }
}

/* ============================================================
   53.5. ЖУРНАЛ ДЕЙСТВИЙ — кнопка «Восстановить» (сессия 51b)
   ============================================================ */
.audit-restore-btn {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    margin-right: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.audit-restore-btn:hover {
    background: rgba(52, 211, 153, 0.28);
    border-color: #34d399;
}
.audit-restore-btn:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
[data-theme="light"] .audit-restore-btn {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
[data-theme="light"] .audit-restore-btn:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
}
/* Последняя колонка с кнопкой «Восстановить» не обрезается.
   Общий §5 (th,td) ставит overflow:hidden + text-overflow:ellipsis —
   для кнопки это лишнее. */
.audit-table th:last-child,
.audit-table td:last-child {
    overflow: visible;
    text-overflow: clip;
}

/* ============================================================
   54. КОМАНДНАЯ ПАЛИТРА (Ctrl+K)
   ============================================================ */
.cmd-palette-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
}
.cmd-palette-overlay.active { display: flex; }
.cmd-palette {
    width: 100%; max-width: 640px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    display: flex; flex-direction: column;
    max-height: 72vh;
    overflow: hidden;
    animation: cmdPaletteIn 0.14s ease;
}
@keyframes cmdPaletteIn {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.cmd-palette__input-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
}
.cmd-palette__icon { font-size: 16px; opacity: 0.65; flex-shrink: 0; }
.cmd-palette__input {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: none; outline: none;
    color: #f1f5f9; font-size: 15px; font-family: inherit;
    padding: 0;
}
.cmd-palette__input::placeholder { color: #64748b; }
.cmd-palette__kbd {
    flex-shrink: 0;
    font-size: 11px; color: #64748b;
    padding: 3px 8px; border: 1px solid #334155; border-radius: 5px;
    font-family: inherit;
}
.cmd-palette__list {
    overflow-y: auto;
    padding: 6px 0;
    flex: 1 1 auto;
    min-height: 60px;
}
.cmd-palette__section {
    padding: 8px 16px 4px;
    font-size: 11px; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.4px;
    font-weight: 700;
}
.cmd-palette__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    color: #e2e8f0;
    transition: background 0.1s ease;
}
.cmd-palette__item:hover,
.cmd-palette__item.active { background: #334155; }
.cmd-palette__item-icon { flex: 0 0 auto; font-size: 16px; line-height: 1; }
.cmd-palette__item-text { flex: 1 1 auto; min-width: 0; }
.cmd-palette__item-main {
    font-weight: 600; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.25;
}
.cmd-palette__item-sub {
    font-size: 12px; color: #94a3b8; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.25;
}
.cmd-palette__empty {
    padding: 32px 16px; text-align: center;
    color: #64748b; font-size: 13px;
}
[data-theme="light"] .cmd-palette-overlay { background: rgba(15, 23, 42, 0.45); }
[data-theme="light"] .cmd-palette {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}
[data-theme="light"] .cmd-palette__input-wrap { border-bottom-color: #e2e8f0; }
[data-theme="light"] .cmd-palette__input { color: #0f172a; }
[data-theme="light"] .cmd-palette__input::placeholder { color: #94a3b8; }
[data-theme="light"] .cmd-palette__kbd { color: #64748b; border-color: #cbd5e1; }
[data-theme="light"] .cmd-palette__section { color: #64748b; }
[data-theme="light"] .cmd-palette__item { color: #0f172a; }
[data-theme="light"] .cmd-palette__item:hover,
[data-theme="light"] .cmd-palette__item.active { background: #f1f5f9; }
[data-theme="light"] .cmd-palette__item-sub { color: #64748b; }
[data-theme="light"] .cmd-palette__empty { color: #94a3b8; }

@media (max-width: 640px) {
    .cmd-palette-overlay { padding-top: 8vh; }
    .cmd-palette { max-width: 100%; max-height: 80vh; }
    .cmd-palette__input { font-size: 16px; }
    .cmd-palette__kbd { display: none; }
}

/* ============================================================
   55. STICKY THEAD (desktop, ≥ 641px)
   Только desktop — на mobile таблицы превращаются в карточки,
   там thead скрыт, sticky не нужен.
   .table-wrap получает max-height, чтобы было что скроллить.
   ============================================================ */
@media (min-width: 641px) {
    .table-wrap {
        max-height: 70vh;
        overflow: auto;
    }
    .table-wrap thead tr:not(.filter-row) th {
        position: sticky;
        top: 0;
        z-index: 5;
    }
}

/* ============================================================
   56. STICKY FOOTER в модалках
   Кнопки «Сохранить/Отмена» всегда видны, даже если контент
   модалки выше экрана. Срабатывает для всех .modal-actions,
   а их в admin.html 11 штук.
   ============================================================ */
.modal-content .modal-actions {
    position: sticky;
    bottom: -24px;                     /* компенсируем padding родителя */
    margin: 16px -24px -24px -24px;    /* растянуть на всю ширину modal-content */
    padding: 12px 24px 24px;
    background: #1e293b;
    border-top: 1px solid #334155;
    z-index: 10;
}
[data-theme="light"] .modal-content .modal-actions {
    background: #ffffff;
    border-top-color: #e2e8f0;
}
@media (max-width: 640px) {
    .modal-content .modal-actions {
        padding: 10px 16px 16px;
        margin: 12px -16px -16px -16px;
        bottom: -16px;
    }
}

/* ============================================================
   57. TOAST в админке
   Замена alert() на неблокирующие всплывашки. Контейнер
   #toastContainer создаётся динамически (см. showToast в admin.js).
   Стили согласованы с .toast в index.html (мерч).
   ============================================================ */
#toastContainer {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    pointer-events: none;
    max-width: 92vw;
    width: max-content;
}
.toast {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    max-width: 100%;
    word-break: break-word;
    animation: toastIn 0.25s ease;
    font-family: inherit;
}
.toast--info  { background: #334155; }
.toast--ok    { background: #34d399; color: #0f172a; }
.toast--warn  { background: #f59e0b; color: #0f172a; }
.toast--error { background: #f87171; color: #ffffff; }
.toast--out {
    opacity: 0;
    transform: translateY(10px);
    transition: 0.25s ease;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-theme="light"] .toast--info { background: #475569; color: #ffffff; }
[data-theme="light"] .toast--ok   { background: #059669; color: #ffffff; }
[data-theme="light"] .toast--warn { background: #d97706; color: #ffffff; }
[data-theme="light"] .toast--error { background: #dc2626; color: #ffffff; }
@media (max-width: 640px) {
    .toast { font-size: 12.5px; padding: 9px 14px; }
}

/* ============================================================
   58. ПРЕСЕТЫ ДАТ (тулбар заданий)
   Компактные чипы рядом с #taskDateFilter: Сегодня / Вчера /
   −7д / −30д. Клик → заполняет input и триггерит change.
   ============================================================ */
.tf-field--date {
    flex-wrap: wrap;
}
.date-presets {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
}
.date-preset-btn {
    padding: 3px 8px;
    font-size: 11px;
    background: #334155;
    color: #cbd5e1;
    border: 1px solid #475569;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.date-preset-btn:hover { background: #475569; }
.date-preset-btn:active { transform: scale(0.96); }
.date-preset-btn.active { background: #60a5fa; color: #ffffff; border-color: #60a5fa; }
[data-theme="light"] .date-preset-btn { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }
[data-theme="light"] .date-preset-btn:hover { background: #cbd5e1; }
[data-theme="light"] .date-preset-btn.active { background: #3b82f6; color: #ffffff; border-color: #3b82f6; }
@media (max-width: 640px) {
    .date-presets { margin-left: 0; margin-top: 3px; flex-wrap: wrap; width: 100%; }
    .date-preset-btn { padding: 4px 8px; font-size: 10px; flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   59. МЕНЮ «ЕЩЁ» (⋯) — шапка и тулбары
   ============================================================ */
.more-menu { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.more-menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    background: #334155; border: 1px solid #475569;
    color: #f1f5f9; font-size: 14px; font-weight: 500;
    font-family: inherit; cursor: pointer; text-align: left;
    transition: background 0.15s;
}
.more-menu__item:hover { background: #475569; }
.more-menu__item:active { transform: scale(0.98); }
.more-menu__item > span { flex: 1 1 auto; min-width: 0; }
.more-menu__item strong { color: #60a5fa; font-weight: 700; }
[data-theme="light"] .more-menu__item {
    background: #f1f5f9; border-color: #cbd5e1; color: #0f172a;
}
[data-theme="light"] .more-menu__item:hover { background: #e2e8f0; }
[data-theme="light"] .more-menu__item strong { color: #3b82f6; }

/* Компактные кнопки тулбаров магазинов/заданий — icon-only.
   .btn-success/.refresh-btn/.export-btn/.btn-secondary уже задают padding
   и font-size; здесь только выравнивание по одной высоте. */
.stores-toolbar__actions > button,
.tasks-toolbar__actions > button {
    min-width: 32px;
    min-height: 30px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}
.stores-toolbar__actions > button#batchEditBtn,
.stores-toolbar__actions > button#storesMoreBtn {
    padding: 4px 10px;
}

/* ============================================================
   61. SINGLE-SELECT С ЖИВЫМ ПОИСКОМ (сессия 63)
   Обёртка .ss-wrap → input + кнопка ▼ + раскрывающийся список.
   Используется в модалке магазина: Город, Клиент.
   ============================================================ */
.ss-wrap {
    position: relative;
    width: 100%;
}
.ss-wrap > .ss-input {
    width: 100%;
    padding: 6px 30px 6px 8px; /* место под ▼ */
    box-sizing: border-box;
}
.ss-wrap > .ss-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.ss-wrap > .ss-toggle:hover { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
.ss-wrap.is-open > .ss-toggle { color: #60a5fa; }
.ss-wrap > .ss-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    max-height: 220px;
    overflow-y: auto;
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 1500;
    padding: 4px 0;
}
.ss-list[hidden] { display: none; }
.ss-item {
    padding: 7px 12px;
    font-size: 13px;
    color: #e2e8f0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.1s ease;
}
.ss-item:hover,
.ss-item.is-active { background: #334155; color: #ffffff; }
.ss-item.ss-add {
    color: #34d399;
    font-weight: 600;
    border-top: 1px solid #334155;
    margin-top: 4px;
}
.ss-item.ss-add:hover { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; }
.ss-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
    text-align: center;
}
[data-theme="light"] .ss-wrap > .ss-toggle { color: #64748b; }
[data-theme="light"] .ss-wrap > .ss-toggle:hover { background: #f1f5f9; color: #334155; }
[data-theme="light"] .ss-wrap.is-open > .ss-toggle { color: #2563eb; }
[data-theme="light"] .ss-wrap > .ss-list {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}
[data-theme="light"] .ss-item { color: #0f172a; }
[data-theme="light"] .ss-item:hover,
[data-theme="light"] .ss-item.is-active { background: #f1f5f9; color: #0f172a; }
[data-theme="light"] .ss-item.ss-add { color: #047857; border-top-color: #e2e8f0; }
[data-theme="light"] .ss-item.ss-add:hover { background: #ecfdf5; color: #059669; }
[data-theme="light"] .ss-empty { color: #64748b; }

/* ============================================================
   60. БЛОКИ-КАРТОЧКИ МАГАЗИНОВ (сессия 48f)
   Каждая группа магазинов = визуальный блок с рамкой и скруглением.
   ⚠️ Технически: строки 2..N в таблице с rowspan не имеют левых
   ячеек (они покрыты rowspan'ом первой строки). Поэтому вертикали
   и углы навешиваем на rowspan-ячейки первой строки — они физически
   покрывают весь левый/правый край группы на всю её высоту.
   ============================================================ */
#storesTableWrap table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Верхняя граница — все td первой строки */
#storesTableWrap tbody.store-group > tr:first-child > td {
    border-top: 1px solid #4d6796;
}

/* Нижняя граница — у rowspan-ячеек (они покрывают низ группы)
   + у ячеек последней строки (обычные, без rowspan). */
#storesTableWrap tbody.store-group > tr:first-child > td[rowspan] {
    border-bottom: 1px solid #4d6796;
}
#storesTableWrap tbody.store-group > tr:last-child > td {
    border-bottom: 1px solid #4d6796;
}

/* Левая вертикаль + скругление левых углов.
   td:first-child в tr:first-child — это checkbox (superadmin) или col-name. */
#storesTableWrap tbody.store-group > tr:first-child > td:first-child {
    border-left: 1px solid #4d6796;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
/* Правая вертикаль + скругление правых углов.
   td:last-child в tr:first-child — это col-actions (rowspan). */
#storesTableWrap tbody.store-group > tr:first-child > td:last-child {
    border-right: 1px solid #4d6796;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Визуальный отступ между группами — за счёт более толстой
   верхней границы у второй и последующих групп. */
#storesTableWrap tbody.store-group + tbody.store-group > tr:first-child > td {
    border-top: 2px solid #4d6796;
}

/* Light theme */
[data-theme="light"] #storesTableWrap tbody.store-group > tr:first-child > td,
[data-theme="light"] #storesTableWrap tbody.store-group > tr:last-child > td {
    border-color: #cbd5e1;
}
[data-theme="light"] #storesTableWrap tbody.store-group > tr:first-child > td:first-child,
[data-theme="light"] #storesTableWrap tbody.store-group > tr:first-child > td:last-child {
    border-color: #cbd5e1;
}


/* ============================================================
   62. КНОПКА «ПОКАЗАТЬ ЕЩЁ» (пагинация заданий, сессия B)
   ============================================================ */
.tasks-load-more {
    display: block;
    margin: 14px auto 6px;
    padding: 10px 24px;
    background: #334155;
    color: #cbd5e1;
    border: 1px solid #475569;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}
.tasks-load-more:hover { background: #475569; border-color: #60a5fa; }
.tasks-load-more:active { transform: scale(0.98); }
.tasks-load-more:disabled { opacity: 0.55; cursor: default; pointer-events: none; }
.tasks-load-more__count { color: #60a5fa; font-weight: 700; }
[data-theme="light"] .tasks-load-more {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}
[data-theme="light"] .tasks-load-more:hover { background: #cbd5e1; border-color: #3b82f6; }
[data-theme="light"] .tasks-load-more__count { color: #2563eb; }

@media (max-width: 640px) {
    .tasks-load-more { font-size: 12px; padding: 9px 18px; margin: 10px auto 6px; }
}

/* ============================================================
   64. CARD UNIFICATION — единый тон карточек магазинов/заданий.
   Работает во всех темах. Убирает «вложенные карточки»: заголовок,
   поставщики, комментарий и объявления — части одной поверхности.
   ============================================================ */

.store-card { padding: 12px 14px 14px; }

.store-card__header,
.store-card__header.disabled {
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 4px 6px;
    margin: 0 0 4px;
    transition: background 0.15s ease;
}
.store-card__header:not(.disabled):hover  { background: rgba(139,92,246,0.08); }
.store-card__header:not(.disabled):active {
    background: rgba(139,92,246,0.14);
    transform: none;
}

.store-card__suppliers {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 4px 0 0;
    border-top: 1px solid var(--border-color);
}

.store-card .store-sup-row,
[data-theme="light"] .store-card .store-sup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 6px 10px 10px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    min-width: 0;
}
.store-card .store-sup-row:last-child { border-bottom: none; }
.store-card .store-sup-row.is-active,
[data-theme="light"] .store-card .store-sup-row.is-active {
    background: rgba(96,165,250,0.10);
    border-left-color: var(--accent-blue);
}
.store-card .store-sup-row.is-public,
[data-theme="light"] .store-card .store-sup-row.is-public {
    background: rgba(245,158,11,0.08);
    border-left-color: #f59e0b;
}

.store-card__summary {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 2px 4px;
    margin: 0;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.store-card .store-comment {
    background: transparent;
    border: none;
    border-left: 3px solid var(--accent-blue);
    border-radius: 0;
    padding: 4px 2px 4px 10px;
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.store-card .store-ann {
    background: transparent;
    border: none;
    border-left: 3px solid var(--accent-blue);
    border-radius: 0;
    margin-top: 8px;
}
.store-card .store-ann-expanded { border-top: 1px dashed var(--border-color); }

/* Мобильные карточки — та же логика: одна лента */
@media (max-width: 640px) {
    .store-group-mobile .smc-suppliers,
    .task-group-mobile .tmc-suppliers,
    .plan-group-mobile .pmc-suppliers {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        border-top: 1px solid var(--border-color);
        border-bottom: none;
        margin-bottom: 0;
    }
    .store-group-mobile .smc-sup,
    .task-group-mobile  .tmc-sup,
    .plan-group-mobile  .pmc-sup,
    [data-theme="light"] .store-group-mobile .smc-sup,
    [data-theme="light"] .task-group-mobile  .tmc-sup,
    [data-theme="light"] .plan-group-mobile  .pmc-sup {
        background: transparent;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--border-color);
        padding: 9px 2px;
    }
    .store-group-mobile .smc-sup:last-child,
    .task-group-mobile  .tmc-sup:last-child,
    .plan-group-mobile  .pmc-sup:last-child { border-bottom: none; }
}

/* ============================================================
   66. ПЛАНЫ: ИТОГО ЗА МЕСЯЦ
   ============================================================ */
.plans-monthly-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
}
.plans-monthly-controls label {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    white-space: nowrap;
}
.plans-monthly-controls select,
.plans-monthly-controls input[type="number"] {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 13px;
    font-family: inherit;
}
.plans-monthly-controls select:focus,
.plans-monthly-controls input[type="number"]:focus {
    outline: none;
    border-color: #60a5fa;
}
.plans-monthly-controls input[type="number"] {
    width: 80px;
}
.plans-monthly-summary {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: #34d399;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plans-monthly-summary:empty {
    display: none;
}
[data-theme="light"] .plans-monthly-controls {
    background: #f8fafc;
    border-color: #cbd5e1;
}
[data-theme="light"] .plans-monthly-controls label {
    color: #334155;
}
[data-theme="light"] .plans-monthly-controls select,
[data-theme="light"] .plans-monthly-controls input[type="number"] {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}
[data-theme="light"] .plans-monthly-summary {
    color: #059669;
}
@media (max-width: 640px) {
    .plans-monthly-controls {
        padding: 8px 10px;
        gap: 6px;
    }
    .plans-monthly-controls label {
        font-size: 12px;
    }
    .plans-monthly-summary {
        margin-left: 0;
        flex-basis: 100%;
        text-align: right;
        font-size: 12px;
    }
}

/* ============================================================
   67. ПЛАНЫ v2 — двойная раскладка + попап очерёдности
   ============================================================ */

.plans-topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: #0f172a;
    border: 1px solid #334155; border-radius: 10px;
    margin-bottom: 10px; flex-wrap: wrap;
}
.plans-topbar .plans-monthly-controls {
    margin: 0; padding: 0; background: transparent; border: none;
    border-right: 1px solid #334155; padding-right: 12px;
    display: flex; align-items: center; gap: 6px;
}
.plans-topbar .plans-monthly-controls label { font-size: 12px; }
.plans-topbar .plans-monthly-controls select,
.plans-topbar .plans-monthly-controls input[type="number"] {
    background: #1e293b; color: #f1f5f9;
    border: 1px solid #334155; border-radius: 7px;
    padding: 4px 7px; font-size: 12px; font-family: inherit;
}
.plans-topbar .plans-monthly-controls input[type="number"] { width: 54px; text-align: center; }
.plans-topbar .plans-monthly-summary {
    font-size: 12px; font-weight: 700; color: #34d399;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plans-topbar .plans-monthly-summary:empty { display: none; }

.plans-view-toggle {
    display: flex; gap: 2px; padding: 3px;
    background: #0b1220; border: 1px solid #334155; border-radius: 10px;
    margin-left: auto;
}
.plans-view-toggle__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 7px;
    font-size: 12px; font-weight: 600; font-family: inherit;
    background: transparent; color: #94a3b8; border: none; cursor: pointer;
    transition: 0.15s; white-space: nowrap;
}
.plans-view-toggle__btn:hover { color: #cbd5e1; background: rgba(96,165,250,0.08); }
.plans-view-toggle__btn.is-on {
    background: linear-gradient(135deg, rgba(96,165,250,0.22), rgba(96,165,250,0.12));
    color: #f1f5f9;
    box-shadow: inset 0 0 0 1px rgba(96,165,250,0.4);
}
.plans-view-toggle__btn .pvt-i { font-size: 13px; opacity: 0.85; line-height: 1; }

.plans-filters {
    display: flex; gap: 6px; margin-bottom: 8px;
    flex-wrap: wrap; align-items: center;
}
.plans-filters select,
.plans-filters input[type="search"] {
    background: #0f172a; color: #f1f5f9;
    border: 1px solid #334155; border-radius: 7px;
    padding: 4px 8px; font-size: 12px; font-family: inherit;
}
.plans-filters input[type="search"] { min-width: 170px; }
.plans-filters select { min-width: 100px; max-width: 150px; }
.plans-filters__label { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.plans-filters__group { display: flex; align-items: center; gap: 5px; }
.plans-filters__reset { margin-left: auto; }
.plans-filters__count { font-size: 11px; color: #94a3b8; white-space: nowrap; }

.plans-store {
    background: #0f172a; border: 1px solid #334155;
    border-radius: 11px; margin-bottom: 8px; overflow: hidden;
}
.plans-store__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 5px 12px; border-bottom: 1px solid #26344a;
    background: linear-gradient(90deg, rgba(96,165,250,0.06), transparent 55%);
    min-height: 24px;
}
.plans-store__title {
    display: flex; align-items: center; gap: 7px;
    min-width: 0; font-size: 12.5px; font-weight: 700;
}
.plans-store__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plans-store__meta { font-size: 11px; font-weight: 500; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.plans-matrix {
    display: grid;
    grid-template-columns: 170px repeat(7, 40px) 62px 52px;
    align-items: center; column-gap: 2px;
    padding: 4px 10px 6px;
}
.plans-matrix__h {
    font-size: 10px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.4px;
    text-align: center; padding: 2px 0 5px;
}
.plans-matrix__h--left { text-align: left; padding-left: 6px; }

.plans-sup {
    display: flex; align-items: center; gap: 5px; min-width: 0;
    font-size: 12.5px; font-weight: 600; color: #cbd5e1;
    padding: 2px 4px 2px 6px;
}
.plans-sup span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.plans-cell {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    justify-self: center; cursor: pointer; user-select: none;
    font-size: 11px; font-weight: 800; line-height: 1;
    transition: all 0.12s; position: relative;
}
.plans-cell--empty { border: 1.5px dashed #3d4d68; color: transparent; }
.plans-cell--empty::after { content: '+'; font-size: 13px; font-weight: 400; color: #3d4d68; }
.plans-cell--empty:hover { border-color: #60a5fa; background: rgba(96,165,250,0.10); transform: scale(1.08); }
.plans-cell--empty:hover::after { color: #60a5fa; }
.plans-cell--num {
    color: #fff; border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.28);
}
.plans-cell--num:hover { transform: scale(1.10); }
.plans-cell--o1 { background: linear-gradient(135deg,#60a5fa,#3b82f6); }
.plans-cell--o2 { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.plans-cell--o3 { background: linear-gradient(135deg,#fbbf24,#f59e0b); color:#3d2000; }
.plans-cell--o4 { background: linear-gradient(135deg,#f87171,#ef4444); }
.plans-cell--o5 { background: linear-gradient(135deg,#94a3b8,#64748b); }
.plans-cell--free {
    background: linear-gradient(135deg,#475569,#334155);
    color: #cbd5e1; border: 1.5px solid #4b5d78;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.plans-cell--free::after { content: '·'; font-size: 16px; font-weight: 900; line-height: 1; margin-top: -2px; }
.plans-cell--free:hover { background: linear-gradient(135deg,#5a6b82,#475569); border-color: #60a5fa; }

.plans-mnum {
    text-align: center; font-size: 12px; font-variant-numeric: tabular-nums;
    padding: 3px 3px; border-radius: 5px; cursor: text;
}
.plans-mnum--price { color: #34d399; font-weight: 700; }
.plans-mnum--timing { color: #94a3b8; }
.plans-mnum:hover { background: rgba(96,165,250,0.10); }

/* ═══ LAYOUT 2: По дням недели ═══ */
.plans-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px; align-items: start;
}
.plans-day {
    background: #0f172a; border: 1px solid #334155;
    border-radius: 11px;
    display: flex; flex-direction: column;
    min-height: 180px;
}
.plans-day__head {
    padding: 7px 10px 6px; border-bottom: 1px solid #26344a;
    background: linear-gradient(180deg, rgba(96,165,250,0.07), transparent);
    border-radius: 11px 11px 0 0;
}
.plans-day__dow {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; margin-bottom: 4px;
}
.plans-day__name { font-size: 12.5px; font-weight: 800; color: #f1f5f9; }
.plans-day__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9px;
    font-size: 10px; font-weight: 700;
    background: #334155; color: #cbd5e1;
}
.plans-day__count--empty { background: transparent; color: #94a3b8; font-weight: 400; }
.plans-day__count--ok    { background: #065f46; color: #6ee7b7; }
.plans-day__count--busy  { background: #78350f; color: #fbbf24; }
.plans-day__count--heavy { background: #7f1d1d; color: #fca5a5; }
.plans-day__meta {
    display: flex; flex-wrap: wrap; gap: 3px 8px;
    font-size: 10.5px; color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.plans-day__meta b { color: #cbd5e1; font-weight: 700; }
.plans-day__meta .dm-price { color: #34d399; font-weight: 700; }
.plans-day__body {
    flex: 1; padding: 6px;
    display: flex; flex-direction: column; gap: 5px;
    min-height: 60px;
}
.plans-day__empty {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: #3d4d68; font-size: 11px; font-style: italic;
    border: 1px dashed #334155; border-radius: 8px;
    padding: 14px 6px; margin-bottom: 5px;
}

.plans-visit {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 9px; padding: 6px 8px 7px;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
    user-select: none;
}
.plans-visit:hover { border-color: #4b5d78; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.plans-visit--o1 { border-left: 3px solid #60a5fa; }
.plans-visit--o2 { border-left: 3px solid #a78bfa; }
.plans-visit--o3 { border-left: 3px solid #fbbf24; }
.plans-visit--o4 { border-left: 3px solid #f87171; }
.plans-visit--o5 { border-left: 3px solid #94a3b8; }
.plans-visit--free { border-left: 3px solid #64748b; }
.plans-visit__head {
    display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
    min-width: 0;
}
.plans-visit__num {
    flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg,#60a5fa,#3b82f6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    cursor: pointer;
}
.plans-visit--o2 .plans-visit__num { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.plans-visit--o3 .plans-visit__num { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #3d2000; }
.plans-visit--o4 .plans-visit__num { background: linear-gradient(135deg,#f87171,#ef4444); }
.plans-visit--o5 .plans-visit__num { background: linear-gradient(135deg,#94a3b8,#64748b); }
.plans-visit--free .plans-visit__num { background: linear-gradient(135deg,#475569,#334155); color: #cbd5e1; }
.plans-visit--free .plans-visit__num::before { content: '·'; font-size: 15px; font-weight: 900; margin-top: -3px; }

.plans-visit__name {
    flex: 1; min-width: 0;
    font-size: 12px; font-weight: 700; color: #f1f5f9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plans-visit__addr {
    font-size: 10.5px; color: #94a3b8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px; padding-left: 26px;
}
.plans-visit__sups {
    display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px;
    padding-left: 26px;
}
.plans-vchip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 6px; border-radius: 8px;
    font-size: 10px; font-weight: 600;
    background: #0f172a; color: #cbd5e1;
    border: 1px solid #26344a;
    cursor: pointer; transition: 0.12s;
    white-space: nowrap; max-width: 100%; overflow: hidden;
}
.plans-vchip:hover { border-color: #60a5fa; color: #f1f5f9; }
.plans-vchip.is-fixed { background: rgba(96,165,250,0.14); border-color: rgba(96,165,250,0.4); color: #bfdbfe; }
.plans-vchip__n { font-weight: 800; font-size: 9px; opacity: 0.9; }

.plans-visit__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; font-size: 10px;
    padding-left: 26px; color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.plans-visit__foot b { color: #34d399; font-weight: 700; }

/* ═══ Статистика ═══ */
.plans-stats {
    margin-top: 10px; padding: 10px 12px;
    background: #0f172a; border: 1px solid #334155; border-radius: 11px;
}
.plans-stats__g {
    display: grid; grid-template-columns: 110px repeat(7, 1fr) 90px;
    align-items: center; column-gap: 4px; row-gap: 3px;
}
.plans-stats__h {
    font-size: 10px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.4px;
    text-align: center; padding: 0 0 5px;
}
.plans-stats__h--l { text-align: left; padding-left: 6px; }
.plans-stats__h--r { color: #cbd5e1; border-left: 1px solid #334155; padding-left: 8px; }
.plans-stats__l {
    font-size: 11.5px; font-weight: 700; color: #cbd5e1;
    padding-left: 6px; display: flex; align-items: center; gap: 5px;
}
.plans-stats__v {
    text-align: center; font-size: 12px;
    font-variant-numeric: tabular-nums;
    padding: 2px 0; border-radius: 5px;
}
.plans-stats__v--empty { color: #334155; }
.plans-stats__v--busy  { color: #fbbf24; }
.plans-stats__v--heavy { color: #f87171; font-weight: 700; }
.plans-stats__v--tot {
    border-left: 1px solid #334155; padding-left: 8px;
    color: #cbd5e1; font-weight: 700;
}

/* ═══ Попап очерёдности ═══ */
.plans-popup-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 2000; display: none;
    align-items: center; justify-content: center;
    padding: 16px;
}
.plans-popup-overlay.active { display: flex; }
.plans-popup {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 14px; padding: 16px 18px 14px;
    max-width: 400px; width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7);
}
.plans-popup__head {
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid #334155;
}
.plans-popup__title {
    font-size: 14px; font-weight: 700; color: #f1f5f9;
    margin-bottom: 4px;
}
.plans-popup__sub {
    font-size: 11.5px; color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.plans-popup__label {
    font-size: 11px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 8px; display: block;
}
.plans-popup__nums {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-bottom: 12px;
}
.plans-popup__num {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    background: #0f172a; color: #cbd5e1;
    border: 1.5px solid #334155;
    cursor: pointer; font-family: inherit;
    transition: 0.12s;
}
.plans-popup__num:hover { border-color: #60a5fa; color: #f1f5f9; }
.plans-popup__num.is-cur {
    background: linear-gradient(135deg,#60a5fa,#3b82f6);
    color: #fff; border-color: #60a5fa;
    box-shadow: 0 2px 8px rgba(96,165,250,0.5);
}
.plans-popup__num--free {
    width: auto; padding: 0 12px; border-radius: 16px;
    font-size: 12px;
}
.plans-popup__num--free.is-cur {
    background: linear-gradient(135deg,#475569,#334155);
    border-color: #64748b;
    box-shadow: 0 2px 8px rgba(71,85,105,0.5);
}
.plans-popup__actions {
    display: flex; gap: 6px;
    padding-top: 10px;
    border-top: 1px solid #334155;
}
.plans-popup__del {
    flex: 1; padding: 8px 12px; border-radius: 20px;
    background: #7f1d1d; color: #fecaca;
    border: none; font-family: inherit;
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.plans-popup__del:hover { background: #991b1b; color: #fff; }
.plans-popup__cancel {
    padding: 8px 16px; border-radius: 20px;
    background: #334155; color: #cbd5e1;
    border: none; font-family: inherit;
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.plans-popup__cancel:hover { background: #475569; color: #f1f5f9; }

@media (max-width: 768px) {
    .plans-topbar { flex-direction: column; align-items: stretch; }
    .plans-topbar .plans-monthly-controls {
        border-right: none; padding-right: 0; padding-bottom: 8px;
        border-bottom: 1px solid #334155; flex-wrap: wrap;
    }
    .plans-view-toggle { margin-left: 0; width: 100%; }
    .plans-view-toggle__btn { flex: 1; justify-content: center; }

    .plans-week {
        grid-template-columns: repeat(7, minmax(180px, 1fr));
        overflow-x: auto; padding-bottom: 8px;
    }
    .plans-day { min-width: 180px; }

    .plans-matrix {
        grid-template-columns: 110px repeat(7, 32px) 52px 44px;
        padding: 4px 6px 6px;
    }
    .plans-matrix__h { font-size: 9px; }
    .plans-cell { width: 22px; height: 22px; font-size: 10px; }
    .plans-sup { font-size: 11.5px; }
    .plans-mnum { font-size: 11px; }

    .plans-stats__g { grid-template-columns: 80px repeat(7, 1fr) 70px; }
    .plans-stats__l { font-size: 10px; }
    .plans-stats__v { font-size: 11px; }
    .plans-stats__h { font-size: 9px; }
}

.plans-mobile-ready { display: none; }

/* Мульти-селект работников в шапке планов */
.plans-worker-select {
    width: 200px;
    height: 80px !important;
    padding: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
}
.plans-worker-select option {
    padding: 4px 6px;
}
@media (max-width: 768px) {
    .plans-worker-select {
        width: 100%;
        height: 100px !important;
        margin: 4px 0;
    }
}

/* ============================================================
   68. ПЛАНЫ v2 — компактный layout + зелёные «без очереди»
   ============================================================ */

/* Уменьшаем внешние отступы модалки */
.plans-v2-modal {
    max-width: 96vw;
    width: 1400px;
    padding: 2px 12px 6px;
    max-height: 96vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Верхняя строка: заголовок + переключатель + кнопки */
.plans-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    flex-wrap: wrap;
}
.plans-head__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    line-height: 1.2;
}
.plans-head .plans-view-toggle {
    margin: 0;
    padding: 2px;
    border-radius: 8px;
}
.plans-head .plans-view-toggle__btn {
    padding: 4px 10px;
    font-size: 11.5px;
    gap: 4px;
    border-radius: 6px;
    color: #94a3b8;
}
.plans-head .plans-view-toggle__btn.is-on {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(59,130,246,0.45);
}
.plans-head .plans-view-toggle__btn .pvt-i { font-size: 12px; }

.plans-head .plans-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Компактные кнопки в шапке */
.plans-btn-sm {
    height: 28px;
    min-width: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: 0.12s;
    white-space: nowrap;
}
.plans-btn-sm:hover { background: #334155; color: #f1f5f9; }
.plans-btn-sm:disabled { opacity: 0.5; cursor: default; }
.plans-btn-sm.plans-btn-ok {
    background: #34d399;
    border-color: #34d399;
    color: #052e16;
}
.plans-btn-sm.plans-btn-ok:hover { background: #10b981; color: #ffffff; }
.plans-btn-sm.plans-btn-close {
    background: #7f1d1d;
    border-color: #b91c1c;
    color: #fecaca;
}
.plans-btn-sm.plans-btn-close:hover { background: #991b1b; color: #ffffff; }

/* Вторая строка: фильтры + месяц */
.plans-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 11.5px;
    margin: 0;
}
.plans-filters input[type="search"] {
    min-width: 140px;
    max-width: 200px;
    height: 26px;
    padding: 3px 8px;
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 11.5px;
    font-family: inherit;
}
.plans-filters select {
    height: 26px;
    padding: 3px 6px;
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 11.5px;
    font-family: inherit;
    min-width: 90px;
    max-width: 130px;
}
.plans-filters input[type="search"]:focus,
.plans-filters select:focus { outline: none; border-color: #60a5fa; }
.plans-filters__reset {
    height: 26px;
    min-width: 26px;
    padding: 0 6px;
    background: #334155;
    color: #cbd5e1;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}
.plans-filters__reset:hover { background: #475569; color: #f1f5f9; }

.plans-month-inline {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-left: auto;
}
.plans-month-inline select {
    min-width: 90px;
    max-width: 110px;
}
.plans-month-inline input[type="number"] {
    width: 54px;
    height: 26px;
    padding: 3px 6px;
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 11.5px;
    font-family: inherit;
    text-align: center;
}
.plans-filters .plans-monthly-summary {
    font-size: 11.5px;
    font-weight: 700;
    color: #34d399;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-left: 6px;
}
.plans-filters .plans-monthly-summary:empty { display: none; }
.plans-filters .plans-filters__count {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

/* Область просмотра — забирает остаток высоты */
.plans-view-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

/* Уменьшаем матрицу */
.plans-matrix {
    grid-template-columns: 140px repeat(7, 34px) 56px 46px;
    padding: 2px 8px 4px;
    column-gap: 1px;
}
.plans-matrix__h {
    font-size: 9px;
    padding: 1px 0 3px;
}
.plans-sup {
    font-size: 11.5px;
    padding: 1px 3px 1px 4px;
    gap: 4px;
}
.plans-cell {
    width: 20px;
    height: 20px;
    font-size: 10px;
}
.plans-cell--empty::after { font-size: 11px; }
.plans-mnum {
    font-size: 11px;
    padding: 1px 2px;
}

/* Шапка магазина компактнее */
.plans-store__head {
    padding: 3px 10px;
    min-height: 20px;
}
.plans-store__title { font-size: 11.5px; }
.plans-store__meta { font-size: 10px; }
/* margin-bottom: 0 — карточки магазинов стыкуются подряд без пустой
   полосы между ними. Разделитель — двойной 1px-бордер (нижний
   верхней + верхний нижней), визуально тонкий шов. */
.plans-store { margin-bottom: 0; }

/* Статистика компактнее */
.plans-stats {
    padding: 6px 10px;
    margin-top: 0;
}
.plans-stats__g {
    grid-template-columns: 90px repeat(7, 1fr) 80px;
    row-gap: 1px;
}
.plans-stats__h {
    font-size: 9px;
    padding: 0 0 3px;
}
.plans-stats__l { font-size: 10.5px; }
.plans-stats__v { font-size: 11px; padding: 1px 0; }

/* ═══ ЗЕЛЁНЫЕ «без очереди» ═══ */

/* Клетка в матрице: свободный визит */
.plans-cell--free {
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #ffffff;
    border: none;
    box-shadow: 0 1px 4px rgba(52,211,153,0.45),
                inset 0 1px 0 rgba(255,255,255,0.28);
}
.plans-cell--free::after {
    content: '·';
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    margin-top: -2px;
    color: #ffffff;
}
.plans-cell--free:hover {
    background: linear-gradient(135deg, #6ee7b7, #34d399);
    transform: scale(1.10);
}

/* Карточка визита в раскладке «по дням»: свободный */
.plans-visit--free { border-left-color: #34d399; }
.plans-visit--free .plans-visit__num {
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #ffffff;
}
.plans-visit--free .plans-visit__num::before {
    content: '·';
    color: #ffffff;
}

/* Чип поставщика: свободный = зелёный, с номером = синий */
.plans-vchip {
    background: rgba(52,211,153,0.14);
    border-color: rgba(52,211,153,0.4);
    color: #6ee7b7;
}
.plans-vchip.is-fixed {
    background: rgba(96,165,250,0.14);
    border-color: rgba(96,165,250,0.4);
    color: #bfdbfe;
}

/* Кнопки-цифры в попапе: активный вариант */
.plans-popup__num.is-cur {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    border-color: #60a5fa;
    color: #ffffff;
}
.plans-popup__num--free.is-cur {
    background: linear-gradient(135deg, #34d399, #10b981);
    border-color: #34d399;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(52,211,153,0.5);
}

/* Мобильная адаптация под компактный layout */
@media (max-width: 900px) {
    .plans-head__title { max-width: 180px; font-size: 12.5px; }
    .plans-head .plans-view-toggle__btn { padding: 3px 7px; font-size: 10.5px; }
    .plans-filters { font-size: 10.5px; padding: 4px 6px; }
    .plans-filters input[type="search"],
    .plans-filters select { height: 24px; font-size: 10.5px; }
    .plans-matrix {
        grid-template-columns: 100px repeat(7, 30px) 48px 40px;
        padding: 2px 5px 3px;
    }
    .plans-cell { width: 18px; height: 18px; font-size: 9px; }
    .plans-sup { font-size: 10.5px; }
    .plans-mnum { font-size: 10px; }
}

/* ============================================================
   69-70. ПЛАНЫ v2 — темы + тонкие пустые кружки (appended)
   ============================================================ */

/* ─── СВЕТЛАЯ ─── */
[data-theme="light"] .plans-v2-modal { background: #ffffff; }
[data-theme="light"] .plans-head__title { color: #0f172a; }
[data-theme="light"] .plans-head .plans-view-toggle { background: #f1f5f9; border-color: #cbd5e1; }
[data-theme="light"] .plans-head .plans-view-toggle__btn { color: #64748b; }
[data-theme="light"] .plans-head .plans-view-toggle__btn:hover { background: #e2e8f0; color: #334155; }
[data-theme="light"] .plans-btn-sm { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
[data-theme="light"] .plans-btn-sm:hover { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .plans-btn-sm.plans-btn-ok { background: #10b981; border-color: #10b981; color: #ffffff; }
[data-theme="light"] .plans-btn-sm.plans-btn-close { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
[data-theme="light"] .plans-filters { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .plans-filters input[type="search"],
[data-theme="light"] .plans-filters select,
[data-theme="light"] .plans-month-inline input[type="number"] { background: #ffffff; color: #0f172a; border-color: #cbd5e1; }
[data-theme="light"] .plans-filters__reset { background: #e2e8f0; color: #334155; }
[data-theme="light"] .plans-filters .plans-monthly-summary { color: #059669; }
[data-theme="light"] .plans-filters .plans-filters__count { color: #64748b; }
[data-theme="light"] .plans-store { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .plans-store__head { background: linear-gradient(90deg, rgba(59,130,246,0.06), transparent 55%); border-bottom-color: #e2e8f0; }
[data-theme="light"] .plans-store__title { color: #0f172a; }
[data-theme="light"] .plans-store__meta { color: #64748b; }
[data-theme="light"] .plans-matrix__h { color: #64748b; }
[data-theme="light"] .plans-sup { color: #334155; }
[data-theme="light"] .plans-mnum--timing { color: #64748b; }
[data-theme="light"] .plans-mnum--price { color: #059669; }
[data-theme="light"] .plans-cell--num { color: #ffffff; }
[data-theme="light"] .plans-cell--o3 { color: #3d2000; }
[data-theme="light"] .plans-cell--free { background: linear-gradient(135deg, #10b981, #059669); }
[data-theme="light"] .plans-stats { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .plans-stats__h { color: #64748b; }
[data-theme="light"] .plans-stats__h--r { color: #334155; border-left-color: #cbd5e1; }
[data-theme="light"] .plans-stats__l { color: #334155; }
[data-theme="light"] .plans-stats__v { color: #0f172a; }
[data-theme="light"] .plans-stats__v--empty { color: #cbd5e1; }
[data-theme="light"] .plans-stats__v--tot { color: #0f172a; border-left-color: #cbd5e1; }
[data-theme="light"] .plans-day { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .plans-day__head { background: linear-gradient(180deg, rgba(59,130,246,0.05), transparent); border-bottom-color: #e2e8f0; }
[data-theme="light"] .plans-day__name { color: #0f172a; }
[data-theme="light"] .plans-day__count { background: #e2e8f0; color: #334155; }
[data-theme="light"] .plans-day__count--empty { color: #94a3b8; }
[data-theme="light"] .plans-day__meta { color: #64748b; }
[data-theme="light"] .plans-day__meta b { color: #334155; }
[data-theme="light"] .plans-day__empty { color: #cbd5e1; border-color: #e2e8f0; }
[data-theme="light"] .plans-visit { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .plans-visit__name { color: #0f172a; }
[data-theme="light"] .plans-visit__addr { color: #64748b; }
[data-theme="light"] .plans-visit__foot { color: #64748b; }
[data-theme="light"] .plans-vchip { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.35); color: #047857; }
[data-theme="light"] .plans-vchip.is-fixed { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.35); color: #1e40af; }
[data-theme="light"] .plans-popup { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .plans-popup__head { border-bottom-color: #e2e8f0; }
[data-theme="light"] .plans-popup__title { color: #0f172a; }
[data-theme="light"] .plans-popup__sub { color: #64748b; }
[data-theme="light"] .plans-popup__label { color: #64748b; }
[data-theme="light"] .plans-popup__num { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
[data-theme="light"] .plans-popup__num.is-cur { background: linear-gradient(135deg, #3b82f6, #2563eb); border-color: #3b82f6; color: #ffffff; }
[data-theme="light"] .plans-popup__num--free.is-cur { background: linear-gradient(135deg, #10b981, #059669); border-color: #10b981; }
[data-theme="light"] .plans-popup__actions { border-top-color: #e2e8f0; }
[data-theme="light"] .plans-popup__cancel { background: #e2e8f0; color: #334155; }


/* ─── ТОНКИЕ ПУСТЫЕ КРУЖКИ ─── */
.plans-cell--empty {
    border: 1px solid #3d4d68;
    color: transparent;
    background: transparent;
    box-shadow: none;
}
.plans-cell--empty::after { content: ''; display: none; }
.plans-cell--empty:hover {
    border-color: #60a5fa;
    background: rgba(96,165,250,0.10);
    transform: scale(1.08);
}
.plans-cell--empty:hover::after {
    content: '+';
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    color: #60a5fa;
    line-height: 1;
}
[data-theme="light"] .plans-cell--empty { border-color: #cbd5e1; }
[data-theme="light"] .plans-cell--empty:hover { border-color: #3b82f6; background: rgba(59,130,246,0.08); }
[data-theme="light"] .plans-cell--empty:hover::after { color: #3b82f6; }

/* ============================================================
   RECOVERY: :hover-правила, потерянные при удалении §69.
   Перенесены сюда — в самый конец файла, чтобы не перебивались
   последующими базовыми правилами.
   ============================================================ */
[data-theme="light"] .plans-btn-sm.plans-btn-close:hover { background: #fecaca; color: #991b1b; }
[data-theme="light"] .plans-filters__reset:hover { background: #cbd5e1; color: #0f172a; }
[data-theme="light"] .plans-popup__num:hover { border-color: #3b82f6; color: #1e40af; }
/* ============================================================
   §70. ПЛАНЫ v15 — раскладки + статистика карточками
   ============================================================ */

/* ─── Скролл внутри контейнеров планов (возвращаем) ─── */
.plans-view-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}
#plansStatsGrid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-template-columns: none;
}

/* ─── Утилиты ─── */
.plans-empty {
    padding: 30px;
    color: #94a3b8;
    text-align: center;
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT 1: ПО МАГАЗИНАМ
   ══════════════════════════════════════════════════════════ */
.plans-vs-head {
    display: grid;
    grid-template-columns:
        minmax(200px, 1.3fr)
        minmax(120px, 0.9fr)
        repeat(7, 28px)
        52px 52px 52px;
    gap: 3px;
    align-items: center;
    padding: 9px 4px 8px;
    border-bottom: 1px solid #334155;
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.plans-vs-head__dow {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.3px;
}
.plans-vs-head__dow--weekend { color: #64748b; padding-left: 6px; }
.plans-vs-head__r { text-align: right; }

.plans-vs-row {
    display: grid;
    grid-template-columns:
        minmax(200px, 1.3fr)
        minmax(120px, 0.9fr)
        repeat(7, 28px)
        52px 52px 52px;
    gap: 3px;
    align-items: center;
    padding: 6px 4px;
    border-bottom: 1px solid #1f2a44;
}
/* hover НЕ используется — снято по требованию. */
.plans-vs-row--new { border-top: 1px solid #334155; }
.plans-vs-row--new:first-child { border-top: none; }

.plans-vs-store {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
}
.plans-vs-store__icon { flex: 0 0 auto; font-size: 13px; }
.plans-vs-store__name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plans-vs-store__addr {
    flex: 1 1 auto;
    min-width: 0;
    color: #94a3b8;
    font-weight: 500;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plans-vs-row--same .plans-vs-store {
    color: #64748b;
    font-weight: 500;
    font-size: 11px;
    padding-left: 20px;
}
.plans-vs-row--same .plans-vs-store__icon { display: none; }
.plans-vs-row--same .plans-vs-store__addr { color: #64748b; }

.plans-vs-sup {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
}
.plans-vs-sup__icon { flex: 0 0 auto; opacity: 0.55; font-size: 12px; }
.plans-vs-sup__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Кружки дней — плоские цвета, без градиентов */
.plans-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    user-select: none;
    padding: 0;
    font-family: inherit;
    transition: transform 0.12s, background 0.12s, border-color 0.12s;
    position: relative;
}
.plans-circle--weekend { margin-left: 6px; }

.plans-circle--empty {
    border: 1px solid #475569;
    background: transparent;
    color: transparent;
}
.plans-circle--empty:hover {
    border-color: #60a5fa;
    background: rgba(96, 165, 250, 0.10);
    transform: scale(1.10);
}

.plans-circle--num {
    border: none;
    color: #ffffff;
    background: #3b82f6;
}
.plans-circle--num:hover { transform: scale(1.10); background: #2563eb; }
.plans-circle--num.plans-circle--wide { font-size: 9.5px; }

.plans-circle--free {
    border: none;
    color: #ffffff;
    background: #10b981;
}
.plans-circle--free::before {
    content: '·';
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    margin-top: -4px;
}
.plans-circle--free:hover { transform: scale(1.10); background: #059669; }

.plans-cov {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 38px;
    justify-self: center;
}
.plans-cov--full { color: #34d399; background: rgba(52, 211, 153, 0.12); }
.plans-cov--ok   { color: #60a5fa; background: rgba(96, 165, 250, 0.12); }
.plans-cov--low  { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.plans-cov--zero { color: #f87171; background: rgba(248, 113, 113, 0.12); }

.plans-vs-num {
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #cbd5e1;
}
.plans-vs-num--price { color: #34d399; }
.plans-vs-num--time  { color: #60a5fa; }

/* ══════════════════════════════════════════════════════════
   LAYOUT 2: ПО ДНЯМ — спокойный, без градиентов
   ══════════════════════════════════════════════════════════ */
.plans-vd-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
    padding: 4px 0 10px;
}

.plans-daycol {
    background: #0f172a;
    border: 1px solid #1f2a44;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    overflow: hidden;
}
.plans-daycol--weekend { border-left: 1px solid #334155; }

.plans-daycol__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 7px;
    border-bottom: 1px solid #1f2a44;
    background: transparent;
}
.plans-daycol__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
/* v86: метрики дня (🏬 N · ⏱ Mм · 💰 K₽) перенесены из нижнего
   бара .plans-daycol__foot в шапку. См. plans.js → renderDaysView. */
.plans-daycol__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 10px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.plans-daycol__stats b { color: #cbd5e1; font-weight: 700; }
.plans-daycol__stats .f-time  { color: #60a5fa; }
.plans-daycol__stats .f-price { color: #34d399; }
.plans-daycol__dow {
    font-size: 12.5px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.2px;
}
.plans-daycol__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.plans-daycol__count--zero { background: transparent; color: #475569; font-weight: 400; }
.plans-daycol__count--ok   { background: rgba(96, 165, 250, 0.14); color: #bfdbfe; }
.plans-daycol__count--busy { background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
.plans-daycol__count--over { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }

.plans-daycol__body {
    flex: 1;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 60px;
}
.plans-daycol__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 11px;
    font-style: italic;
    padding: 18px 8px;
}

.plans-store-group {
    background: rgba(96, 165, 250, 0.05);
    border-radius: 7px;
    padding: 5px 6px 5px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.plans-store-group__head {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 1px 2px 4px;
    margin-bottom: 2px;
    min-width: 0;
}
.plans-store-group__icon { flex: 0 0 auto; font-size: 11px; opacity: 0.75; }
/* v86: имя сети + адрес магазина в 2 строки. См. plans.js → renderDaysView. */
.plans-store-group__meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.plans-store-group__name {
    font-size: 11.5px;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plans-store-group__addr {
    font-size: 9.5px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plans-store-group__count {
    flex: 0 0 auto;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.18);
    color: #c9dcff;
    font-size: 9.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.plans-store-group__sups {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 5px;
    border-left: 2px solid rgba(96, 165, 250, 0.18);
}
.plans-store-group--single .plans-store-group__sups {
    border-left-color: transparent;
    padding-left: 0;
}

.plans-visit {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 6px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 11.5px;
    line-height: 1.25;
}
.plans-visit:hover {
    background: rgba(96, 165, 250, 0.08);
}
.plans-visit__num {
    flex: 0 0 auto;
    /* v86: в 2 раза меньше (20→10px). Зелёная точка «без очереди»
       и кружок с номером — один и тот же элемент, стал компактным. */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: #3b82f6;
}
.plans-visit__num--wide { font-size: 6px; }
.plans-visit--free .plans-visit__num {
    background: #10b981;
}
.plans-visit--free .plans-visit__num::before {
    /* v86: точка в кружке больше не нужна — сам кружок зелёный. */
    content: '';
}
.plans-visit__info { flex: 1 1 auto; min-width: 0; }
.plans-visit__sup {
    display: block;
    font-size: 11px;
    color: #cbd5e1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plans-daycol__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 6px 10px 7px;
    border-top: 1px solid #1f2a44;
    font-size: 10px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.plans-daycol__foot b { color: #cbd5e1; font-weight: 700; }
.plans-daycol__foot .f-time  { color: #60a5fa; }
.plans-daycol__foot .f-price { color: #34d399; }
.plans-daycol__foot .f-stores { color: #94a3b8; }

/* ══════════════════════════════════════════════════════════
   СТАТИСТИКА — 7 карточек + итог
   ══════════════════════════════════════════════════════════ */
.plans-sc-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
.plans-sc {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 4px 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.plans-sc--weekend { border-left: 1px solid #334155; }

.plans-sc__dow {
    font-size: 9.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.plans-sc__big {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
}
.plans-sc__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1px 6px;
    padding-top: 3px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 9.5px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Уровни нагрузки */
.plans-sc--zero {
    background: #1e293b;
    border-color: #334155;
}
.plans-sc--zero .plans-sc__big { color: #475569; }

/* ok: 1–5 визитов — синий */
.plans-sc--ok {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #3b82f6;
}
.plans-sc--ok .plans-sc__dow   { color: rgba(255,255,255,0.75); }
.plans-sc--ok .plans-sc__big   { color: #ffffff; }
.plans-sc--ok .plans-sc__metrics {
    color: rgba(255,255,255,0.85);
    border-top-color: rgba(255,255,255,0.15);
}

/* busy: 6–7 визитов — жёлто-оранжевый */
.plans-sc--busy {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #f59e0b;
}
.plans-sc--busy .plans-sc__dow   { color: rgba(15,23,42,0.7); }
.plans-sc--busy .plans-sc__big   { color: #0f172a; }
.plans-sc--busy .plans-sc__metrics {
    color: rgba(15,23,42,0.85);
    border-top-color: rgba(15,23,42,0.15);
}

/* over: 8+ визитов — серый (нейтральный, не пугает) */
.plans-sc--over {
    background: linear-gradient(135deg, #475569, #334155);
    border-color: #475569;
}
.plans-sc--over .plans-sc__dow   { color: rgba(255,255,255,0.7); }
.plans-sc--over .plans-sc__big   { color: #ffffff; }
.plans-sc--over .plans-sc__metrics {
    color: rgba(255,255,255,0.85);
    border-top-color: rgba(255,255,255,0.12);
}

.plans-sc-total {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px solid #1f2a44;
    font-size: 11.5px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.plans-sc-total__label {
    font-weight: 800;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 10px;
}
.plans-sc-total b { color: #cbd5e1; font-weight: 800; }

/* ══════════════════════════════════════════════════════════
   АДАПТИВ
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1150px) {
    .plans-vs-head, .plans-vs-row {
        grid-template-columns:
            minmax(150px, 1.2fr)
            minmax(100px, 0.9fr)
            repeat(7, 26px)
            46px 46px 46px;
    }
}
@media (max-width: 1000px) {
    .plans-vd-grid {
        grid-template-columns: repeat(7, minmax(150px, 1fr));
        overflow-x: auto;
        padding-bottom: 8px;
    }
    .plans-daycol { min-width: 150px; }
    .plans-sc-row {
        grid-template-columns: repeat(7, minmax(90px, 1fr));
        overflow-x: auto;
        padding-bottom: 6px;
    }
}
@media (max-width: 900px) {
    .plans-vs-head, .plans-vs-row {
        grid-template-columns:
            minmax(120px, 1fr)
            minmax(80px, 0.8fr)
            repeat(7, 24px)
            42px 42px 42px;
        gap: 2px;
    }
    .plans-circle { width: 22px; height: 22px; font-size: 10px; }
    .plans-circle--num.plans-circle--wide { font-size: 8.5px; }
    .plans-vs-store__addr { display: none; }
    .plans-vs-row--same .plans-vs-store { padding-left: 16px; font-size: 10px; }
    .plans-sc__big { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════
   ТЕМЫ
   ══════════════════════════════════════════════════════════ */

/* ─── СВЕТЛАЯ ─── */
[data-theme="light"] .plans-vs-head { border-bottom-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .plans-vs-head__dow { color: #64748b; }
[data-theme="light"] .plans-vs-head__dow--weekend { color: #94a3b8; }

[data-theme="light"] .plans-vs-row { border-bottom-color: #e2e8f0; }
[data-theme="light"] .plans-vs-row--new { border-top-color: #cbd5e1; }

[data-theme="light"] .plans-vs-store { color: #0f172a; }
[data-theme="light"] .plans-vs-store__addr { color: #64748b; }
[data-theme="light"] .plans-vs-row--same .plans-vs-store { color: #94a3b8; }
[data-theme="light"] .plans-vs-row--same .plans-vs-store__addr { color: #94a3b8; }
[data-theme="light"] .plans-vs-sup { color: #334155; }

[data-theme="light"] .plans-circle--empty { border-color: #cbd5e1; }
[data-theme="light"] .plans-circle--empty:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}
[data-theme="light"] .plans-circle--num { background: #3b82f6; }
[data-theme="light"] .plans-circle--num:hover { background: #2563eb; }
[data-theme="light"] .plans-circle--free { background: #10b981; }
[data-theme="light"] .plans-circle--free:hover { background: #059669; }

[data-theme="light"] .plans-vs-num { color: #334155; }
[data-theme="light"] .plans-vs-num--price { color: #059669; }
[data-theme="light"] .plans-vs-num--time  { color: #2563eb; }

[data-theme="light"] .plans-cov--full { color: #059669; background: #d1fae5; }
[data-theme="light"] .plans-cov--ok   { color: #2563eb; background: #dbeafe; }
[data-theme="light"] .plans-cov--low  { color: #b45309; background: #fef3c7; }
[data-theme="light"] .plans-cov--zero { color: #b91c1c; background: #fee2e2; }

[data-theme="light"] .plans-daycol { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .plans-daycol--weekend { border-left-color: #e2e8f0; }
[data-theme="light"] .plans-daycol__head { border-bottom-color: #e2e8f0; }
[data-theme="light"] .plans-daycol__dow { color: #0f172a; }
[data-theme="light"] .plans-daycol__count--zero { color: #cbd5e1; }
[data-theme="light"] .plans-daycol__count--ok   { background: #dbeafe; color: #1d4ed8; }
[data-theme="light"] .plans-daycol__count--busy { background: #fef3c7; color: #b45309; }
[data-theme="light"] .plans-daycol__count--over { background: #fee2e2; color: #b91c1c; }
[data-theme="light"] .plans-daycol__empty { color: #cbd5e1; }

[data-theme="light"] .plans-store-group { background: rgba(59, 130, 246, 0.05); }
[data-theme="light"] .plans-store-group__name { color: #0f172a; }
[data-theme="light"] .plans-store-group__count { background: #dbeafe; color: #1e40af; }
[data-theme="light"] .plans-store-group__sups { border-left-color: #bfdbfe; }

[data-theme="light"] .plans-visit:hover { background: rgba(59, 130, 246, 0.08); }
[data-theme="light"] .plans-visit__num { background: #3b82f6; }
[data-theme="light"] .plans-visit--free .plans-visit__num { background: #10b981; }
[data-theme="light"] .plans-visit__sup { color: #334155; }

[data-theme="light"] .plans-daycol__foot {
    border-top-color: #e2e8f0;
    color: #64748b;
}
[data-theme="light"] .plans-daycol__foot b { color: #334155; }
[data-theme="light"] .plans-daycol__foot .f-time  { color: #2563eb; }
[data-theme="light"] .plans-daycol__foot .f-price { color: #059669; }

[data-theme="light"] .plans-sc {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .plans-sc__dow { color: #64748b; }
[data-theme="light"] .plans-sc__big { color: #0f172a; }
[data-theme="light"] .plans-sc__metrics {
    color: #64748b;
    border-top-color: #e2e8f0;
}
[data-theme="light"] .plans-sc--zero .plans-sc__big { color: #cbd5e1; }
[data-theme="light"] .plans-sc--ok {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #3b82f6;
}
[data-theme="light"] .plans-sc--busy {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #f59e0b;
}
[data-theme="light"] .plans-sc--over {
    background: linear-gradient(135deg, #64748b, #475569);
    border-color: #64748b;
}
[data-theme="light"] .plans-sc-total { border-top-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .plans-sc-total__label { color: #334155; }
[data-theme="light"] .plans-sc-total b { color: #0f172a; }



/* ─── Итог за неделю в шапке (v16) ─── */
.plans-week-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 4px 14px;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 2px;
    font-size: 11.5px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}
.plans-week-summary > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}
.plans-week-summary b {
    color: #cbd5e1;
    font-weight: 700;
}

[data-theme="light"] .plans-week-summary { color: #64748b; }
[data-theme="light"] .plans-week-summary b { color: #334155; }



/* ══════════════════════════════════════════════════════════
   §71. ПЛАНЫ — МОБИЛЬНАЯ АДАПТАЦИЯ (≤768px)
   Перекомпоновка обеих раскладок: таблица → карточки,
   7 колонок → вертикальный список дней.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ─── Общее: шапка модалки планов ─── */
    .plans-head {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
    }
    .plans-head__title {
        font-size: 13px;
        max-width: none;
        flex: 1 1 100%;
    }
    .plans-head .plans-view-toggle {
        flex: 1 1 auto;
    }
    .plans-head .plans-view-toggle__btn {
        padding: 4px 10px;
        font-size: 11px;
    }
    .plans-head .plans-actions {
        flex: 0 0 auto;
        margin-left: 0;
    }

    /* ─── Итог: отдельной строкой, компактнее ─── */
    .plans-week-summary {
        flex: 1 1 100%;
        gap: 3px 10px;
        padding: 4px 0 0;
        font-size: 10.5px;
        overflow: visible;
        flex-wrap: wrap;
    }

    /* ─── Фильтры: перенос ─── */
    .plans-filters {
        gap: 4px;
        padding: 6px 10px;
        font-size: 11px;
    }
    .plans-filters input[type="search"] {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        height: 26px;
    }
    .plans-filters select {
        flex: 1 1 calc(50% - 2px);
        max-width: none;
        height: 26px;
        font-size: 11px;
    }
    .plans-filters__reset {
        flex: 0 0 26px;
        height: 26px;
    }
    .plans-month-inline {
        flex: 1 1 100%;
        margin-left: 0;
        margin-top: 2px;
    }
    .plans-month-inline select,
    .plans-month-inline input {
        height: 26px;
        font-size: 11px;
    }
    .plans-month-inline select { flex: 1 1 auto; max-width: none; }
    .plans-month-inline input  { flex: 0 0 60px; }
    .plans-filters__count {
        flex: 1 1 100%;
        text-align: right;
        font-size: 10px;
        margin-top: 2px;
    }

    /* ─── View wrap: убираем лишний внутренний padding ─── */
    .plans-view-wrap {
        padding-right: 0;
    }

    /* ══════════════════════════════════════════════════════════
       LAYOUT 1 «ПО МАГАЗИНАМ» — таблица → карточки
       ══════════════════════════════════════════════════════════ */

    .plans-vs-head { display: none; }

    .plans-vs-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "store  cov"
            "sup    sup"
            "days   days"
            "nums   nums";
        gap: 4px 8px;
        padding: 8px 10px;
        border: 1px solid #334155;
        border-radius: 10px;
        margin-bottom: 6px;
        background: #0f172a;
    }
    .plans-vs-row--new { border-top: 1px solid #334155; }
    .plans-vs-row--same {
        margin-top: -6px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top-color: transparent;
    }

    .plans-vs-store {
        grid-area: store;
        font-size: 12.5px;
        flex-wrap: wrap;
        white-space: normal;
        gap: 3px;
    }
    .plans-vs-row--same .plans-vs-store {
        padding-left: 0;
        font-size: 11px;
        color: #64748b;
    }
    .plans-vs-store__addr {
        flex: 1 1 100%;
        font-size: 10.5px;
    }

    .plans-vs-sup {
        grid-area: sup;
        font-size: 12px;
    }

    /* 7 кружков в одну строку */
    .plans-vs-row .plans-circle {
        margin-left: 0;
    }
    .plans-vs-row {
        /* ручное управление порядком через grid-area */
    }

    /* Все кружки — во flex-строку через display: contents */
    .plans-vs-row > .plans-circle {
        align-self: start;
    }

    /* Перебиваем grid: кружки идут отдельной строкой */
    .plans-vs-row {
        grid-template-areas:
            "store  cov"
            "sup    sup"
            "days   days"
            "nums   nums";
    }

    /* Обёртка кружков — нет, у нас их нет. Перебираем через nth-child */
    .plans-vs-row > .plans-circle:nth-of-type(n) {
        /* ставим их в невидимый контейнер через grid-auto-flow */
    }

    /* Fallback: явное позиционирование кружков */
    .plans-vs-row {
        grid-template-columns: auto repeat(7, 28px) auto;
        grid-template-areas: unset;
        grid-auto-flow: row dense;
        column-gap: 3px;
        row-gap: 6px;
    }

    .plans-vs-row > .plans-vs-store { grid-column: 1 / -1; }
    .plans-vs-row > .plans-vs-sup   { grid-column: 1 / -1; }
    .plans-vs-row > .plans-circle   { /* оставляем как есть */ }

    .plans-cov {
        justify-self: end;
        margin-bottom: 2px;
    }
    .plans-vs-num {
        font-size: 11px;
    }
    .plans-vs-num--price { grid-column: 5 / 8; text-align: right; }
    .plans-vs-num--time  { grid-column: 8 / -1; text-align: right; }

    /* ══════════════════════════════════════════════════════════
       LAYOUT 2 «ПО ДНЯМ» — 7 колонок → вертикальный список
       ══════════════════════════════════════════════════════════ */

    .plans-vd-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        overflow-x: visible;
        padding: 4px 0 10px;
    }

    .plans-daycol {
        min-width: 0;
        width: 100%;
        min-height: 0;
    }
    .plans-daycol--weekend {
        border-left: 3px solid #334155;
    }

    .plans-daycol__head {
        padding: 8px 12px;
    }

    .plans-daycol__body {
        padding: 8px;
        gap: 6px;
    }

    .plans-store-group {
        padding: 6px 8px;
    }

    .plans-store-group__name {
        font-size: 12px;
    }
    .plans-store-group__count {
        height: 18px;
        font-size: 10px;
    }

    .plans-visit {
        padding: 6px 8px;
        font-size: 12px;
    }
    .plans-visit__num {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
    .plans-visit__num--wide { font-size: 9.5px; }
    .plans-visit__sup {
        font-size: 12px;
    }

    .plans-daycol__foot {
        padding: 8px 12px;
        font-size: 11px;
        gap: 4px 12px;
    }

    /* ══════════════════════════════════════════════════════════
       СТАТИСТИКА — 7 карточек → сетка 3×3
       ══════════════════════════════════════════════════════════ */

    .plans-sc-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .plans-sc {
        padding: 6px 8px;
    }
    .plans-sc__dow  { font-size: 10px; }
    .plans-sc__big  { font-size: 16px; }
    .plans-sc__metrics {
        font-size: 10px;
        gap: 2px 6px;
    }

    /* 7-я карточка (Вс) — на всю ширину */
    .plans-sc-row > .plans-sc:nth-child(7) {
        grid-column: 1 / -1;
    }

    /* ══════════════════════════════════════════════════════════
       ПОПАП ОЧЕРЁДНОСТИ
       ══════════════════════════════════════════════════════════ */

    .plans-popup {
        padding: 14px 16px 12px;
        max-width: 92vw;
    }
    .plans-popup__nums {
        gap: 4px;
    }
    .plans-popup__num {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .plans-popup__num--free {
        font-size: 11px;
        padding: 0 12px;
    }
    .plans-popup__actions {
        flex-direction: column-reverse;
        gap: 6px;
    }
    .plans-popup__del,
    .plans-popup__cancel {
        width: 100%;
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* ─── Очень узкие экраны (≤400px) ─── */
@media (max-width: 400px) {
    .plans-sc-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .plans-sc-row > .plans-sc:nth-child(7) {
        grid-column: 1 / -1;
    }

    .plans-vs-row {
        grid-template-columns: auto repeat(7, 24px) auto;
        column-gap: 2px;
    }
    .plans-circle {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }
    .plans-circle--num.plans-circle--wide {
        font-size: 8px;
    }

    .plans-daycol__foot {
        font-size: 10px;
    }
}


/* ─── Тёмные/светлые темы для мобильных карточек ─── */
@media (max-width: 768px) {

    [data-theme="light"] .plans-vs-row {
        background: #ffffff;
        border-color: #e2e8f0;
    }
    [data-theme="light"] .plans-vs-row--same {
        border-top-color: transparent;
    }


}


/* ============================================================
   §72. ПЛАНЫ — МОБИЛЬНЫЕ ПРАВКИ v17
   Перебивает §71: имя/адрес в 2 строки, кнопка-лупа для
   фильтров, компактные карточки статистики.
   ============================================================ */

/* Кнопка-лупа видна только на мобильном, на десктопе — скрыта. */
.plans-filters__toggle {
    display: none;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #334155;
    border: 1px solid #475569;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.plans-filters__toggle:hover { background: #475569; color: #f1f5f9; }
.plans-filters__toggle:active { transform: scale(0.96); }

[data-theme="light"] .plans-filters__toggle {
    background: #e2e8f0; border-color: #cbd5e1; color: #334155;
}
[data-theme="light"] .plans-filters__toggle:hover { background: #cbd5e1; color: #0f172a; }



@media (max-width: 768px) {

    /* ─── Кнопка-лупа: показать ─── */
    .plans-filters__toggle { display: inline-flex; }

    /* Свёрнутое состояние: видна только кнопка. */
    .plans-filters:not(.is-open) > *:not(.plans-filters__toggle) {
        display: none;
    }
    .plans-filters:not(.is-open) {
        padding: 6px 10px;
        min-height: 44px;
    }

    /* Развёрнутое состояние — все поля как раньше. */
    .plans-filters.is-open {
        padding: 8px 10px;
        gap: 4px;
    }

    /* ─── Карточка магазина: имя сверху, адрес снизу ─── */
    .plans-vs-store {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon  name"
            "addr  addr";
        gap: 2px 6px;
        align-items: baseline;
        min-width: 0;
        white-space: normal;
        font-size: 13px;
        font-weight: 700;
    }
    .plans-vs-store__icon {
        grid-area: icon;
        align-self: center;
    }
    .plans-vs-store__name {
        grid-area: name;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .plans-vs-store__addr {
        grid-area: addr;
        font-size: 11px;
        color: #94a3b8;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 0;
    }
    .plans-vs-row--same .plans-vs-store {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        padding-left: 0;
    }
    .plans-vs-row--same .plans-vs-store__addr { display: none; }

    /* Магазин — на всю ширину карточки (две строки) */
    .plans-vs-row {
        grid-template-columns: auto repeat(7, 26px) auto;
        column-gap: 3px;
        row-gap: 6px;
    }
    .plans-vs-row > .plans-vs-store { grid-column: 1 / -1; }
    .plans-vs-row > .plans-vs-sup   { grid-column: 1 / -1; }

    /* ─── Компактнее фильтры, когда развёрнуты ─── */
    .plans-filters.is-open input[type="search"] {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        height: 30px;
    }
    .plans-filters.is-open select {
        flex: 1 1 calc(50% - 2px);
        max-width: none;
        height: 30px;
    }

    /* ─── СТАТИСТИКА — в 2 раза меньше ─── */
    .plans-sc {
        padding: 3px 6px;
        border-radius: 6px;
        gap: 2px;
    }
    .plans-sc__dow {
        font-size: 8.5px;
        letter-spacing: 0.3px;
    }
    .plans-sc__big {
        font-size: 12px;
        line-height: 1;
    }
    .plans-sc__metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 1px 5px;
        padding-top: 3px;
        font-size: 8.5px;
        line-height: 1.15;
    }
    .plans-sc__metrics > span {
        display: inline-flex;
        align-items: baseline;
        gap: 2px;
    }

    /* Сетка карточек 4×2 (7 влезает в 2 строки) */
    .plans-sc-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }
    .plans-sc-row > .plans-sc:nth-child(7) {
        grid-column: auto;
    }

    /* Итог в шапке — компактнее */
    .plans-week-summary {
        font-size: 10.5px;
        gap: 3px 10px;
    }
}

/* ─── Узкие экраны (≤400px) ─── */
@media (max-width: 400px) {
    .plans-sc-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .plans-sc-row > .plans-sc:nth-child(7) {
        grid-column: 1 / -1;
    }
    .plans-sc__big { font-size: 11px; }
    .plans-sc__metrics { font-size: 8px; }
}


/* ============================================================
   §73. МОБИЛЬНАЯ КАРТОЧКА МАГАЗИНА — ФИНАЛЬНО
   Префикс #plansModal + = максимальная
   специфичность. Перебивает §70, §71, §72 безусловно.
   ============================================================ */

@media (max-width: 768px) {

    #plansModal .plans-vs-row {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-areas:
            "store  store  store  store  store  store  store"
            "sup    sup    sup    sup    sup    sup    sup"
            "d1     d2     d3     d4     d5     d6     d7"
            "cov    num1   num1   num2   num2   num3   num3";
        column-gap: 4px;
        row-gap: 6px;
        padding: 8px 10px;
        border: 1px solid #334155;
        border-radius: 10px;
        margin-bottom: 6px;
        background: #0f172a;
    }

    #plansModal .plans-vs-row--same {
        margin-top: -6px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top-color: transparent;
    }

    /* Строка 1: магазин — имя сверху, адрес снизу */
    #plansModal .plans-vs-store {
        grid-area: store;
        display: block;
        white-space: normal;
        overflow: visible;
        line-height: 1.35;
        font-size: 13px;
        font-weight: 700;
        min-width: 0;
        flex-wrap: unset;
        padding: 0;
    }
    #plansModal .plans-vs-store__icon {
        display: inline;
        margin-right: 4px;
        font-size: 13px;
        vertical-align: middle;
    }
    #plansModal .plans-vs-store__name {
        display: inline;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        min-width: 0;
        max-width: none;
        padding: 0;
    }
    #plansModal .plans-vs-store__addr {
        display: block;
        margin-top: 3px;
        padding-left: 22px;
        font-size: 11px;
        font-weight: 500;
        color: #94a3b8;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        min-width: 0;
        max-width: none;
    }

    /* Для повторных строк группы — только имя, без адреса */
    #plansModal .plans-vs-row--same .plans-vs-store {
        display: block;
        padding-left: 0;
        min-height: auto;
        font-size: 11px;
        font-weight: 500;
        color: #64748b;
    }
    #plansModal .plans-vs-row--same .plans-vs-store__addr {
        display: none;
    }

    /* Строка 2: поставщик */
    #plansModal .plans-vs-sup {
        grid-area: sup;
        font-size: 12px;
        padding: 0;
    }

    /* Строка 3: 7 кружков в одну линию */
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(1) { grid-area: d1; }
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(2) { grid-area: d2; }
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(3) { grid-area: d3; }
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(4) { grid-area: d4; }
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(5) { grid-area: d5; }
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(6) { grid-area: d6; }
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(7) { grid-area: d7; }

    #plansModal .plans-circle {
        margin-left: 0;
        justify-self: center;
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    /* Строка 4: покрытие слева + цена/время справа */
    #plansModal .plans-cov {
        grid-area: cov;
        justify-self: start;
        margin: 0;
    }
    #plansModal .plans-vs-num--price {
        grid-area: num1;
        text-align: center;
        font-size: 11px;
    }
    #plansModal .plans-vs-num--time {
        grid-area: num2;
        text-align: center;
        font-size: 11px;
    }
}


/* ─── Тёмные/светлые темы: мобильные карточки ─── */
@media (max-width: 768px) {
    [data-theme="light"] #plansModal .plans-vs-row {
        background: #ffffff;
        border-color: #e2e8f0;
    }
    [data-theme="light"] #plansModal .plans-vs-store__addr { color: #64748b; }
    [data-theme="light"] #plansModal .plans-vs-row--same .plans-vs-store { color: #94a3b8; }


}


/* ============================================================
   77. ПЛАНЫ НА МОБИЛЕ - КОМПАКТНАЯ ТАБЛИЦА "МАГАЗИН x 7 ДНЕЙ"

   Секции 71-73 перекраивали plans-vs-row в карточку на весь экран:
   магазин строкой, поставщик отдельно, 7 кружков третьей строкой,
   покрытие/цена/время четвертой. Один магазин = 100+ пикселей,
   15 магазинов = 5-6 экранов.

   Секция 77 возвращает табличную структуру десктопа, ужатую до
   примерно 330px ширины:
     [icon + Name + addr] [Sup] [7 кружков] [3/7] [7] [45]
   Одна строка = один поставщик. Шрифты 9-11px, кружки 16px.
   Побеждает 71-73 через #plansModal (id, специфичность выше).

   Переключатель "По магазинам / По дням" на мобиле скрыт -
   обе вкладки показывают эту таблицу (см. plans.js).
   ============================================================ */
@media (max-width: 768px) {

    /* Скрываем переключатель - на мобиле смысла не имеет */
    #plansModal .plans-head .plans-view-toggle {
        display: none;
    }

    /* Обертка строки: сбрасываем всё, что наворотили 71-73 */
    #plansModal .plans-vs-row {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            60px
            repeat(7, 16px)
            26px
            22px
            26px;
        grid-template-areas: none;
        column-gap: 2px;
        row-gap: 0;
        align-items: center;
        padding: 3px 6px;
        border: none;
        border-bottom: 1px solid #1f2a44;
        border-radius: 0;
        margin-bottom: 0;
        background: #0f172a;
        min-height: 22px;
    }

    #plansModal .plans-vs-row--new {
        border-top: 1px solid #334155;
    }
    #plansModal .plans-vs-row--new:first-child {
        border-top: none;
    }
    #plansModal .plans-vs-row--same {
        border-top: none;
        margin-top: 0;
    }

    /* Магазин: icon + Name + addr в одну строку */
    #plansModal .plans-vs-store {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 3px;
        min-width: 0;
        font-size: 11px;
        font-weight: 700;
        color: #f1f5f9;
        overflow: hidden;
        flex-wrap: nowrap;
        padding: 0;
        grid-area: auto;
    }
    #plansModal .plans-vs-store__icon {
        flex: 0 0 auto;
        font-size: 10px;
        opacity: 0.7;
        margin: 0;
        display: inline;
    }
    #plansModal .plans-vs-store__name {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        display: inline;
    }
    #plansModal .plans-vs-store__addr {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px;
        font-weight: 500;
        color: #64748b;
        padding: 0;
        margin: 0;
        display: inline;
    }
    #plansModal .plans-vs-row--same .plans-vs-store {
        font-size: 9px;
        color: #475569;
        font-weight: 500;
    }
    #plansModal .plans-vs-row--same .plans-vs-store__icon,
    #plansModal .plans-vs-row--same .plans-vs-store__addr {
        display: none;
    }

    /* Поставщик */
    #plansModal .plans-vs-sup {
        display: flex;
        align-items: center;
        gap: 2px;
        min-width: 0;
        font-size: 10px;
        font-weight: 500;
        color: #cbd5e1;
        overflow: hidden;
        flex-wrap: nowrap;
        padding: 0;
        grid-area: auto;
    }
    #plansModal .plans-vs-sup__icon {
        flex: 0 0 auto;
        font-size: 9px;
        opacity: 0.5;
        margin: 0;
    }
    #plansModal .plans-vs-sup__name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 7 кружков */
    #plansModal .plans-vs-row > .plans-circle {
        grid-area: auto;
        justify-self: center;
        width: 16px;
        height: 16px;
        font-size: 8px;
        margin: 0;
        border-width: 1px;
    }
    #plansModal .plans-vs-row > .plans-circle.plans-circle--wide {
        font-size: 6.5px;
    }
    #plansModal .plans-circle--weekend {
        margin-left: 0;
    }

    /* Покрытие / Цена / Тайминг */
    #plansModal .plans-vs-row > .plans-cov {
        grid-area: auto;
        justify-self: center;
        text-align: center;
        font-size: 9px;
        font-weight: 700;
        padding: 1px 3px;
        min-width: 22px;
        border-radius: 5px;
        margin: 0;
    }
    #plansModal .plans-vs-row > .plans-vs-num {
        grid-area: auto;
        text-align: right;
        font-size: 10px;
        font-weight: 700;
        padding: 0;
    }
    #plansModal .plans-vs-num--price { color: #34d399; }
    #plansModal .plans-vs-num--time  { color: #60a5fa; font-size: 9px; }

    /* Обертка вьюпорта */
    #plansModal #plansViewStores {
        padding-right: 0;
        padding-bottom: 8px;
    }
    /* v92-fix: скрытие #plansViewDays снято. Вкладка "По дням" снова
       управляется inline style из applyViewButtons() (JS).
       Проблема была: display: none перебивал inline,
       а :not([style*="display: none"]) не помогал - браузер
       нормализует style="display:none" в "display: none;" (с пробелом). */

    /* Шапка таблицы: только подписи дней, sticky */
    #plansModal .plans-vs-head {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            60px
            repeat(7, 16px)
            26px
            22px
            26px;
        grid-template-areas: none;
        column-gap: 2px;
        padding: 4px 6px;
        border-bottom: 1px solid #1f2a44;
        font-size: 8px;
        position: sticky;
        top: 0;
        z-index: 2;
        background: #0b1220;
    }
    #plansModal .plans-vs-head > *:nth-child(-n+2) {
        display: none;
    }
    #plansModal .plans-vs-head__dow {
        font-size: 8px;
        text-align: center;
    }
    #plansModal .plans-vs-head__dow--weekend {
        margin-left: 0;
        padding-left: 0;
    }
    #plansModal .plans-vs-head__r {
        font-size: 7px;
        text-align: right;
    }

    /* Темы */
    [data-theme="light"] #plansModal .plans-vs-row {
        background: #ffffff;
        border-bottom-color: #e2e8f0;
    }
    [data-theme="light"] #plansModal .plans-vs-row--new {
        border-top-color: #cbd5e1;
    }
    [data-theme="light"] #plansModal .plans-vs-store { color: #0f172a; }
    [data-theme="light"] #plansModal .plans-vs-store__addr { color: #94a3b8; }
    [data-theme="light"] #plansModal .plans-vs-row--same .plans-vs-store { color: #cbd5e1; }
    [data-theme="light"] #plansModal .plans-vs-sup { color: #334155; }
    [data-theme="light"] #plansModal .plans-vs-head {
        background: #f8fafc;
        border-bottom-color: #e2e8f0;
    }


}

/* ============================================================
   78. ПЛАНЫ НА МОБИЛЕ - КОМПАКТНАЯ ТАБЛИЦА (ФИКС 77)

   Блок 77 сломался: в блоке 73 для кружков стоит
     #plansModal .plans-vs-row > .plans-circle:nth-of-type(1..7)
   - вес (1,3,0). Мой 77 селектор был (1,2,0) без :nth-of-type,
   при равном побеждает более специфичный -> кружки
   улетали в grid-area d1..d7 и разваливали строку.

   Здесь то же самое, но через :nth-of-type(n) - вес совпадает,
   порядок в файле позже -> побеждаем.

   Media расширен до 900px (планшеты в портретной ориентации).
   ============================================================ */
@media (max-width: 900px) {

    /* v92-fix: скрытие #plansViewDays снято. Вкладка "По дням" снова
       управляется inline style из applyViewButtons().
       Переключатель "По магазинам / По дням" виден - см. §79 (v89).
       Правило display: none перебивало inline style и
       не давало вкладке показаться (inline "display: none" из HTML
       нормализуется браузером в "display: none;" - атрибутный
       селектор :not([style*="display: none"]) этого не учитывает). */

    /* Шапка таблицы: только подписи дней + ПОКР/₽/мин */
    #plansModal .plans-vs-head {
        display: grid;
        grid-template-columns:
            minmax(60px, 1fr)
            55px
            repeat(7, 18px)
            26px
            22px
            22px;
        grid-template-areas: none;
        column-gap: 2px;
        padding: 4px 4px;
        border-bottom: 1px solid #1f2a44;
        font-size: 8px;
        position: sticky;
        top: 0;
        z-index: 2;
        background: #0b1220;
    }
    #plansModal .plans-vs-head > *:nth-child(-n+2) {
        display: none;
    }
    #plansModal .plans-vs-head__dow {
        font-size: 8px;
        text-align: center;
    }
    #plansModal .plans-vs-head__dow--weekend {
        margin-left: 0;
        padding-left: 0;
    }
    #plansModal .plans-vs-head__r {
        font-size: 7px;
        text-align: right;
    }

    /* Строка - та же сетка, что у шапки */
    #plansModal .plans-vs-row {
        display: grid;
        grid-template-columns:
            minmax(60px, 1fr)
            55px
            repeat(7, 18px)
            26px
            22px
            22px;
        grid-template-areas: none;
        column-gap: 2px;
        row-gap: 0;
        align-items: center;
        padding: 4px 4px;
        border: none;
        border-bottom: 1px solid #1f2a44;
        border-radius: 0;
        margin-bottom: 0;
        background: transparent;
        min-height: 26px;
        overflow: hidden;
    }
    #plansModal .plans-vs-row--new {
        border-top: 1px solid #334155;
    }
    #plansModal .plans-vs-row--new:first-child {
        border-top: none;
    }
    #plansModal .plans-vs-row--same {
        border-top: none;
        margin-top: 0;
    }

    /* Кружки: селектор по :nth-of-type(n) - тот же вес, что в 73 */
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(1),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(2),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(3),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(4),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(5),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(6),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(7) {
        grid-area: auto;
        justify-self: center;
        width: 18px;
        max-width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 8px;
        margin: 0;
        padding: 0;
        border-width: 1px;
        box-sizing: border-box;
        border-radius: 50%;
    }
    #plansModal .plans-vs-row > .plans-circle.plans-circle--wide {
        font-size: 6px;
    }
    #plansModal .plans-circle--weekend {
        margin-left: 0;
    }

    /* Магазин: 1 строка, name + addr */
    #plansModal .plans-vs-store {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 3px;
        min-width: 0;
        font-size: 11px;
        font-weight: 700;
        color: #f1f5f9;
        overflow: hidden;
        flex-wrap: nowrap;
        padding: 0;
        grid-area: auto;
    }
    #plansModal .plans-vs-store__icon {
        flex: 0 0 auto;
        font-size: 10px;
        opacity: 0.7;
        margin: 0;
    }
    #plansModal .plans-vs-store__name {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }
    #plansModal .plans-vs-store__addr {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px;
        font-weight: 500;
        color: #64748b;
        padding: 0;
        margin: 0;
    }
    #plansModal .plans-vs-row--same .plans-vs-store {
        font-size: 9px;
        color: #475569;
        font-weight: 500;
    }
    #plansModal .plans-vs-row--same .plans-vs-store__icon,
    #plansModal .plans-vs-row--same .plans-vs-store__addr {
        display: none;
    }

    /* Поставщик */
    #plansModal .plans-vs-sup {
        display: flex;
        align-items: center;
        gap: 2px;
        min-width: 0;
        font-size: 10px;
        font-weight: 500;
        color: #cbd5e1;
        overflow: hidden;
        flex-wrap: nowrap;
        padding: 0;
        grid-area: auto;
    }
    #plansModal .plans-vs-sup__icon {
        flex: 0 0 auto;
        font-size: 9px;
        opacity: 0.5;
        margin: 0;
    }
    #plansModal .plans-vs-sup__name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Покрытие / Цена / Тайминг */
    #plansModal .plans-vs-row > .plans-cov {
        grid-area: auto;
        justify-self: center;
        text-align: center;
        font-size: 9px;
        font-weight: 700;
        padding: 1px 2px;
        min-width: 22px;
        border-radius: 5px;
        margin: 0;
    }
    #plansModal .plans-vs-row > .plans-vs-num {
        grid-area: auto;
        text-align: right;
        font-size: 10px;
        font-weight: 700;
        padding: 0;
    }
    #plansModal .plans-vs-num--price { color: #34d399; }
    #plansModal .plans-vs-num--time {
        color: #60a5fa;
        font-size: 9px;
    }

    /* Контейнер не даёт горизонтального скролла */
    #plansModal #plansViewStores {
        overflow-x: hidden;
        padding: 0;
    }

    /* Темы */
    [data-theme="light"] #plansModal .plans-vs-row {
        background: #ffffff;
        border-bottom-color: #e2e8f0;
    }
    [data-theme="light"] #plansModal .plans-vs-row--new {
        border-top-color: #cbd5e1;
    }
    [data-theme="light"] #plansModal .plans-vs-store { color: #0f172a; }
    [data-theme="light"] #plansModal .plans-vs-store__addr { color: #94a3b8; }
    [data-theme="light"] #plansModal .plans-vs-row--same .plans-vs-store { color: #cbd5e1; }
    [data-theme="light"] #plansModal .plans-vs-sup { color: #334155; }
    [data-theme="light"] #plansModal .plans-vs-head {
        background: #f8fafc;
        border-bottom-color: #e2e8f0;
    }


}

/* ============================================================
   79. ПЛАНЫ НА МОБИЛЕ - ФИКСЫ v89

   Что было не так после 77/78:
     a) Шапка таблицы не совпадала с колонками: в 78 я скрыл
        первые две ячейки через display:none, из-за чего грид
        сдвигал ПН на 1-ю колонку. Теперь visibility:hidden.
     b) Верхний блок (plans-head) - переключатель шёл ПЕРЕД
        сводкой (areas "title/toggle/summary"), из-за чего
        недельные итоги висли в самом низу блока. Меняю порядок.
     c) "Тёмный прямоугольник" с лупой - это .plans-filters в
        свёрнутом состоянии, у которого padding 6px + фон +
        min-height 44px. Убираю фон/border/padding.
     d) Переключатель "По магазинам / По дням" был скрыт в 78 -
        возвращаю видимым.
     e) Иконка 🏪 в магазине - убираю (в юзернейме магазина и
        без неё понятно).
     f) Кружки 18px -> 14px (-20%).
     g) Правая сводка (3/7 · 7 · 45) - уменьшаю gap 2 -> 1,
        ширины колонок 26/22/22 -> 24/20/20.
   ============================================================ */
@media (max-width: 900px) {

    /* (a) Шапка таблицы: visibility, не display, чтобы grid не съезжал */
    #plansModal .plans-vs-head > *:nth-child(-n+2) {
        display: block;
        visibility: hidden;
        pointer-events: none;
    }

    /* Шапка: колонки под новую сетку */
    #plansModal .plans-vs-head {
        grid-template-columns:
            minmax(60px, 1fr)
            55px
            repeat(7, 14px)
            24px
            20px
            20px;
        column-gap: 1px;
        padding: 3px 4px;
        font-size: 8px;
    }
    #plansModal .plans-vs-head__dow {
        font-size: 8px;
    }
    #plansModal .plans-vs-head__r {
        font-size: 7px;
        padding: 0;
    }

    /* (f)(g) Строки: кружки 14px, сетка под шапку, gap 1px */
    #plansModal .plans-vs-row {
        grid-template-columns:
            minmax(60px, 1fr)
            55px
            repeat(7, 14px)
            24px
            20px
            20px;
        column-gap: 1px;
        padding: 3px 4px;
        min-height: 24px;
    }
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(1),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(2),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(3),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(4),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(5),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(6),
    #plansModal .plans-vs-row > .plans-circle:nth-of-type(7) {
        width: 14px;
        max-width: 14px;
        height: 14px;
        min-width: 14px;
        font-size: 7px;
    }
    #plansModal .plans-vs-row > .plans-circle.plans-circle--wide {
        font-size: 5.5px;
    }

    /* (g) Сводка справа: чуть меньше и плотнее */
    #plansModal .plans-vs-row > .plans-cov {
        font-size: 8.5px;
        padding: 1px 2px;
        min-width: 20px;
    }
    #plansModal .plans-vs-row > .plans-vs-num {
        font-size: 9.5px;
    }
    #plansModal .plans-vs-num--time { font-size: 8.5px; }

    /* (e) Иконка 🏪 у магазина - убираем */
    #plansModal .plans-vs-store__icon {
        display: none;
    }

    /* (b) plans-head: порядок title / summary / toggle */
    #plansModal .plans-head {
        grid-template-areas:
            "title    actions"
            "summary  summary"
            "toggle   toggle";
        row-gap: 4px;
        column-gap: 6px;
        padding: 8px 12px 6px;
    }
    /* Сводка: прижимаем к имени, без декораций */
    #plansModal .plans-head .plans-week-summary {
        border-top: none;
        padding: 0;
        margin: 0;
        gap: 2px 10px;
        font-size: 10.5px;
    }

    /* (c) Свёрнутая панель фильтров - без "тёмного прямоугольника" */
    #plansModal .plans-filters:not(.is-open) {
        padding: 0;
        margin: 0 0 2px;
        background: transparent;
        border: none;
        min-height: 0;
        border-radius: 0;
    }
    #plansModal .plans-filters:not(.is-open) .plans-filters__toggle {
        margin: 0;
    }
    /* Кнопка-лупа: компактнее */
    #plansModal .plans-filters__toggle {
        width: 32px;
        height: 32px;
        padding: 0;
    }

    /* (d) Переключатель "По магазинам / По дням" - возвращаем */
    #plansModal .plans-head .plans-view-toggle {
        display: flex;
        width: 100%;
        margin: 0;
    }
    #plansModal .plans-head .plans-view-toggle__btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 5px 8px;
        font-size: 11px;
    }
    #plansModal .plans-head .plans-view-toggle__btn .pvt-i {
        font-size: 11px;
    }
}

/* ============================================================
   75. МАГАЗИНЫ + ЗАДАНИЯ — один скролл, компактный низ

   v75: height: calc(100vh - 110px) на карточке магазинов.
   Проблема: height жёстко задан → при коротком контенте карточка
   добирала всю высоту, оставляя пустоту под последней строкой.
   Плюс padding-bottom 20 + margin-bottom 20 + body 10 = 50px
   «воздуха» вместо нужных ~17px.

   v77:
     • height → max-height: карточка сжимается по контенту,
       но не превышает viewport.
     • flex: 0 1 auto на wrap: при малом числе строк он не
       растягивается (пустоты внизу нет); при большом —
       сжимается до max-height карточки и получает скролл.
     • padding-bottom 4 + margin-bottom 4 + body 10 = 18px
       отступа снизу (было 50 — в ~2.8 раза меньше).
     • §55 .table-wrap { max-height: 70vh } перебит через
       max-height: none (иначе ограничит высоту сильнее нужного).

   Работает и для магазинов (#tab-stores), и для заданий
   (#tab-tasks) — структура одинаковая: toolbar/фильтры сверху,
   .table-wrap снизу.

   Мобайл (≤640px) не трогаем.
   ============================================================ */
@media (min-width: 641px) {
    /* ----- Магазины ----- */
    #tab-stores > .card {
        display: flex;
        flex-direction: column;
        /* 78px = body top (10) + dashboard-header (~40)
           + его margin (8) + card margin-bottom (4)
           + body bottom (10) + запас (6). */
        max-height: calc(100vh - 78px);
        padding: 10px 20px 4px;
        margin-bottom: 4px;
        box-sizing: border-box;
    }
    #tab-stores .store-filters-panel {
        flex: 0 0 auto;
    }
    #tab-stores #storesTableWrap {
        flex: 0 1 auto;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }

    /* ----- Задания ----- */
    #tab-tasks > .card {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 78px);
        padding: 10px 20px 4px;
        margin-bottom: 4px;
        box-sizing: border-box;
    }
    #tab-tasks .tasks-toolbar {
        flex: 0 0 auto;
    }
    #tab-tasks #tasksTableWrap {
        flex: 0 1 auto;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }
}

/* ============================================================
   §80. ПЛАНЫ v94 — колонки ₽/мин убраны, шапка модалки на мобиле
   перестроена без наложения.

   1) Desktop/tablet: в .plans-vs-head и .plans-vs-row теперь
      4 столбца (было 6): store | sup | 7×dow | cov.
      Освободившиеся ~100px уходят в store и sup.

   2) Мобиле (≤900px): .plans-head переведён с grid на flex-column,
      кнопки вынесены в absolute в правый верхний угол. Устраняет
      наложение заголовка/сводки/переключателя, которое возникало
      из-за конфликта §71 (§74) и §79 — три разных grid-template-areas
      с.
   ============================================================ */

/* --- Desktop: сетка без колонок price/time --- */
#plansModal .plans-vs-head,
#plansModal .plans-vs-row {
    grid-template-columns:
        minmax(200px, 1.3fr)
        minmax(120px, 0.9fr)
        repeat(7, 28px)
        52px;
}

@media (max-width: 1150px) {
    #plansModal .plans-vs-head,
    #plansModal .plans-vs-row {
        grid-template-columns:
            minmax(150px, 1.2fr)
            minmax(100px, 0.9fr)
            repeat(7, 26px)
            46px;
    }
}

/* --- Мобиле: 4 столбца + жёсткий сброс шапки --- */
@media (max-width: 900px) {
    #plansModal .plans-vs-head,
    #plansModal .plans-vs-row {
        grid-template-columns:
            minmax(0, 1fr)
            55px
            repeat(7, 14px)
            26px;
    }

    /* .plans-head — вертикальный flex. Порядок: title → actions (абс) → summary → toggle. */
    #plansModal .plans-head {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 10px 12px 8px;
        grid-template-columns: none;
        grid-template-areas: none;
        position: relative;
        z-index: 2;
    }

    /* Заголовок во всю ширину, справа 78px под кнопки */
    #plansModal .plans-head__title {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 78px 0 0;
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Кнопки — absolute в правый верхний угол */
    #plansModal .plans-head .plans-actions {
        position: absolute;
        top: 8px;
        right: 10px;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 4px;
        z-index: 3;
    }
    #plansModal .plans-head .plans-actions > button,
    #plansModal .plans-head .plans-actions .plans-btn-sm {
        width: 30px;
        height: 30px;
        min-width: 30px;
        padding: 0;
        font-size: 13px;
        border-radius: 8px;
    }
    #plansModal .plans-head .plans-actions #plansSaveBtn {
        font-size: 0;
        min-width: 30px;
        padding: 0;
    }
    #plansModal .plans-head .plans-actions #plansSaveBtn::before {
        content: '💾';
        font-size: 13px;
        line-height: 1;
    }

    /* Сводка недели: своя строка, flex-wrap */
    #plansModal .plans-head .plans-week-summary {
        flex: 0 0 auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 3px 12px;
        padding: 0;
        margin: 0;
        border: none;
        font-size: 11px;
        line-height: 1.35;
        overflow: visible;
        max-width: none;
    }
    #plansModal .plans-head .plans-week-summary > span {
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        white-space: nowrap;
    }

    /* Переключатель «По магазинам / По дням» — своя строка */
    #plansModal .plans-head .plans-view-toggle {
        flex: 0 0 auto;
        display: flex;
        width: 100%;
        margin: 0;
        padding: 3px;
    }
    #plansModal .plans-head .plans-view-toggle__btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 7px 8px;
        font-size: 12px;
        min-width: 0;
    }
    #plansModal .plans-head .plans-view-toggle__btn .pvt-i {
        font-size: 12px;
    }
}

/* ============================================================
   §82. ПЛАНЫ v96 — ШАПКА В ПОТОКЕ, БЕЗ ABSOLUTE, MEDIA 1400
   (расширено с 1200: iPad Pro 12.9 landscape = 1366px)

   Диагноз по скрину: media max-width: 900px НЕ срабатывает —
   телефон/планшет отдаёт >900 css px, правила §80/§81 не
   применялись. Кнопки ♻️/✖ уезжали за контент (абсолют при
   отсутствии relative-родителя), фильтр-лупа уезжала под них.

   Что делаем жёстко и надёжно:
     1. Media расширен до max-width: 1200px — покрывает
        телефоны в портретной и планшеты в альбомной.
     2. .plans-head — flex-колонка, position: static, ничего
        absolute. Все элементы идут строками сверху вниз.
     3. Кнопки (♻️, 💾, ✖) — не absolute, а часть flex-row
        с заголовком: заголовок растягивается, кнопки справа.
     4. Сводка и переключатель — отдельные строки flex-column.
     5. .plans-filters ниже — уже вне зоны наложения.

   Схема после патча:
     ┌──────────────────────────────────────┐
     │ 📋 Планы: ФИО            [♻️] [✖]  │  <- row
     │ 📋 47 визитов · 🏬 14 точек · ⏱…  │  <- row
     │ [🏪 Магазины]   [📅 По дням]      │  <- row
     ├──────────────────────────────────────┤
     │ [🔍]                                │  <- filters
     └──────────────────────────────────────┘
   ============================================================ */
@media (max-width: 1400px) {

    /* --- .plans-head: flex-column, position static --- */
    #plansModal .plans-head {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 10px 12px 8px;
        margin: 0;
        position: static;
        z-index: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        grid-template-areas: none;
        grid-template-columns: none;
        grid-template-rows: none;
    }

    /* --- Строка 1: заголовок + кнопки --- */
    #plansModal .plans-head .plans-head__title {
        order: 1;
        grid-area: auto;
        grid-column: auto;
        grid-row: auto;
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    /* Кнопки — в потоке, отдельной строкой сразу под заголовком,
       прижаты вправо (второй ряд), а не absolute */
    #plansModal .plans-head .plans-actions {
        order: 2;
        grid-area: auto;
        grid-column: auto;
        grid-row: auto;
        position: static;
        top: auto;
        right: auto;
        display: flex;
        justify-content: flex-end;
        gap: 4px;
        margin: 0;
        padding: 0;
        z-index: auto;
        width: 100%;
        align-self: stretch;
        flex-wrap: nowrap;
    }
    #plansModal .plans-head .plans-actions > button,
    #plansModal .plans-head .plans-actions .plans-btn-sm {
        width: 32px;
        height: 32px;
        min-width: 32px;
        padding: 0;
        font-size: 13px;
        border-radius: 8px;
        line-height: 1;
        flex: 0 0 auto;
    }
    #plansModal .plans-head .plans-actions #plansSaveBtn {
        font-size: 0;
        padding: 0;
    }
    #plansModal .plans-head .plans-actions #plansSaveBtn::before {
        content: '💾';
        font-size: 13px;
        line-height: 1;
    }

    /* --- Строка 3: сводка недели --- */
    #plansModal .plans-head .plans-week-summary {
        order: 3;
        grid-area: auto;
        grid-column: auto;
        grid-row: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 3px 12px;
        padding: 0;
        margin: 0;
        border: none;
        font-size: 11.5px;
        line-height: 1.35;
        width: 100%;
        max-width: none;
        overflow: visible;
        align-self: stretch;
    }
    #plansModal .plans-head .plans-week-summary > span {
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        white-space: nowrap;
    }

    /* --- Строка 4: переключатель --- */
    #plansModal .plans-head .plans-view-toggle {
        order: 4;
        grid-area: auto;
        grid-column: auto;
        grid-row: auto;
        display: flex;
        width: 100%;
        margin: 0;
        padding: 3px;
        align-self: stretch;
    }
    #plansModal .plans-head .plans-view-toggle__btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 7px 8px;
        font-size: 12px;
        min-width: 0;
    }
    #plansModal .plans-head .plans-view-toggle__btn .pvt-i {
        font-size: 12px;
    }

    /* --- .plans-filters: отдельный блок, не перекрывается --- */
    #plansModal .plans-filters {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
        padding: 8px 12px 10px;
        background: transparent;
        border: none;
        border-top: 1px solid #1f2a44;
        border-radius: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 0;
    }
    #plansModal .plans-filters:not(.is-open) > *:not(.plans-filters__toggle) {
        display: none;
    }
    #plansModal .plans-filters__toggle {
        width: 36px;
        height: 36px;
        min-width: 36px;
        margin: 0;
        padding: 0;
        flex: 0 0 auto;
    }
}

/* ============================================================
   §82.1. Вид «По дням» на планшетах 769–900px.
   Сетка .plans-vd-grid = repeat(7, minmax(150px, 1fr)) не влезает
   в контейнер ≤900px (7*150 = 1050). §71 сворачивает в 1 колонку
   только до 768px — планшеты 810–900px в overflow.
   ============================================================ */
@media (max-width: 900px) {
    #plansModal .plans-vd-grid {
        grid-template-columns: 1fr;
        overflow-x: hidden;
    }
    #plansModal .plans-daycol {
        min-width: 0;
        width: 100%;
    }
}


/* ============================================================
   §86. FINAL — .plans-actions в .plans-head (без исчезновения)

   §85 сломал: кнопки исчезли (width:100% + gap + overflow по
   родителю). §80/§81/§82 бьются за position у .plans-actions,
   но на мобиле кнопки всё равно пропадают.

   Селектор (1, 3, 2): html body #plansModal .modal-content
   .plans-head .plans-actions. Выше §85 (1,3,0), §82 (1,2,0),
   §80 (1,2,0), §81 (1,2,0). Побеждает безусловно.

   Ключевое: width: auto (НЕ 100% — кнопки не должны
   растягиваться в пустую полосу), opacity: 1, visibility: visible.
   ============================================================ */
@media (max-width: 1400px) {

    html body #plansModal .modal-content .plans-head .plans-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;

        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        order: 4;

        /* ВАЖНО: auto, не 100% — иначе полоса пустоты + обрезка */
        width: auto;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        overflow: visible;
        z-index: auto;
        align-self: flex-end;
    }

    html body #plansModal .modal-content .plans-head .plans-actions > button,
    html body #plansModal .modal-content .plans-head .plans-actions .plans-btn-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 32px;
        height: 32px;
        min-width: 32px;
        max-width: 32px;

        padding: 0;
        margin: 0;
        font-size: 14px;
        line-height: 1;
        border-radius: 8px;
        flex: 0 0 auto;
        opacity: 1;
        visibility: visible;
        position: static;
        transform: none;
    }

    /* Название кнопки «Сохранить» скрыто, показываем иконку через ::before */
    html body #plansModal .modal-content .plans-head .plans-actions #plansSaveBtn {
        font-size: 0;
    }
    html body #plansModal .modal-content .plans-head .plans-actions #plansSaveBtn::before {
        content: '\01F4BE';
        font-size: 14px;
        line-height: 1;
        display: inline-block;
    }
}


/* ============================================================
   §87. FINAL — flex-shrink: 0 для .plans-head и .plans-filters

   Симптом: в режиме «По дням» нижние ряды .plans-head
   (view-toggle, кнопки ♻️ 💾 ↩ ✖) обрезаются, magnifier
   из .plans-filters наезжает на контент ниже.

   Причина: .plans-v2-modal — flex-column, max-height: 96vh,
   overflow: hidden. Все прямые дети — flex-shrink: 1.
   При длинном контенте («По дням» — 7 колонок .plans-vd-grid)
   суммарная высота детей > доступной, и flex-родитель сжимает
   .plans-head. В «По магазинам» контент короче — сжатия нет,
   поэтому там всё выглядит правильно.

   Лечение: запретить сжатие head и filters
   (flex: 0 0 auto), а вьюпорту отдать всё оставшееся
   (flex: 1 1 auto; min-height: 0).
   Селектор (1, 3, 0) > §80/§82 (1, 2, 0). Побеждает безусловно.
   ============================================================ */
@media (max-width: 1400px) {

    /* Шапка и панель фильтров — фиксированной высоты,
       flex-родитель не имеет права их сжимать. */
    #plansModal .modal-content.plans-v2-modal > .plans-head,
    #plansModal .modal-content.plans-v2-modal > .plans-filters {
        flex: 0 0 auto;
        flex-shrink: 0;
        flex-grow: 0;
        min-height: auto;
        height: auto;
        max-height: none;
    }

    /* Вьюпорт забирает остаток и скроллится внутри себя. */
    #plansModal .modal-content.plans-v2-modal > .plans-view-wrap {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
    }
}


/* ============================================================
   §88. Лупа в строке .plans-actions.

   #plansFiltersToggle переносится JS-ом из .plans-filters
   в .plans-actions первым ребёнком. Здесь:
     • .plans-actions → justify-content: space-between,
       чтобы лупа ушла влево, а ♻️💾↩✖ — вправо;
     • .plans-actions__toggle — размеры как у остальных
       кнопок (32×32, border-radius 8, font 14);
     • .plans-filters без .is-open → полностью скрыт
       (toggle больше не его ребёнок, скрывать нечего).
   ============================================================ */
@media (max-width: 1400px) {

    html body #plansModal .modal-content .plans-head .plans-actions {
        justify-content: space-between;
    }

    html body #plansModal .modal-content .plans-head .plans-actions .plans-filters__toggle,
    html body #plansModal .modal-content .plans-head .plans-actions .plans-actions__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        min-width: 32px;
        max-width: 32px;
        padding: 0;
        margin: 0;
        font-size: 14px;
        line-height: 1;
        border-radius: 8px;
        flex: 0 0 auto;
    }

    html body #plansModal .modal-content.plans-v2-modal > .plans-filters:not(.is-open) {
        display: none;
    }
}



/* ============================================================
   §91. ADULT THEME — fase 2: плотность и типографика.
   Перебивает §1–§90. Откат: удалить блок целиком.
   ============================================================ */

/* --- 1. Базовый размер и сглаживание шрифта --- */
body {
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* --- 2. Заголовки: умеренный вес и сжатый трекинг --- */
h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.modal-content h2 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 16px 0;
}

/* --- 3. Таблицы: плотность + tabular-nums для чисел --- */
th, td {
    padding: 6px 8px;
    line-height: 1.4;
}

th {
    padding: 8px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Выравнивание цифр по разряду — критично для цен и дат */
.col-price,
.col-timing,
.col-date,
.col-started,
.col-completed,
#storesTableWrap .col-price,
#storesTableWrap .col-timing,
#tasksTableWrap .col-price,
#tasksTableWrap .col-date,
#tasksTableWrap .col-started,
#tasksTableWrap .col-completed,
.plans-vs-num,
.plans-cov,
.plans-sc__big,
.plans-sc__metrics,
.battery__label,
.limit-badge,
.salary-month-row .s-month-total,
.salary-month-row .s-month-count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* --- 4. Инпуты: чуть больше горизонтальный отступ --- */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    padding: 6px 10px;
}

/* --- 5. Кнопки: вес 500 + лёгкий трекинг --- */
button {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.btn-success,
.btn-danger,
.tab-btn.active,
.empty-state__btn {
    font-weight: 600;
}

/* --- 6. Убираем нативные стрелки у number-инпутов --- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --- 7. Формы: единый размер лейблов --- */
.modal-content .field label,
.edit-task-field label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* --- 8. Лейблы полей в деталях задания — чуть мягче --- */
.tdc-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.tdc-value {
    font-size: 14px;
    line-height: 1.45;
}

/* --- 9. Плашка «нет данных» — плотнее --- */
.empty-state {
    padding: 28px 16px;
}

.empty-state__icon {
    font-size: 30px;
    margin-bottom: 8px;
}


/* ============================================================
   §92. ADULT THEME — fase 3a: SVG-иконки (Lucide).
   Спрайт в admin.html (#iconsSprite). Использование:
     <svg class="i"><use href="#i-search"/></svg>
   ============================================================ */

.i {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.icon-btn-theme .i {
    width: 18px;
    height: 18px;
}

.tab-btn .i {
    width: 13px;
    height: 13px;
    margin-right: 5px;
    margin-top: -1px;
    opacity: 0.9;
}

/* Убираем «прыжок» иконки при смене темы */
#themeToggleIcon {
    transition: none;
}


/* ============================================================
   §93. ADULT THEME — fase 3c: .i--sm (12px) для иконок в таблицах.
   ============================================================ */

.i--sm {
    width: 12px;
    height: 12px;
    vertical-align: middle;
}

.edit-store-btn .i,
.edit-task-btn .i,
.client-edit-btn .i,
.supplier-edit-btn .i,
.supplier-delete-btn .i,
.manager-edit-btn .i,
.manager-delete-btn .i,
.worker-edit-btn .i,
.worker-delete-btn .i,
.worker-stores-btn .i,
.worker-tasks-btn .i,
.worker-plans-btn .i,
.audit-detail-btn .i,
.audit-restore-btn .i,
.comment-icon .i,
.tmc-sup-btn .i,
.smc-sup-btn .i {
    margin-right: 4px;
    vertical-align: -1px;
}

.edit-store-btn .i:only-child,
.edit-task-btn .i:only-child,
.client-edit-btn .i:only-child,
.supplier-edit-btn .i:only-child,
.supplier-delete-btn .i:only-child,
.manager-edit-btn .i:only-child,
.manager-delete-btn .i:only-child,
.worker-edit-btn .i:only-child,
.worker-delete-btn .i:only-child,
.audit-detail-btn .i:only-child,
.tmc-sup-btn .i:only-child,
.smc-sup-btn .i:only-child {
    margin-right: 0;
}

/* ============================================================
   §94. DESIGN SYSTEM FOUNDATION (2026-10-02)

   Единый слой дизайн-системы поверх §1–§93. Не удаляет старые
   правила — переопределяет через каскад.
   Структура:
     §94.1  Токены (расширение §0)
     §94.2  Focus-ring
     §94.3  Custom scrollbar
     §94.4  Selection / placeholder
     §94.5  Modal: backdrop-blur + entry animation
     §94.6  Table unify (шапка без заливки)
     §94.7  Button component (.btn + модификаторы)
     §94.8  Empty state upgrade
     §94.9  Utility (fade-in, reduced-motion)
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   §94.1. ТОКЕНЫ
   ──────────────────────────────────────────────────────────── */

:root {
    /* Поверхности */
    --bg-body:      #0b1120;
    --bg-surface:   #1e293b;
    --bg-elevated:  #1e293b;
    --bg-input:     #334155;
    --bg-hover:     #2d3748;

    /* Границы */
    --border-subtle: rgba(148, 163, 184, 0.10);
    --border:        rgba(148, 163, 184, 0.18);
    --border-strong: rgba(148, 163, 184, 0.32);

    /* Текст */
    --text-primary:   #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted:     #94a3b8;
    --text-disabled:  #64748b;

    /* Акценты */
    --accent:         #60a5fa;
    --accent-hover:   #3b82f6;
    --accent-active:  #2563eb;
    --accent-subtle:  rgba(96, 165, 250, 0.12);
    --success:        #34d399;
    --success-subtle: rgba(52, 211, 153, 0.12);
    --warning:        #f59e0b;
    --warning-subtle: rgba(245, 158, 11, 0.12);
    --danger:         #f87171;
    --danger-subtle:  rgba(248, 113, 113, 0.12);

    /* Радиусы */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   20px;
    --r-pill: 999px;

    /* Spacing (кратно 4) */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
    --s-12: 48px;

    /* Тени */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.40);

    /* Анимация */
    --ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;
}

[data-theme="light"] {
    --bg-body:      #f6f8fb;
    --bg-surface:   #ffffff;
    --bg-elevated:  #ffffff;
    --bg-input:     #f1f5f9;
    --bg-hover:     #f1f5f9;

    --border-subtle: rgba(15, 23, 42, 0.06);
    --border:        rgba(15, 23, 42, 0.12);
    --border-strong: rgba(15, 23, 42, 0.24);

    --text-primary:   #0b1120;
    --text-secondary: #334155;
    --text-muted:     #64748b;
    --text-disabled:  #94a3b8;

    --accent:         #3b82f6;
    --accent-hover:   #2563eb;
    --accent-active:  #1d4ed8;
    --accent-subtle:  rgba(59, 130, 246, 0.10);
    --success:        #059669;
    --success-subtle: rgba(5, 150, 105, 0.10);
    --warning:        #d97706;
    --warning-subtle: rgba(217, 119, 6, 0.10);
    --danger:         #dc2626;
    --danger-subtle:  rgba(220, 38, 38, 0.10);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
}

body {
    background: var(--bg-body);
    color: var(--text-primary);
}
[data-theme="light"] body {
    background: var(--bg-body);
    color: var(--text-primary);
}

.card {
    background: var(--bg-surface);
    border-color: var(--border);
    border-radius: var(--r-lg);
}

/* ────────────────────────────────────────────────────────────
   §94.2. FOCUS-RING (WCAG 2.4.7 AA)
   ──────────────────────────────────────────────────────────── */

*:focus { outline: none; }

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: inherit;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

button:focus-visible,
.icon-btn-theme:focus-visible {
    outline-offset: 1px;
}

/* ────────────────────────────────────────────────────────────
   §94.3. CUSTOM SCROLLBAR
   ──────────────────────────────────────────────────────────── */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    background-clip: content-box;
    border: 2px solid transparent;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* ────────────────────────────────────────────────────────────
   §94.4. SELECTION / PLACEHOLDER
   ──────────────────────────────────────────────────────────── */

::selection {
    background: var(--accent);
    color: #0b1120;
}
[data-theme="light"] ::selection {
    background: var(--accent);
    color: #ffffff;
}

::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* ────────────────────────────────────────────────────────────
   §94.5. MODAL: backdrop-blur + entry animation
   ──────────────────────────────────────────────────────────── */

.modal-overlay {
    background: rgba(11, 17, 32, 0.72);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
}
[data-theme="light"] .modal-overlay {
    background: rgba(15, 23, 42, 0.45);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal-overlay { background: rgba(11, 17, 32, 0.88); }
    [data-theme="light"] .modal-overlay { background: rgba(15, 23, 42, 0.55); }
}

.modal-content {
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    background: var(--bg-elevated);
}

.modal-overlay.active .modal-content {
    animation: dsModalIn var(--dur-base) var(--ease);
}
@keyframes dsModalIn {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ────────────────────────────────────────────────────────────
   §94.6. TABLE UNIFY
   Шапка — без заливки, тонкие бордеры, читаемые строки.
   Перебивает §5 (th { background: #3a4a63 }).
   ──────────────────────────────────────────────────────────── */

table thead tr:not(.filter-row) th,
[data-theme="light"] table thead tr:not(.filter-row) th {
    background: transparent;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 8px;
}

table tbody td {
    border-bottom: 1px solid var(--border-subtle);
    padding: 10px 8px;
}

table tbody tr:last-child td {
    border-bottom: none;
}

table tbody tr:hover {
    background: var(--bg-hover);
}

/* Sticky-шапка требует непрозрачного фона, иначе просвечивает */
@media (min-width: 641px) {
    .table-wrap thead tr:not(.filter-row) th {
        background: var(--bg-surface);
    }
}

/* ────────────────────────────────────────────────────────────
   §94.7. BUTTON COMPONENT
   Новый базовый .btn + модификаторы. Старые классы
   (.btn-success, .refresh-btn, ...) остаются рабочими —
   миграция HTML постепенная.
   ──────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    background: transparent;
    color: var(--text-primary);
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.btn--primary   { background: var(--accent); color: #0b1120; }
.btn--primary:hover { background: var(--accent-hover); }

.btn--secondary { background: var(--bg-input); color: var(--text-primary); border-color: var(--border); }
.btn--secondary:hover { background: var(--bg-hover); }

.btn--ghost     { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn--danger    { background: var(--danger); color: #ffffff; }
.btn--danger:hover { filter: brightness(0.92); }

.btn--success   { background: var(--success); color: #0b1120; }
.btn--success:hover { filter: brightness(0.94); }

.btn--sm   { height: 26px; padding: 0 8px; font-size: 12px; }
.btn--lg   { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--icon { width: 32px; padding: 0; }
.btn--pill { border-radius: var(--r-pill); padding: 0 16px; }

.btn .i     { width: 15px; height: 15px; }
.btn--sm .i { width: 12px; height: 12px; }

/* ────────────────────────────────────────────────────────────
   §94.8. EMPTY STATE UPGRADE
   ──────────────────────────────────────────────────────────── */

.empty-state {
    padding: 48px 20px;
}
.empty-state__icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.empty-state__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.empty-state__text strong {
    color: var(--text-secondary);
    font-weight: 600;
}
.empty-state__title {
    display: block;
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 4px;
}
.empty-state__hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}
.empty-state__art {
    width: 96px;
    height: 64px;
    margin: 0 auto 12px;
    opacity: 0.5;
    display: block;
}
.empty-state__btn {
    height: 36px;
    padding: 0 18px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: #0b1120;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.empty-state__btn:hover { background: var(--accent-hover); }

/* ────────────────────────────────────────────────────────────
   §94.9. UTILITY
   ──────────────────────────────────────────────────────────── */

.tab-content {
    animation: dsFadeIn var(--dur-base) var(--ease);
}
@keyframes dsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* ============================================================
   §95.2. FIX CLICK — SVG внутри кнопок не должен перехватывать
   клики. Клик всегда должен приходить к родительскому
   <button>/<a>, иначе обработчики вида `e.target.id === 'X'`
   в admin.js не срабатывают (e.target = <svg> или <use>).

   Проявление: кнопка-иконка «кликабельна» только по краям
   (padding), клик по иконке в центре — игнорируется.

   Фикс: SVG и все его потомки внутри кнопок/ссылок —
   pointer-events: none. Клик «проваливается» к родителю.
   ============================================================ */

button svg,
button svg *,
.btn svg,
.btn svg *,
[role="button"] svg,
[role="button"] svg *,
a svg,
a svg *,
.icon-btn-theme svg,
.icon-btn-theme svg *,
.limit-badge svg,
.limit-badge svg *,
.more-menu__item svg,
.more-menu__item svg *,
.edit-store-btn svg,
.edit-store-btn svg *,
.edit-task-btn svg,
.edit-task-btn svg *,
.worker-edit-btn svg,
.worker-edit-btn svg *,
.worker-delete-btn svg,
.worker-delete-btn svg *,
.supplier-edit-btn svg,
.supplier-edit-btn svg *,
.supplier-delete-btn svg,
.supplier-delete-btn svg *,
.manager-edit-btn svg,
.manager-edit-btn svg *,
.manager-delete-btn svg,
.manager-delete-btn svg *,
.audit-restore-btn svg,
.audit-restore-btn svg *,
.audit-detail-btn svg,
.audit-detail-btn svg *,
.date-preset-btn svg,
.date-preset-btn svg *,
.tab-btn svg,
.tab-btn svg *,
.tab-btn-cleanup svg,
.tab-btn-cleanup svg * {
    pointer-events: none;
}

/* ============================================================
   §96. TYPOGRAPHY — Inter var + OpenType features (2026-10-02)

   Зачем: system-ui даёт разный рендер на Windows (Segoe UI),
   macOS (SF Pro), Android (Roboto). Интерфейс смотрится «вразнобой»,
   особенно цифры в таблицах и счётчики в шапке.

   Inter выравнивает всё в одну систему, а OpenType features
   (cv02/cv03/cv04/cv11/ss03) дают «человечные» альтернативные
   глифы: a с хвостиком, l с хвостиком, одноэтажная g, прямая t,
   правильные кавычки. Это то, что отличает «дизайнерский Inter»
   от «дефолтного Inter».

   Подключение через rsms.me CDN (см. admin.html).
   Fallback: system-ui, -apple-system, 'Segoe UI', Roboto.
   Для self-hosted — раскомментировать @font-face ниже.
   ============================================================ */

/* ── Self-hosted вариант (закомментирован по умолчанию) ──
@font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
         url('/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance: 'Italic';
    src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
         url('/fonts/InterVariable-Italic.woff2') format('woff2');
}
*/

/* ── §96.1. Основной шрифт ── */
body,
button,
input,
select,
textarea,
.modal-content,
table,
th,
td {
    font-family: 'Inter var', 'Inter', system-ui, -apple-system, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings:
        'cv02' 1,   /* a с хвостиком */
        'cv03' 1,   /* одноэтажная g */
        'cv04' 1,   /* l с хвостиком */
        'cv11' 1,   /* прямая t */
        'ss03' 1,   /* правильные кавычки */
        'tnum' 0;   /* tabular-nums по умолчанию выключены — включаются точечно (§91) */
    font-variant-ligatures: contextual;
}

/* ── §96.2. Заголовки: плотнее трекинг ──
   Inter в крупных размерах выглядит «разряженно» при дефолтном
   letter-spacing (0). Минус 1.5% — золотая середина. */
h1, h2, h3, h4,
.modal-content h2,
.plans-head__title,
.plans-head__title {
    letter-spacing: -0.015em;
}

/* ── §96.3. Uppercase-заголовки таблиц: чуть шире, чем в §91 ──
   В Inter верхний регистр мельче, чем в Segoe UI. Компенсируем
   letter-spacing 0.06em и вес 600. */
table thead tr:not(.filter-row) th {
    letter-spacing: 0.06em;
}

/* ── §96.4. tabular-nums для числовых колонок — приоритетнее §91 ──
   В Inter tabular-nums работает корректнее, чем в system-ui.
   Явно подтверждаем для тех же селекторов. */
.col-price,
.col-timing,
.col-started,
.col-completed,
.plans-vs-num,
.plans-cov,
.plans-sc__big,
.plans-sc__metrics,
.battery__label,
.limit-badge,
.salary-month-row .s-month-total,
.salary-month-row .s-month-count,
.wk-chip--salary,
.tmc-sup-metric .val,
.smc-sup-metric .val {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1, 'ss03' 1;
}

/* ── §96.5. Кнопки: чуть плотнее ──
   Inter в 500 весе выглядит «тяжелее» системного — сжимаем на 0.5%. */
button,
.btn,
.btn-logout-small,
.tab-btn,
.date-preset-btn,
.reset-filters,
.refresh-btn,
.export-btn,
.icon-btn-theme {
    letter-spacing: 0.005em;
}

/* ============================================================
   §97. SKELETON LOADERS (2026-10-02)

   Заменяет «пустую карточку на 300 мс» на shimmer-строки.
   TTI не меняется, но восприятие скорости — заметно лучше.

   Использование:
       import { renderSkeletonTable } from './_utils.js';
       renderSkeletonTable('clientsList', 6);
   ============================================================ */

.ds-skeleton-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
}

.ds-skeleton-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 10px;
    border-bottom: 1px solid var(--border-subtle);
}

.ds-skeleton {
    display: block;
    height: 14px;
    border-radius: var(--r-xs);
    background: linear-gradient(
        90deg,
        var(--bg-hover) 0%,
        var(--border)   50%,
        var(--bg-hover) 100%
    );
    background-size: 200% 100%;
    animation: dsSkeleton 1.4s ease-in-out infinite;
}

.ds-skeleton--main { flex: 1 1 auto; max-width: 55%; }
.ds-skeleton--side { flex: 0 0 22%; }
.ds-skeleton--tiny { flex: 0 0 12%; }

/* Вариация ширин, чтобы строки не выглядели одинаковыми */
.ds-skeleton-row:nth-child(even) .ds-skeleton--main { max-width: 45%; }
.ds-skeleton-row:nth-child(even) .ds-skeleton--side { flex-basis: 18%; }
.ds-skeleton-row:nth-child(3n)   .ds-skeleton--main { max-width: 62%; }
.ds-skeleton-row:nth-child(3n)   .ds-skeleton--side { flex-basis: 26%; }

@keyframes dsSkeleton {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 640px) {
    .ds-skeleton-row { padding: 16px 10px; gap: 10px; }
    .ds-skeleton--main { max-width: 70%; }
    .ds-skeleton--side { flex-basis: 20%; }
    .ds-skeleton--tiny { display: none; }
}

/* ============================================================
   §98. DEAD CODE (2026-10-02)
   Удалены §74 и §81 — оба внутри @media (max-width: 0px),
   никогда не активировались. Дублировали порядок/раскладку
   .plans-head, которую полностью определяет §82 + §86/§87/§88.
   Экономия: ~60 строк. Поведение не изменилось.
   ============================================================ */

/* ============================================================
   §99. DROPDOWN «ЕЩЁ» В ШАПКЕ (2026-10-02)

   Desktop (≥769px): popover под кнопкой. Клонирует .more-menu из
   #moreMenuModal, синхронизирует видимость, эмулирует click по
   оригиналу. Логика — modules/moreMenu.js.

   Mobile (<769px): .more-menu-popover принудительно display:none,
   работает прежняя модалка #moreMenuModal.
   ============================================================ */

.more-menu-popover {
    position: fixed;
    z-index: 1200;
    min-width: 220px;
    max-width: 320px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.more-menu-popover.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.more-menu-popover .more-menu {
    margin: 0;
    gap: 2px;
}

.more-menu-popover .more-menu__item {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    justify-content: flex-start;
    text-align: left;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.more-menu-popover .more-menu__item:hover,
.more-menu-popover .more-menu__item:focus-visible {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.more-menu-popover .more-menu__item .i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.75;
}
.more-menu-popover .more-menu__item:hover .i {
    opacity: 1;
    color: var(--accent);
}

.more-menu-popover .more-menu__item strong {
    color: var(--accent);
    font-weight: 600;
}

.more-menu-popover .more-menu__item--danger {
    color: var(--danger);
}
.more-menu-popover .more-menu__item--danger:hover {
    background: var(--danger-subtle);
    color: var(--danger);
}

/* На mobile popover не используется */
@media (max-width: 768px) {
    .more-menu-popover { display: none; }
}

/* §100-PATCH-START — 2026-10-02 — interface maturity v1 */

/* ============================================================
   §100. PALETTE v2 — приглушённая палитра (взрослый UI).

   Пять насыщенных голосов (#60a5fa, #34d399, #f59e0b, #f87171,
   #8b5cf6) одновременно — визуальный базар. Оставляем два
   доминирующих (accent + danger), остальное уводим в спокойные
   тона. Правило: цвет = только статус, не декор.
   ============================================================ */

:root {
    /* Основной акцент — глубже и спокойнее, чем #60a5fa */
    --accent:         #5b8def;
    --accent-hover:   #4879dd;
    --accent-active:  #3a6acc;
    --accent-subtle:  rgba(91, 141, 239, 0.12);

    /* Семантические — приглушённая насыщенность */
    --success:        #3dae7f;
    --success-subtle: rgba(61, 174, 127, 0.12);
    --warning:        #d4a04a;
    --warning-subtle: rgba(212, 160, 74, 0.12);
    --danger:         #dd6462;
    --danger-subtle:  rgba(221, 100, 98, 0.12);

    /* Границы — тише, чем в §94 */
    --border-subtle:  rgba(148, 163, 184, 0.08);
    --border:         rgba(148, 163, 184, 0.14);
    --border-strong:  rgba(148, 163, 184, 0.24);

    /* Старые имена — обратная совместимость с §0–§93 */
    --accent-red:     #dd6462;
    --accent-green:   #3dae7f;
    --accent-blue:    #5b8def;
}

[data-theme="light"] {
    --accent:         #2563eb;
    --accent-hover:   #1d4ed8;
    --accent-active:  #1e40af;
    --accent-subtle:  rgba(37, 99, 235, 0.10);

    --success:        #047857;
    --success-subtle: rgba(4, 120, 87, 0.10);
    --warning:        #b45309;
    --warning-subtle: rgba(180, 83, 9, 0.10);
    --danger:         #b91c1c;
    --danger-subtle:  rgba(185, 28, 28, 0.10);

    --border-subtle:  rgba(15, 23, 42, 0.05);
    --border:         rgba(15, 23, 42, 0.10);
    --border-strong:  rgba(15, 23, 42, 0.20);

    --accent-red:     #b91c1c;
    --accent-green:   #047857;
    --accent-blue:    #2563eb;
}

/* ============================================================
   §101. TABS — underline вместо pill-кнопок.

   Pill-вкладки (border-radius: 40px + заливка accent) — мобильный
   стиль. Underline (Linear / Notion / Vercel) спокойнее и лучше
   читается при 8–11 вкладках в ряду. На мобиле оставляем pill —
   там touch-зона важнее компактности.
   ============================================================ */

.tab-bar {
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    align-items: stretch;
}

.tab-bar > .tab-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 9px 14px 11px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-muted);
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: color 120ms ease, box-shadow 120ms ease;
}

.tab-bar > .tab-btn:hover {
    background: transparent;
    color: var(--text-primary);
}

.tab-bar > .tab-btn.active {
    background: transparent;
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.tab-bar > .tab-btn .i {
    width: 14px;
    height: 14px;
    margin-right: 7px;
    margin-top: -1px;
    opacity: 0.7;
}

.tab-bar > .tab-btn.active .i { opacity: 1; }

[data-theme="light"] .tab-bar > .tab-btn { background: transparent; }
[data-theme="light"] .tab-bar > .tab-btn:hover {
    background: transparent;
    color: var(--text-primary);
}
[data-theme="light"] .tab-bar > .tab-btn.active {
    background: transparent;
    color: var(--text-primary);
}

/* Кнопка «Очистить старые» — тот же язык */
.tab-btn-cleanup {
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 9px 14px 11px;
}
.tab-btn-cleanup:hover {
    background: transparent;
    color: var(--danger);
    box-shadow: inset 0 -2px 0 var(--danger);
}

[data-theme="light"] .tab-btn-cleanup {
    background: transparent;
    border: none;
    color: var(--text-muted);
}
[data-theme="light"] .tab-btn-cleanup:hover {
    background: transparent;
    color: var(--danger);
}

/* Мобильные вкладки — возвращаем pill (touch-friendly) */
@media (max-width: 640px) {
    .tab-bar {
        border-bottom: none;
        gap: 4px;
    }
    .tab-bar > .tab-btn {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 40px;
    }
    .tab-bar > .tab-btn.active {
        background: var(--accent);
        color: #ffffff;
        box-shadow: none;
    }
    .tab-bar > .tab-btn.active .i { opacity: 1; }
    .tab-btn-cleanup {
        border-radius: 40px;
        padding: 6px 12px;
    }
    .tab-btn-cleanup:hover {
        background: rgba(221, 100, 98, 0.12);
        box-shadow: none;
    }
}

/* ============================================================
   §102. RADIUS & DENSITY — один язык скруглений.

   Сейчас в файле 15+ значений border-radius (4, 5, 6, 7, 8, 9,
   10, 11, 12, 14, 16, 20, 22, 26, 30, 40, 60). Сводим к трём:
   6px — кнопки/инпуты, 10px — карточки/модалки, pill — чипы.
   ============================================================ */

/* Кнопки, инпуты, селекты — единый радиус 6px */
button,
input, select, textarea,
.btn,
.tab-btn,
.filter-input, .filter-select,
.store-global-filter, .store-filter-select,
.day-filter-select, .ss-input, .ss-toggle,
.reset-filters, .refresh-btn, .export-btn,
.btn-login, .btn-submit, .btn-finish,
.btn-add-photo, .btn-close-camera,
.btn-redo-task, .btn-start-task, .btn-claim-task,
.btn-start-supplier, .store-sup-btn,
.btn-secondary, .btn-danger, .btn-success,
.plans-btn-sm, .date-preset-btn,
.plans-filters input[type="search"],
.plans-filters select,
.plans-month-inline input[type="number"],
.plans-filters__reset {
    border-radius: 6px;
}

/* Карточки, модалки, панели */
.card, .modal-content, .empty-state,
.more-menu-popover, .cmd-palette,
.plans-store, .plans-daycol, .plans-sc,
.store-card, .task-group-mobile, .store-group-mobile,
.plan-group-mobile, .store-sup-mobile,
.store-ann, .task-ann-banner, .comment-block,
.plans-popup {
    border-radius: 10px;
}

/* Под-элементы карточек — 8px, чтобы не было «сэндвича» */
.plans-store__head,
.store-card__header,
.store-card__summary,
.store-sup-row,
.store-card .store-sup-row,
.tmc-sup,
.smc-sup,
.pmc-sup {
    border-radius: 8px;
}

/* Чипы, badge, плашки — pill */
.limit-badge, .chip, .badge,
.wk-chip, .tmc-status, .store-pill,
.day-dot, .plans-circle, .plans-cell,
.plans-visit__num, .plans-popup__num {
    border-radius: 999px;
}

/* Ячейки таблиц — без радиусов */
table, th, td { border-radius: 0; }

/* Круглые иконки-кнопки сохраняют круглую форму */
.icon-btn-theme,
.plans-filters__toggle,
.plans-actions__toggle,
.plans-head .plans-actions > button,
.tdc-close,
.photo-remove,
.audit-detail-btn {
    border-radius: 50%;
}

/* ============================================================
   §103. SHADOWS — тень только у модалок и popover.

   Взрослый UI: контур вместо тени для карточек. Тень — только
   для «парящих» поверхностей (модалки, dropdown, popover).
   Убирает «налепленность» карточек друг на друга.
   ============================================================ */

.card {
    box-shadow: none;
}

.modal-content {
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.40));
}

.more-menu-popover,
.cmd-palette,
.ss-list,
.filter-dropdown,
.ac-dropdown,
.plans-popup {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
}

/* Внутри модалок карточки не носят теней */
.modal-content .card {
    box-shadow: none;
}

/* §100-PATCH-END */

/* §104-PATCH-START — 2026-10-02 — interface maturity v2 */

/* ============================================================
   §104. CHIPS — единый язык бейджей, статусов, лимитов.

   До этого: badge/badge.public/limit-badge.limit-ok/tmc-status —
   все с разной насыщенностью и без контура. Сейчас — «мягкий
   фон + тонкий контур + приглушённый текст», один рецепт на все.
   ============================================================ */

/* ── Бейджи в карточках мерча (🌍 Всем / 🔄 Ручное / 📅 План) ── */
.store-card__badges .badge,
.store-card__badges .badge.public,
.store-card__badges .badge.manual,
.store-card__badges .badge.plan,
.store-card__badges .badge.redo {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
    border: 1px solid transparent;
}
.store-card__badges .badge.public,
.store-card__badges .badge.manual,
.store-card__badges .badge.redo {
    background: rgba(212, 160, 74, 0.14);
    color: #d4a04a;
    border-color: rgba(212, 160, 74, 0.32);
}
.store-card__badges .badge.plan {
    background: rgba(91, 141, 239, 0.14);
    color: #5b8def;
    border-color: rgba(91, 141, 239, 0.32);
}
[data-theme="light"] .store-card__badges .badge.public,
[data-theme="light"] .store-card__badges .badge.manual,
[data-theme="light"] .store-card__badges .badge.redo {
    background: rgba(180, 83, 9, 0.10);
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.25);
}
[data-theme="light"] .store-card__badges .badge.plan {
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.25);
}

/* ── Лимиты в тулбарах ── */
.limit-badge {
    font-weight: 500;
    letter-spacing: 0;
    font-size: 11px;
    border-width: 1px;
}
.limit-badge.limit-ok {
    background: rgba(61, 174, 127, 0.12);
    color: #3dae7f;
    border-color: rgba(61, 174, 127, 0.30);
}
.limit-badge.limit-full {
    background: rgba(212, 160, 74, 0.14);
    color: #d4a04a;
    border-color: rgba(212, 160, 74, 0.32);
}
.limit-badge.limit-over {
    background: rgba(221, 100, 98, 0.14);
    color: #dd6462;
    border-color: rgba(221, 100, 98, 0.32);
}
[data-theme="light"] .limit-badge.limit-ok {
    background: rgba(4, 120, 87, 0.10);
    color: #047857;
    border-color: rgba(4, 120, 87, 0.25);
}
[data-theme="light"] .limit-badge.limit-full {
    background: rgba(180, 83, 9, 0.10);
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.25);
}
[data-theme="light"] .limit-badge.limit-over {
    background: rgba(185, 28, 28, 0.10);
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.25);
}

/* ── Плашки статусов в мобильных карточках задач ── */
.tmc-status {
    font-weight: 500;
    letter-spacing: 0;
}
.tmc-sup.task-started   .tmc-status { background: var(--accent); color: #fff; }
.tmc-sup.task-redo      .tmc-status { background: var(--warning); color: #fff; }
.tmc-sup.task-completed .tmc-status { background: var(--success); color: #fff; }
.tmc-sup.task-cancelled .tmc-status,
.tmc-sup.task-rejected  .tmc-status { background: var(--danger); color: #fff; }
.tmc-sup.task-planned   .tmc-status { background: var(--accent); color: #fff; }
.tmc-sup.task-not-done  .tmc-status,
.tmc-sup.task-moved     .tmc-status { background: #64748b; color: #fff; }

/* ── Чипы работников (мобильная таблица workers) ── */
.wk-chip--city,
.wk-chip--name {
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}
.wk-chip--client {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.wk-chip--metric {
    background: rgba(91, 141, 239, 0.10);
    color: #5b8def;
    border: 1px solid rgba(91, 141, 239, 0.24);
}
.wk-chip--metric:hover { background: rgba(91, 141, 239, 0.18); }
[data-theme="light"] .wk-chip--city,
[data-theme="light"] .wk-chip--name {
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-primary);
}
[data-theme="light"] .wk-chip--client {
    background: transparent;
    color: var(--text-muted);
}
[data-theme="light"] .wk-chip--metric {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.20);
}
[data-theme="light"] .wk-chip--metric:hover { background: rgba(37, 99, 235, 0.14); }

/* ── Плашки «дней» в планах — плоский цвет ── */
.plans-cov--full { color: #3dae7f; background: rgba(61, 174, 127, 0.12); }
.plans-cov--ok   { color: #5b8def; background: rgba(91, 141, 239, 0.12); }
.plans-cov--low  { color: #d4a04a; background: rgba(212, 160, 74, 0.12); }
.plans-cov--zero { color: #dd6462; background: rgba(221, 100, 98, 0.12); }
[data-theme="light"] .plans-cov--full { color: #047857; background: rgba(4, 120, 87, 0.10); }
[data-theme="light"] .plans-cov--ok   { color: #2563eb; background: rgba(37, 99, 235, 0.10); }
[data-theme="light"] .plans-cov--low  { color: #b45309; background: rgba(180, 83, 9, 0.10); }
[data-theme="light"] .plans-cov--zero { color: #b91c1c; background: rgba(185, 28, 28, 0.10); }


/* ============================================================
   §105. MODAL POLISH — аккуратные заголовки и футер.

   Не меняет структуру HTML — только стилизует существующее.
   Форма остаётся: <h2>, поля, .modal-actions. Sticky-футер из
   §56 сохраняется.
   ============================================================ */

.modal-content h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--text-primary);
    margin: 0 0 14px 0;
    padding-right: 32px;
    text-align: left;
}
[data-theme="light"] .modal-content h2 { color: var(--text-primary); }

/* Кнопка «Закрыть» (.btn-close) — единый вид */
.modal-content .btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.modal-content .btn-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* Sticky footer — фон/бордер из токенов вместо хардкода */
.modal-content .modal-actions {
    background: var(--bg-elevated);
    border-top-color: var(--border-subtle);
}
[data-theme="light"] .modal-content .modal-actions {
    background: var(--bg-elevated);
    border-top-color: var(--border-subtle);
}

/* Кнопки внутри .modal-actions — единый размер */
.modal-content .modal-actions > button {
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}


/* ============================================================
   §106. TABLE DENSITY — плотнее строки, ровнее шапка.

   Сейчас th `` (8px 8px), td `` (6px 8px)
   из §91. Здесь чуть плотнее по вертикали, стандарт по горизонтали.
   ============================================================ */

table thead tr:not(.filter-row) th {
    padding: 9px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.3;
}
table tbody td {
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
}
table tbody tr:hover {
    background: rgba(148, 163, 184, 0.06);
}
[data-theme="light"] table tbody tr:hover {
    background: rgba(15, 23, 42, 0.03);
}

/* Первая колонка — чуть контрастнее (имя/название) */
table tbody tr td:first-child {
    font-weight: 500;
}

/* §104-PATCH-END */

/* §107-PATCH-START — 2026-10-02 — icons in headings/close */

/* ============================================================
   §107. ICON ALIGNMENT — иконки в h2, .btn-close, .tdc-close.

   После замены эмодзи → SVG нужно выровнять иконки по baseline
   и задать отступ. Базовый .i (§92) уже даёт 16px и currentColor —
   здесь только выравнивание и отступы.
   ============================================================ */

/* Иконки в заголовках модалок (h2) */
.modal-content h2 > .i.i--title,
.modal-content h2 > .i {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -2px;
    opacity: 0.85;
    flex-shrink: 0;
}

/* Иконки внутри .btn-close (✖ Закрыть → SVG Закрыть) */
.modal-content .btn-close > .i,
.modal-content .btn-close > .i--sm {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
    opacity: 0.85;
}

/* Крестик в модалке деталей задания (.tdc-close — круглая кнопка) */
.tdc-close > .i {
    width: 14px;
    height: 14px;
    margin: 0;
    opacity: 0.85;
}

/* Иконки в .plans-popup__del (удаление визита) */
.plans-popup__del > .i,
.plans-popup__del > .i--sm {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -1px;
}

/* Кнопки «Удалить» (.btn-danger) — иконка перед текстом */
.modal-content .btn-danger > .i,
.modal-content .modal-actions > .btn-danger > .i {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
    opacity: 0.9;
}

/* Иконки в кнопках модалки магазина (btn-success / btn-secondary) */
.modal-content .btn-success > .i,
.modal-content .btn-secondary > .i {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
}

/* §107-PATCH-END */

/* §108-PATCH-START — 2026-10-02 — icon extensions in modules */

/* ============================================================
   §108. ICON ALIGNMENT (JS-модули).

   Иконки в tdc-label, plans-view-toggle, plans-actions, links
   и icon-btn-theme. Все — currentColor, выровнены по baseline.
   ============================================================ */

/* tdc-label в деталях задания */
.tdc-label > .i,
.tdc-label > .i--sm {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    vertical-align: -1px;
    opacity: 0.75;
}

/* tdc-photos-title (📸 Фото до / после) */
.tdc-photos-title > .i,
.tdc-photos-title > .i--sm {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    vertical-align: -1px;
    opacity: 0.85;
}

/* plans-view-toggle — иконки через .pvt-i */
.plans-view-toggle__btn .pvt-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    line-height: 1;
}
.plans-view-toggle__btn .pvt-i .i,
.plans-view-toggle__btn .pvt-i .i--sm {
    width: 12px;
    height: 12px;
    margin: 0;
    opacity: 1;
}

/* plans-actions — иконки внутри кнопок ♻️ / ↩ / ✖ */
.plans-head .plans-actions > button > .i,
.plans-head .plans-actions > button > .i--sm {
    width: 13px;
    height: 13px;
    margin: 0;
    vertical-align: -1px;
    opacity: 0.9;
}
.plans-head .plans-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* plansFiltersToggle — лупа */
.plans-filters__toggle > .i {
    width: 14px;
    height: 14px;
    margin: 0;
}

/* standard-link (🔗 Стандарты) */
#storesTableWrap td.col-url a.standard-link > .i,
#storesTableWrap td.col-url a.standard-link > .i--sm {
    width: 11px;
    height: 11px;
    margin-right: 4px;
    vertical-align: -1px;
    opacity: 0.85;
}

/* icon-btn-theme с i-иконками (addStoreBtn и т.п.) */
.icon-btn-theme > .i,
.icon-btn-theme > .i--sm {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
}

/* batchEditBtn: иконка по центру */
#batchEditBtn > .i,
#batchEditBtn > .i--sm {
    width: 14px;
    height: 14px;
    margin: 0;
}

/* §108-PATCH-END */

/* §109-PATCH-START — 2026-10-02 — plans icons + saveBtn fix */

/* ============================================================
   §109. PLANS ICONS + #plansSaveBtn fix.

   §80 и §88 заставляют #plansSaveBtn показывать иконку через
   font-size: 0 + ::before { content: '💾' }. Теперь иконка — SVG
   внутри кнопки; переопределяем font-size и отключаем ::before.

   Специфичность §109 = (2,3,2) — как у §88, но §109 ниже в файле,
   поэтому побеждает.
   ============================================================ */

/* --- #plansSaveBtn: вернуть текст + отключить ::before-эмодзи --- */
html body #plansModal .modal-content .plans-head .plans-actions #plansSaveBtn {
    font-size: 13px;
    padding: 0 12px;
    min-width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body #plansModal .modal-content .plans-head .plans-actions #plansSaveBtn::before {
    content: none;
    display: none;
}
html body #plansModal .modal-content .plans-head .plans-actions #plansSaveBtn > .i,
html body #plansModal .modal-content .plans-head .plans-actions #plansSaveBtn > .i--sm {
    width: 13px;
    height: 13px;
    margin-right: 5px;
    opacity: 0.95;
    vertical-align: -1px;
}

/* --- Иконки в renderStoresView --- */
.plans-vs-store__icon > .i,
.plans-vs-store__icon > .i--sm {
    width: 13px;
    height: 13px;
    margin: 0;
    opacity: 0.8;
    vertical-align: -2px;
}
.plans-vs-sup__icon > .i,
.plans-vs-sup__icon > .i--sm {
    width: 12px;
    height: 12px;
    margin: 0;
    opacity: 0.6;
    vertical-align: -1px;
}

/* --- Иконки в renderDaysView --- */
.plans-store-group__icon > .i,
.plans-store-group__icon > .i--sm {
    width: 11px;
    height: 11px;
    margin: 0;
    opacity: 0.75;
    vertical-align: -1px;
}
.plans-visit__sup > .i,
.plans-visit__sup > .i--sm {
    width: 10px;
    height: 10px;
    margin-right: 4px;
    opacity: 0.7;
    vertical-align: -1px;
}
.plans-daycol__stats .i,
.plans-daycol__stats .i--sm {
    width: 10px;
    height: 10px;
    margin-right: 3px;
    opacity: 0.7;
    vertical-align: -1px;
}

/* --- Иконки в шапке plans-week-summary --- */
.plans-week-summary .i,
.plans-week-summary .i--sm {
    width: 11px;
    height: 11px;
    margin-right: 4px;
    opacity: 0.7;
    vertical-align: -1px;
}

/* --- Кнопка toggle (лупа/крестик) в plans-filters --- */
.plans-filters__toggle > .i {
    width: 14px;
    height: 14px;
    margin: 0;
}

/* --- Иконки в плашках поставщиков (plans-popup__del) --- */
.plans-popup__del > .i,
.plans-popup__del > .i--sm {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -1px;
}

/* §109-PATCH-END */

/* §110-PATCH-START — 2026-10-02 — chip registry */

/* ============================================================
   §110. CHIP — единый класс статуса.

   Мягкий фон + тонкий контур + приглушённый текст. Палитра — из
   §100. Используется в tasks.js (статус) и deadlines.js
   (открыт/просрочен/закрыт). Не заменяет .badge/.limit-badge/
   .wk-chip — те остаются для своих сценариев.
   ============================================================ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 9px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
}

.chip--neutral {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
    border-color: rgba(148, 163, 184, 0.22);
}
.chip--info {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: rgba(91, 141, 239, 0.30);
}
.chip--success {
    background: var(--success-subtle);
    color: var(--success);
    border-color: rgba(61, 174, 127, 0.30);
}
.chip--warning {
    background: var(--warning-subtle);
    color: var(--warning);
    border-color: rgba(212, 160, 74, 0.32);
}
.chip--danger {
    background: var(--danger-subtle);
    color: var(--danger);
    border-color: rgba(221, 100, 98, 0.32);
}

/* Светлая тема — мягкие пастельные тона */
[data-theme="light"] .chip--neutral {
    background: rgba(15, 23, 42, 0.05);
    color: #64748b;
    border-color: rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .chip--info {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.22);
}
[data-theme="light"] .chip--success {
    background: rgba(4, 120, 87, 0.08);
    color: #047857;
    border-color: rgba(4, 120, 87, 0.22);
}
[data-theme="light"] .chip--warning {
    background: rgba(180, 83, 9, 0.08);
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.22);
}
[data-theme="light"] .chip--danger {
    background: rgba(185, 28, 28, 0.08);
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.22);
}

/* В таблицах — не растягивать строку, чип по центру вертикали */
table tbody td .chip {
    vertical-align: middle;
}

/* §110-PATCH-END */

/* §111-PATCH-START — 2026-10-02 — action buttons v2 */

/* ============================================================
   §111. ACTION BUTTONS v2 — единый размер и токены.

   Классы .btn-success / .btn-danger / .btn-secondary /
   .refresh-btn / .export-btn жили с разными размерами и
   хардкод-цветами (§2). Сводим к одному размеру:
      height: 32px; padding: 0 14px; font 13; radius 6.
   Цвет — через токены §100 (без #34d399 / #f87171 / #475569).

   Никаких новых классов в HTML — старые продолжают работать.
   ============================================================ */

/* --- Единая форма --- */
.btn-success,
.btn-danger,
.btn-secondary,
.refresh-btn,
.export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 120ms ease,
                border-color 120ms ease,
                color 120ms ease,
                filter 120ms ease;
}

/* --- Цвета через токены §100 --- */
.btn-success {
    background: var(--success);
    color: #ffffff;
    border-color: var(--success);
}
.btn-success:hover {
    filter: brightness(0.92);
}
.btn-success:active {
    filter: brightness(0.86);
}

.btn-danger {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}
.btn-danger:hover {
    filter: brightness(0.92);
}
.btn-danger:active {
    filter: brightness(0.86);
}

.btn-secondary {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border);
}
.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.refresh-btn,
.export-btn {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border);
}
.refresh-btn:hover,
.export-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

/* --- Иконки внутри — единый размер --- */
.btn-success > .i,       .btn-success > .i--sm,
.btn-danger > .i,        .btn-danger > .i--sm,
.btn-secondary > .i,     .btn-secondary > .i--sm,
.refresh-btn > .i,       .refresh-btn > .i--sm,
.export-btn > .i,        .export-btn > .i--sm {
    width: 13px;
    height: 13px;
    margin: 0;
    opacity: 0.9;
    flex-shrink: 0;
}

/* --- Светлая тема: контуры чуть тише --- */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .refresh-btn,
[data-theme="light"] .export-btn {
    background: #ffffff;
    color: var(--text-primary);
    border-color: var(--border);
}
[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .refresh-btn:hover,
[data-theme="light"] .export-btn:hover {
    background: var(--bg-hover);
}

/* ============================================================
   §111.1. reset-filters — компактная кнопка сброса.

   Стоит рядом с крупными кнопками, поэтому 26px и меньший
   шрифт. Отдельная группа, не в .btn-кластере.
   ============================================================ */

.reset-filters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px;
    min-width: 26px;
    padding: 0 8px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 120ms ease,
                border-color 120ms ease,
                color 120ms ease;
}
.reset-filters:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.reset-filters > .i,
.reset-filters > .i--sm {
    width: 11px;
    height: 11px;
    margin: 0;
    opacity: 0.8;
}

/* ============================================================
   §111.2. Кнопки в тулбарах таблиц — не тянутся.

   .btn-success/.refresh-btn/.export-btn стоят внутри
   .tasks-toolbar__actions / .stores-toolbar__actions. Там
   есть flex: 0 0 auto у детей — но добавим дублирование, чтобы
   при flex-перестройке не сжались.
   ============================================================ */

.tasks-toolbar__actions > .btn-success,
.tasks-toolbar__actions > .refresh-btn,
.tasks-toolbar__actions > .export-btn,
.tasks-toolbar__actions > .btn-secondary,
.stores-toolbar__actions > .btn-success,
.stores-toolbar__actions > .refresh-btn,
.stores-toolbar__actions > .export-btn,
.stores-toolbar__actions > .btn-secondary {
    flex: 0 0 auto;
}

/* §111-PATCH-END */

/* §112-PATCH-START — 2026-10-02 — sticky first column */

/* ============================================================
   §112. STICKY FIRST COLUMN (desktop ≥ 641px).

   Проблема: широкие таблицы магазинов/заданий скроллятся вбок,
   левые колонки уезжают — теряется контекст строки.

   Решение: первая колонка (col-name у магазинов, col-city у заданий)
   sticky-left. Rowspan-ячейки первых строк групп учтены явно —
   обычные td вторых/третьих строк группы не трогаем.

   Фон: базовый var(--bg-surface) на tr → sticky-td с
   background: inherit. На hover/status tr сам меняет фон, sticky-td
   наследует — цвет остаётся корректным.

   Слои: th:first-child шапки — z-index 6 (sticky-top+left);
         td:first-child тела — z-index 2.
   ============================================================ */

@media (min-width: 641px) {

    /* --- 1. Базовый фон tr — чтобы sticky-td имела что наследовать --- */
    #storesTableWrap tbody tr,
    #tasksTableWrap tbody tr {
        background: var(--bg-surface);
    }

    #storesTableWrap tbody tr:hover,
    #tasksTableWrap tbody tr:hover {
        background: var(--bg-hover);
    }

    /* --- 2. Sticky шапка первой колонки --- */
    #storesTableWrap thead tr:not(.filter-row) th:first-child,
    #tasksTableWrap thead tr:not(.filter-row) th:first-child {
        position: sticky;
        left: 0;
        z-index: 6;
        background: var(--bg-surface);
        box-shadow: inset -1px 0 0 var(--border-subtle);
    }

    /* --- 3. Sticky первая ячейка группы в теле --- */
    /* Ловим:
         • первую td в первой tr каждой tbody-группы (col-name/col-city
           с rowspan, либо checkbox-superadmin с rowspan);
         • на всякий случай — любую первую td с rowspan. */
    #storesTableWrap tbody > tr:first-child > td:first-child,
    #tasksTableWrap tbody > tr:first-child > td:first-child,
    #storesTableWrap tbody > tr > td:first-child[rowspan],
    #tasksTableWrap tbody > tr > td:first-child[rowspan] {
        position: sticky;
        left: 0;
        z-index: 2;
        background: inherit;
        box-shadow: inset -1px 0 0 var(--border-subtle);
    }

    /* --- 4. Тень-разделитель не наезжает на контент соседних ячеек --- */
    /* Небольшой padding справа в sticky-ячейке, чтобы текст не упирался
       в тонкую линию inset-shadow. */
    #storesTableWrap tbody > tr:first-child > td:first-child,
    #tasksTableWrap tbody > tr:first-child > td:first-child {
        padding-right: 12px;
    }

}

/* §112-PATCH-END */

/* §113-PATCH-START — 2026-10-02 — modal sticky header */

/* ============================================================
   §113. MODAL STICKY HEADER.

   Проблема: длинные модалки (editStoreModal, editClientModal)
   скроллятся, заголовок уезжает вверх — теряется контекст.

   Решение: h2 первого уровня становится sticky. При скролле
   прилипает к верхнему краю modal-content с непрозрачным фоном
   и тонкой границей снизу.

   Через отрицательные margin/padding растягиваем h2 на всю
   ширину modal-content, включая padding-зону родителя.

   Исключение: #plansModal .plans-head > h2 — там h2 внутри
   flex-контейнера .plans-head, sticky сломает раскладку.
   ============================================================ */

/* --- 1. Единый padding модалок (был 24px из §13) --- */
.modal-content {
    padding: 20px 22px;
}

/* --- 2. Sticky h2 только прямого ребёнка .modal-content --- */
/*     .modal-content > h2 — исключает вложенные (например в .plans-head) */
.modal-content > h2 {
    position: sticky;
    top: -20px;                         /* компенсация padding-top родителя */
    z-index: 5;

    margin: -20px -22px 14px -22px;     /* растянуть на всю ширину */
    padding: 20px 22px 14px;            /* внутренние отступы + нижний */

    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 10px 10px 0 0;       /* совпасть с modal-content сверху */

    /* Шрифт-метрики — из §105 (для случая, когда что-то перебило) */
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--text-primary);
    text-align: left;
}

/* --- 3. Первый h2 — прижать к верху (убрать лишний margin) --- */
.modal-content > h2:first-child {
    margin-top: -20px;      /* уже учтено, но фиксируем для ясности */
}

/* --- 4. Единые отступы полей первого уровня --- */
.modal-content > .field {
    margin-bottom: 14px;
}
.modal-content > .edit-task-row {
    margin-bottom: 14px;
}
.modal-content > .field:last-of-type,
.modal-content > .edit-task-row:last-of-type {
    margin-bottom: 6px;
}

/* --- 5. Единый отступ перед футером --- */
.modal-content > .modal-actions {
    margin-top: 18px;
}

/* --- 6. Light theme — граница чуть темнее, фон тот же --- */
[data-theme="light"] .modal-content > h2 {
    background: var(--bg-elevated);
    border-bottom-color: var(--border-subtle);
}

/* --- 7. Mobile — уменьшенный padding и top --- */
@media (max-width: 640px) {
    .modal-content {
        padding: 16px 18px;
    }
    .modal-content > h2 {
        top: -16px;
        margin: -16px -18px 12px -18px;
        padding: 16px 18px 12px;
        font-size: 14px;
        border-radius: 8px 8px 0 0;
    }
}

/* --- 8. Исключение: plansModal — h2 внутри .plans-head --- */
/*     Отдельно подтверждаем: не трогаем этот h2. Правило выше его
        и не подхватит (селектор > h2), но фиксируем явно. */
#plansModal .plans-head > h2 {
    position: static;
    margin: 0;
    padding: 0;
    border-bottom: none;
    border-radius: 0;
}

/* §113-PATCH-END */

/* §114-PATCH-START — 2026-10-02 — empty state v2 */

/* ============================================================
   §114. EMPTY STATE v2 — SVG вместо эмодзи 📭.

   9 модулей показывали пустую заглушку с 📭. Заменено на Lucide
   inbox. Здесь — размер, цвет и центрирование SVG.
   ============================================================ */

.empty-state__icon {
    display: block;
    margin-bottom: 12px;
    line-height: 1;
    color: var(--text-muted);
}

.empty-state__icon > .i,
.empty-state__icon > svg {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    display: block;
    opacity: 0.5;
    stroke-width: 1.5;         /* чуть тоньше — спокойнее */
}

/* --- Light theme — тот же рецепт, оттенок тише --- */
[data-theme="light"] .empty-state__icon {
    color: #94a3b8;
}

/* §114-PATCH-END */

/* §115-PATCH-START — 2026-10-02 — sidebar */

/* ============================================================
   §115. SIDEBAR — левая навигация (desktop ≥1024px).

   Схема: .app-shell = grid [sidebar][app-main].
   Sidebar 240px, сворачивается до 60px (кнопка ‹/› на границе).
   Mobile <1024px — off-canvas, открывается ☰ в topbar.

   Все id кнопок сохранены (см. патч admin.html).
   ============================================================ */

/* --- Снять body-padding на desktop: sidebar начинается от края --- */
@media (min-width: 1024px) {
    body { padding: 0; }
    .container { padding: 0; }
}

/* --- .app-shell: grid --- */
@media (min-width: 1024px) {
    .app-shell {
        display: grid;
        grid-template-columns: 240px 1fr;
        min-height: 100vh;
        transition: grid-template-columns 200ms ease;
    }
    .app-shell:has(.sidebar.is-collapsed) {
        grid-template-columns: 60px 1fr;
    }
}

/* --- .app-main --- */
.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* --- .app-content --- */
.app-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 16px 20px 20px;
    overflow-x: hidden;
}

/* ============================================================
   §115.1. SIDEBAR — desktop
   ============================================================ */

@media (min-width: 1024px) {

    .sidebar {
        display: flex;
        flex-direction: column;
        width: 240px;
        min-height: 100vh;
        background: var(--bg-surface);
        border-right: 1px solid var(--border);
        position: sticky;
        top: 0;
        align-self: start;
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        transition: width 200ms ease;
        z-index: 20;
    }

    .sidebar.is-collapsed {
        width: 60px;
    }

    /* --- Бренд (логотип) --- */
    .sidebar__brand {
        padding: 16px 18px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    .sidebar__logo {
        display: block;
        height: 26px;
        width: auto;
        max-width: 160px;
        object-fit: contain;
        object-position: left center;
    }
    .sidebar.is-collapsed .sidebar__logo {
        height: 22px;
        max-width: 30px;
        object-position: left center;
    }

    /* --- Навигация --- */
    .sidebar__nav {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 6px 10px 12px;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* --- Вкладки в sidebar (плоский список) --- */
    .sidebar__nav .tab-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 36px;
        padding: 0 10px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--text-secondary);
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        text-align: left;
        cursor: pointer;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 0;
        transition: background 120ms ease, color 120ms ease;
    }
    .sidebar__nav .tab-btn:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
        box-shadow: none;
    }
    .sidebar__nav .tab-btn.active {
        background: var(--accent-subtle);
        color: var(--accent);
        box-shadow: none;
    }
    .sidebar__nav .tab-btn.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        background: var(--accent);
        border-radius: 0 2px 2px 0;
    }
    .sidebar__nav .tab-btn .i {
        width: 16px;
        height: 16px;
        margin: 0;
        opacity: 0.75;
        flex-shrink: 0;
    }
    .sidebar__nav .tab-btn.active .i { opacity: 1; }
    .sidebar__nav .tab-btn-cleanup {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 36px;
        padding: 0 10px;
        border-radius: 6px;
        color: var(--text-muted);
        font-size: 13px;
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        margin-top: 6px;
        flex-shrink: 0;
    }
    .sidebar__nav .tab-btn-cleanup:hover {
        background: var(--danger-subtle);
        color: var(--danger);
        box-shadow: none;
    }

    /* --- Свёрнутое состояние: только иконки --- */
    .sidebar.is-collapsed .sidebar__nav {
        padding: 6px 8px 12px;
        align-items: center;
    }
    .sidebar.is-collapsed .sidebar__nav .tab-btn,
    .sidebar.is-collapsed .sidebar__nav .tab-btn-cleanup {
        width: 44px;
        height: 40px;
        padding: 0;
        justify-content: center;
        gap: 0;
        font-size: 0;
    }
    .sidebar.is-collapsed .sidebar__nav .tab-btn .i {
        width: 18px;
        height: 18px;
        margin: 0;
    }
    .sidebar.is-collapsed .sidebar__nav .tab-btn.active::before {
        top: 10px;
        bottom: 10px;
    }

    /* --- Футер (пользователь + выйти) --- */
    .sidebar__footer {
        flex-shrink: 0;
        padding: 10px 14px 14px;
        border-top: 1px solid var(--border-subtle);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .sidebar__user {
        display: flex;
        flex-direction: column;
        gap: 1px;
        font-size: 12px;
        line-height: 1.3;
        min-width: 0;
    }
    .sidebar__user #adminName {
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar__user #adminRole {
        color: var(--text-muted);
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar.is-collapsed .sidebar__user { display: none; }
    .sidebar.is-collapsed .sidebar__footer {
        padding: 10px 8px 14px;
        align-items: center;
    }
    .sidebar__logout {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        padding: 0 12px;
        border-radius: 6px;
        background: var(--bg-input);
        color: var(--text-secondary);
        border: 1px solid var(--border);
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        transition: background 120ms ease, color 120ms ease;
    }
    .sidebar__logout:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
    .sidebar.is-collapsed .sidebar__logout {
        width: 40px;
        padding: 0;
        font-size: 0;
    }
    .sidebar.is-collapsed .sidebar__logout::before {
        content: '×';
        font-size: 16px;
    }

    /* --- Кнопка свернуть на границе --- */
    .sidebar__collapse {
        position: absolute;
        top: 14px;
        right: -12px;
        width: 24px;
        height: 24px;
        padding: 0;
        border-radius: 50%;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        z-index: 5;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        transition: background 120ms ease, color 120ms ease;
    }
    .sidebar__collapse:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
}

/* ============================================================
   §115.2. SIDEBAR — mobile/tablet <1024px (off-canvas)
   ============================================================ */

@media (max-width: 1023px) {

    .app-shell {
        display: block;
        min-height: 100vh;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 85vw;
        background: var(--bg-surface);
        border-right: 1px solid var(--border);
        transform: translateX(-100%);
        transition: transform 240ms ease;
        z-index: 200;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        box-shadow: 2px 0 24px rgba(0, 0, 0, 0.4);
    }
    .sidebar.is-mobile-open {
        transform: translateX(0);
    }
    /* Backdrop — через ::before на самом sidebar */
    .sidebar.is-mobile-open::before {
        content: '';
        position: fixed;
        inset: 0;
        left: 260px;
        background: rgba(0, 0, 0, 0.45);
        z-index: -1;
        pointer-events: none;
    }

    .sidebar__brand {
        padding: 14px 16px 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    .sidebar__logo {
        display: block;
        height: 24px;
        width: auto;
        max-width: 160px;
        object-fit: contain;
        object-position: left center;
    }

    .sidebar__nav {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 6px 10px 12px;
        min-height: 0;
    }
    .sidebar__nav .tab-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 40px;
        padding: 0 12px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--text-secondary);
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 0;
        transition: background 120ms ease, color 120ms ease;
    }
    .sidebar__nav .tab-btn:hover,
    .sidebar__nav .tab-btn.active {
        background: var(--accent-subtle);
        color: var(--accent);
        box-shadow: none;
        border-radius: 6px;
    }
    .sidebar__nav .tab-btn.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 3px;
        background: var(--accent);
        border-radius: 0 2px 2px 0;
    }
    .sidebar__nav .tab-btn .i {
        width: 16px;
        height: 16px;
        margin: 0;
        opacity: 0.75;
        flex-shrink: 0;
    }
    .sidebar__nav .tab-btn.active .i { opacity: 1; }
    .sidebar__nav .tab-btn-cleanup {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 40px;
        padding: 0 12px;
        border-radius: 6px;
        color: var(--text-muted);
        font-size: 14px;
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        margin-top: 6px;
    }
    .sidebar__nav .tab-btn-cleanup:hover {
        background: var(--danger-subtle);
        color: var(--danger);
    }

    .sidebar__footer {
        flex-shrink: 0;
        padding: 12px 16px 18px;
        border-top: 1px solid var(--border-subtle);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .sidebar__user {
        display: flex;
        flex-direction: column;
        gap: 1px;
        font-size: 13px;
        line-height: 1.3;
        min-width: 0;
    }
    .sidebar__user #adminName {
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar__user #adminRole {
        color: var(--text-muted);
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar__logout {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        padding: 0 14px;
        border-radius: 6px;
        background: var(--bg-input);
        color: var(--text-secondary);
        border: 1px solid var(--border);
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }
    .sidebar__logout:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    /* Кнопка «свернуть» на мобиле не нужна */
    .sidebar__collapse { display: none; }

}

/* §115-PATCH-END */

/* §116-PATCH-START — 2026-10-02 — sidebar polish v2
   Финальная полировка сайдбара (сессия C, follow-up).
     1. Логотип в свёрнутом виде — только иконка logo-icon.svg.
     2. Активный пункт — без заливки, только полоска слева + акцент.
     3. Кнопка ‹/› — по центру бренда.
     4. Logout в свёрнутом виде — SVG-иконка вместо «×».
*/

/* ─── 1. Логотип: два <img>, показываем по состоянию ─── */
.sidebar__logo--icon { display: none; }

@media (min-width: 1024px) {
    .sidebar.is-collapsed .sidebar__logo--full { display: none; }
    .sidebar.is-collapsed .sidebar__logo--icon {
        display: block;
        height: 26px;
        width: 26px;
        max-width: 26px;
        object-fit: contain;
        object-position: left center;
    }
}

/* ─── 2. Активный пункт: без заливки, только полоска + акцент ─── */
@media (min-width: 1024px) {
    .sidebar__nav .tab-btn.active {
        background: transparent;
        color: var(--accent);
    }
    .sidebar__nav .tab-btn.active:hover {
        background: transparent;
        color: var(--accent);
    }
    .sidebar__nav .tab-btn.active .i { opacity: 1; }

    /* Свёрнутый sidebar: nav без боковых паддингов,
       кнопки 44px центрируются align-items: center. */
    .sidebar.is-collapsed .sidebar__nav {
        padding: 6px 0 12px;
        align-items: center;
    }
    .sidebar.is-collapsed .sidebar__nav .tab-btn,
    .sidebar.is-collapsed .sidebar__nav .tab-btn-cleanup {
        width: 44px;
        height: 40px;
        margin: 0;
        padding: 0;
        justify-content: center;
        gap: 0;
        font-size: 0;
    }
}

/* ─── 3. Кнопка ‹/› — по центру бренда ─── */
@media (min-width: 1024px) {
    .sidebar__collapse { top: 17px; }
}

/* ─── 4. Logout: SVG-иконка в свёрнутом виде ─── */
.sidebar__logout-icon { display: none; }

@media (min-width: 1024px) {
    .sidebar.is-collapsed .sidebar__logout {
        width: 40px;
        padding: 0;
        font-size: 0;
        justify-content: center;
    }
    .sidebar.is-collapsed .sidebar__logout::before { content: none; }
    .sidebar.is-collapsed .sidebar__logout-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin: 0;
        vertical-align: middle;
    }
}

/* §116-PATCH-END */

/* §117-PATCH-START — 2026-10-02 — sidebar actions + focus fix
   1. .sidebar__actions — блок с иконками (поиск/тема/⋯) между
      навигацией и футером.
   2. Topbar на desktop скрыт (пустой после переноса кнопок).
   3. Focus-ring для sidebar-кнопок — тонкий контур вместо большого
      синего бокса (§94.2). Именно он выглядел как «кривая» иконка.
*/

/* ─── 1. Actions block в sidebar ─── */
.sidebar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
    align-items: center;
}
.sidebar__actions > .icon-btn-theme {
    width: 32px;
    height: 32px;
    font-size: 14px;
    flex-shrink: 0;
}
.sidebar__actions > .header-report-btn[style*="display: none"] {
    display: none;
}
@media (min-width: 1024px) {
    .sidebar.is-collapsed .sidebar__actions {
        flex-direction: column;
        align-items: center;
        padding: 8px 0;
    }
}

/* ─── 3. Focus-ring: тонкий контур вместо большого бокса ─── */
.sidebar__nav .tab-btn:focus,
.sidebar__nav .tab-btn-cleanup:focus,
.sidebar__actions > .icon-btn-theme:focus {
    outline: none;
}
.sidebar__nav .tab-btn:focus-visible,
.sidebar__nav .tab-btn-cleanup:focus-visible,
.sidebar__actions > .icon-btn-theme:focus-visible {
    outline: 1px solid var(--border-strong);
    outline-offset: -1px;
    box-shadow: none;
}
.sidebar__nav .tab-btn.active:focus-visible {
    outline-color: var(--accent);
}

/* ─── 4. Иконки: baseline-центрирование без line-height-артефактов ─── */
.sidebar__nav .tab-btn > .i,
.sidebar__nav .tab-btn-cleanup > .i {
    display: block;
    line-height: 1;
    margin: 0;
}

/* §117-PATCH-END */

/* §119-PATCH-START — 2026-10-02 — layout density v2
   1. Desktop: колонки заданий — адрес −14%, статус/цена шире.
   2. Mobile: убран верхний отступ (body/app-content).
   3. Topbar: .topbar--empty вместо :has().
*/

/* ─── 1. DESKTOP: колонки заданий — перераспределение ─── */
@media (min-width: 641px) {
    /* Адрес — забираем 30px (210 → 180) */
    #tasksTableWrap .col-address {
        width: 180px;
        max-width: 180px;
    }
    /* Статус — расширяем, «Запланировано» не режется */
    #tasksTableWrap th[data-label="Статус"],
    #tasksTableWrap td[data-label="Статус"] {
        width: 120px;
        min-width: 120px;
        max-width: 120px;
        overflow: visible;
        text-overflow: clip;
    }
    /* Цена — +10px, «12.5» влезает */
    #tasksTableWrap .col-price {
        width: 70px;
        max-width: 70px;
        text-align: right;
        padding-right: 8px;
    }
}

/* ─── 2. MOBILE: жёстко убрать верхний отступ ─── */
@media (max-width: 1023px) {
    body { padding: 0; }
    .container { padding: 0; }
}

@media (max-width: 640px) {
    body { padding: 0; }
    .card {
        padding: 6px 4px;
        margin-bottom: 6px;
    }
}

/* ─── 4. Десктоп: убрать лишнюю пустоту снизу/по краям card ─── */
@media (min-width: 1024px) {
    #tab-stores > .card,
    #tab-tasks > .card {
        max-height: calc(100vh - 24px);
        padding: 6px 6px 2px;
    }
}

/* §119-PATCH-END */


/* §118-PATCH-START — 2026-10-02 — layout density
   1. Mobile: убран верхний «воздух» (body/app-content/card + topbar).
   2. Desktop: отступы вокруг таблицы — вдвое меньше.
   3. Внутри таблицы: боковые паддинги th/td — минимальные.
   4. col-schedule (кружки недели) — 260px, overflow: visible.
   5. Статус в заданиях — фикс. 100px, чип не режется.
*/

/* ─── 1. MOBILE: убрать пустое поле над контентом ─── */
@media (max-width: 1023px) {
    .app-content {
        padding: 4px 8px 10px;
    }
}

@media (max-width: 640px) {
    body { padding: 0; }
    .app-content { padding: 0 6px 8px; }
    .card {
        padding: 8px 6px;
        margin-bottom: 8px;
        border-radius: 8px;
    }
    /* Кнопка «Ещё» — в фильтрах магазинов — компактнее */
    .store-filters-row .icon-btn-theme {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    .store-filters-row { gap: 4px; }
}

/* ─── 2. DESKTOP: отступы вокруг таблицы вдвое меньше ─── */
@media (min-width: 1024px) {
    .app-content { padding: 8px 10px 10px; }
    .card { padding: 10px; }
}

/* ─── 3. ВНУТРИ таблицы: боковые паддинги минимальны ─── */
@media (min-width: 641px) {
    #storesTableWrap th,
    #storesTableWrap td,
    #tasksTableWrap th,
    #tasksTableWrap td {
        padding: 6px 4px;
    }
    /* Первая колонка — минимальный левый отступ */
    #storesTableWrap th:first-child,
    #storesTableWrap td:first-child,
    #tasksTableWrap th:first-child,
    #tasksTableWrap td:first-child {
        padding-left: 6px;
    }
    /* Последняя — правый */
    #storesTableWrap th:last-child,
    #storesTableWrap td:last-child,
    #tasksTableWrap th:last-child,
    #tasksTableWrap td:last-child {
        padding-right: 6px;
    }
}

/* ─── 4. План магазина (кружки недели) — не обрезается ─── */
@media (min-width: 641px) {
    #storesTableWrap .col-schedule {
        width: auto;
        min-width: 260px;
        max-width: none;
        white-space: nowrap;
        overflow: visible;
    }
    #storesTableWrap td.col-schedule .day-indicators {
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    #storesTableWrap td.col-schedule .day-dot {
        width: 18px;
        height: 18px;
        font-size: 8px;
        flex-shrink: 0;
    }
}

/* ─── 5. Статус в заданиях — фикс. ширина, чип не режется ─── */
@media (min-width: 641px) {
    #tasksTableWrap th[data-label="Статус"],
    #tasksTableWrap td[data-label="Статус"] {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }
    #tasksTableWrap td[data-label="Статус"] {
        overflow: visible;
        text-overflow: clip;
    }
    #tasksTableWrap td[data-label="Статус"] .chip {
        white-space: nowrap;
    }
}

/* ─── 6. Desktop-таблицы: убрать лишнюю пустоту по краям card ─── */
@media (min-width: 1024px) {
    #tab-stores > .card,
    #tab-tasks > .card {
        max-height: calc(100vh - 30px);
        padding: 8px 8px 4px;
    }
}

/* §118-PATCH-END */


/* §118-PATCH-START — 2026-10-02 — sidebar polish v3
   Упорядочивание:
     1. Скрыт скроллбар nav (главный источник «кривизны»).
     2. Sidebar = height:100vh, overflow:hidden — скролл только внутри nav.
     3. Collapsed nav: кнопки на всю ширину 60px, полоска active у края.
     4. Компактнее brand/footer → все 11 пунктов влезают без скролла.
     5. Actions в expanded центрированы.
*/

@media (min-width: 1024px) {

    /* 1. Sidebar — точная высота, без собственного скролла */
    .sidebar {
        height: 100vh;
        min-height: 0;
        max-height: 100vh;
        overflow: hidden;
    }

    /* 2. Nav — скрытый скроллбар, ровный вертикальный ритм */
    .sidebar__nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px 10px 10px;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        align-items: stretch;
    }
    .sidebar__nav::-webkit-scrollbar { display: none; }

    /* 3. Компактнее brand и footer */
    .sidebar__brand { padding: 14px 16px 10px; }
    .sidebar__footer { padding: 10px 14px 12px; }

    /* 4. Actions в expanded — по центру */
    .sidebar__actions {
        justify-content: center;
        gap: 6px;
    }

    /* 5. Collapsed: кнопки на всю ширину,
          полоска active — заподлицо с краем sidebar. */
    .sidebar.is-collapsed .sidebar__nav {
        padding: 8px 0 10px;
        align-items: stretch;
        gap: 2px;
    }
    .sidebar.is-collapsed .sidebar__nav .tab-btn,
    .sidebar.is-collapsed .sidebar__nav .tab-btn-cleanup {
        width: 100%;
        height: 40px;
        margin: 0;
        padding: 0;
        justify-content: center;
        gap: 0;
        font-size: 0;
    }

    /* 6. Actions в collapsed — вертикально, по центру */
    .sidebar.is-collapsed .sidebar__actions {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 0;
    }
}

/* §118-PATCH-END */

/* §119-FINAL-PATCH-START — 2026-10-02 — sidebar polish v4 (бывш. §119 v4)
   Финальная правка выравнивания:
     1. Логотип в свёрнутом — по центру (был object-position: left).
     2. Nav items 40 → 36px в свёрнутом — все 11 пунктов влезают.
     3. Плотнее brand / actions / footer.
     4. Actions 32 → 30px в свёрнутом.
*/

@media (min-width: 1024px) {

    /* ─── 1. Brand: центрируем лого-иконку в свёрнутом ─── */
    .sidebar.is-collapsed .sidebar__brand {
        padding: 12px 0 8px;
        justify-content: center;
        gap: 0;
    }
    .sidebar.is-collapsed .sidebar__logo--icon {
        object-position: center center;
        margin: 0 auto;
    }

    /* ─── 2. Nav: компактнее ритм ─── */
    .sidebar__nav {
        padding: 6px 10px 8px;
        gap: 1px;
    }
    .sidebar.is-collapsed .sidebar__nav {
        padding: 6px 0 8px;
        gap: 1px;
    }

    /* Свёрнутый: items 36px, все 11 пунктов влезают */
    .sidebar.is-collapsed .sidebar__nav .tab-btn,
    .sidebar.is-collapsed .sidebar__nav .tab-btn-cleanup {
        width: 100%;
        height: 36px;
        margin: 0;
        padding: 0;
        justify-content: center;
        gap: 0;
        font-size: 0;
    }

    /* Иконки — строго по центру кнопки, без line-height-сюрпризов */
    .sidebar.is-collapsed .sidebar__nav .tab-btn > .i,
    .sidebar.is-collapsed .sidebar__nav .tab-btn-cleanup > .i {
        display: block;
        margin: 0 auto;
        width: 18px;
        height: 18px;
    }

    /* Активная полоска в свёрнутом — заподлицо с краем */
    .sidebar.is-collapsed .sidebar__nav .tab-btn.active::before {
        top: 8px;
        bottom: 8px;
    }

    /* ─── 3. Actions: компактнее ─── */
    .sidebar__actions {
        padding: 6px 10px;
        gap: 4px;
        justify-content: center;
    }
    .sidebar.is-collapsed .sidebar__actions {
        padding: 8px 0;
        gap: 4px;
        flex-direction: column;
        align-items: center;
    }
    .sidebar.is-collapsed .sidebar__actions > .icon-btn-theme {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    /* ─── 4. Footer: компактнее ─── */
    .sidebar__footer {
        padding: 8px 12px 10px;
        gap: 6px;
    }
    .sidebar.is-collapsed .sidebar__footer {
        padding: 8px 0 10px;
        align-items: center;
    }
    .sidebar.is-collapsed .sidebar__logout {
        width: 36px;
        height: 32px;
    }
}

/* §119-FINAL-PATCH-END */

/* §120-PATCH-START — 2026-10-02 — sidebar labels
   Подписи вкладок были голым текстовым узлом — длинные названия
   («Поставщики», «Менеджеры») переносились на вторую строку.
   Оборачиваем текст в <span class="tab-btn__label"> (см. admin.js)
   и задаём ему nowrap + ellipsis.
*/

.sidebar__nav .tab-btn {
    flex-wrap: nowrap;
}

.sidebar__nav .tab-btn__label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* Свёрнутый sidebar: label скрываем полностью (font-size:0 больше не нужен) */
@media (min-width: 1024px) {
    .sidebar.is-collapsed .sidebar__nav .tab-btn__label {
        display: none;
    }
    .sidebar.is-collapsed .sidebar__nav .tab-btn {
        font-size: 13px; /* вернуть дефолт — label всё равно display:none */
    }
}

/* §120-PATCH-END */

/* §121-PATCH-START — 2026-10-02 — sidebar labels FINAL
   §120 не сработал: где-то в файле .tab-btn перебит flex-wrap:wrap.
   Ставим финальные правила с в самом конце файла —
   выигрывают у любого правила с равной/меньшей специфичностью.

   Правила:
     1. .tab-btn = строго flex-row nowrap.
     2. .tab-btn__label = flex-элемент с ellipsis.
     3. Свёрнутый sidebar: label скрыт.
*/

.sidebar__nav .tab-btn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.sidebar__nav .tab-btn > .i {
    flex: 0 0 auto;
    display: block;
    margin: 0;
}

.sidebar__nav .tab-btn > .tab-btn__label {
    display: inline-block;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-align: left;
}

@media (min-width: 1024px) {
    .sidebar.is-collapsed .sidebar__nav .tab-btn {
        justify-content: center;
        gap: 0;
    }
    .sidebar.is-collapsed .sidebar__nav .tab-btn > .tab-btn__label {
        display: none;
    }
}

/* §121-PATCH-END */

/* §122-PATCH-START — 2026-10-02 — sidebar mobile UX
   1. Backdrop (клик закрывает off-canvas).
   2. Swipe-hint (полускобка слева).
   3. Компактнее app-content на мобильном.
   4. Компактнее topbar на мобильном (без ☰).
   5. Desktop-таблицы: max-height 78→40px, flex:1 на wrap.
*/

/* ─── 1. Backdrop (замена ::before у sidebar) ─── */
.sidebar.is-mobile-open::before { content: none; display: none; }

.sidebar-backdrop { display: none; }

@media (max-width: 1023px) {
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 150;
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms ease;
    }
    .sidebar.is-mobile-open ~ .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .sidebar { z-index: 200; }
}

/* ─── 2. Swipe-hint ─── */
.sidebar-swipe-hint { display: none; }

@media (max-width: 1023px) {
    .sidebar-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 56px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-left: none;
        border-radius: 0 28px 28px 0;
        color: var(--text-muted);
        opacity: 0.55;
        z-index: 100;
        pointer-events: none;
        transition: opacity 200ms ease;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
    .sidebar-swipe-hint > svg {
        width: 14px;
        height: 14px;
        margin-left: -2px;
    }
    [data-theme="light"] .sidebar-swipe-hint {
        background: #ffffff;
        border-color: #cbd5e1;
        color: #94a3b8;
    }
}

/* ─── 5. Desktop-таблицы: убрать «78px» (нет topbar/dashboard-header) ─── */
@media (min-width: 641px) {
    #tab-stores > .card,
    #tab-tasks > .card {
        max-height: calc(100vh - 40px);
    }
    #tab-stores #storesTableWrap,
    #tab-tasks #tasksTableWrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }
}

/* §122-PATCH-END */





















/* §119.2-PATCH-START — 2026-10-02 — topbar off + батарейка в тулбаре
   1. Topbar на мобиле полностью скрыт (не только --empty).
   2. Верхний бордюр убран окончательно.
   3. Батарейка — внутри .tasks-toolbar__actions, компактная.
*/

@media (max-width: 1023px) {
    body { padding: 0; }
    .container { padding: 0; }
}

@media (max-width: 640px) {
    body { padding: 0; }
}

@media (max-width: 1023px) {
    .tasks-toolbar__actions .today-progress--mobile {
        flex: 0 0 auto;
        margin: 0;
        display: flex;
        align-items: center;
    }
    .tasks-toolbar__actions .today-progress--mobile[hidden] {
        display: none;
    }
    .tasks-toolbar__actions .today-progress--mobile .today-progress__caption {
        font-size: 9px;
        margin-right: 2px;
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__body {
        width: 60px;
        height: 18px;
        padding: 1.5px;
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__fill {
        top: 1.5px;
        left: 1.5px;
        bottom: 1.5px;
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__label {
        font-size: 9px;
        gap: 2px;
    }
}

/* §119.2-PATCH-END */


/* §119.3-PATCH-START — 2026-10-02 — батарейка в тулбаре, шире
   1. Батарейка 60 → 96px, подпись «выполнено» → 10px.
   2. Отступ от подписи до корпуса батарейки — 6px.
   3. Отступ от кнопки БД (#syncStoresBtn) до батарейки — 10px.
*/

@media (max-width: 1023px) {
    .tasks-toolbar__actions .today-progress--mobile {
        /* Отступ слева — от кнопки #syncStoresBtn */
        margin-left: 10px;
        margin-right: 0;
        gap: 0;
    }
    .tasks-toolbar__actions .today-progress--mobile .today-progress__caption {
        font-size: 10px;
        margin-right: 6px;   /* от подписи до коробки батарейки */
        color: var(--text-muted);
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__body {
        width: 96px;
        height: 20px;
        padding: 1.5px;
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__fill {
        top: 1.5px;
        left: 1.5px;
        bottom: 1.5px;
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__label {
        font-size: 10px;
        gap: 3px;
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__label-word {
        font-size: 9px;
    }
}

/* §119.3-PATCH-END */


/* §119.4-PATCH-START — 2026-10-02
   1. Планы SaveBtn на мобиле — не обрезается.
   2. Планы — убран backdrop-filter (тормоза скролла).
   3. Мобильные карточки заданий — user-select: none.
   4. Иконки-заголовки (💰/▶️/✅/⏰) — крупнее и по центру.
*/

/* ─── 1. SaveBtn в модалке планов — шире, без обрезки ─── */
@media (max-width: 1400px) {
    html body #plansModal .modal-content .plans-head .plans-actions #plansSaveBtn {
        width: auto;
        max-width: none;
        min-width: 90px;
        padding: 0 12px;
        font-size: 12px;
        white-space: nowrap;
    }
    html body #plansModal .modal-content .plans-head .plans-actions #plansSaveBtn > .i,
    html body #plansModal .modal-content .plans-head .plans-actions #plansSaveBtn > .i--sm {
        width: 12px;
        height: 12px;
        margin-right: 4px;
    }
}

/* ─── 2. Модалка планов — отключить blur (тормоза скролла) ─── */
#plansModal {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(11, 17, 32, 0.85);
}
#plansModal .plans-view-wrap {
    contain: layout style paint;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ─── 3. Мобильные карточки заданий — без выделения текста ─── */
@media (max-width: 640px) {
    .task-group-mobile,
    .task-group-mobile * {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ─── 4. Иконки-заголовки — крупнее ─── */
#tasksTableWrap th[data-label="💰"],
#tasksTableWrap th[data-label="▶️"],
#tasksTableWrap th[data-label="✅"],
#storesTableWrap th[data-label="💰"],
#storesTableWrap th[data-label="⏰"] {
    text-align: center;
}
#tasksTableWrap th[data-label="💰"] .th-label,
#tasksTableWrap th[data-label="▶️"] .th-label,
#tasksTableWrap th[data-label="✅"] .th-label,
#storesTableWrap th[data-label="💰"] .th-label,
#storesTableWrap th[data-label="⏰"] .th-label {
    font-size: 14px;
    text-align: center;
    display: block;
}

/* §119.4-PATCH-END */


/* §119.5-PATCH-START — 2026-10-02 — порядок блоков в .plans-head
   Новый порядок: title → actions → view-toggle → week-summary.
   Селекторы (2,3,2) — как в §86, но ниже в файле → побеждают.

   Actions теперь идут ВТОРОЙ строкой (сразу под заголовком),
   переключатель вида — третьей, сводка недели — четвёртой.
*/

@media (max-width: 1400px) {

    /* Title — order 1 */
    html body #plansModal .modal-content .plans-head .plans-head__title {
        order: 1;
    }

    /* Actions — order 2 (было 4 в §86) */
    html body #plansModal .modal-content .plans-head .plans-actions {
        order: 2;
        align-self: stretch;
        justify-content: flex-end;
        margin-top: 0;
    }

    /* Переключатель — order 3 */
    html body #plansModal .modal-content .plans-head .plans-view-toggle {
        order: 3;
    }

    /* Сводка недели — order 4 */
    html body #plansModal .modal-content .plans-head .plans-week-summary {
        order: 4;
    }
}

/* §119.5-PATCH-END */


/* §119.6-PATCH-START — 2026-10-02 — порядок .plans-head на мобиле.
   Строка 1: [title] [week-summary растягивается вправо] [actions]
   Строка 2: [view-toggle] во всю ширину.

   Селектор (2,3,2) — совпадает с §86/§119.5, но ниже в файле →
   выигрывает по каскаду.
*/

@media (max-width: 900px) {

    html body #plansModal .modal-content .plans-head {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
    }

    /* Title — прижат влево, не растёт, может сжиматься (ellipsis) */
    html body #plansModal .modal-content .plans-head .plans-head__title {
        order: 1;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    /* Итоги — растягиваются, свой контент выравнивают вправо */
    html body #plansModal .modal-content .plans-head .plans-week-summary {
        order: 2;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        justify-content: flex-end;
        align-items: baseline;
        text-align: right;
        margin: 0;
        padding: 0;
        border: none;
    }

    /* Кнопки — справа в той же строке */
    html body #plansModal .modal-content .plans-head .plans-actions {
        order: 3;
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        justify-content: flex-end;
    }

    /* Переключатель — отдельной строкой во всю ширину */
    html body #plansModal .modal-content .plans-head .plans-view-toggle {
        order: 4;
        flex: 0 0 100%;
        width: 100%;
        margin-top: 4px;
    }
}

/* §119.6-PATCH-END */


/* §119.7-PATCH-START — 2026-10-02 — порядок .plans-head.
   Медиа расширен с 900px до 1400px (как §82/§86) — иначе не
   срабатывал на планшетах и узких desktop.

   Раскладка:
     Строка 1: [title] [итоги → вправо] [кнопки]
     Строка 2: [view-toggle] во всю ширину.
*/

@media (max-width: 1400px) {

    html body #plansModal .modal-content .plans-head {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
    }

    /* 1. Title — слева, сжимается с ellipsis */
    html body #plansModal .modal-content .plans-head .plans-head__title {
        order: 1;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    /* 2. Итоги — растягиваются, контент прижат вправо */
    html body #plansModal .modal-content .plans-head .plans-week-summary {
        order: 2;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        justify-content: flex-end;
        align-items: baseline;
        text-align: right;
        margin: 0;
        padding: 0;
        border: none;
        overflow: hidden;
    }

    /* 3. Кнопки — справа в той же строке */
    html body #plansModal .modal-content .plans-head .plans-actions {
        order: 3;
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        justify-content: flex-end;
        align-self: center;
    }

    /* 4. Переключатель — отдельной строкой во всю ширину */
    html body #plansModal .modal-content .plans-head .plans-view-toggle {
        order: 4;
        flex: 0 0 100%;
        width: 100%;
        margin-top: 4px;
    }

    /* Сводка в очень узком виде — не режется */
    html body #plansModal .modal-content .plans-head .plans-week-summary > span {
        white-space: nowrap;
    }
}

/* §119.7-PATCH-END */


/* §119.8-PATCH-START — 2026-10-02 — title width:auto
   §80 ставит .plans-head__title width:100% → title занимает всю
   строку, итоги + кнопки переносятся на 2-ю. Перебиваем на auto,
   чтобы всем хватило места в одной строке.

   Селектор (2,3,2) — как у §86/§119.7, но ниже по файлу.
*/

@media (max-width: 1400px) {

    /* Title — auto width, ограничение по максимуму */
    html body #plansModal .modal-content .plans-head .plans-head__title {
        order: 1;
        flex: 0 1 auto;
        width: auto;
        max-width: 45%;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Итоги — сжимаются, но не ломают строку */
    html body #plansModal .modal-content .plans-head .plans-week-summary {
        order: 2;
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        justify-content: flex-end;
        align-items: baseline;
        text-align: right;
        overflow: hidden;
    }
    html body #plansModal .modal-content .plans-head .plans-week-summary > span {
        white-space: nowrap;
    }

    /* Кнопки — фиксированы справа */
    html body #plansModal .modal-content .plans-head .plans-actions {
        order: 3;
        flex: 0 0 auto;
        width: auto;
        margin-left: 4px;
        justify-content: flex-end;
        align-self: center;
    }

    /* Переключатель — отдельной строкой */
    html body #plansModal .modal-content .plans-head .plans-view-toggle {
        order: 4;
        flex: 0 0 100%;
        width: 100%;
        margin-top: 6px;
    }

    /* Padding шапки — плотнее сверху */
    html body #plansModal .modal-content.plans-v2-modal > .plans-head {
        padding: 6px 12px 8px;
    }
}

/* §119.8-PATCH-END */


/* §119.9-PATCH-START — 2026-10-02 — sidebar 240 → 200px.
   Expanded: 200px. Collapsed: 60px (не меняем).
   Перебивает §115 (grid-template-columns 240px 1fr).
*/

@media (min-width: 1024px) {

    /* Grid shell */
    .app-shell {
        grid-template-columns: 200px 1fr;
    }
    .app-shell:has(.sidebar.is-collapsed) {
        grid-template-columns: 60px 1fr;
    }

    /* Сам sidebar */
    .sidebar {
        width: 200px;
    }
    .sidebar.is-collapsed {
        width: 60px;
    }

    /* Внутренние отступы — компактнее */
    .sidebar__brand {
        padding: 14px 14px 10px;
    }
    .sidebar__nav {
        padding: 6px 8px 8px;
    }
    .sidebar__nav .tab-btn,
    .sidebar__nav .tab-btn-cleanup {
        padding: 0 8px;
        gap: 8px;
        font-size: 12.5px;
    }
    .sidebar__nav .tab-btn .i,
    .sidebar__nav .tab-btn-cleanup .i {
        width: 15px;
        height: 15px;
    }
    .sidebar__footer {
        padding: 8px 10px 10px;
    }
    .sidebar__actions {
        padding: 6px 8px;
    }
}

/* §119.9-PATCH-END */

/* §123-PATCH-START — 2026-10-02 — Mobile Maturity v1
   Токенизация цвета мобильных карточек. Убираем пять выдуманных
   синих (#283a5a / #374e7a / #4d6796 / #3e5278 / #dbeafe), которые
   делали мобильный интерфейс «детским»: цветные коробки, тени,
   неоновые наклейки. Переводим на токены §94.1 + §100.

   Принципы:
     • вложенная карточка = тот же фон + тонкий бордер (не «плитка»);
     • вложенная плашка  = var(--bg-hover) — лёгкий контраст к карточке;
     • никаких box-shadow (соответствие §103 «тень только у модалок»);
     • плашка адреса = плоский жирный текст, без заливки/рамки.

   Секция — только для mobile (≤640px), на десктопе не применяется.
   Дописана в конец файла → выигрывает каскад у старых правил.
*/

@media (max-width: 640px) {

    /* ─── 1. Карточка группы: магазины / задания / планы ─── */

    .store-group-mobile,
    .task-group-mobile,
    .plan-group-mobile {
        background: var(--bg-surface);
        border-color: var(--border);
        box-shadow: none;
        border-radius: 12px;
    }

    /* Light-тема: тот же приём, светлый surface + бордер */
    [data-theme="light"] .store-group-mobile,
    [data-theme="light"] .task-group-mobile,
    [data-theme="light"] .plan-group-mobile {
        background: var(--bg-surface);
        border-color: var(--border);
        box-shadow: none;
    }

    /* ─── 2. Плашки поставщиков внутри карточки ─── */

    .store-group-mobile .smc-sup,
    .task-group-mobile  .tmc-sup,
    .plan-group-mobile  .pmc-sup {
        background: var(--bg-hover);
        border-color: var(--border-subtle);
        border-radius: 8px;
        box-shadow: none;
    }

    [data-theme="light"] .store-group-mobile .smc-sup,
    [data-theme="light"] .task-group-mobile  .tmc-sup,
    [data-theme="light"] .plan-group-mobile  .pmc-sup {
        background: var(--bg-hover);
        border-color: var(--border-subtle);
    }

    /* У «плана» был ещё свой фон внутри плашки — глушим */

    .plan-group-mobile .pmc-sup {
        border: 1px solid var(--border-subtle);
    }

    /* ─── 3. Плашка адреса → плоский жирный текст ─── */

    .store-group-mobile .smc-addr-inline,
    .task-group-mobile  .tmc-addr-inline {
        background: transparent;
        border: none;
        color: var(--text-primary);
        padding: 0 4px;
        font-size: 13px;
        font-weight: 700;
        border-radius: 0;
    }

    [data-theme="light"] .store-group-mobile .smc-addr-inline,
    [data-theme="light"] .task-group-mobile  .tmc-addr-inline {
        color: var(--text-primary);
        background: transparent;
        border: none;
    }

    /* ─── 4. Метрики внутри плашек: цена, тайминг, статус ─── */

    .task-group-mobile  .tmc-sup-metric,
    .store-group-mobile .smc-sup-metric,
    .plan-group-mobile  .pmc-sup-metric {
        background: var(--bg-surface);
        border-color: var(--border-subtle);
    }

    [data-theme="light"] .task-group-mobile  .tmc-sup-metric,
    [data-theme="light"] .store-group-mobile .smc-sup-metric,
    [data-theme="light"] .plan-group-mobile  .pmc-sup-metric {
        background: var(--bg-surface);
        border-color: var(--border-subtle);
    }

    /* ─── 5. Строка «мета» карточки задания ─── */
    /* Источник (📱 Мобильное) — тоже приглушаем, чтобы не спорил
       с адресом и неоновыми статусами. */

    .task-group-mobile .tmc-source {
        background: transparent;
        border-color: var(--border-subtle);
        color: var(--text-muted);
    }

    [data-theme="light"] .task-group-mobile .tmc-source {
        background: transparent;
        border-color: var(--border-subtle);
        color: var(--text-muted);
    }

    /* ─── 6. Плашка поставщика-«мобильной» карточки магазина:
       убираем box-shadow с .store-sup-mobile ─── */

    .store-sup-mobile {
        box-shadow: none;
    }

}

/* §123-PATCH-END */

/* §124-PATCH-START — 2026-10-02 — Mobile Maturity v2
   Статусы мобильных карточек → контурные чипы (§110).

   Было: .tmc-status — неоновая пилюля с полной заливкой
   (#60a5fa / #34d399 / #f59e0b / #f87171) и контрастным текстом.
   На тёмной теме это «светящиеся плашки», на светлой — «ярлыки из
   детского конструктора».

   Стало: мягкий полупрозрачный фон (--*-subtle из §100) + тонкий
   контур + приглушённый цвет текста. Приём — как у .chip в §110
   и chipForTaskStatus() в _utils.js.

   Что НЕ трогаем: левые цветные бордеры .tmc-sup.task-started
   и т.п. — они работают как маркер статуса строки, не «неонят».

   Правило: новый статусный чип на мобиле — через *-subtle токен,
   без-заливок цветом.
*/

@media (max-width: 640px) {

    /* ─── Базовая форма: пилюля → компактный чип ─── */

    .task-group-mobile .tmc-status {
        background: transparent;
        border: 1px solid transparent;
        border-radius: 999px;
        padding: 2px 9px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1.35;
        color: var(--text-muted);
    }

    /* ─── started / planned → accent (info) ─── */

    .task-group-mobile .tmc-sup.task-started  .tmc-status,
    .task-group-mobile .tmc-sup.task-planned  .tmc-status {
        background: var(--accent-subtle);
        border-color: rgba(91, 141, 239, 0.32);
        color: var(--accent);
    }

    /* ─── redo → warning ─── */

    .task-group-mobile .tmc-sup.task-redo .tmc-status {
        background: var(--warning-subtle);
        border-color: rgba(212, 160, 74, 0.34);
        color: var(--warning);
    }

    /* ─── completed → success ─── */

    .task-group-mobile .tmc-sup.task-completed .tmc-status {
        background: var(--success-subtle);
        border-color: rgba(61, 174, 127, 0.34);
        color: var(--success);
    }

    /* ─── rejected / cancelled → danger ─── */

    .task-group-mobile .tmc-sup.task-rejected  .tmc-status,
    .task-group-mobile .tmc-sup.task-cancelled .tmc-status {
        background: var(--danger-subtle);
        border-color: rgba(221, 100, 98, 0.34);
        color: var(--danger);
    }

    /* ─── moved / not-done → нейтральный ─── */

    .task-group-mobile .tmc-sup.task-moved    .tmc-status,
    .task-group-mobile .tmc-sup.task-not-done .tmc-status {
        background: rgba(148, 163, 184, 0.12);
        border-color: rgba(148, 163, 184, 0.22);
        color: var(--text-muted);
    }

    /* ─── Light theme: те же токены, чуть плотнее контур ─── */

    [data-theme="light"] .task-group-mobile .tmc-sup.task-started  .tmc-status,
    [data-theme="light"] .task-group-mobile .tmc-sup.task-planned  .tmc-status {
        background: rgba(37, 99, 235, 0.08);
        border-color: rgba(37, 99, 235, 0.22);
        color: #2563eb;
    }

    [data-theme="light"] .task-group-mobile .tmc-sup.task-redo .tmc-status {
        background: rgba(180, 83, 9, 0.08);
        border-color: rgba(180, 83, 9, 0.22);
        color: #b45309;
    }

    [data-theme="light"] .task-group-mobile .tmc-sup.task-completed .tmc-status {
        background: rgba(4, 120, 87, 0.08);
        border-color: rgba(4, 120, 87, 0.22);
        color: #047857;
    }

    [data-theme="light"] .task-group-mobile .tmc-sup.task-rejected  .tmc-status,
    [data-theme="light"] .task-group-mobile .tmc-sup.task-cancelled .tmc-status {
        background: rgba(185, 28, 28, 0.08);
        border-color: rgba(185, 28, 28, 0.22);
        color: #b91c1c;
    }

    [data-theme="light"] .task-group-mobile .tmc-sup.task-moved    .tmc-status,
    [data-theme="light"] .task-group-mobile .tmc-sup.task-not-done .tmc-status {
        background: rgba(15, 23, 42, 0.05);
        border-color: rgba(15, 23, 42, 0.10);
        color: #64748b;
    }

}

/* §124-PATCH-END */

/* §125-PATCH-START — 2026-10-02 — Mobile Maturity v3
   Радиусы, тени, generic mobile cards.

   A. CTA-кнопки в карточках (Начать / Доделать / Забрать /
      Выбрать задание) — были 40px-pill (iOS-2013). Стало 10px.
   B. Мелкие action-кнопки — 20-40px → 8px.
   C. Generic-карточки таблиц (§19 mobile, применяется на workers/
      clients/suppliers/managers/announcements/reports/audit):
        • убираем box-shadow (соответствие §103);
        • фон/бордер/радиус → токены §94.1;
        • статусные border-left → приглушённые токены §100;
        • нижняя граница td.col-actions → var(--border).
   D. .card на мобиле → 10px.

   Принцип §102 «один язык скруглений»:
     6px — кнопки/инпуты, 10px — карточки/модалки, 999px — чипы.
   Мобильные CTA были исключением — теперь нет.
*/

/* ─── A + B. Кнопки ─── */

@media (max-width: 640px) {

    /* CTA в карточках */
    .btn-start-task,
    .btn-redo-task,
    .btn-claim-task,
    .btn-start-supplier,
    .out-of-zone {
        border-radius: 10px;
    }

    /* Мелкие action-кнопки */
    .store-sup-btn,
    .deadline-close-btn,
    .tab-btn-cleanup {
        border-radius: 8px;
    }

    /* «Показать ещё» — раньше 20px-pill, теперь 8px */
    .tasks-load-more,
    .stores-load-more {
        border-radius: 8px;
    }

    /* Card radius: 12 → 10 (единый язык с десктопом) */
    .card {
        border-radius: 10px;
    }

}

/* ─── C. Generic-карточки таблиц §19 (mobile 768px) ─── */

@media (max-width: 768px) {

    /* Сама карточка строки: убрать shadow, фон/бордер/радиус — токены */
    .table-wrap tbody tr {
        background: var(--bg-surface);
        border-color: var(--border);
        border-radius: 10px;
        box-shadow: none;
    }

    [data-theme="light"] .table-wrap tbody tr {
        background: var(--bg-surface);
        border-color: var(--border);
        box-shadow: none;
    }

    /* Панель фильтров (всплывающая в мобильном режиме) */
    .table-wrap thead tr.filter-row.mobile-visible {
        background: var(--bg-surface);
        border-color: var(--border);
        border-radius: 10px;
    }

    [data-theme="light"] .table-wrap thead tr.filter-row.mobile-visible {
        background: var(--bg-surface);
        border-color: var(--border);
    }

    /* Разделитель под action-ячейкой */
    .table-wrap tbody td.col-actions,
    .table-wrap tbody td:last-child {
        border-top-color: var(--border);
    }

    [data-theme="light"] .table-wrap tbody td.col-actions,
    [data-theme="light"] .table-wrap tbody td:last-child {
        border-top-color: var(--border);
    }

    /* Статусные левые бордеры — приглушённые токены */
    .table-wrap tbody tr.task-started   { border-left-color: var(--accent); }
    .table-wrap tbody tr.task-redo      { border-left-color: var(--warning); }
    .table-wrap tbody tr.task-rejected  { border-left-color: var(--danger); }
    .table-wrap tbody tr.task-completed { border-left-color: var(--success); }

    /* Кнопки внутри ячеек — тоже к 8px (раньше 12-20px pills) */
    .table-wrap tbody .edit-store-btn,
    .table-wrap tbody .edit-task-btn,
    .table-wrap tbody .worker-edit-btn,
    .table-wrap tbody .worker-delete-btn,
    .table-wrap tbody .manager-edit-btn,
    .table-wrap tbody .manager-delete-btn,
    .table-wrap tbody .supplier-edit-btn,
    .table-wrap tbody .supplier-delete-btn {
        border-radius: 8px;
    }

}

/* §125-PATCH-END */

/* §126-PATCH-START — 2026-10-02 — Mobile Maturity v4
   Батарейка → тонкая полоса прогресса.

   Было: «игрушечная батарейка» — корпус 96×20px, border 2px #94a3b8,
   скругление pill, числа внутри заливки с text-shadow, три уровня
   (low красный / mid жёлтый / high зелёный). Читалось как индикатор
   заряда из плеера.

   Стало: тонкая полоса 72×6px, radius 3px, трек --border-strong,
   заливка --accent; финал (80%+) → --success. Числа и подпись
   вынесены СЛЕВА от полосы в одну строку. Без text-shadow.

   Разметка в admin.html не меняется — только CSS.

   Правило: прогресс — это числа + полоса, а не «прибор» с начинкой.
*/

@media (max-width: 1023px) {

    /* ─── 1. Контейнер: строка из [caption] [label] [body] ─── */

    .tasks-toolbar__actions .today-progress--mobile {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: 10px;
        margin-right: 0;
    }

    .tasks-toolbar__actions .today-progress--mobile .today-progress__caption {
        font-size: 10px;
        font-weight: 500;
        color: var(--text-muted);
        margin-right: 0;
        white-space: nowrap;
    }

    /* ─── 2. Корпус = тонкий трек ─── */

    .tasks-toolbar__actions .today-progress--mobile .battery {
        display: flex;
        align-items: center;
    }

    .tasks-toolbar__actions .today-progress--mobile .battery__body {
        position: relative;
        width: 72px;
        min-width: 72px;
        height: 6px;
        padding: 0;
        border: none;
        background: var(--border-strong);
        border-radius: 3px;
        overflow: visible; /* метка выходит наружу влево */
        box-shadow: none;
    }

    /* ─── 3. Заливка: один акцент, финал — success ─── */

    .tasks-toolbar__actions .today-progress--mobile .battery__fill {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        background: var(--accent);
        border-radius: 3px;
        transition: width .4s ease, background .3s ease;
    }

    .tasks-toolbar__actions .today-progress--mobile .battery__fill[data-level="high"] {
        background: var(--success);
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__fill[data-level="mid"],
    .tasks-toolbar__actions .today-progress--mobile .battery__fill[data-level="low"] {
        background: var(--accent);
    }

    /* ─── 4. Числа: слева от полосы, в потоке через absolute ─── */

    .tasks-toolbar__actions .today-progress--mobile .battery__label {
        position: absolute;
        top: 50%;
        right: calc(100% + 8px);
        bottom: auto;
        left: auto;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        min-width: 34px;
        padding: 0;
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
        color: var(--text-primary);
        text-shadow: none;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none;
        z-index: 1;
    }

    /* Уровневые цвета текста (были low/mid/high на label) — глушим,
       цвет один — --text-primary. Не перебиваем семантикой. */
    .tasks-toolbar__actions .today-progress--mobile .battery__label-word {
        display: none;
    }

    /* ─── 5. «Выступ» батарейки — окончательно скрыт ─── */

    .tasks-toolbar__actions .today-progress--mobile .battery__cap {
        display: none;
    }

}

/* §126-PATCH-END */

/* §127-PATCH-START — 2026-10-02 — Mobile Maturity v4-fix
   Батарейка: фикс верстки после §126.

   Проблема §126: label абсолютно выносился влево от body, но caption
   «выполнено» оставался в потоке — число 1/49 наезжало на обрезанную
   подпись. Скрин подтвердил.

   Решение:
     1. В admin.html label вынесен ИЗ .battery__body в .today-progress--
        mobile, стал прямым flex-ребёнком. JS не тронут — [data-tp-count]
        и [data-tp-fill] по-прежнему находятся внутри [data-tp].
     2. В CSS: caption на мобиле скрыт (число 1/49 само семантично),
        label — статичный флекс-элемент слева от полосы. Сброс absolute
        из §126.

   Финальная раскладка: [1/49] [████████░░░░░░░░]
*/

@media (max-width: 1023px) {

    /* Корневой контейнер — flex-row */
    .tasks-toolbar__actions .today-progress--mobile {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-left: 10px;
        margin-right: 0;
    }

    /* Подпись «выполнено» — скрыта. Число 1/49 говорит само за себя. */
    .tasks-toolbar__actions .today-progress--mobile .today-progress__caption {
        display: none;
    }

    /* Сброс absolute-настроек из §126 — label теперь в потоке */
    .tasks-toolbar__actions .today-progress--mobile .battery__label {
        position: static;
        right: auto;
        top: auto;
        bottom: auto;
        left: auto;
        transform: none;

        display: inline-block;
        flex: 0 0 auto;
        min-width: 34px;
        padding: 0;
        margin: 0;

        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
        text-align: right;
        white-space: nowrap;
        color: var(--text-primary);
        text-shadow: none;
        pointer-events: none;
        z-index: auto;
    }

    /* «выполнено» из label-word больше не нужно — caption скрыт */
    .tasks-toolbar__actions .today-progress--mobile .battery__label-word {
        display: none;
    }

    /* Полоса — flex-элемент справа от label */
    .tasks-toolbar__actions .today-progress--mobile .battery {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    /* Трек — тонкая полоса */
    .tasks-toolbar__actions .today-progress--mobile .battery__body {
        position: relative;
        width: 72px;
        min-width: 72px;
        height: 6px;
        padding: 0;
        border: none;
        background: var(--border-strong);
        border-radius: 3px;
        overflow: hidden;
        box-shadow: none;
    }

    /* Заливка — один акцент; 80%+ → success (JS ставит data-level) */
    .tasks-toolbar__actions .today-progress--mobile .battery__fill {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        background: var(--accent);
        border-radius: 3px;
        transition: width .4s ease, background .3s ease;
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__fill[data-level="high"] {
        background: var(--success);
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__fill[data-level="mid"],
    .tasks-toolbar__actions .today-progress--mobile .battery__fill[data-level="low"] {
        background: var(--accent);
    }

    /* «Выступ» — окончательно скрыт */
    .tasks-toolbar__actions .today-progress--mobile .battery__cap {
        display: none;
    }

}

/* §127-PATCH-END */

/* §128-PATCH-START — 2026-10-02 — Mobile Maturity v5
   Последние хардкоды цвета в мобильных карточках админки.

   После §123 (списки) и §126/§127 (батарейка) чистая ситуация
   в карточках магазинов и заданий. Осталось три очага:
     • работники (.wk-chip--action / .wk-chip--danger — §36/§104
       не покрыли, там был хардкод #475569 / #f87171);
     • soft-merch (#softMerchTableWrap tbody tr — #1e293b / #334155);
     • модалка магазина (.store-sup-mobile*, .store-suppliers-checkbox —
       тот же набор синих, что и в карточках списка до §123);
     • хвост в модалке планов (.plan-group-mobile .order-input).

   Принцип тот же: цвет = токен, тень = только у модалок/поповеров,
   скругления — по §102 (6px кнопки, 8-10px карточки, 999px чипы).
*/

/* ─── А. Карточка работника: chip-action / chip-danger ─── */

.wk-chip--action {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}
.wk-chip--action:hover {
    background: var(--bg-surface);
}

.wk-chip--danger {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}
.wk-chip--danger:hover {
    filter: brightness(0.92);
}

[data-theme="light"] .wk-chip--action {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border);
}
[data-theme="light"] .wk-chip--action:hover {
    background: var(--bg-surface);
}

/* ─── Б. Карточка soft-merch ─── */

@media (max-width: 768px) {
    #softMerchTableWrap tbody tr {
        background: var(--bg-surface);
        border-color: var(--border);
        border-radius: 10px;
        box-shadow: none;
    }
    [data-theme="light"] #softMerchTableWrap tbody tr {
        background: var(--bg-surface);
        border-color: var(--border);
        box-shadow: none;
    }
    /* Плашки «💰 toggle» / «⏰ toggle» внутри карточки — как в §123 */
    #softMerchTableWrap tbody td[data-label="Цена"],
    #softMerchTableWrap tbody td[data-label="Тайминг"] {
        background: var(--bg-hover);
        border: 1px solid var(--border-subtle);
    }
    [data-theme="light"] #softMerchTableWrap tbody td[data-label="Цена"],
    [data-theme="light"] #softMerchTableWrap tbody td[data-label="Тайминг"] {
        background: var(--bg-hover);
        border-color: var(--border-subtle);
    }
}

/* ─── В. Модалка магазина: мобильные плашки поставщиков ─── */

@media (max-width: 640px) {

    .store-sup-mobile {
        background: var(--bg-hover);
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
        box-shadow: none;
    }
    [data-theme="light"] .store-sup-mobile {
        background: var(--bg-hover);
        border-color: var(--border-subtle);
    }

    .store-sup-mobile__name {
        color: var(--text-primary);
    }

    .store-sup-mobile__input {
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        color: var(--text-primary);
    }
    [data-theme="light"] .store-sup-mobile__input {
        background: var(--bg-surface);
        border-color: var(--border-subtle);
        color: var(--text-primary);
    }

    .store-sup-mobile__comment-btn,
    .store-sup-mobile__url-btn {
        border-color: var(--border-subtle);
    }
    .store-sup-mobile__comment-btn.has-comment,
    .store-sup-mobile__url-btn.has-url {
        background: var(--accent-subtle);
        border-color: var(--accent);
    }
    .store-sup-mobile__comment-btn:hover,
    .store-sup-mobile__url-btn:hover,
    .store-sup-mobile__comment-btn:active,
    .store-sup-mobile__url-btn:active {
        border-color: var(--accent);
    }

    .store-sup-mobile__remove {
        color: var(--danger);
    }
    .store-sup-mobile__remove:hover {
        filter: brightness(0.9);
    }

}

/* ─── Г. Модалка магазина: чекбоксы выбора поставщиков ─── */

.store-suppliers-checkbox {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.store-suppliers-checkbox:hover {
    border-color: var(--accent);
}
.store-suppliers-checkbox.checked {
    background: var(--success-subtle);
    border-color: var(--success);
    color: var(--text-primary);
}

[data-theme="light"] .store-suppliers-checkbox {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-secondary);
}
[data-theme="light"] .store-suppliers-checkbox.checked {
    background: var(--success-subtle);
    border-color: var(--success);
    color: var(--text-primary);
}

/* ─── Д. Модалка планов: order-input в мобильной карточке ─── */

@media (max-width: 640px) {

    .plan-group-mobile .pmc-day .order-input {
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        color: var(--text-primary);
    }
    [data-theme="light"] .plan-group-mobile .pmc-day .order-input {
        background: var(--bg-surface);
        border-color: var(--border-subtle);
        color: var(--text-primary);
    }
    .plan-group-mobile .pmc-day .order-input[readonly] {
        background: transparent;
        border-color: transparent;
        color: var(--text-secondary);
    }
    [data-theme="light"] .plan-group-mobile .pmc-day .order-input[readonly] {
        color: var(--text-secondary);
    }

}

/* §128-PATCH-END */

/* §129-PATCH-START — 2026-10-02 — Mobile Maturity v6
   Кружки дней недели (.day-dot) → токены §94.1 + §100.

   Было: базовый .day-dot (§10) держал хардкод #1e293b / #475569 /
   #34d399 / #f59e0b. Пробегает через все мобильные карточки:
   магазины, задания, планы, софт-мерч, модалка магазина (.sup-days).
   В тёмной теме это выглядело как «неоновые лампочки» рядом с уже
   приглушёнными (§123-§128) карточками.

   Стало: фон --bg-hover, бордеры --border-subtle, active --success,
   locked --warning. Семантика та же, тон другой.

   Размеры (18/22/24px) не трогаем — они из контекстных секций.
   Только цвет.
*/

/* ─── Базовая точка (все карточки) ─── */

.day-dot {
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.day-dot.active {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

.day-dot.inactive {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

.day-dot.locked {
    background: var(--warning);
    border-color: var(--warning);
    color: #0f172a;
}

/* hover: было #60a5fa — приглушённый --accent */
.day-dot:hover {
    border-color: var(--accent);
}

/* ─── Светлая тема: те же токены, свои оттенки ─── */

[data-theme="light"] .day-dot {
    background: var(--bg-hover);
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

[data-theme="light"] .day-dot.active {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

[data-theme="light"] .day-dot.inactive {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

[data-theme="light"] .day-dot.locked {
    background: var(--warning);
    border-color: var(--warning);
    color: #ffffff;
}

/* ─── Модалка магазина: кружки в таблице поставщиков (.sup-days) ─── */
/* §23 держит свои #34d399 / #1e293b / #334155 — перебиваем токенами. */

.store-suppliers-table .sup-days .day-dot {
    background: var(--bg-hover);
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

.store-suppliers-table .sup-days .day-dot.active {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

.store-suppliers-table .sup-days .day-dot.inactive {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

.store-suppliers-table .sup-days .day-dot:hover {
    border-color: var(--accent);
}

[data-theme="light"] .store-suppliers-table .sup-days .day-dot {
    background: var(--bg-hover);
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

[data-theme="light"] .store-suppliers-table .sup-days .day-dot.active {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

[data-theme="light"] .store-suppliers-table .sup-days .day-dot.inactive {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-muted);
}

/* §129-PATCH-END */









/* §133-PATCH-START — 2026-10-02 — desktop spacing fix
   Уменьшены вертикальные отступы в desktop-вкладках «Магазины»
   и «Задания».

   Проблема A (низ карточки): .card padding-bottom 2px (§119/§119.2)
   + margin-bottom 4px (§75) + .app-content padding-bottom 10px (§118)
   = ~16px пустоты под таблицей.

   Проблема B (над таблицей): .tasks-toolbar margin-bottom 8px (§22)
   + .table-wrap margin-top 10px (§5) = 18px между тулбаром и первой
   строкой. Аналогично для .store-filters-panel.

   Патч — только desktop (≥1024px / ≥641px). Мобильные секции не тронуты.
*/

@media (min-width: 1024px) {

    /* A. Нижний отступ карточки → 0 */
    #tab-stores > .card,
    #tab-tasks > .card {
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

@media (min-width: 641px) {

    /* B. Отступ между тулбаром и таблицей → 6px (было 8+10=18) */
    #tasksTableWrap,
    #storesTableWrap {
        margin-top: 6px;
    }

    /* B. .tasks-toolbar margin-bottom 8 → 4 */
    #tab-tasks .tasks-toolbar {
        margin-bottom: 4px;
    }

    /* B. .store-filters-panel — прижать к таблице */
    #tab-stores .store-filters-panel {
        margin-bottom: 4px;
    }
}

/* §133-PATCH-END */


/* §134-PATCH-START — 2026-10-02 — desktop bottom tight
   Дожать нижний отступ в «Магазинах» / «Заданиях».

   После §133 осталось ~10px «воздуха» снизу:
     1. .app-content padding-bottom 4px.
     2. Кнопка .reset-filters в конце #tasksTableWrap/#storesTableWrap —
        создаётся в tasks.js/stores.js всегда, margin-top 8px + высота
        ~22px. На тёмной теме её верхняя грань сливается, но она
        толкает нижний край карточки.
     3. Карточка .card имеет border-radius 16px (§1) — под последней
        строкой таблицы визуально образуется скруглённый «карман».

   Решение — точечное, только desktop.
*/

@media (min-width: 1024px) {

    /* 2. Скругление карточки снизу 16 → 8 */
    #tab-stores > .card,
    #tab-tasks > .card {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
}

@media (min-width: 641px) {

    /* 3. reset-filters внутри таблиц — компактнее */
    #tasksTableWrap .reset-filters,
    #storesTableWrap .reset-filters {
        margin-top: 4px;
        margin-bottom: 0;
        padding: 2px 8px;
    }

    /* 4. «Показать ещё» — компактнее сверху, ноль снизу */
    #tasksTableWrap .tasks-load-more,
    #storesTableWrap .stores-load-more {
        margin: 6px auto 0;
    }

    /* 5. #tasksTableWrap / #storesTableWrap — без нижних отступов */
    #tasksTableWrap,
    #storesTableWrap {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

/* §134-PATCH-END */


/* §135-PATCH-START — 2026-10-02 — desktop flex chain
   Убрать структурный зазор под карточкой на вкладках «Магазины»
   и «Задания».

   Диагноз:
     .app-content { flex: 1 } растягивается на всю высоту окна,
     но .card внутри имеет max-height: calc(100vh - 24px) из §119/§119.2.
     Реально доступно: 100vh - 8px (padding-top app-content §134).
     Под карточкой остаётся зазор 16px — он и виден как серая полоса
     под таблицей.

   Решение — flex-цепочка:
     .app-content → активная вкладка → .card → .table-wrap.
     Карточка растягивается ровно до низа окна, скролл — внутри таблицы.

   Правило только для #tab-tasks и #tab-stores. Остальные вкладки
   (клиенты, работники, поставщики, менеджеры, планы, отчёты, журнал)
   остаются блочными — там карточки короткие, зазора не видно.
*/

@media (min-width: 1024px) {

    /* 2. Активные вкладки «Магазины» / «Задания» — растягиваются */
    .app-content > #tab-tasks:not(.hidden),
    .app-content > #tab-stores:not(.hidden) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* 3. Карточка внутри — flex, растягивается, без max-height */
    #tab-tasks:not(.hidden) > .card,
    #tab-stores:not(.hidden) > .card {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* 4. Тулбар и фильтр-панель — не сжимаются */
    #tab-tasks:not(.hidden) > .card > .tasks-toolbar,
    #tab-stores:not(.hidden) > .card > .store-filters-panel {
        flex: 0 0 auto;
    }

    /* 5. Таблица — растягивается, скролл внутри */
    #tab-tasks:not(.hidden) > .card > #tasksTableWrap,
    #tab-stores:not(.hidden) > .card > #storesTableWrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }
}

/* §135-PATCH-END */


/* §137-PATCH-START — 2026-10-02 — app-shell height fix
   Зафиксировать высоту shell'а, чтобы flex-цепочка §135 работала
   и после полной загрузки таблицы.

   Диагноз:
     .app-shell из §115 имеет min-height: 100vh — «минимум», а не
     «жёстко 100vh». §135 убрал .card max-height, и когда таблица
     загрузилась полностью (50+ строк), весь chain растянулся до
     content-height. Скролл ушёл на body, таблица — в бесконечность.

   Решение — жёстко ограничить высоту по вертикали, скролл оставить
   внутри #tasksTableWrap / #storesTableWrap.

   Селектор `html body .app-shell` (2,1,0) > §115 `.app-shell` (1,0,0).
*/

@media (min-width: 1024px) {

    html body .app-shell {
        height: 100vh;
        max-height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    html body .app-main {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    /* Страховка: .card в flex-chain не может «выйти» за shell */
    #tab-tasks:not(.hidden) > .card,
    #tab-stores:not(.hidden) > .card {
        max-height: 100%;
        overflow: hidden;
    }

    /* #tasksTableWrap / #storesTableWrap — единственный скроллер */
    #tab-tasks:not(.hidden) > .card > #tasksTableWrap,
    #tab-stores:not(.hidden) > .card > #storesTableWrap {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        max-height: none;
    }
}

/* §137-PATCH-END */


/* §138-PATCH-START — 2026-10-02 — tighten top gap
   Подтянуть таблицу к тулбару (desktop «Магазины» / «Задания»).

   §134 оставил 10px между тулбаром и шапкой таблицы:
     .tasks-toolbar margin-bottom: 4px + #tasksTableWrap margin-top: 6px.
   По скринам видно, что этого много — просится 4px.

   Плюс срезаем верхние отступы: card padding-top 6 → 4,
   app-content padding-top 8 → 6.

   Итог:
     тулбар ↔ шапка таблицы: 10 → 4px.
     верх окна ↔ верх карточки: 14 → 10px.

   Все изменения — только desktop ≥641px.
*/

@media (min-width: 641px) {

    /* Ту лбар ↔ таблица: 4 → 2 */
    #tab-tasks .tasks-toolbar {
        margin-bottom: 2px;
    }
    #tasksTableWrap {
        margin-top: 2px;
    }

    /* Магазины — то же самое */
    #tab-stores .store-filters-panel {
        margin-bottom: 2px;
    }
    #storesTableWrap {
        margin-top: 2px;
    }
}

@media (min-width: 1024px) {

    /* Card сверху плотнее */
    #tab-tasks > .card,
    #tab-stores > .card {
        padding-top: 4px;
    }
}

/* §138-PATCH-END */


/* §139-PATCH-START — 2026-10-02 — table thead tighten
   Срезать внутренние padding'и шапки таблицы (Магазины / Задания).

   После §138 от низа тулбара до текста «Гомель» осталось ~17px:
     4px margin (.tasks-toolbar + #tasksTableWrap)
     + 4px padding-top (.filter-row td)
     + 9px padding-top (thead tr:not(.filter-row) th из §106)

   Уменьшаем:
     filter-row td → 2px сверху
     обычная шапка th → 6px сверху/снизу (было 9/8)
     filter-input height → 24px (было 26)

   Итог: 17 → 10px. Только desktop, только #tasksTableWrap /
   #storesTableWrap. Остальные таблицы (клиенты, работники, ...)
   не тронуты.

   Селектор (2,0,0) + — перебивает §91/§106.
*/

@media (min-width: 641px) {

    /* filter-row — плотнее сверху */
    #tasksTableWrap thead tr.filter-row td,
    #storesTableWrap thead tr.filter-row td {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    /* Инпуты фильтров — компактнее */
    #tasksTableWrap thead .filter-input,
    #tasksTableWrap thead .filter-select,
    #storesTableWrap thead .filter-input,
    #storesTableWrap thead .filter-select {
        height: 24px;
    }

    /* Обычная шапка (заголовки) — плотнее */
    #tasksTableWrap thead tr:not(.filter-row) th,
    #storesTableWrap thead tr:not(.filter-row) th {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* §139-PATCH-END */


/* §140-PATCH-START — 2026-10-02 — no top gap
   Убрать верхний зазор карточки «Магазины» / «Задания» (desktop).

   После §138 — 10px до тулбара:
     .app-content padding-top: 6px + .card padding-top: 4px.
   Срезаем до 2 + 2 = 4px. + border 1px = 5px от верха окна.
   Тулбар почти вплотную к верху, но не слипается.

   Селектор `html body ...` (2,0,0) — перебивает §138 и §135.
*/

@media (min-width: 1024px) {

    #tab-tasks > .card,
    #tab-stores > .card {
        padding-top: 2px;
    }
}

/* §140-PATCH-END */


/* ============================================================
   §F2. INLINE-DEDUP (сессия 2026-10-02 G)
   Утилитарные классы вместо повторяющихся inline-стилей.
   Не трогает JS-логику — только верстка.
   ============================================================ */

/* --- .flex--between: flex space-between с выравниванием --- */
.flex.flex--between {
    justify-content: space-between;
    align-items: center;
}

/* --- Плотность .field внутри модалок ---
   .modal-content .field (0,2,0) из §13 — специфичность такая же,
   но мы ниже в файле → выигрываем. */
.field.field--compact { margin-bottom: 0; }
.field.field--spaced  { margin-top: 14px; }
.field.field--dense   { margin-top: -6px; }

/* --- Мелкая подпись под полем (было <small style="...">) --- */
.field-hint {
    color: var(--text-muted, #94a3b8);
    font-size: 11px;
    margin-top: 6px;
    display: block;
    line-height: 1.3;
}

/* --- Лейбл уменьшенного размера (было style="font-size:12px") --- */
.field-label-sm {
    font-size: 12px;
}

/* --- Textarea полной ширины в модалках --- */
.field-textarea {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #334155;
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
[data-theme="light"] .field-textarea {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* --- Большая кнопка «Закрыть» в модалках (3 места) ---
   §105 .modal-content .btn-close (0,2,0) перебивает наши
   правила — усиливаем специфичностью и. */
.modal-content .btn-close--prominent {
    margin-top: 12px;
    padding: 8px 20px;
    background: #475569;
    color: #ffffff;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    width: 100%;
    height: auto;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
}
.modal-content .btn-close--prominent:hover {
    background: #334155;
}

/* --- Модалка шириной 400px (small) --- */
.modal-content.modal-content--xs {
    max-width: 400px;
}

/* --- Блок лимитов клиента в editClientModal --- */
.client-limits-block {
    margin-top: 16px;
    padding: 14px;
    background: #0f172a;
    border-radius: 10px;
    border: 1px solid #334155;
}
[data-theme="light"] .client-limits-block {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.client-limits-block__title {
    font-size: 13px;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 10px;
}
[data-theme="light"] .client-limits-block__title {
    color: #334155;
}
.client-limits-block__hint {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
[data-theme="light"] .client-limits-block__hint {
    color: #64748b;
}
.client-limits-block__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* §F2-END */


/* ============================================================
   §I2. TABLE READABILITY (сессия 2026-10-02 I)

   Проблема: таблицы заданий и магазинов выглядели «плоским серым
   полотном». Все ячейки белым --text-primary, бордеры почти
   невидимые, шапка без заливки, плашка источника в каждой строке —
   визуальный шум.

   Решение — шесть точечных правок:
     A. Иерархия цвета в теле таблиц (primary / secondary / muted)
     B. Усиленные бордеры строк
     C. Отдельная заливка шапки
     D. Приглушённая плашка источника
     E. Плотность строк +2px
     F. Снятие tabular-nums с колонок «Начато» / «Завершено»

   Всё внутри @media (min-width: 641px). На мобиле таблицы
   превращаются в карточки — их раскладка не тронута.
   ============================================================ */
@media (min-width: 641px) {

    /* --- A. Иерархия цвета в теле таблиц --- */

    /* Задачи: город / сеть / адрес — primary.
       Поставщик / работник / цена / даты — secondary.
       Источник — muted (это «default», мозг не должен
       спотыкаться о него). */
    #tasksTableWrap tbody td {
        color: var(--text-secondary);
    }
    #tasksTableWrap tbody td.col-city,
    #tasksTableWrap tbody td.col-store,
    #tasksTableWrap tbody td.col-address {
        color: var(--text-primary);
    }
    #tasksTableWrap tbody td.col-source {
        color: var(--text-muted);
    }
    /* Иконка комментариев — вернуть акцент (иначе утонет в secondary). */
    #tasksTableWrap tbody td.col-comments .comment-icon {
        color: var(--accent);
    }

    /* Магазины: сеть / город / адрес — primary.
       Клиент / работник / поставщик / цена / тайминг — secondary.
       Комментарий — muted. */
    #storesTableWrap tbody td {
        color: var(--text-secondary);
    }
    #storesTableWrap tbody td.col-name,
    #storesTableWrap tbody td.col-city,
    #storesTableWrap tbody td.col-address {
        color: var(--text-primary);
    }
    #storesTableWrap tbody td.col-comment {
        color: var(--text-muted);
    }

    /* Первая ячейка строки — вес 500 (было в §106, подтверждаем
       уже после смены цвета). */
    #tasksTableWrap tbody tr td:first-child,
    #storesTableWrap tbody tr td:first-child {
        font-weight: 500;
    }

    /* --- B. Усиленные бордеры строк --- */
    /* Обычный td — rgba 0.20 вместо --border-subtle (0.08). */
    #tasksTableWrap tbody td,
    #storesTableWrap tbody td {
        border-bottom-color: rgba(148, 163, 184, 0.20);
    }
    /* Внутри одной task-group — пунктир чуть заметнее. */
    #tasksTableWrap tbody.task-group tr td {
        border-bottom-color: #3d4d68;
    }
    #tasksTableWrap tbody.task-group tr:last-child td {
        border-bottom-color: rgba(148, 163, 184, 0.28);
    }

    /* --- C. Отдельная заливка шапки --- */
    /* Было: --bg-surface (#1e293b) = как у карточки. Не видно.
       Стало: --bg-body (#0b1120) — темнее фона карточки, шапка
       читается как отдельная полоса. Плюс 2px бордер снизу. */
    #tasksTableWrap thead tr:not(.filter-row) th,
    #storesTableWrap thead tr:not(.filter-row) th {
        background: #0b1220;
        border-bottom: 2px solid rgba(148, 163, 184, 0.24);
    }
    [data-theme="light"] #tasksTableWrap thead tr:not(.filter-row) th,
    [data-theme="light"] #storesTableWrap thead tr:not(.filter-row) th {
        background: #e2e8f0;
        border-bottom-color: rgba(15, 23, 42, 0.20);
    }

    /* --- D. Приглушённая плашка источника --- */
    /* col-source уже muted через A. Дополнительно — при hover строки
       чуть ярче, чтобы при наведении читалось. Это даёт ощущение
       «строка ожила», а не «плашка висит всегда». */
    #tasksTableWrap tbody tr:hover td.col-source {
        color: var(--text-secondary);
    }

    /* --- E. Плотность строк +2px --- */
    /* Было: §118 padding 6px 4px / §106 padding 8px 10px.
       Стало: 9px 8px — строки дышат, не растягиваются. */
    #tasksTableWrap tbody td,
    #storesTableWrap tbody td {
        padding: 9px 8px;
    }
    /* Первый / последний td — чуть больше бокового отступа,
       чтобы текст не упирался в край карточки. */
    #tasksTableWrap tbody td:first-child,
    #storesTableWrap tbody td:first-child {
        padding-left: 10px;
    }
    #tasksTableWrap tbody td:last-child,
    #storesTableWrap tbody td:last-child {
        padding-right: 10px;
    }

    /* --- F. Снятие tabular-nums с дат --- */
    /* §96.4 ставил tnum на col-started / col-completed. Но это
       «14:00» / «19:08» — не математика. Моно-цифры оставляем
       только у цены и тайминга (там суммы/числа). */
    #tasksTableWrap td.col-started,
    #tasksTableWrap td.col-completed {
        font-variant-numeric: normal;
        font-feature-settings: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1, 'ss03' 1;
    }
}

/* §I2-END */


/* ============================================================
   §J2. TABLE + TOOLBAR POLISH (сессия 2026-10-02 J)

   Три группы правок после §I2:

   1. Fix overflow — §I2 ставил padding 9px 8px на td, что
      расширило таблицу на ~96px и выбило колонку «Комментарии»
      за пределы карточки. Возвращаем горизонтальный padding
      к базовому (4px из §118), оставляем только вертикальный
      прирост (9px — было 6px).

   2. Компактный тулбар заданий. Дата + пресеты + селекты в
      левой колонке занимали много места. Сжимаем по горизонтали:
      дата 117→105, select 90→80, padding у select 3×5, пресеты
      2×7 (font 10.5px), gap 12→6.

   3. Тихая шапка таблицы. Три источника визуального шума:
      • filter-input — 11 серых коробочек с обрезанными
        плейсхолдерами («Гор», «Сет», «Ста...»). Делаем фон
        прозрачным, текст muted; при hover/focus/непустом —
        обычный bg + accent border.
      • filter-toggle ▼ и sort-btn ↕ — opacity 0.4, при
        hover колонки — opacity 1.
      • Иконки-заголовки 💰/▶️/✅/⏰ — opacity 0.7.

      Плюс §I2 ставил 2px бордер снизу шапки — при плотной
      шапке выглядел тяжело. Возвращаем 1px.

   Мобильные карточки не тронуты — всё в @media (min-width: 641px).
   ============================================================ */
@media (min-width: 641px) {

    /* --- 1. Fix §I2 overflow: горизонтальный padding → 4px --- */
    #tasksTableWrap tbody td,
    #storesTableWrap tbody td {
        padding: 9px 4px;
    }
    #tasksTableWrap tbody td:first-child,
    #storesTableWrap tbody td:first-child {
        padding-left: 6px;
    }
    #tasksTableWrap tbody td:last-child,
    #storesTableWrap tbody td:last-child {
        padding-right: 6px;
    }

    /* --- 2. Компактный тулбар --- */
    .tasks-toolbar {
        gap: 6px;
        margin-bottom: 4px;
    }
    .tasks-filters-grid {
        gap: 4px 6px;
    }
    .tasks-filters-grid .tf-field input[type="date"] {
        width: 105px;
    }
    .tasks-filters-grid .tf-field select {
        min-width: 80px;
        padding: 3px 5px;
        font-size: 11.5px;
    }
    .date-presets {
        margin-left: 2px;
        gap: 2px;
    }
    .date-preset-btn {
        padding: 2px 7px;
        font-size: 10.5px;
    }

    /* --- 3a. Прозрачные filter-input в шапке — тише --- */
    #tasksTableWrap thead th .filter-input,
    #tasksTableWrap thead th .filter-select,
    #storesTableWrap thead th .filter-input,
    #storesTableWrap thead th .filter-select {
        background: transparent;
        border-color: transparent;
        color: var(--text-muted);
    }
    #tasksTableWrap thead th .filter-input:hover,
    #tasksTableWrap thead th .filter-select:hover,
    #tasksTableWrap thead th .filter-input:focus,
    #tasksTableWrap thead th .filter-select:focus,
    #storesTableWrap thead th .filter-input:hover,
    #storesTableWrap thead th .filter-select:hover,
    #storesTableWrap thead th .filter-input:focus,
    #storesTableWrap thead th .filter-select:focus {
        background: #0b1220;
        border-color: var(--accent);
        color: var(--text-primary);
    }
    /* Непустой фильтр — тоже виден, но не ярче hover. */
    #tasksTableWrap thead th .filter-input:not(:placeholder-shown),
    #storesTableWrap thead th .filter-input:not(:placeholder-shown) {
        background: #0b1220;
        border-color: rgba(148, 163, 184, 0.32);
        color: var(--text-primary);
    }
    [data-theme="light"] #tasksTableWrap thead th .filter-input:hover,
    [data-theme="light"] #tasksTableWrap thead th .filter-select:hover,
    [data-theme="light"] #tasksTableWrap thead th .filter-input:focus,
    [data-theme="light"] #storesTableWrap thead th .filter-input:hover,
    [data-theme="light"] #storesTableWrap thead th .filter-select:hover,
    [data-theme="light"] #storesTableWrap thead th .filter-input:focus {
        background: #e2e8f0;
    }

    /* --- 3b. ▼ / ↕ в шапке — тише по умолчанию --- */
    #tasksTableWrap thead th .filter-toggle,
    #storesTableWrap thead th .filter-toggle,
    #tasksTableWrap thead th .sort-btn,
    #storesTableWrap thead th .sort-btn {
        opacity: 0.4;
        transition: opacity 120ms ease;
    }
    #tasksTableWrap thead th:hover .filter-toggle,
    #storesTableWrap thead th:hover .filter-toggle,
    #tasksTableWrap thead th:hover .sort-btn,
    #storesTableWrap thead th:hover .sort-btn {
        opacity: 1;
    }

    /* --- 3c. Иконки-заголовки (💰/▶️/✅/⏰) — тише --- */
    #tasksTableWrap th[data-label="💰"] .th-label,
    #tasksTableWrap th[data-label="▶️"] .th-label,
    #tasksTableWrap th[data-label="✅"] .th-label,
    #storesTableWrap th[data-label="💰"] .th-label,
    #storesTableWrap th[data-label="⏰"] .th-label {
        opacity: 0.7;
    }

    /* --- 4. Шапка: 1px бордер вместо 2px из §I2 --- */
    #tasksTableWrap thead tr:not(.filter-row) th,
    #storesTableWrap thead tr:not(.filter-row) th {
        border-bottom-width: 1px;
        border-bottom-color: rgba(148, 163, 184, 0.20);
    }
}

/* §J2-END */


/* ============================================================
   §K2. SIDEBAR 180 + УЗКИЕ КОЛОНКИ ЗАДАЧ (сессия 2026-10-02 K)

   Проблема: при 1366px экране и sidebar 200px таблице заданий
   доступно 1134px, а нужно 1156px — колонка «Действия» (с ✎)
   уходила за край.

   Решение:
   1. Sidebar 200 → 180px. Текст вкладок влезает с огромным
      запасом (самое длинное «Объявления» ≈ 70px при font 12.5).
      .sidebar__actions (5 кнопок) сжимаем — на 180px они иначе
      не влезают (5×30 + gaps + padding = 186 > 180).
   2. Сжать колонки задач. Сумма 1156 → 1110 (−46px). Каждая
      колонка — на 5–20px, чтобы не резать текст.

   Перебивает §115/§119.9 (sidebar) и §8/§32/§119 (колонки)
   через специфичность html body #id + + позицию
   в конце файла.

   На мобиле (<1024px sidebar off-canvas, <641px карточки) не
   применяется.
   ============================================================ */

/* --- 1. Sidebar 200 → 180 --- */
@media (min-width: 1024px) {

    /* .sidebar__actions: 5 иконок-кнопок по 30px. На 180px
       нужно уложить 5×30 + 4 gap + 2 padding ≤ 180.
       Делаем 5×30 + 4×2 + 6×2 = 170. Влезает с запасом. */
    html body .sidebar__actions {
        padding: 6px 6px;
        gap: 2px;
        justify-content: center;
    }

    /* Слегка сжать nav item padding, чтобы с 180px не тесно. */
    html body .sidebar__nav .tab-btn,
    html body .sidebar__nav .tab-btn-cleanup {
        padding: 0 7px;
        gap: 7px;
    }
}

/* --- 2. Узкие колонки задач (desktop ≥641px) --- */
@media (min-width: 641px) {
    html body #tasksTableWrap .col-city {
        width: 80px;  max-width: 80px;
    }
    html body #tasksTableWrap .col-store {
        width: 90px;  max-width: 90px;
    }
    html body #tasksTableWrap .col-address {
        width: 160px; max-width: 160px;
    }
    html body #tasksTableWrap .col-supplier {
        width: 110px; max-width: 110px;
    }
    html body #tasksTableWrap .col-worker {
        width: 120px; max-width: 120px;
    }
    html body #tasksTableWrap th[data-label="Статус"],
    html body #tasksTableWrap td[data-label="Статус"] {
        width: 110px; max-width: 110px;
        min-width: 110px;
    }
    html body #tasksTableWrap .col-price {
        width: 65px;  max-width: 65px;
    }
    html body #tasksTableWrap .col-started {
        width: 60px;  max-width: 60px;
    }
    html body #tasksTableWrap .col-completed {
        width: 60px;  max-width: 60px;
    }
    html body #tasksTableWrap .col-source {
        width: 80px;  max-width: 80px;
    }
    html body #tasksTableWrap .col-comments {
        width: 65px;  max-width: 65px;
    }
    html body #tasksTableWrap .col-actions,
    html body #tasksTableWrap .col-actions-header {
        width: 110px; max-width: 110px;
    }
}

/* §K2-END */


/* ============================================================
   §L2. SIDEBAR 160 (сессия 2026-10-02 L)

   После §K2 sidebar 180px, но текст вкладок занимает ~135px —
   справа ~45px пустоты. Уходим на 160px.

   Проверка ширины:
     • nav «Поставщики»: 7+15+7+70+7 = 106 ≤ 160  (запас 54)
     • логотип:          ~148 ≤ 160                (запас 12)
     • .sidebar__actions с 5 кнопками (на вкладке Отчёты):
         5×28 + 4×1 + 6×2 = 156 ≤ 160              (запас 4)

   Требует сжатия .icon-btn-theme внутри actions с 30 до 28px,
   иначе 5 кнопок не влезут и перенесутся на вторую строку
   (§117 flex-wrap: wrap).

   На collapsed (60px) не влияет. На мобиле (<1024px) sidebar
   off-canvas — тоже не влияет.
   ============================================================ */
@media (min-width: 1024px) {

    /* Компактные actions: 5 × 28 + 4 × 1 + 12 = 156 ≤ 160. */
    html body .sidebar__actions {
        padding: 6px 4px;
        gap: 1px;
    }
    html body .sidebar__actions > .icon-btn-theme {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    html body .sidebar__actions > .icon-btn-theme svg {
        width: 15px;
        height: 15px;
    }

    /* Внутри .sidebar__nav — небольшой компенсирующий сдвиг,
       чтобы при 160px не тесно. padding-left 7px оставляем —
       активная полоска должна быть видна. */
    html body .sidebar__nav {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* §L2-END */


/* ============================================================
   §M2. SIDEBAR 145 (сессия 2026-10-02 M)

   После §L2 sidebar 160px — оставался запас. Уходим на 145.

   Проверка:
     • nav «Поставщики»: 7+15+7+70+7 = 106 ≤ 145  (запас 39)
     • логотип: max-width 115 ≤ 145−24 = 121      (запас 6)
     • .sidebar__actions с 5 кнопками:
         5×26 + 4×1 + 2×2 = 138 ≤ 145             (запас 7)

   Требует сжатия .icon-btn-theme до 26px — при 28px пять
   кнопок дают 152px и переносятся на вторую строку.

   Collapsed (60px) не тронут. На мобиле (<1024px) sidebar
   off-canvas — тоже не влияет.
   ============================================================ */
@media (min-width: 1024px) {

    /* Компактный brand — логотип должен влезть в 145 − 24 = 121. */
    html body .sidebar__brand {
        padding: 12px 12px 8px;
    }
    html body .sidebar__logo--full {
        max-width: 115px;
    }

    /* 5 кнопок по 26 + 4 gap + 2 padding×2 = 138 ≤ 145. */
    html body .sidebar__actions {
        padding: 6px 2px;
        gap: 1px;
    }
    html body .sidebar__actions > .icon-btn-theme {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
    html body .sidebar__actions > .icon-btn-theme svg {
        width: 14px;
        height: 14px;
    }

    /* Nav — небольшой компенсирующий сдвиг. */
    html body .sidebar__nav {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* §M2-END */


/* ============================================================
   §N2. МОБИЛЬНЫЕ КАРТОЧКИ ОБЪЯВЛЕНИЙ (.ann-card)

   Сессия 2026-10-02 N. До этого объявления на mobile рендерились
   через общий §19 — каждая <td> превращалась в flex-строку с
   ::before лейблом 90px, а содержимое «Кому» (длинная строка из
   эмодзи и названий) ломалось по 1–3 символа.

   Теперь — карточки как в tasks/stores/workers. Три строки:
     1. [заголовок] [статус-чип] [✎]
     2. 📅 период · 👤 автор
     3. 🎯 цели (счётчики или имя одного города/сети)

   Только mobile (≤768px). На desktop рендерится обычная таблица.
   ============================================================ */
@media (max-width: 768px) {
    .ann-mobile-holder {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ann-card {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        transition: background 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .ann-card:active { background: var(--bg-hover); }

    .ann-card__head {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .ann-card__title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ann-card__status {
        flex: 0 0 auto;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.01em;
        padding: 2px 9px;
        border-radius: 999px;
        border: 1px solid transparent;
        white-space: nowrap;
    }
    .ann-card__status--active {
        background: var(--success-subtle, rgba(61, 174, 127, 0.12));
        color: var(--success, #3dae7f);
        border-color: rgba(61, 174, 127, 0.32);
    }
    .ann-card__status--planned {
        background: var(--accent-subtle, rgba(91, 141, 239, 0.12));
        color: var(--accent, #5b8def);
        border-color: rgba(91, 141, 239, 0.32);
    }
    .ann-card__status--expired,
    .ann-card__status--off {
        background: rgba(148, 163, 184, 0.12);
        color: var(--text-muted);
        border-color: rgba(148, 163, 184, 0.22);
    }

    .ann-card__edit {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        padding: 0;
        border-radius: 8px;
        background: var(--bg-hover);
        border: 1px solid var(--border-subtle);
        color: var(--text-secondary);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
    }
    .ann-card__edit:active { transform: scale(0.95); }

    .ann-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 10px;
        font-size: 12px;
        color: var(--text-muted);
    }
    .ann-card__meta > span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .ann-card__targets {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.35;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
/* §N2-END */


/* ============================================================
   §O2. МОБИЛЬНЫЕ КАРТОЧКИ ЖУРНАЛА (.audit-card)

   Сессия 2026-10-02 O. До этого журнал на mobile рендерился
   как desktop-таблица .audit-table с 7 колонками (Время / Кто /
   Роль / Действие / Объект / IP / кнопки). На 360px всё уходило
   в горизонтальный скролл.

   Теперь — карточки. Четыре строки:
     1. время + роль-чип
     2. action badge + summary
     3. сущность (кликабельная ссылка)
     4. footer: кто + IP + [↻] + [▾]

   Только mobile (≤768px). На desktop — прежняя таблица.
   ============================================================ */
@media (max-width: 768px) {

    /* На всякий случай скрываем desktop-таблицу, если она
       осталась в DOM после смены рендера. */
    #alTable .audit-table { display: none; }

    .audit-mobile-holder {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .audit-card {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .audit-card__head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        font-size: 11.5px;
        color: var(--text-muted);
    }
    .audit-card__time {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .audit-card__role {
        flex: 0 0 auto;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.12);
        color: var(--text-muted);
        font-size: 10.5px;
        font-weight: 600;
        white-space: nowrap;
        letter-spacing: 0.01em;
    }

    .audit-card__action {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
    .audit-card__sum {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.35;
        word-break: break-word;
    }

    .audit-card__entity-row {
        font-size: 13px;
        line-height: 1.35;
        word-break: break-word;
    }
    .audit-card__entity {
        color: var(--accent);
        text-decoration: none;
        border-bottom: 1px dashed rgba(91, 141, 239, 0.45);
    }
    .audit-card__entity--plain { color: var(--text-primary); border-bottom: none; }

    .audit-card__foot {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11.5px;
        color: var(--text-muted);
        min-width: 0;
    }
    .audit-card__actor {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .audit-card__ip {
        flex: 0 0 auto;
        font-size: 10.5px;
        opacity: 0.7;
        white-space: nowrap;
    }
    .audit-card__spacer { flex: 1 1 auto; min-width: 4px; }

    .audit-card__btn-icon {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 8px;
        background: var(--bg-hover);
        border: 1px solid var(--border-subtle);
        color: var(--text-secondary);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        font-size: 0;
    }
    .audit-card__btn-icon:active { transform: scale(0.95); }
    .audit-card__btn-icon svg {
        width: 15px;
        height: 15px;
        margin: 0;
    }
    .audit-card__btn-detail svg { transition: transform 0.15s ease; }
    .audit-card__btn-detail.is-open svg { transform: rotate(180deg); }

    .audit-card__detail {
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid var(--border-subtle);
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.4;
        word-break: break-word;
    }
    .audit-card__detail[hidden] { display: none; }
    .audit-detail-pre {
        background: #0f172a;
        padding: 8px;
        border-radius: 6px;
        overflow: auto;
        font-size: 11px;
        margin-top: 4px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        line-height: 1.35;
        white-space: pre-wrap;
        word-break: break-word;
    }
    [data-theme="light"] .audit-detail-pre {
        background: #f1f5f9;
        color: #0f172a;
    }
    .audit-detail-empty { color: var(--text-muted); }
}
/* §O2-END */


/* ============================================================
   §P2. DESKTOP-ТАБЛИЦА ОБЪЯВЛЕНИЙ (.ann-table)

   Сессия 2026-10-02 P. Было 6 колонок: Заголовок / Период / Кому /
   Статус / Автор / Действия. Автор (обычно «admin») и Действия
   занимали треть ширины, а текст акции (body) не был виден.

   Стало 5 колонок:
     • Объявление — title + body первой строкой (ellipsis 220)
     • Период — компактно «25.09 — 25.09»
     • Кому — счётчики (🏙 7 · 🏪 4 · 🏢 4 · 📍 4)
     • Статус — чип из §110
     • Действия — только ✎ (50px). Автор — в title строки.

   Только desktop (≥769px). На mobile — .ann-card (сессия N).
   ============================================================ */
@media (min-width: 769px) {

    .ann-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .ann-table thead th {
        text-align: left;
        padding: 10px 12px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        background: transparent;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .ann-table .ann-th-main    { width: auto; }
    .ann-table .ann-th-period  { width: 130px; }
    .ann-table .ann-th-targets { width: 220px; }
    .ann-table .ann-th-status  { width: 130px; }
    .ann-table .ann-th-actions { width: 50px; }

    .ann-table tbody td {
        padding: 12px;
        font-size: 13px;
        vertical-align: top;
        border-bottom: 1px solid var(--border-subtle);
        color: var(--text-secondary);
        overflow: hidden;
    }

    .ann-table tbody tr {
        cursor: pointer;
        transition: background 0.15s ease;
    }
    .ann-table tbody tr:hover {
        background: var(--bg-hover);
    }
    .ann-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Колонка «Объявление» */
    .ann-table .ann-td-main { white-space: normal; }
    .ann-title {
        font-weight: 700;
        font-size: 13.5px;
        color: var(--text-primary);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ann-body-preview {
        margin-top: 3px;
        font-size: 12.5px;
        color: var(--text-muted);
        line-height: 1.35;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Колонка «Период» */
    .ann-table .ann-td-period {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        font-size: 12.5px;
    }

    /* Колонка «Кому» */
    .ann-table .ann-td-targets {
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Колонка «Статус» — чип уже стилизован через §110 .chip */
    .ann-table .ann-td-status { white-space: nowrap; }

    /* Колонка «Действия» */
    .ann-table .ann-td-actions {
        text-align: right;
        white-space: nowrap;
    }
    .ann-table .ann-td-actions .edit-store-btn {
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
    }
    .ann-table .ann-td-actions .edit-store-btn svg {
        width: 15px;
        height: 15px;
        margin: 0;
    }
}

/* §P2-END */


/* ============================================================
   §Q2. ПЕРИОД В ОБЪЯВЛЕНИЯХ — ДВЕ СТРОКИ (сессия 2026-10-02 Q)

   После §P2 колонка «Период» = 130px и одна строка
   «25.09.2026 — 25.09.2026» обрезалась до «25.09.2026 — 2…».

   Решение — две строки с префиксами «с / по»:
     с  25.09.2026
     по 25.09.2026

   Год оставляем полностью — «с 25.09» без года читается
   двусмысленно, особенно если объявление многолетнее.
   ============================================================ */
@media (min-width: 769px) {

    .ann-table .ann-td-period {
        white-space: normal;
        font-variant-numeric: tabular-nums;
        font-size: 12px;
        line-height: 1.45;
        color: var(--text-secondary);
    }

    .ann-table .ann-td-period .ann-period-line {
        display: block;
        white-space: nowrap;
    }
    .ann-table .ann-td-period .ann-period-line + .ann-period-line {
        color: var(--text-muted);
    }
}

/* §Q2-END */


/* ============================================================
   §R2. МОДАЛКА ОБЪЯВЛЕНИЙ — КНОПКА ✖ + OVERFLOW FIX
   (сессия 2026-10-02 R)

   Проблемы:
     1. Нет кнопки ✖ в углу — только «Отмена» внизу.
     2. `.modal-content { overflow-y: auto; }` (§13) обрезает
        абсолютно позиционированные dropdown'ы .multi-select
        по нижней границе. У полей Сети / Поставщики / Магазины
        (близко к низу) dropdown обрезается. Клик по обрезанной
        части попадает в .modal-overlay → закрывает модалку
        целиком (два handler'а в announcements.js срабатывают
        одновременно).

   Решение:
     • position: relative для .modal-content — чтобы кнопка
       .tdc-close легла в угол.
     • overflow: visible + max-height: none — dropdown'ы больше
       не обрезаются. Контент модалки ~640px, при 900px экране
       90vh = 810px — умещается без скролла.

   Компромисс для низких экранов:
     На max-height ≤ 700px (ноутбук в ландшафте, планшет) контент
     может не влезать — возвращаем overflow-y: auto и ограничиваем
     max-height dropdown'а до 150px. Обрезка в этом случае меньше.
   ============================================================ */

#editAnnouncementModal .modal-content {
    position: relative;
    overflow: visible;
    max-height: none;
}

@media (max-height: 700px) {
    #editAnnouncementModal .modal-content {
        overflow-y: auto;
        max-height: 90vh;
    }
    #editAnnouncementModal .multi-select .dropdown {
        max-height: 150px;
    }
}

/* §R2-END */


/* ============================================================
   §S2. МОДАЛКА ОБЪЯВЛЕНИЙ — СКРОЛЛ + ЗАМЕТНАЯ ✖ + FLIP-DROPDOWN
   (сессия 2026-10-02 S)

   После §R2:
     • сняли overflow / max-height — модалка выше экрана на
       низких мониторах уезжала за границы, не было скролла;
     • кнопка ✖ имела прозрачный фон из §11 — не видна на
       тёмном фоне modal-content;
     • dropdown'ы при overflow-y: auto обрезаются по нижней
       границе — клик по обрезанной части закрывал модалку.

   §S2 отменяет §R2 и добавляет:
     1. overflow-y: auto; max-height: 90vh — модалка скроллится.
     2. Кнопку ✖ с фоном bg-hover + рамкой + радиусом 8px.
     3. Класс .multi-select .dropdown.drop-up — раскрытие вверх
        (JS в announcements.js решает, когда ставить).
   ============================================================ */

/* 1. Возвращаем скролл (перебивает §R2) */
html body #editAnnouncementModal .modal-content {
    overflow-y: auto;
    max-height: 90vh;
    position: relative;
}

/* 2. Кнопка ✖ — заметная (перебивает .tdc-close из §11) */
html body #editAnnouncementModal .modal-content > .tdc-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 120ms ease, color 120ms ease;
}
html body #editAnnouncementModal .modal-content > .tdc-close:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}
html body #editAnnouncementModal .modal-content > .tdc-close svg {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* 3. Dropdown — раскрытие вверх, если места снизу мало */
.multi-select .dropdown.drop-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 2px;
}

/* §S2-END */


/* ============================================================
   §T2. КНОПКА ✖ ПРИЛИПАЕТ К STICKY-ШАПКЕ МОДАЛКИ ОБЪЯВЛЕНИЙ
   (сессия 2026-10-02 T)

   Проблема: §S2 ставила ✖ absolute внутри .modal-content, но
   сам .modal-content скроллится (overflow-y: auto), поэтому
   абсолютный потомок уезжает вместе с контентом.

   Решение: HTML-патч перенёс кнопку внутрь <h2>, а h2 уже sticky
   из §113 (position: sticky; top: -20px). Теперь кнопка едет
   вместе с sticky-шапкой и всегда видна.

   Плюс §S2-селектор `> .tdc-close` (прямой потомок .modal-content)
   больше не матчится — кнопка теперь внучка h2. Стили §T2 ниже
   задают всё заново.
   ============================================================ */

/* Место под кнопку справа в h2 (§113 давал padding-right: 32px). */
html body #editAnnouncementModal .modal-content > h2 {
    padding-right: 56px;
}

/* Кнопка внутри h2 — absolute относительно sticky-шапки. */
html body #editAnnouncementModal .modal-content > h2 > .tdc-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    background: var(--bg-hover, #2d3748);
    border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.08));
    color: var(--text-secondary, #cbd5e1);
    font-size: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: background 120ms ease, color 120ms ease;
    box-sizing: border-box;
    font-family: inherit;
}
html body #editAnnouncementModal .modal-content > h2 > .tdc-close:hover {
    background: var(--bg-input, #334155);
    color: var(--text-primary, #f8fafc);
}
html body #editAnnouncementModal .modal-content > h2 > .tdc-close svg {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* §U2: страховка удалена — она могла скрывать кнопку, если
   браузер отдал старую версию HTML из кэша. Кнопка видна
   всегда, вне зависимости от её позиции в DOM. */
html body #editAnnouncementModal .modal-content > .tdc-close {
    display: inline-flex;
}

/* ============================================================
   §V2. КНОПКА ✖ В МОДАЛКЕ ОБЪЯВЛЕНИЙ — ФИНАЛЬНЫЙ ВАРИАНТ
   (сессия 2026-10-02 V)

   Заменяет §T2 и §U2. Стили — только через #annCloseBtn,
   никаких fallback с display: none.

   Кнопка живёт внутри <h2 id="announcementModalTitle">, который
   sticky из §113. Значит при скролле модалки кнопка едет вместе
   с шапкой и всегда видна.

   JS-подстраховка в openEditModal() гарантирует: если кнопки нет
   в HTML — она будет создана; если она не внутри h2 — будет
   перенесена.
   ============================================================ */

html body #editAnnouncementModal .modal-content > h2 {
    padding-right: 56px;
}

html body #editAnnouncementModal #annCloseBtn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    background: #2d3748;
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0;
    transition: background 120ms ease, color 120ms ease;
    visibility: visible;
    opacity: 1;
}
html body #editAnnouncementModal #annCloseBtn:hover {
    background: #475569;
    color: #f8fafc;
}
html body #editAnnouncementModal #annCloseBtn svg {
    width: 16px;
    height: 16px;
    margin: 0;
    display: block;
}

/* §V2-END */


/* ============================================================
   §Y2. МОБИЛЬНАЯ МАТРИЦА РАЗРЕШЕНИЙ — ТОЛЬКО ИКОНКИ-ТУМБЛЕРЫ
   (сессия 2026-10-02 Y)

   Было: на mobile .perm-action = плашка 44px с фоном, внутри
   чекбокс (16×16) + SVG-иконка. Два визуальных сигнала (галочка
   и иконка) дублировали друг друга, чекбокс добавлял шум.

   Стало: только иконка 20×20.
     • Покой        → иконка --text-muted, плашка без фона
     • Включено     → иконка --accent + тихий фон --accent-subtle
     • Тап (:active)→ scale(0.92) + серый фон (тактильный отзыв)

   Чекбокс остаётся в DOM — визуально скрыт, клик по label его
   триггерит. Состояние читается через :has(input:checked).

   Только mobile (≤640px). На desktop — прежний toggle-pill (§39).
   ============================================================ */
@media (max-width: 640px) {

    /* 1. Скрываем нативный чекбокс. position:absolute + clip-path
       оставляют его доступным для screen-reader и клика по label. */
    html body #managerPermissionsContainer .perm-action > input[type="checkbox"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: 0;
        opacity: 0;
        pointer-events: none;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
    }

    /* 2. Плашка: квадрат 40×40 без фона. */
    html body #managerPermissionsContainer .perm-action {
        position: relative;
        width: 40px;
        height: 40px;
        min-width: 0;
        padding: 0;
        margin: 0;
        gap: 0;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease,
                    border-color 0.15s ease,
                    transform 0.1s ease;
    }

    /* 3. Тактильный отзыв при нажатии. */
    html body #managerPermissionsContainer .perm-action:active {
        transform: scale(0.92);
        background: rgba(148, 163, 184, 0.10);
    }

    /* 4. Иконка: серая в покое, 20×20. */
    html body #managerPermissionsContainer .perm-action-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        color: var(--text-muted, #94a3b8);
        transition: color 0.15s ease;
        pointer-events: none;
    }
    html body #managerPermissionsContainer .perm-action-icon > svg {
        width: 20px;
        height: 20px;
        display: block;
        margin: 0;
        pointer-events: none;
    }

    /* 5. Включено: акцентная иконка + тихий фон. */
    html body #managerPermissionsContainer .perm-action:has(input[type="checkbox"]:checked) {
        background: var(--accent-subtle, rgba(91, 141, 239, 0.12));
        border-color: rgba(91, 141, 239, 0.32);
    }
    html body #managerPermissionsContainer .perm-action:has(input[type="checkbox"]:checked) .perm-action-icon {
        color: var(--accent, #5b8def);
    }

    /* 6. Grid: колонки 40px, лейбл в строку с иконками. */
    html body #managerPermissionsContainer {
        grid-template-columns: max-content repeat(4, 40px);
        gap: 4px 6px;
    }
    html body #managerPermissionsContainer .perm-resource-label {
        font-size: 12px;
        padding: 0 10px 0 0;
        height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;
    }

    /* 7. Light-тема: фон и бордер при включении. */
    html[data-theme="light"] body #managerPermissionsContainer .perm-action:has(input[type="checkbox"]:checked) {
        background: rgba(37, 99, 235, 0.08);
        border-color: rgba(37, 99, 235, 0.24);
    }
    html[data-theme="light"] body #managerPermissionsContainer .perm-action:has(input[type="checkbox"]:checked) .perm-action-icon {
        color: #2563eb;
    }
}
/* §Y2-END */


/* ============================================================
   §Z2. ДЕСКТОПНАЯ МАТРИЦА РАЗРЕШЕНИЙ — ТОЛЬКО ИКОНКИ-ТУМБЛЕРЫ
   (сессия 2026-10-02 Z)

   Единый язык с мобильным §Y2. Было: toggle-pill из §39 —
   кастомный чекбокс 34×20 с бегунком. Стало: иконка-тумблер.

     • Покой        → иконка --text-muted, плашка без фона
     • Hover        → тихий серый фон
     • Включено     → иконка --accent + фон --accent-subtle
     • Тап (:active)→ scale(0.94)

   Чекбокс остаётся в DOM (визуально скрыт) — форма читает его
   как прежде. Состояние — через :has(input:checked).

   Только desktop (≥641px). Mobile (§Y2) не тронут.
   ============================================================ */
@media (min-width: 641px) {

    /* 1. Скрываем нативный чекбокс. Оставляем для формы и a11y. */
    html body #managerPermissionsContainer .perm-action > input[type="checkbox"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: 0;
        opacity: 0;
        pointer-events: none;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    /* Страховка: если §39-стили всё ещё применяются к чекбоксу
       через псевдоэлементы — они не отрисуются. */
    html body #managerPermissionsContainer .perm-action > input[type="checkbox"]::before,
    html body #managerPermissionsContainer .perm-action > input[type="checkbox"]::after {
        content: none;
        display: none;
    }

    /* 2. Плашка: квадрат 36×36 без фона. */
    html body #managerPermissionsContainer .perm-action {
        position: relative;
        width: 36px;
        height: 36px;
        min-width: 0;
        padding: 0;
        margin: 0;
        gap: 0;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.15s ease,
                    border-color 0.15s ease,
                    transform 0.1s ease;
    }

    /* 3. Hover — тихий серый фон. */
    html body #managerPermissionsContainer .perm-action:hover {
        background: rgba(148, 163, 184, 0.10);
    }

    /* 4. Active — лёгкий scale. */
    html body #managerPermissionsContainer .perm-action:active {
        transform: scale(0.94);
    }

    /* 5. Иконка: 18×18, серая в покое. */
    html body #managerPermissionsContainer .perm-action-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        color: var(--text-muted, #94a3b8);
        transition: color 0.15s ease;
        pointer-events: none;
    }
    html body #managerPermissionsContainer .perm-action-icon > svg {
        width: 18px;
        height: 18px;
        display: block;
        margin: 0;
        pointer-events: none;
    }

    /* 6. Включено — акцент + тихий фон. */
    html body #managerPermissionsContainer .perm-action:has(input[type="checkbox"]:checked) {
        background: var(--accent-subtle, rgba(91, 141, 239, 0.12));
        border-color: rgba(91, 141, 239, 0.28);
    }
    html body #managerPermissionsContainer .perm-action:has(input[type="checkbox"]:checked) .perm-action-icon {
        color: var(--accent, #5b8def);
    }
    /* Hover включённого — чуть ярче фон. */
    html body #managerPermissionsContainer .perm-action:has(input[type="checkbox"]:checked):hover {
        background: rgba(91, 141, 239, 0.18);
    }

    /* 7. Grid: 4 колонки по 36px + лейбл слева. */
    html body #managerPermissionsContainer {
        grid-template-columns: 130px repeat(4, 36px);
        gap: 4px 10px;
        align-items: center;
    }

    /* 8. Light-тема. */
    html[data-theme="light"] body #managerPermissionsContainer .perm-action:hover {
        background: rgba(15, 23, 42, 0.06);
    }
    html[data-theme="light"] body #managerPermissionsContainer .perm-action:has(input[type="checkbox"]:checked) {
        background: rgba(37, 99, 235, 0.08);
        border-color: rgba(37, 99, 235, 0.22);
    }
    html[data-theme="light"] body #managerPermissionsContainer .perm-action:has(input[type="checkbox"]:checked):hover {
        background: rgba(37, 99, 235, 0.14);
    }
    html[data-theme="light"] body #managerPermissionsContainer .perm-action:has(input[type="checkbox"]:checked) .perm-action-icon {
        color: #2563eb;
    }
}
/* §Z2-END */


/* ============================================================
   §AA2. МАТРИЦА РАЗРЕШЕНИЙ — ЧИТАЕМЫЕ ЗАГОЛОВКИ СТОЛБЦОВ
   (сессия 2026-10-02 AA)

   После §Z2 колонки стали 36px (по размеру плашки), и заголовки
   «ПРОСМОТР / СОЗДАТЬ / РЕДАКТИРОВАТЬ / УДАЛИТЬ» обрезались до
   «ПР… / СОЗ… / РЕД… / УДА…».

   Расширяем колонки и растягиваем плашку с иконкой.

   Проверка ширины (модалка 640 − padding 48 = 592):
     110 (лейбл) + 4×88 (колонки) + 3×8 (gap) = 486 ≤ 592  ✓

   Только desktop (≥641px). Mobile (§Y2) не тронут.
   ============================================================ */
@media (min-width: 641px) {

    /* 1. Grid: колонки 88px под заголовки. */
    html body #managerPermissionsContainer {
        grid-template-columns: 110px repeat(4, 88px);
        gap: 4px 8px;
        align-items: center;
    }

    /* 2. Лейбл ресурса — компактнее. */
    html body #managerPermissionsContainer .perm-resource-label {
        font-size: 13px;
        padding: 6px 0;
    }

    /* 3. Заголовки столбцов — читаются целиком. */
    html body #managerPermissionsContainer .perm-header {
        font-size: 10px;
        letter-spacing: 0.3px;
        text-align: center;
        padding: 0 2px 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 4. Плашка .perm-action — 44×44, заполняет колонку. */
    html body #managerPermissionsContainer .perm-action {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        justify-self: center;
    }

    /* 5. Иконка внутри — 22×22. */
    html body #managerPermissionsContainer .perm-action-icon {
        width: 22px;
        height: 22px;
    }
    html body #managerPermissionsContainer .perm-action-icon > svg {
        width: 22px;
        height: 22px;
    }
}
/* §AA2-END */

} /* /@layer legacy */


/* ============================================================
   §AB2. MODERN LAYER — база для будущих правок.

   Правила здесь перебивают legacy БЕЗ !important.
   Порядок: modern > legacy.

   Как добавлять новое:
     1. Правило писать внутри @layer modern { ... }.
     2. Для override legacy — тот же селектор, что в legacy.
        Специфичность не важна — слой решает.
     3. !important НЕ использовать. Если что-то не перебивается,
        значит оно тоже !important в legacy или unlayered.
   ============================================================ */
@layer modern {

  /* ─── 1. color-scheme — нативные контролы под тему приложения ───
     Привязан к [data-theme], не к prefers-color-scheme, чтобы
     тёмная тема в браузере со светлой ОС не давала светлые скроллбары. */
  [data-theme="dark"]  { color-scheme: dark;  }
  [data-theme="light"] { color-scheme: light; }

  /* ─── 2. Fluid type scale ───
     Плавные размеры 320..1200px. Замена парам
     font-size + @media (max-width: 640px) { font-size: ... }.
     Диапазоны подобраны 1:1 под текущие значения §105/§113. */
  :root {
    --fs-xs: clamp(10px, 0.20vw + 9.4px, 11px);
    --fs-sm: clamp(11px, 0.20vw + 10.4px, 12.5px);
    --fs-md: clamp(13px, 0.20vw + 12.4px, 14px);
    --fs-lg: clamp(14px, 0.20vw + 13.2px, 15px);
    --fs-xl: clamp(15px, 0.40vw + 14px, 17px);
  }

  /* ─── 3. Fluid heading модалок ───
     Заменяет .modal-content > h2 font-size (§105)
     + @media (max-width: 640px) font-size (§113).
     Диапазон тот же: 14px на mobile → 15px на desktop. */
  .modal-content > h2 {
    font-size: var(--fs-lg);
  }

  /* ─── 4. Utility-классы ───
     Задел для будущих HTML-патчей. Позволяют заменить инлайн-стили
     типа style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis". */
  .u-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .u-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
  }
  .u-text-primary   { color: var(--text-primary); }
  .u-text-secondary { color: var(--text-secondary); }
  .u-text-muted     { color: var(--text-muted); }
  .u-flex           { display: flex; }
  .u-items-center   { align-items: center; }

  /* ============================================================
     §AD2. APP-CONTENT — консолидация layout + padding.

     Заменяет 12 legacy-правил .app-content с !important:
       §119    (mobile 1023px)  padding: 0 6px 6px
       §119    (mobile 640px)   padding: 0 4px 6px
       §119.2  (mobile 1023px)  padding: 0 6px 8px
       §119.2  (mobile 640px)   padding: 0 4px 8px
       §122    (mobile 640px)   padding: 10px 8px 14px   (без !imp)
       §133    (desktop)        padding-bottom: 4px
       §134    (desktop)        padding: 8px 10px 0
       §135    (desktop)        display:flex; …; padding: 8px 10px 0
       §136    (whole block)    padding-bottom: 8px
       §137    (desktop)        overflow:hidden; height:100%
       §138    (desktop)        padding-top: 6px
       §140    (desktop)        padding-top: 2px

     Эффективные значения (сумма всех legacy-патчей):
       ≤640px:      padding: 0 4px 8px
       641–1023px:  padding: 0 6px 8px
       ≥1024px:     padding: 2px 10px 8px
                    + display: flex; flex-direction: column;
                      min-height: 0
                      (без overflow:hidden — скролл идёт в .table-wrap)

     !important не используется: @layer modern выше legacy для
     normal-деклараций, а legacy !important-правила удалены.
     ============================================================ */
  .app-content {
    padding: 0 4px 8px;
  }

  @media (min-width: 641px) {
    .app-content {
      padding: 0 6px 8px;
    }
  }

  @media (min-width: 1024px) {
    .app-content {
      display: flex;
      flex-direction: column;
      padding: 2px 10px 8px;
      min-height: 0;
    }
  }

  /* ============================================================
     §AE2. SIDEBAR + APP-SHELL — консолидация ширины.

     Заменяет 12 legacy-правил с !important:
       §K2 (180px) — 4 правила
       §L2 (160px) — 4 правила
       §M2 (145px) — 4 правила

     Каскад в legacy до V3 был:
       .app-shell: 240px (§115) → 200px (§119.9) → 180 !imp
                   → 160 !imp → 145 !imp
       .sidebar:   тоже самое.
     Эффективные значения: expanded 145px, collapsed 60px.

     Mobile ≤1023px не тронут: §115.2 { .sidebar { width: 260px } }
     это off-canvas drawer, отдельная сущность.

     §115.1 (240px) и §119.9 (200px) остаются в legacy как
     normal-декларации — этот блок их перебивает без !important.
     ============================================================ */
  @media (min-width: 1024px) {
    .app-shell {
      grid-template-columns: 145px 1fr;
    }
    .app-shell:has(.sidebar.is-collapsed) {
      grid-template-columns: 60px 1fr;
    }
    .sidebar {
      width: 145px;
    }
    .sidebar.is-collapsed {
      width: 60px;
    }
  }

  /* ─── DEDUP LOG (см. PROJECT.md → TODO → ADMIN_CSS_DEDUP) ───
     V1 (2026-10-03): удалены dead-блоки §74, §81, §130 из legacy.
     V2 (2026-10-03): .app-content — 12 legacy-правил с !important
                     (§119×2, §119.2×2, §122, §133–§140) удалены;
                     заменены блоком §AD2 выше.
     V3 (2026-10-03): .sidebar width / .app-shell grid — 12 legacy-
                     правил с !important (§K2/§L2/§M2) удалены;
                     заменены блоком §AE2 выше.
     V4 (план):  .plans-head — 8 секций → 2 container-queries. */

  /* ─── DEDUP LOG — дополняем ─── */
  /* ============================================================
     §MOBILE_REDESIGN_V2c — финальные штрихи.

     1. Скрыть .tmc-source («📅 17 План») в meta-строке карточки.
        Это чип источника задачи (по PROJECT.md: .col-source → mobile
        как .tmc-source). На карточке он не несёт информации —
        дублирует статус, который уже читается по левой полосе.
     2. Приглушить эмодзи .icon в метриках (💰 / ⏰) — opacity 0.35
        + grayscale. Радикально уменьшает визуальный шум.
     3. Разрядка между метриками — 24px.
     4. «Гомель» под адресом — 11px, opacity 0.7.
     5. Разделитель под шапкой — бледнее (border-subtle × 0.5).

     Только mobile (≤640px). Только modern. !important для победы
     над legacy-!important.
     ============================================================ */

  @media (max-width: 640px) {

    /* 1. Скрыть чип «📅 17 План» (источник задачи) в meta */
    html body .task-group-mobile .tmc-source,
    html body .task-group-mobile .tmc-meta > span:not(.tmc-worker),
    html body .task-group-mobile .tmc-meta > div:not(.tmc-worker) {
      display: none !important;
    }

    /* 2. Эмодзи в метриках — приглушить до фонового уровня */
    html body .task-group-mobile .tmc-sup-metric .icon,
    html body .store-group-mobile .smc-sup-metric .icon,
    html body .plan-group-mobile .pmc-sup-metric .icon {
      opacity: 0.35 !important;
      filter: grayscale(1) !important;
      font-size: 10px !important;
    }

    /* 3. Метрики — разнести шире, чтобы «дышали» */
    html body .task-group-mobile .tmc-sup-left,
    html body .task-group-mobile .tmc-sup-right {
      gap: 24px !important;
      align-items: flex-start !important;
    }
    html body .task-group-mobile .tmc-sup-metric {
      gap: 2px !important;
    }

    /* 4. «Гомель» под адресом — мельче и тусклее */
    html body .task-group-mobile .tmc-city,
    html body .store-group-mobile .smc-city,
    html body .plan-group-mobile .pmc-city {
      font-size: 11px !important;
      opacity: 0.7 !important;
      font-weight: 400 !important;
    }

    /* 5. Разделитель под шапкой карточки — бледнее */
    html body .task-group-mobile .tmc-top,
    html body .store-group-mobile .smc-top {
      border-bottom-color: rgba(148, 163, 184, 0.06) !important;
    }
    [data-theme="light"] html body .task-group-mobile .tmc-top,
    [data-theme="light"] html body .store-group-mobile .smc-top {
      border-bottom-color: rgba(15, 23, 42, 0.05) !important;
    }

  }

  /* ─── DEDUP LOG — дополняем ─── */
  /* ============================================================
     §MOBILE_REDESIGN_V3 — сжатие карточек + возврат статуса.

     Проблемы V2/V2c:
       • tmc-top = 3 строки (имя, адрес, город) — раздувает;
       • разделитель под tmc-top + margin 10px — большой разрыв;
       • tmc-source скрыт — статус задачи не виден;
       • метрики — иконка над числом = 2 строки;
       • tmc-sup с padding 6 + margin 8 — тоже просторно.

     Решения:
       • tmc-top → grid 2×2 (имя/адрес-город), без разделителя;
       • tmc-source → компактный chip справа в meta;
       • tmc-sup-metric → иконка+число в одну строку;
       • сжатие padding'ов и margin'ов.

     CSS-only, mobile (≤640px), modern + !important.
     ============================================================ */

  @media (max-width: 640px) {

    /* ─── 1. Шапка карточки: имя сверху, адрес+город снизу ─── */

    html body .task-group-mobile .tmc-top,
    html body .store-group-mobile .smc-top {
      display: grid !important;
      grid-template-columns: 1fr auto !important;
      grid-template-areas:
        "name name"
        "addr city" !important;
      column-gap: 12px !important;
      row-gap: 2px !important;
      align-items: baseline !important;
      padding: 0 0 6px 0 !important;
      margin: 0 0 8px 0 !important;
      border-bottom: none !important;
    }
    html body .task-group-mobile .tmc-name,
    html body .store-group-mobile .smc-name {
      grid-area: name !important;
      font-size: 16px !important;
      line-height: 1.2 !important;
    }
    html body .task-group-mobile .tmc-addr-inline,
    html body .store-group-mobile .smc-addr-inline {
      grid-area: addr !important;
    }
    html body .task-group-mobile .tmc-city,
    html body .store-group-mobile .smc-city {
      grid-area: city !important;
      text-align: right !important;
      align-self: end !important;
    }

    /* ─── 2. Meta-строка: компактнее, tmc-source как chip ─── */

    html body .task-group-mobile .tmc-meta {
      margin: 0 0 8px 0 !important;
      padding: 0 !important;
      gap: 4px 8px !important;
      align-items: center !important;
    }
    html body .task-group-mobile .tmc-worker {
      font-size: 12px !important;
    }

    /* Возвращаем tmc-source как компактный chip в правом углу meta.
       Перебивает §MOBILE_REDESIGN_V2c (там было display: none). */
    html body .task-group-mobile .tmc-meta > .tmc-source,
    html body .task-group-mobile .tmc-meta > span.tmc-source,
    html body .task-group-mobile .tmc-meta > div.tmc-source {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-left: auto !important;
      padding: 2px 9px !important;
      background: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      border-radius: 999px !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      line-height: 1.4 !important;
      color: var(--text-muted) !important;
      white-space: nowrap !important;
    }
    [data-theme="light"] html body .task-group-mobile .tmc-meta > .tmc-source {
      background: var(--bg-hover) !important;
      border-color: var(--border-subtle) !important;
      color: var(--text-muted) !important;
    }

    /* ─── 3. Поставщик — компактнее ─── */

    html body .task-group-mobile .tmc-sup,
    html body .store-group-mobile .smc-sup,
    html body .plan-group-mobile .pmc-sup {
      padding: 4px 0 4px 10px !important;
      margin: 0 0 4px 0 !important;
      gap: 4px !important;
    }
    html body .task-group-mobile .tmc-sup:last-child {
      margin-bottom: 0 !important;
    }
    html body .task-group-mobile .tmc-sup-name {
      font-size: 13px !important;
      line-height: 1.3 !important;
    }
    html body .task-group-mobile .tmc-suppliers {
      gap: 0 !important;
      padding: 0 !important;
    }

    /* ─── 4. Метрики — иконка и число в одну строку ─── */

    html body .task-group-mobile .tmc-sup-left,
    html body .task-group-mobile .tmc-sup-right {
      gap: 16px !important;
      align-items: center !important;
    }
    html body .task-group-mobile .tmc-sup-metric {
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 5px !important;
      padding: 0 !important;
    }
    html body .task-group-mobile .tmc-sup-metric .icon {
      order: 0 !important;
      margin: 0 !important;
      font-size: 11px !important;
      opacity: 0.4 !important;
      filter: grayscale(1) !important;
    }
    html body .task-group-mobile .tmc-sup-metric .val {
      font-size: 14px !important;
      font-weight: 600 !important;
      line-height: 1.2 !important;
    }

  }

  /* ─── DEDUP LOG — дополняем ─── */
  /* ============================================================
     §MOBILE_REDESIGN_V4 — компактная карточка + правильный статус.

     Решения:
       1. tmc-top → одна строка: «Имя · Адрес · Город».
          Экономия ~30px на карточке.
       2. tmc-source (📅 План) — снова скрыт. Это не статус, это
          источник задачи (плановая/ручная/разовая). Дублирует
          саму суть — «задача пришла из плана».
       3. tmc-status — реальный статус («Начало / В работе /
          Завершено / Не сделано») — вернулся компактным чипом
          в meta-строке (справа от сотрудника).
       4. tmc-sup-metric — иконка и число в одну строку (уже было
          в V3, дополнительно уплотняем gap).
       5. Общий padding карточки — 10px вместо 12.

     Итог: ~180px → ~100px на карточку.
     CSS-only, mobile (≤640px), modern + !important.
     ============================================================ */

  @media (max-width: 640px) {

    /* ─── 1. Компактная шапка: одна строка ─── */

    html body .task-group-mobile .tmc-top,
    html body .store-group-mobile .smc-top {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: baseline !important;
      gap: 0 !important;
      padding: 0 0 6px 0 !important;
      margin: 0 0 6px 0 !important;
      border-bottom: 1px solid var(--border-subtle) !important;
      min-width: 0 !important;
    }

    html body .task-group-mobile .tmc-name,
    html body .store-group-mobile .smc-name {
      font-size: 15px !important;
      line-height: 1.2 !important;
      font-weight: 700 !important;
      flex: 0 1 auto !important;
      min-width: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      letter-spacing: -0.01em !important;
    }

    /* Разделитель «·» перед адресом через ::before */
    html body .task-group-mobile .tmc-addr-inline::before,
    html body .store-group-mobile .smc-addr-inline::before {
      content: '·' !important;
      display: inline-block !important;
      margin: 0 8px 0 6px !important;
      color: var(--text-muted) !important;
      font-weight: 400 !important;
      opacity: 0.6 !important;
    }

    html body .task-group-mobile .tmc-addr-inline,
    html body .store-group-mobile .smc-addr-inline {
      flex: 0 1 auto !important;
      min-width: 0 !important;
      font-size: 13px !important;
      font-weight: 400 !important;
      color: var(--text-muted) !important;
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-align: left !important;
    }

    html body .task-group-mobile .tmc-city,
    html body .store-group-mobile .smc-city {
      flex: 0 1 auto !important;
      min-width: 0 !important;
      font-size: 12px !important;
      font-weight: 400 !important;
      color: var(--text-muted) !important;
      opacity: 0.75 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      margin-left: 8px !important;
      align-self: baseline !important;
    }
    html body .task-group-mobile .tmc-city::before {
      content: '·' !important;
      margin-right: 8px !important;
      opacity: 0.6 !important;
    }

    /* ─── 2. Скрыть .tmc-source (📅 План) — это не статус ─── */

    html body .task-group-mobile .tmc-meta > .tmc-source,
    html body .task-group-mobile .tmc-meta > span.tmc-source,
    html body .task-group-mobile .tmc-meta > div.tmc-source {
      display: none !important;
    }

    /* ─── 3. Meta-строка: сотрудник слева + статус-чип справа ─── */

    html body .task-group-mobile .tmc-meta {
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 0 !important;
      margin: 0 0 6px 0 !important;
      min-width: 0 !important;
    }

    html body .task-group-mobile .tmc-worker {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      font-size: 12px !important;
      color: var(--text-secondary) !important;
    }

    /* Реальный статус — компактный чип справа.
       Элемент .tmc-status внутри .tmc-sup. Раньше был display: none. */
    html body .task-group-mobile .tmc-status {
      display: inline-flex !important;
      align-items: center !important;
      flex: 0 0 auto !important;
      padding: 2px 9px !important;
      margin-left: auto !important;
      border-radius: 999px !important;
      background: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      line-height: 1.4 !important;
      color: var(--text-muted) !important;
      white-space: nowrap !important;
    }

    /* Цветные варианты по статусу (совпадение с §124, но компактнее) */
    html body .task-group-mobile .tmc-sup.task-started   .tmc-status,
    html body .task-group-mobile .tmc-sup.task-planned   .tmc-status {
      background: var(--accent-subtle) !important;
      border-color: rgba(91, 141, 239, 0.32) !important;
      color: var(--accent) !important;
    }
    html body .task-group-mobile .tmc-sup.task-redo .tmc-status {
      background: var(--warning-subtle) !important;
      border-color: rgba(212, 160, 74, 0.34) !important;
      color: var(--warning) !important;
    }
    html body .task-group-mobile .tmc-sup.task-completed .tmc-status {
      background: var(--success-subtle) !important;
      border-color: rgba(61, 174, 127, 0.34) !important;
      color: var(--success) !important;
    }
    html body .task-group-mobile .tmc-sup.task-rejected .tmc-status,
    html body .task-group-mobile .tmc-sup.task-cancelled .tmc-status {
      background: var(--danger-subtle) !important;
      border-color: rgba(221, 100, 98, 0.34) !important;
      color: var(--danger) !important;
    }
    html body .task-group-mobile .tmc-sup.task-moved .tmc-status,
    html body .task-group-mobile .tmc-sup.task-not-done .tmc-status {
      background: rgba(148, 163, 184, 0.12) !important;
      border-color: rgba(148, 163, 184, 0.22) !important;
      color: var(--text-muted) !important;
    }

    /* ─── 4. Поставщик — компактнее ─── */

    html body .task-group-mobile .tmc-sup,
    html body .store-group-mobile .smc-sup,
    html body .plan-group-mobile .pmc-sup {
      padding: 3px 0 3px 10px !important;
      margin: 0 0 3px 0 !important;
      gap: 2px !important;
    }
    html body .task-group-mobile .tmc-sup-name,
    html body .store-group-mobile .smc-sup-name {
      font-size: 12.5px !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
    }
    html body .task-group-mobile .tmc-suppliers {
      gap: 0 !important;
      padding: 0 !important;
      border-top: none !important;
    }

    /* ─── 5. Метрики — компактнее ─── */

    html body .task-group-mobile .tmc-sup-left,
    html body .task-group-mobile .tmc-sup-right {
      gap: 14px !important;
      align-items: center !important;
    }
    html body .task-group-mobile .tmc-sup-metric {
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 4px !important;
      padding: 0 !important;
    }
    html body .task-group-mobile .tmc-sup-metric .icon {
      order: 0 !important;
      margin: 0 !important;
      font-size: 11px !important;
      opacity: 0.4 !important;
      filter: grayscale(1) !important;
      line-height: 1 !important;
    }
    html body .task-group-mobile .tmc-sup-metric .val {
      font-size: 13px !important;
      font-weight: 600 !important;
      line-height: 1.2 !important;
      color: var(--text-primary) !important;
    }

    /* ─── 6. Общая высота карточки — сжатие padding ─── */

    html body .task-group-mobile,
    html body .store-group-mobile,
    html body .plan-group-mobile {
      padding: 10px 12px 10px 16px !important;
    }

  }

  /* ─── DEDUP LOG — дополняем ─── */
  /* ============================================================
     §MOBILE_REDESIGN_V5 — имя · адрес · город в одну строку.

     V4 ставил flex-wrap: wrap — город переносился на 2-ю строку.
     V5: nowrap + ellipsis на адресе. Убран лишний '·' перед адресом
     (он должен быть только между адресом и городом).
     ============================================================ */

  @media (max-width: 640px) {

    html body .task-group-mobile .tmc-top,
    html body .store-group-mobile .smc-top {
      flex-wrap: nowrap !important;
      overflow: hidden !important;
      align-items: baseline !important;
    }

    /* Убираем '·' перед адресом — там теперь имя */
    html body .task-group-mobile .tmc-addr-inline::before,
    html body .store-group-mobile .smc-addr-inline::before {
      content: none !important;
      display: none !important;
    }

    /* Адрес — приоритет на обрезку, если не влезает */
    html body .task-group-mobile .tmc-addr-inline,
    html body .store-group-mobile .smc-addr-inline {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      margin-left: 0 !important;
    }

    /* Имя — минимально возможно, ellipsis, не растягивать */
    html body .task-group-mobile .tmc-name,
    html body .store-group-mobile .smc-name {
      flex: 0 0 auto !important;
      max-width: 40% !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    /* Разделитель '·' между адресом и городом */
    html body .task-group-mobile .tmc-addr-inline {
      padding-left: 8px !important;
      position: relative !important;
    }
    html body .task-group-mobile .tmc-addr-inline::before {
      content: '·' !important;
      display: inline !important;
      position: absolute !important;
      left: 0 !important;
      margin: 0 !important;
      color: var(--text-muted) !important;
      opacity: 0.6 !important;
    }
    html body .store-group-mobile .smc-addr-inline {
      padding-left: 8px !important;
      position: relative !important;
    }
    html body .store-group-mobile .smc-addr-inline::before {
      content: '·' !important;
      display: inline !important;
      position: absolute !important;
      left: 0 !important;
      margin: 0 !important;
      color: var(--text-muted) !important;
      opacity: 0.6 !important;
    }

    /* Город — фиксирован, ellipsis, никогда не переносится */
    html body .task-group-mobile .tmc-city,
    html body .store-group-mobile .smc-city {
      flex: 0 0 auto !important;
      max-width: 30% !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      margin-left: 6px !important;
    }
    html body .task-group-mobile .tmc-city::before {
      content: '·' !important;
      margin-right: 6px !important;
      opacity: 0.6 !important;
    }
    html body .store-group-mobile .smc-city::before {
      content: '·' !important;
      margin-right: 6px !important;
      opacity: 0.6 !important;
    }

    /* Иконку локации 📍 в адресе — скрыть, чтобы освободить место */
    html body .task-group-mobile .tmc-addr-inline .location-icon,
    html body .task-group-mobile .tmc-addr-inline svg,
    html body .store-group-mobile .smc-addr-inline .location-icon,
    html body .store-group-mobile .smc-addr-inline svg {
      display: none !important;
    }
  }
  /* ============================================================
     §FILTERS_V2_RESTORE — фильтры заданий на мобиле.

     Возврат красивых фильтров из §MOBILE_REDESIGN_V2 (были в
     @layer overrides, который удалён как избыточный).

     Что делает:
       • Скрывает дублирующий input[type=date] — пресеты
         «Сегодня/Вчера» уже его покрывают.
       • Пресеты — крупные chip'ы во всю ширину, активный — accent.
       • Селекты — компактные «чип-поля» 34px.
       • Кнопки в тулбаре — ghost 36×36 (кроме + — акцентная).
       • Прогресс 1/49 — chip справа.

     Только mobile (≤640px). Только фильтры заданий — карточки
     остаются от V4/V5.
     ============================================================ */

  @media (max-width: 640px) {

    /* 1.1. Скрыть дубль-дату — пресеты «Сегодня/Вчера» уже есть */
    .tasks-filters-grid .tf-field--date input[type="date"] {
      display: none !important;
    }

    /* 1.2. Пресеты дат — во всю ширину строки, крупные chip'ы */
    .tasks-filters-grid .tf-field--date {
      grid-column: 1 / -1 !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 6px !important;
    }
    .tasks-filters-grid .tf-field--date .date-presets {
      display: flex !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      margin: 0 !important;
      gap: 6px !important;
    }
    .tasks-filters-grid .tf-field--date .date-preset-btn {
      flex: 1 1 0 !important;
      padding: 8px 10px !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      border-radius: 8px !important;
      background: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      color: var(--text-secondary) !important;
      text-align: center !important;
      transition: background 120ms ease, color 120ms ease, border-color 120ms ease !important;
    }
    .tasks-filters-grid .tf-field--date .date-preset-btn.active {
      background: var(--accent) !important;
      border-color: var(--accent) !important;
      color: #ffffff !important;
    }

    /* 1.3. Селекты — компактнее, единый стиль «чип-поля» */
    .tasks-filters-grid .tf-field--mobile-only select,
    .tasks-filters-grid .tf-field select {
      height: 34px !important;
      padding: 6px 8px !important;
      font-size: 11.5px !important;
      border-radius: 8px !important;
      background: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      color: var(--text-primary) !important;
    }

    /* 1.4. Кнопки в тулбаре — ghost 36×36, только акцентная — filled */
    .tasks-toolbar__actions > .refresh-btn,
    .tasks-toolbar__actions > .export-btn,
    .tasks-toolbar__actions > .btn-secondary,
    .tasks-toolbar__actions > #syncStoresBtn {
      width: 36px !important;
      height: 36px !important;
      min-width: 36px !important;
      padding: 0 !important;
      background: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      border-radius: 8px !important;
      color: var(--text-secondary) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .tasks-toolbar__actions > #addExtraTaskBtn {
      width: 36px !important;
      height: 36px !important;
      min-width: 36px !important;
      padding: 0 !important;
      background: var(--accent) !important;
      border: 1px solid var(--accent) !important;
      border-radius: 8px !important;
      color: #ffffff !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    /* 1.5. Прогресс 1/49 — компактный chip справа */
    .tasks-toolbar__actions .today-progress--mobile {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 5px 10px !important;
      background: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      border-radius: 999px !important;
      margin-left: auto !important;
      height: 34px !important;
    }
    .tasks-toolbar__actions .today-progress--mobile .battery__label {
      font-size: 11px !important;
      font-weight: 700 !important;
      color: var(--text-primary) !important;
    }

  }
  /* ============================================================
     §SIDEBAR_LABELS_FIX — иконка слева, подпись справа.
     Форсируем row-раскладку независимо от legacy-правил.
     Перебивает §117 (display:block на SVG) и любые flex-wrap.
     ============================================================ */
  @media (min-width: 1024px) {
    html body .sidebar__nav .tab-btn,
    html body .sidebar__nav .tab-btn-cleanup {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      height: 36px !important;
      padding: 0 8px !important;
      overflow: hidden !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    html body .sidebar__nav .tab-btn > .i,
    html body .sidebar__nav .tab-btn > svg,
    html body .sidebar__nav .tab-btn-cleanup > .i,
    html body .sidebar__nav .tab-btn-cleanup > svg {
      display: inline-block !important;
      width: 16px !important;
      height: 16px !important;
      min-width: 16px !important;
      max-width: 16px !important;
      flex: 0 0 16px !important;
      margin: 0 !important;
      padding: 0 !important;
      vertical-align: middle !important;
    }
    html body .sidebar__nav .tab-btn > .tab-btn__label {
      display: block !important;
      flex: 1 1 auto !important;
      min-width: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-align: left !important;
      font-size: 12.5px !important;
      line-height: 1.2 !important;
      margin: 0 !important;
      padding: 0 !important;
      color: inherit !important;
    }
    /* Collapsed 60px: только иконка по центру, label скрыт */
    html body .sidebar.is-collapsed .sidebar__nav .tab-btn,
    html body .sidebar.is-collapsed .sidebar__nav .tab-btn-cleanup {
      justify-content: center !important;
      gap: 0 !important;
      padding: 0 !important;
    }
    html body .sidebar.is-collapsed .sidebar__nav .tab-btn > .tab-btn__label {
      display: none !important;
    }
  }

  @media (max-width: 1023px) {
    html body .sidebar__nav .tab-btn,
    html body .sidebar__nav .tab-btn-cleanup {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 10px !important;
      height: 40px !important;
      padding: 0 12px !important;
      overflow: hidden !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    html body .sidebar__nav .tab-btn > .i,
    html body .sidebar__nav .tab-btn > svg,
    html body .sidebar__nav .tab-btn-cleanup > .i,
    html body .sidebar__nav .tab-btn-cleanup > svg {
      display: inline-block !important;
      width: 16px !important;
      height: 16px !important;
      min-width: 16px !important;
      max-width: 16px !important;
      flex: 0 0 16px !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    html body .sidebar__nav .tab-btn > .tab-btn__label {
      display: block !important;
      flex: 1 1 auto !important;
      min-width: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-align: left !important;
      font-size: 14px !important;
      line-height: 1.2 !important;
      margin: 0 !important;
      padding: 0 !important;
      color: inherit !important;
    }
  }

  /* ============================================================
     §MOBILE_STORES_FILTERS — фильтры магазинов на mobile.
     Приводим к стилю фильтров заданий (§FILTERS_V2_RESTORE):
       Row 1-2: селекты в 3 колонки minmax(0,1fr), 36px, чип-стиль
       Row 3:   поиск на всю ширину
       Row 4:   + ↻ ⋯ — 40x40, акцент только у +
     Растягиваем на 100% ширины. Только mobile (<=640px).
     ============================================================ */
  @media (max-width: 640px) {

    /* 1. Контейнеры — на всю ширину, снимаем legacy overflow */
    .stores-toolbar,
    .stores-toolbar > .flex,
    .stores-toolbar > .store-filters-row,
    .stores-toolbar > .stores-toolbar__actions {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .stores-toolbar {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 6px !important;
      flex-wrap: nowrap !important;
    }

    /* 2. Row фильтров: 3 колонки */
    .stores-toolbar .store-filters-row {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: stretch !important;
      gap: 6px !important;
    }

    /* 3. Селекты: 1/3 ширины, чип-стиль */
    .stores-toolbar .store-filters-row .store-filter-select,
    .stores-toolbar .store-filters-row select.store-filter-select,
    .stores-toolbar .store-filters-row > select {
      flex: 1 1 calc(33.333% - 4px) !important;
      min-width: 0 !important;
      max-width: none !important;
      width: auto !important;
      height: 36px !important;
      padding: 6px 26px 6px 10px !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      font-family: inherit !important;
      border-radius: 8px !important;
      background-color: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      color: var(--text-primary) !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 9px center !important;
      background-size: 10px 6px !important;
      text-overflow: ellipsis !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }
    .stores-toolbar .store-filters-row .store-filter-select:focus {
      border-color: var(--accent) !important;
      outline: none !important;
    }

    /* 4. Кнопка-сброс ✖ — та же ячейка, что селект */
    .stores-toolbar .store-filters-row .store-reset-filters,
    .stores-toolbar .store-filters-row > #storeResetFiltersBtn {
      flex: 1 1 calc(33.333% - 4px) !important;
      min-width: 0 !important;
      max-width: none !important;
      width: auto !important;
      height: 36px !important;
      padding: 0 10px !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      border-radius: 8px !important;
      background: var(--bg-hover) !important;
      color: var(--text-muted) !important;
      border: 1px solid var(--border-subtle) !important;
      box-sizing: border-box !important;
    }
    .stores-toolbar .store-filters-row .store-reset-filters:hover {
      color: var(--text-primary) !important;
      border-color: var(--border-strong) !important;
    }

    /* 5. Input поиска — на всю ширину строки */
    .stores-toolbar .store-global-filter,
    .stores-toolbar .stores-toolbar__actions .store-global-filter {
      flex: 1 1 100% !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: 40px !important;
      padding: 8px 12px !important;
      font-size: 13px !important;
      font-family: inherit !important;
      border-radius: 10px !important;
      background-color: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      color: var(--text-primary) !important;
      box-sizing: border-box !important;
    }
    .stores-toolbar .store-global-filter::placeholder {
      color: var(--text-muted) !important;
    }
    .stores-toolbar .store-global-filter:focus {
      border-color: var(--accent) !important;
      outline: none !important;
    }

    /* 6. Actions — flex-wrap, без overflow-x */
    .stores-toolbar .stores-toolbar__actions {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 6px !important;
      overflow: visible !important;
      padding: 0 !important;
    }

    /* 7. Кнопки + ↻ ⋯ — 40x40 */
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme,
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme--accent,
    .stores-toolbar .stores-toolbar__actions > .btn-success,
    .stores-toolbar .stores-toolbar__actions > .refresh-btn,
    .stores-toolbar .stores-toolbar__actions > .btn-secondary,
    .stores-toolbar .stores-toolbar__actions > .export-btn {
      flex: 0 0 40px !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 40px !important;
      padding: 0 !important;
      border-radius: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 0 !important;
    }
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme > svg,
    .stores-toolbar .stores-toolbar__actions > .btn-success > svg,
    .stores-toolbar .stores-toolbar__actions > .refresh-btn > svg,
    .stores-toolbar .stores-toolbar__actions > .btn-secondary > svg,
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme > .i,
    .stores-toolbar .stores-toolbar__actions > .btn-success > .i,
    .stores-toolbar .stores-toolbar__actions > .refresh-btn > .i,
    .stores-toolbar .stores-toolbar__actions > .btn-secondary > .i {
      width: 16px !important;
      height: 16px !important;
      margin: 0 !important;
    }

    /* Акцентная кнопка (+) */
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme--accent,
    .stores-toolbar .stores-toolbar__actions > .btn-success {
      background: var(--accent) !important;
      color: #ffffff !important;
      border: 1px solid var(--accent) !important;
    }

    /* Ghost кнопки (↻, ⋯) */
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme,
    .stores-toolbar .stores-toolbar__actions > .refresh-btn,
    .stores-toolbar .stores-toolbar__actions > .btn-secondary {
      background: var(--bg-hover) !important;
      color: var(--text-secondary) !important;
      border: 1px solid var(--border-subtle) !important;
    }

    /* 8. Limit-badge — рядом с кнопками, тот же размер */
    .stores-toolbar .stores-toolbar__actions > .limit-badge {
      flex: 0 0 auto !important;
      height: 40px !important;
      padding: 0 12px !important;
      border-radius: 10px !important;
      align-items: center !important;
      justify-content: center !important;
      display: inline-flex !important;
    }
  }

  /* ============================================================
     §MOBILE_STORES_FILTERS_V2 — добить фильтры магазинов на mobile.
     Перебивает §MOBILE_STORES_FILTERS (если применялся) и legacy.
     Ключевые фиксы:
       1. #storeResetFiltersBtn — на любой глубине, flex 1/3.
       2. Кнопки + ↻ ⋯ — квадрат 40x40 (legacy icon-btn-theme даёт 50%).
       3. Search input — 100% ширины на своей строке.
       4. Все селекты — 1/3 вне зависимости от родителя.
     Только mobile (<=640px).
     ============================================================ */
  @media (max-width: 640px) {

    /* 1. Всё внутри stores-toolbar — width 100%, box-sizing border-box */
    .stores-toolbar,
    .stores-toolbar * {
      box-sizing: border-box !important;
    }

    /* 2. Селекты — 1/3 каждый, на любой глубине внутри тулбара */
    .stores-toolbar .store-filter-select,
    .stores-toolbar select.store-filter-select,
    .stores-toolbar .store-filters-row select {
      flex: 1 1 calc(33.333% - 4px) !important;
      min-width: 0 !important;
      max-width: none !important;
      width: auto !important;
      height: 36px !important;
      padding: 6px 26px 6px 10px !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      font-family: inherit !important;
      border-radius: 8px !important;
      background-color: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      color: var(--text-primary) !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 9px center !important;
      background-size: 10px 6px !important;
      text-overflow: ellipsis !important;
      overflow: hidden !important;
      white-space: nowrap !important;
    }

    /* 3. ✖ Reset — на ЛЮБОЙ глубине внутри тулбара, 1/3 */
    .stores-toolbar #storeResetFiltersBtn,
    .stores-toolbar .store-reset-filters,
    .stores-toolbar .store-filters-row .store-reset-filters,
    .stores-toolbar .stores-toolbar__actions #storeResetFiltersBtn,
    .stores-toolbar .stores-toolbar__actions .store-reset-filters {
      flex: 1 1 calc(33.333% - 4px) !important;
      min-width: 0 !important;
      max-width: none !important;
      width: auto !important;
      height: 36px !important;
      padding: 0 10px !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      font-family: inherit !important;
      border-radius: 8px !important;
      background: var(--bg-hover) !important;
      color: var(--text-muted) !important;
      border: 1px solid var(--border-subtle) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .stores-toolbar #storeResetFiltersBtn:hover,
    .stores-toolbar .store-reset-filters:hover {
      color: var(--text-primary) !important;
      border-color: var(--border-strong) !important;
    }

    /* 4. Search input — на всю ширину, своя строка */
    .stores-toolbar .store-global-filter,
    .stores-toolbar .stores-toolbar__actions .store-global-filter {
      flex: 1 1 100% !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: 40px !important;
      padding: 8px 12px !important;
      font-size: 13px !important;
      font-family: inherit !important;
      border-radius: 10px !important;
      background-color: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      color: var(--text-primary) !important;
      box-sizing: border-box !important;
    }
    .stores-toolbar .store-global-filter::placeholder {
      color: var(--text-muted) !important;
    }
    .stores-toolbar .store-global-filter:focus {
      border-color: var(--accent) !important;
      outline: none !important;
    }

    /* 5. Actions — flex row, wrap allowed, gap 6 */
    .stores-toolbar .stores-toolbar__actions {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 6px !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow: visible !important;
      padding: 0 !important;
    }

    /* 6. Кнопки + ↻ ⋯ — КВАДРАТ 40x40, не круг.
       Бьёт по .icon-btn-theme (border-radius: 50% в legacy §3),
       .btn-success, .refresh-btn, .btn-secondary, .export-btn. */
    .stores-toolbar .stores-toolbar__actions > button,
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme,
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme--accent,
    .stores-toolbar .stores-toolbar__actions > .btn-success,
    .stores-toolbar .stores-toolbar__actions > .refresh-btn,
    .stores-toolbar .stores-toolbar__actions > .btn-secondary,
    .stores-toolbar .stores-toolbar__actions > .export-btn {
      flex: 0 0 40px !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      padding: 0 !important;
      margin: 0 !important;
      border-radius: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 0 !important;
      line-height: 1 !important;
    }
    .stores-toolbar .stores-toolbar__actions > button > svg,
    .stores-toolbar .stores-toolbar__actions > button > .i,
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme > svg,
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme > .i,
    .stores-toolbar .stores-toolbar__actions > .btn-success > svg,
    .stores-toolbar .stores-toolbar__actions > .refresh-btn > svg,
    .stores-toolbar .stores-toolbar__actions > .btn-secondary > svg {
      width: 16px !important;
      height: 16px !important;
      margin: 0 !important;
      display: block !important;
    }

    /* Акцентная (+) */
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme--accent,
    .stores-toolbar .stores-toolbar__actions > .btn-success {
      background: var(--accent) !important;
      color: #ffffff !important;
      border: 1px solid var(--accent) !important;
    }

    /* Ghost (↻, ⋯, refresh, secondary) */
    .stores-toolbar .stores-toolbar__actions > .icon-btn-theme,
    .stores-toolbar .stores-toolbar__actions > .refresh-btn,
    .stores-toolbar .stores-toolbar__actions > .btn-secondary {
      background: var(--bg-hover) !important;
      color: var(--text-secondary) !important;
      border: 1px solid var(--border-subtle) !important;
    }

    /* 7. Limit-badge — компактный чип рядом с кнопками */
    .stores-toolbar .stores-toolbar__actions > .limit-badge {
      flex: 0 0 auto !important;
      height: 40px !important;
      padding: 0 12px !important;
      border-radius: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    /* 8. Родительские строки — 100% ширины, без overflow-x */
    .stores-toolbar > .flex,
    .stores-toolbar > .store-filters-row,
    .stores-toolbar > .stores-toolbar__actions {
      width: 100% !important;
      max-width: 100% !important;
      overflow: visible !important;
    }
    .stores-toolbar .store-filters-row {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      align-items: stretch !important;
    }
  }

  /* ============================================================
     §MOBILE_STORES_FILTERS_V3 — фильтры магазинов на mobile.
     Заменяет V1/V2. Корень — #tab-stores (гарантированно есть
     в DOM, см. admin.html). Не зависит от классов контейнера.
     Селекты — 3 колонки. Поиск — 100%. Кнопки — 40x40 квадраты.
     Только mobile (<=640px).
     ============================================================ */
  @media (max-width: 640px) {

    /* 1. Всё внутри панели — box-sizing */
    #tab-stores .store-filters-panel,
    #tab-stores .store-filters-panel * {
      box-sizing: border-box !important;
    }

    /* 2. Панель и строки — на всю ширину */
    #tab-stores .store-filters-panel {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
    }
    #tab-stores .store-filters-row {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: stretch !important;
      gap: 6px !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* 3. Селекты — 1/3 каждый */
    #tab-stores select.store-filter-select,
    #tab-stores .store-filters-row select {
      flex: 1 1 calc(33.333% - 4px) !important;
      min-width: 0 !important;
      max-width: none !important;
      width: auto !important;
      height: 36px !important;
      padding: 6px 26px 6px 10px !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      font-family: inherit !important;
      border-radius: 8px !important;
      background-color: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      color: var(--text-primary) !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 9px center !important;
      background-size: 10px 6px !important;
      text-overflow: ellipsis !important;
      overflow: hidden !important;
      white-space: nowrap !important;
    }
    #tab-stores select.store-filter-select:focus {
      border-color: var(--accent) !important;
      outline: none !important;
    }

    /* 4. ✖ Reset — та же ячейка, что селект */
    #tab-stores #storeResetFiltersBtn,
    #tab-stores .store-reset-filters {
      flex: 1 1 calc(33.333% - 4px) !important;
      min-width: 0 !important;
      max-width: none !important;
      width: auto !important;
      height: 36px !important;
      padding: 0 10px !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      font-family: inherit !important;
      border-radius: 8px !important;
      background: var(--bg-hover) !important;
      color: var(--text-muted) !important;
      border: 1px solid var(--border-subtle) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    #tab-stores #storeResetFiltersBtn:hover,
    #tab-stores .store-reset-filters:hover {
      color: var(--text-primary) !important;
      border-color: var(--border-strong) !important;
    }

    /* 5. Поиск — 100% ширины, своя строка */
    #tab-stores .store-global-filter,
    #tab-stores input[type="text"].store-global-filter {
      flex: 1 1 100% !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: 40px !important;
      padding: 8px 12px !important;
      font-size: 13px !important;
      font-family: inherit !important;
      border-radius: 10px !important;
      background-color: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      color: var(--text-primary) !important;
    }
    #tab-stores .store-global-filter::placeholder {
      color: var(--text-muted) !important;
    }
    #tab-stores .store-global-filter:focus {
      border-color: var(--accent) !important;
      outline: none !important;
    }

    /* 6. Кнопки панели (add / refresh / more / любой icon-btn) — 40x40 квадрат.
       Ищем ЛЮБУЮ кнопку в панели фильтров и приводим к единому виду.
       Акцентная (+) — тот, у кого класс содержит 'accent' или 'btn-success'. */
    #tab-stores .store-filters-panel button,
    #tab-stores .store-filters-panel .icon-btn-theme {
      flex: 0 0 40px !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      padding: 0 !important;
      margin: 0 !important;
      border-radius: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 0 !important;
      line-height: 1 !important;
    }
    #tab-stores .store-filters-panel button > svg,
    #tab-stores .store-filters-panel button > .i,
    #tab-stores .store-filters-panel .icon-btn-theme > svg,
    #tab-stores .store-filters-panel .icon-btn-theme > .i {
      width: 16px !important;
      height: 16px !important;
      margin: 0 !important;
      display: block !important;
    }

    /* Акцентная кнопка (+) */
    #tab-stores .store-filters-panel .icon-btn-theme--accent,
    #tab-stores .store-filters-panel .btn-success {
      background: var(--accent) !important;
      color: #ffffff !important;
      border: 1px solid var(--accent) !important;
    }

    /* Ghost кнопки (refresh / more / прочие) */
    #tab-stores .store-filters-panel .icon-btn-theme,
    #tab-stores .store-filters-panel .refresh-btn,
    #tab-stores .store-filters-panel .btn-secondary {
      background: var(--bg-hover) !important;
      color: var(--text-secondary) !important;
      border: 1px solid var(--border-subtle) !important;
    }

    /* Исключение: кнопка ✖ reset остаётся чипом 1/3 (правило 4 выше),
       а не 40x40. Перебиваем для неё правило 6. */
    #tab-stores .store-filters-panel #storeResetFiltersBtn,
    #tab-stores .store-filters-panel .store-reset-filters {
      flex: 1 1 calc(33.333% - 4px) !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 36px !important;
      min-height: 36px !important;
      max-height: 36px !important;
      padding: 0 10px !important;
      font-size: 14px !important;
    }

    /* 7. Limit-badge — компактный чип */
    #tab-stores .store-filters-panel .limit-badge {
      flex: 0 0 auto !important;
      height: 40px !important;
      padding: 0 12px !important;
      border-radius: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
  }

  /* ============================================================
     §MOBILE_STORES_FILTERS_V4 — SVG-фикс + обрезка артефакта.
     V3 требовал прямого потомка (button > svg). Если иконка
     обёрнута в span или лежит глубже — правило не матчится,
     SVG рендерится с дефолтным fill и растягивается.
     Здесь:
       1. Все SVG внутри кнопок панели — 16x16, fill:none, stroke.
       2. Кнопки — 40x40 с overflow:hidden (режет растянутое).
       3. Панель и .card — overflow:hidden (артефакт за границами).
       4. ✖ — исключение (1/3, без обрезки).
     Только mobile (<=640px).
     ============================================================ */
  @media (max-width: 640px) {

    /* 1. Все SVG на любой глубине — принудительно 16x16 без заливки */
    #tab-stores .store-filters-panel button svg,
    #tab-stores .store-filters-panel .icon-btn-theme svg {
      width: 16px !important;
      height: 16px !important;
      min-width: 16px !important;
      max-width: 16px !important;
      min-height: 16px !important;
      max-height: 16px !important;
      margin: 0 !important;
      padding: 0 !important;
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 2 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
      display: inline-block !important;
      vertical-align: middle !important;
      flex: 0 0 16px !important;
      box-sizing: border-box !important;
    }
    #tab-stores .store-filters-panel button svg use,
    #tab-stores .store-filters-panel .icon-btn-theme svg use {
      fill: none !important;
      stroke: currentColor !important;
    }
    #tab-stores .store-filters-panel button svg *,
    #tab-stores .store-filters-panel .icon-btn-theme svg * {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 2 !important;
    }

    /* 2. Кнопки в панели — 40x40 квадрат, обрезка содержимого */
    #tab-stores .store-filters-panel button,
    #tab-stores .store-filters-panel .icon-btn-theme {
      flex: 0 0 40px !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      padding: 0 !important;
      margin: 0 !important;
      border-radius: 10px !important;
      overflow: hidden !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 0 !important;
      line-height: 1 !important;
      box-sizing: border-box !important;
      position: relative !important;
    }

    /* 3. ✖ — исключение: 1/3 ширины, без обрезки */
    #tab-stores .store-filters-panel #storeResetFiltersBtn,
    #tab-stores .store-filters-panel .store-reset-filters {
      flex: 1 1 calc(33.333% - 4px) !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 36px !important;
      min-height: 36px !important;
      max-height: 36px !important;
      padding: 0 10px !important;
      font-size: 14px !important;
      overflow: visible !important;
    }

    /* 4. Обрезка артефакта: ничего не вылезает за границы */
    #tab-stores .card {
      overflow: hidden !important;
    }
    #tab-stores .store-filters-panel {
      overflow: hidden !important;
    }
    #tab-stores .store-filters-row {
      overflow: hidden !important;
    }

    /* 5. Панель — не раздувается от SVG-сирот */
    #tab-stores .store-filters-panel {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    #tab-stores .store-filters-panel > * {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
  }

  /* ============================================================
     §MOBILE_STORES_FILTERS_V5 — финальная полировка mobile.
     После V3/V4 осталось:
       1. Пустой <span class="limit-badge"> в панели фильтров —
          занимал 40px в правом нижнем углу как «белый бокс».
          Он всё равно бесполезен в этой сетке.
       2. #storesMoreBtn содержал текстовый ⋯ и исчезал при
          font-size:0. stores.js уже пропатчен на SVG. Здесь —
          страховка: если по какой-то причине svg нет, вернуть
          размер для текстового символа.
     Только mobile (<=640px).
     ============================================================ */
  @media (max-width: 640px) {

    /* 1. limit-badge в панели — скрыть (дублируется в sidebar) */
    #tab-stores .store-filters-panel .limit-badge,
    #tab-stores .store-filters-row .limit-badge,
    #tab-stores .store-filters-row > .limit-badge {
      display: none !important;
    }

    /* 2. Страховка для #storesMoreBtn: если внутри текстовый ⋯
       (SVG ещё не подгрузился) — вернуть ему размер. При наличии
       SVG правило не срабатывает — :has() отработает корректно. */
    #tab-stores #storesMoreBtn:not(:has(svg)) {
      font-size: 22px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
    }

    /* 3. Единый вид кнопок панели, если V3/V4 не сработали */
    #tab-stores .store-filters-panel #addStoreBtn,
    #tab-stores .store-filters-panel #storesRefreshBtn,
    #tab-stores .store-filters-panel #batchEditBtn,
    #tab-stores .store-filters-panel #storesMoreBtn {
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      padding: 0 !important;
      border-radius: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 40px !important;
    }
    #tab-stores .store-filters-panel #addStoreBtn svg,
    #tab-stores .store-filters-panel #storesRefreshBtn svg,
    #tab-stores .store-filters-panel #batchEditBtn svg,
    #tab-stores .store-filters-panel #storesMoreBtn svg {
      width: 16px !important;
      height: 16px !important;
      margin: 0 !important;
      display: block !important;
      fill: none !important;
      stroke: currentColor !important;
    }
    /* #i-more — три точки, нужна заливка */
    #tab-stores .store-filters-panel #storesMoreBtn svg circle {
      fill: currentColor !important;
      stroke: none !important;
    }

    /* Акцентная (+) */
    #tab-stores .store-filters-panel #addStoreBtn {
      background: var(--accent) !important;
      color: #ffffff !important;
      border: 1px solid var(--accent) !important;
    }
    /* Ghost (↻, ✎, ⋯) */
    #tab-stores .store-filters-panel #storesRefreshBtn,
    #tab-stores .store-filters-panel #batchEditBtn,
    #tab-stores .store-filters-panel #storesMoreBtn {
      background: var(--bg-hover) !important;
      color: var(--text-secondary) !important;
      border: 1px solid var(--border-subtle) !important;
    }

    /* 4. batchEditBtn на мобиле не нужен */
    #tab-stores .store-filters-panel #batchEditBtn {
      display: none !important;
    }
  }

  /* ============================================================
     §MOBILE_TASK_DETAIL — карточка просмотра задания на mobile.

     Симптом: на узких экранах #taskDetailModal разъезжалась —
     поля по 60px, текст оборачивался по буквам. Причина: базовое
     правило §11 { grid-template-columns: repeat(10, 1fr) } не
     перебивалось мобильным override из legacy @media (max-width:
     768px) — на планшетах 769-900px он не срабатывал вообще, а
     на части телефонов в силу каскадных нюансов.

     Плюс отдельная проблема: `.tdc-photos { grid-column: span 2 }`
     в legacy-медиа не перебивал `#taskDetailContent > .tdc-photos
     { grid-column: span 5 }` — специфичность медиа-селектора ниже.

     Здесь всё закрываем через @layer modern + html body + !important.
     Media расширен до 900px (планшеты в портрете).
     ============================================================ */
  @media (max-width: 900px) {

    /* 1. Модалка — на всю ширину, узкие боковые отступы */
    html body #taskDetailModal .modal-content {
      width: 96% !important;
      max-width: 96% !important;
      padding: 14px 12px 16px !important;
    }

    /* 2. Сетка — 2 колонки */
    html body #taskDetailContent {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 12px 10px !important;
      align-items: start !important;
    }

    /* 3. Все поля — по 1 колонке, сжимаемые */
    html body #taskDetailContent > .tdc-field {
      grid-column: span 1 !important;
      min-width: 0 !important;
    }

    /* 4. Цена (5-й ребёнок) — на всю ширину */
    html body #taskDetailContent > .tdc-field:nth-child(5) {
      grid-column: span 2 !important;
    }

    /* 5. Комментарии (tdc-wide) — на всю ширину */
    html body #taskDetailContent > .tdc-field.tdc-wide {
      grid-column: span 2 !important;
    }

    /* 6. Фотоблоки — на всю ширину (бьёт legacy span 5) */
    html body #taskDetailContent > .tdc-photos {
      grid-column: span 2 !important;
    }

    /* 7. Значения — не ломать по буквам; ломать по словам */
    html body .tdc-value {
      font-size: 13px !important;
      overflow-wrap: break-word !important;
      word-break: normal !important;
    }

    /* 8. Сетка превью фото — мельче */
    html body #taskDetailModal .tdc-photos-grid {
      grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
    }

    /* 9. Лейблы — компактнее */
    html body .tdc-label {
      font-size: 10.5px !important;
      letter-spacing: 0.03em !important;
    }
  }

  /* ============================================================
     §MOBILE_CLIENTS — список клиентов карточками (mobile ≤768px).

     #clientsList не обёрнут в .table-wrap, поэтому §19-адаптация
     к нему не применялась — таблица из 8 колонок втискивалась
     в 100% ширины с table-layout: fixed, и всё выглядело кашей.

     Рендер — из clients.js → renderClientsMobile(). Здесь только
     визуал: карточки в стиле tasks/stores (§123).
     ============================================================ */
  @media (max-width: 768px) {

    /* Кнопка «Колонки» на mobile не нужна — нет колонок */
    #clientsColsBtn {
      display: none !important;
    }

    /* ─── 1. Контейнер ─── */
    .cl-mobile-holder {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    /* ─── 2. Карточка ─── */
    .cl-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      transition: background 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .cl-card:active {
      background: var(--bg-hover);
    }

    /* ─── 3. Верхняя строка: имя + чип + ✎ ─── */
    .cl-card__head {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .cl-card__name {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Статус-чип §110 уже стилизован — при необходимости сузим */
    .cl-card__head .chip {
      flex: 0 0 auto;
      font-size: 10.5px;
      height: 18px;
      padding: 0 8px;
    }

    /* ─── 4. Кнопка ✎ ─── */
    .cl-card__edit {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 8px;
      background: var(--bg-hover);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
    }
    .cl-card__edit:active { transform: scale(0.95); }
    .cl-card__edit svg {
      width: 15px;
      height: 15px;
      margin: 0;
    }

    /* ─── 5. Meta-строки ─── */
    .cl-card__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
      font-size: 12px;
      color: var(--text-muted);
      align-items: baseline;
      min-width: 0;
    }
    .cl-card__meta > span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .cl-card__meta .cl-card__login {
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* ─── 6. Строка лимитов ─── */
    .cl-card__limits {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum';
      word-break: break-word;
    }
  }

  /* ============================================================
     §MOBILE_DEADLINES — список сроков карточками + компактные
     фильтры (mobile ≤768px).

     #deadlinesList не обёрнут в .table-wrap, §19-адаптация к нему
     не применялась — таблица из 8 колонок втискивалась в 100%
     ширины с table-layout: fixed, всё выглядело кашей.

     Здесь:
       1. Тулбар фильтров (#tab-deadlines .stores-toolbar):
          3 селекта по ⅓ + 2 кнопки 40×40.
       2. Карточки .dl-card — 5 строк + actions.
     Рендер — deadlines.js → renderDeadlinesMobile().
     ============================================================ */
  @media (max-width: 768px) {

    /* ─── 1. Тулбар фильтров ─── */

    #tab-deadlines .stores-toolbar {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 6px !important;
      margin-bottom: 8px !important;
    }

    /* Первый flex — 3 селекта в ряд по ⅓ */
    #tab-deadlines .stores-toolbar > .flex:first-child {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    #tab-deadlines .stores-toolbar > .flex:first-child > .day-filter-select {
      flex: 1 1 calc(33.333% - 4px) !important;
      min-width: 0 !important;
      max-width: none !important;
      width: auto !important;
      height: 36px !important;
      padding: 6px 26px 6px 10px !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      font-family: inherit !important;
      border-radius: 8px !important;
      background-color: var(--bg-hover) !important;
      border: 1px solid var(--border-subtle) !important;
      color: var(--text-primary) !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 9px center !important;
      background-size: 10px 6px !important;
      text-overflow: ellipsis !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }
    #tab-deadlines .stores-toolbar > .flex:first-child > .day-filter-select:focus {
      border-color: var(--accent) !important;
      outline: none !important;
    }

    /* Второй flex — 2 кнопки 40×40 */
    #tab-deadlines .stores-toolbar > .flex:last-child {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 6px !important;
      justify-content: flex-start !important;
      width: 100% !important;
    }
    #tab-deadlines .stores-toolbar > .flex:last-child > button {
      flex: 0 0 40px !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      padding: 0 !important;
      border-radius: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 0 !important;
      line-height: 1 !important;
    }
    #tab-deadlines .stores-toolbar > .flex:last-child > button > svg,
    #tab-deadlines .stores-toolbar > .flex:last-child > button > .i {
      width: 16px !important;
      height: 16px !important;
      margin: 0 !important;
      display: block !important;
    }
    #tab-deadlines .stores-toolbar > .flex:last-child > #addDeadlineBtn {
      background: var(--accent) !important;
      color: #ffffff !important;
      border: 1px solid var(--accent) !important;
    }
    #tab-deadlines .stores-toolbar > .flex:last-child > .refresh-btn {
      background: var(--bg-hover) !important;
      color: var(--text-secondary) !important;
      border: 1px solid var(--border-subtle) !important;
    }

    /* ─── 2. Карточки сроков ─── */

    .dl-mobile-holder {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    .dl-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    /* Левая полоса — статус */
    .dl-card--open    { border-left-color: var(--warning); }
    .dl-card--overdue { border-left-color: var(--danger); }
    .dl-card--closed  { border-left-color: var(--success); opacity: 0.85; }

    .dl-card__head {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .dl-card__name {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dl-card__head .chip {
      flex: 0 0 auto;
      font-size: 10.5px;
      height: 18px;
      padding: 0 8px;
    }

    .dl-card__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
      font-size: 12px;
      color: var(--text-muted);
      align-items: baseline;
      min-width: 0;
    }
    .dl-card__meta > span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .dl-card__meta .dl-card__date--overdue {
      color: var(--danger);
      font-weight: 600;
    }

    .dl-card__comment {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }

    /* ─── 3. Действия ─── */

    .dl-card__actions {
      display: flex;
      gap: 6px;
      margin-top: 4px;
      padding-top: 8px;
      border-top: 1px solid var(--border-subtle);
    }
    .dl-card__actions > button {
      flex: 0 0 auto;
      height: 32px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: filter 120ms ease;
    }
    .dl-card__actions > button > svg {
      width: 13px;
      height: 13px;
      margin: 0;
    }
    .dl-card__actions .dl-btn--close {
      background: var(--success-subtle);
      color: var(--success);
      border: 1px solid rgba(61, 174, 127, 0.32);
    }
    .dl-card__actions .dl-btn--close:active {
      background: var(--success);
      color: #ffffff;
    }
    .dl-card__actions .dl-btn--del {
      background: var(--danger-subtle);
      color: var(--danger);
      border: 1px solid rgba(221, 100, 98, 0.32);
    }
    .dl-card__actions .dl-btn--del:active {
      background: var(--danger);
      color: #ffffff;
    }
  }

  /* ============================================================
     §MOBILE_MANAGERS — список менеджеров карточками (mobile ≤768px).

     #managersList не обёрнут в .table-wrap, §19-адаптация к нему
     не применялась — таблица из 7 колонок втискивалась в 100%
     ширины с table-layout: fixed, всё выглядело кашей.

     Рендер — managers.js → renderManagersMobile(). Здесь только
     визуал: карточки в стиле clients/deadlines.
     ============================================================ */
  @media (max-width: 768px) {

    .mg-mobile-holder {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    /* ─── Карточка ─── */
    .mg-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      transition: background 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .mg-card:active { background: var(--bg-hover); }

    /* ─── Верхняя строка: имя + ✎ + 🗑 ─── */
    .mg-card__head {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .mg-card__name {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mg-card__btn {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid var(--border-subtle);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
    }
    .mg-card__btn--edit {
      background: var(--bg-hover);
      color: var(--text-secondary);
    }
    .mg-card__btn--del {
      background: rgba(221, 100, 98, 0.12);
      color: var(--danger);
      border-color: rgba(221, 100, 98, 0.32);
    }
    .mg-card__btn > svg {
      width: 14px;
      height: 14px;
      margin: 0;
    }

    /* ─── Meta-строки ─── */
    .mg-card__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
      font-size: 12px;
      color: var(--text-muted);
      align-items: baseline;
      min-width: 0;
    }
    .mg-card__meta > span,
    .mg-card__meta > a {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .mg-card__phone {
      color: var(--accent);
      text-decoration: none;
    }

    /* ─── Секции «Разрешения» / «Фильтры» ─── */
    .mg-card__section {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .mg-card__section-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .mg-card__section-body {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
  }

  /* ============================================================
     §TASK_GLOBAL_SEARCH — живой поиск по 6 полям (сеть, магазин,
     адрес, работник, поставщик, город).

     Один input в тулбаре заданий. Фильтрует клиент-side по уже
     загруженным задачам — без сетевых запросов.
     Desktop: строка поиска в общей flex-строке фильтров.
     Mobile: полная строка над пресетами дат.
     ============================================================ */
  .tasks-filters-grid .tf-field--search {
    flex: 0 1 220px;
    min-width: 160px;
  }
  .tasks-global-filter {
    width: 100%;
    height: 30px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: inherit;
    border-radius: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    box-sizing: border-box;
    outline: none;
    transition: border-color 120ms ease;
  }
  .tasks-global-filter::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
  }
  .tasks-global-filter:focus {
    border-color: var(--accent);
  }

  @media (max-width: 640px) {
    .tasks-filters-grid .tf-field--search {
      grid-column: 1 / -1 !important;
      width: 100%;
      min-width: 0;
      flex: 1 1 auto;
    }
    .tasks-global-filter {
      height: 40px;
      font-size: 13px;
      padding: 8px 12px;
      border-radius: 10px;
    }
  }


  /* ============================================================
     §AF2. TASKS MAP VIEW — переключатель «Таблица / Карта».

     Leaflet + Markercluster, тёмные тайлы OSM через CSS-инверсию.
     Маркер = магазин, число = кол-во задач (поставщиков).
     Цвет = «худший» статус группы (приоритет: notdone > redo >
     started > done > planned).
     ============================================================ */

  /* ─── Переключатель вида ─── */
  .tasks-view-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    height: 32px;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  .tasks-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms ease, color 120ms ease;
  }
  .tasks-view-toggle__btn:hover {
    background: rgba(148, 163, 184, 0.10);
    color: var(--text-primary);
  }
  .tasks-view-toggle__btn.is-on {
    background: var(--accent-subtle);
    color: var(--accent);
  }
  .tasks-view-toggle__btn > svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
  }

  /* ─── Контейнер карты ─── */
  .tasks-map-wrap {
    position: relative;
    height: calc(100vh - 220px);
    min-height: 480px;
    margin-top: 4px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .tasks-map-wrap.hidden { display: none; }
  #tasksMap {
    width: 100%;
    height: 100%;
    background: #0b1120;
  }
  /* Тёмные тайлы OSM — инверсия через CSS-фильтр (только тёмная тема). */
  [data-theme="dark"] #tasksMap .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.05);
  }
  /* Инверсия ломает иконки-кнопки зума Leaflet — вернуть как было. */
  [data-theme="dark"] #tasksMap .leaflet-control-zoom a,
  [data-theme="dark"] #tasksMap .leaflet-control-attribution {
    filter: invert(1) hue-rotate(180deg);
  }
  #tasksMap .leaflet-control-zoom a {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
  }
  #tasksMap .leaflet-control-zoom a:hover {
    background: var(--bg-hover);
  }

  /* ─── Кастомный маркер ─── */
  .tsk-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
    font-weight: 800;
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    transition: transform 120ms ease;
    cursor: pointer;
  }
  .tsk-marker:hover { transform: scale(1.12); }

  .tsk-marker--done     { background: #10b981; }
  .tsk-marker--started  { background: #3b82f6; animation: tskPulse 1.8s infinite; }
  .tsk-marker--redo     { background: #f59e0b; }
  .tsk-marker--notdone  { background: #ef4444; }
  .tsk-marker--planned  { background: #64748b; }
  @keyframes tskPulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,0.55), 0 0 0 0 rgba(59,130,246,0.6); }
    50%      { box-shadow: 0 3px 10px rgba(0,0,0,0.55), 0 0 0 8px rgba(59,130,246,0); }
  }

  /* ─── Кластеры ─── */
  .marker-cluster-tsk {
    background: rgba(91, 141, 239, 0.88);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(91, 141, 239, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  /* ─── Попап Leaflet под тёмную тему ─── */
  #tasksMap .leaflet-popup-content-wrapper {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    padding: 0;
  }
  #tasksMap .leaflet-popup-tip {
    background: var(--bg-surface);
    border: 1px solid var(--border);
  }
  #tasksMap .leaflet-popup-content {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    min-width: 220px;
    max-width: 300px;
  }
  #tasksMap .leaflet-popup-close-button {
    color: var(--text-muted) !important;
    padding: 6px 8px 0 0 !important;
  }

  .tsk-pop {
    padding: 12px 14px;
  }
  .tsk-pop__title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-right: 16px;
  }
  .tsk-pop__meta {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.35;
  }
  .tsk-pop__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    margin-bottom: 10px;
  }
  .tsk-pop__row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    cursor: pointer;
    border-radius: 6px;
    transition: background 120ms ease;
  }
  .tsk-pop__row:hover {
    background: var(--bg-hover);
  }
  .tsk-pop__sup {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tsk-pop__price {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--success);
    font-variant-numeric: tabular-nums;
  }
  .tsk-pop__actions {
    display: flex;
    gap: 6px;
  }
  .tsk-pop__btn {
    flex: 1;
    padding: 7px 10px;
    border-radius: 6px;
    border: none;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease;
  }
  .tsk-pop__btn--primary {
    background: var(--accent);
    color: #ffffff;
  }
  .tsk-pop__btn--secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
  }
  .tsk-pop__btn:hover { filter: brightness(0.92); }
  .tsk-pop__btn--secondary:hover { filter: brightness(1.15); }

  /* ─── Плашка «Без координат» (правый верхний угол карты) ─── */
  .tsk-map-nocoords {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fbbf24;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    transition: background 120ms ease;
    max-width: 260px;
  }
  .tsk-map-nocoords:hover { background: rgba(245, 158, 11, 0.22); }
  .tsk-map-nocoords small {
    display: block;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 3px;
    font-size: 10.5px;
  }
  [data-theme="light"] .tsk-map-nocoords {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #b45309;
  }

  /* ─── Leaflet control с плашкой — правый верхний угол ─── */
  .leaflet-top.leaflet-right .tsk-nocoords-control {
    margin: 12px 12px 0 0;
  }

  @media (max-width: 768px) {
    .tasks-map-wrap { height: calc(100vh - 280px); min-height: 360px; }
    .tasks-view-toggle { display: none; }
  }

  /* ============================================================
     §AH2. Карта + календарь + mobile toggle (2026-10-04).
     Дописано в конец @layer modern — перебивает §AF2
     (.tasks-view-toggle { display: none } на mobile) и
     §FILTERS_V2_RESTORE (.tf-field--date input { display: none }).
     ============================================================ */

  /* ─── 1. Карта на всю доступную высоту (desktop). ─── */
  @media (min-width: 641px) {
    #tab-tasks:not(.hidden) > .card > .tasks-map-wrap:not(.hidden) {
      flex: 1 1 auto;
      min-height: 480px;
      height: auto;
      max-height: none;
    }
  }

  /* ─── 2. Карта на мобиле — выше, чем было (§AF2). ─── */
  @media (max-width: 640px) {
    .tasks-map-wrap:not(.hidden) {
      height: calc(100vh - 200px);
      min-height: 400px;
    }
  }

  /* ─── 3. Переключатель «Таблица / Карта» — виден и на мобиле.
         §AF2 скрывал через .tasks-view-toggle { display: none }
         в @media 768. Здесь — !important + тот же @media. ─── */
  @media (max-width: 768px) {
    .tasks-view-toggle { display: inline-flex !important; }
  }

  /* ─── 4. Кнопка «📅» между пресетами. Desktop: скрыта. ─── */
  @media (min-width: 641px) {
    .date-preset-btn--calendar { display: none !important; }
  }

  /* Mobile: input превращается в невидимый overlay ровно над
     кнопкой «📅». Тап по кнопке попадает в input → браузер
     сам открывает нативный date picker.

     Геометрия: .date-presets = 3 кнопки flex: 1 1 0, gap: 6px.
     Ширина каждой: (100% - 12px) / 3. Середина = вторая кнопка. */
  @media (max-width: 640px) {
    .tasks-filters-grid .tf-field--date {
      position: relative;
    }
    .tasks-filters-grid .tf-field--date input[type="date"] {
      position: absolute !important;
      top: 0 !important;
      left: calc((100% - 12px) / 3 + 6px) !important;
      width: calc((100% - 12px) / 3) !important;
      height: 100% !important;
      display: block !important;
      opacity: 0 !important;
      cursor: pointer !important;
      z-index: 3 !important;
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
      background: transparent !important;
      color: transparent !important;
      font-size: 16px !important;
      box-sizing: border-box !important;
      -webkit-appearance: none !important;
      appearance: none !important;
    }
    .tasks-filters-grid .tf-field--date input[type="date"]::-webkit-calendar-picker-indicator {
      opacity: 0 !important;
      width: 100% !important;
      height: 100% !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      cursor: pointer !important;
    }
    /* Лёгкий акцент на кнопке «📅». */
    .tasks-filters-grid .tf-field--date .date-preset-btn--calendar {
      color: var(--accent) !important;
      border-color: rgba(91, 141, 239, 0.32) !important;
    }
  }

  /* ============================================================
     §AI2-MODERN. Магазины: mobile-override для toggle вида.
     ============================================================ */
  @media (max-width: 640px) {
    #tab-stores .store-filters-panel .stores-view-toggle {
      height: 40px !important;
      padding: 2px !important;
      gap: 2px !important;
      flex: 0 0 auto !important;
      width: auto !important;
    }
    #tab-stores .store-filters-panel .stores-view-toggle__btn {
      flex: 0 0 34px !important;
      width: 34px !important;
      min-width: 34px !important;
      max-width: 34px !important;
      height: 36px !important;
      min-height: 36px !important;
      max-height: 36px !important;
      padding: 0 !important;
      font-size: 0 !important;
    }
    #tab-stores .store-filters-panel .stores-view-toggle__btn svg {
      width: 15px !important;
      height: 15px !important;
      display: block !important;
    }
  }

  /* ============================================================
     §AJ2. KPI DASHBOARD (superadmin) — счётчики и графики.
     ============================================================ */
  .kpi-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .kpi-preset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  }
  .kpi-preset-btn:hover {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-primary);
  }
  .kpi-preset-btn.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
  }
  .kpi-date-input,
  .kpi-select {
    height: 30px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    box-sizing: border-box;
  }
  .kpi-date-input:focus,
  .kpi-select:focus {
    outline: none;
    border-color: var(--accent);
  }

  .kpi-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }
  .kpi-counter {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .kpi-counter__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .kpi-counter__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
  }

  .kpi-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .kpi-chart-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .kpi-chart-card--wide {
    grid-column: span 2;
  }
  .kpi-chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    letter-spacing: -0.005em;
  }
  .kpi-chart-canvas {
    position: relative;
    width: 100%;
    height: 260px;
  }

  @media (max-width: 900px) {
    .kpi-charts { grid-template-columns: 1fr; }
    .kpi-chart-card--wide { grid-column: span 1; }
    .kpi-chart-canvas { height: 220px; }
  }
  @media (max-width: 640px) {
    .kpi-filters { width: 100%; }
    .kpi-date-input { flex: 1 1 calc(50% - 3px); min-width: 0; }
    .kpi-preset-btn { flex: 1 1 calc(33.333% - 4px); }
    .kpi-counter { padding: 10px 12px; }
    .kpi-counter__value { font-size: 18px; }
  }



  /* ═══════════════════════════════════════════════════════════
     §AK2. PLANS-HEAD CONSOLIDATION (V4) — 2026-10-04 (сессия AE).

     Сводит 14 legacy-секций, наслаивавших flex/grid/order/padding
     на .plans-head и его дочерние:
       §68    — базовая раскладка (desktop)
       §71    — mobile <=768 (flex-wrap, title 100%)
       §79    — mobile <=900 (grid-template-areas, inert)
       §80    — mobile <=900 (flex-column + absolute actions)
       §82    — mobile <=1400 (flex-column, position static)
       §86    — mobile <=1400 (actions order 4, ::before-эмодзи Save)
       §87    — mobile <=1400 (head flex-shrink: 0)
       §88    — mobile <=1400 (actions space-between, toggle visible)
       §119.4 — SaveBtn width auto
       §119.5 — order: title/actions/view-toggle/summary
       §119.6 — <=900 flex-row wrap
       §119.7 — <=1400 flex-row wrap
       §119.8 — title flex, summary order, view-toggle full-width

     Здесь — единая логика в трёх блоках. Legacy НЕ удаляем:
     @layer modern перебивает legacy-нормальные декларации без
     !important (в .plans-head legacy-правилах !important нет).

     Откат: удалить этот блок целиком.
     ═══════════════════════════════════════════════════════════ */

  /* ── Desktop (>1400px): одна строка, всё по центру ── */
  .plans-head {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    position: static;
    z-index: auto;
  }
  .plans-head__title {
    order: 0;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 320px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.015em;
  }
  .plans-head .plans-week-summary {
    order: 0;
    flex: 0 1 auto;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 11.5px;
    text-align: left;
    justify-content: flex-start;
    overflow: hidden;
  }
  .plans-head .plans-view-toggle {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 2px;
    border-radius: 8px;
  }
  .plans-head .plans-view-toggle__btn {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 11.5px;
    gap: 4px;
    border-radius: 6px;
  }
  .plans-head .plans-actions {
    order: 0;
    margin-left: auto;
    margin-right: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    max-width: 100%;
    position: static;
    top: auto; right: auto; bottom: auto; left: auto;
    align-self: auto;
  }

  /* ── Tablet/mobile (<=1400px): двухстрочная раскладка ──
     Строка 1: [title <=45%] [summary -> вправо] [actions -> вправо]
     Строка 2: [view-toggle 100%]
     flex-shrink: 0 — .plans-v2-modal flex-column не должен сжимать
     шапку при длинном контенте «По дням». */
  @media (max-width: 1400px) {
    .plans-head {
      flex: 0 0 auto;
      flex-shrink: 0;
      flex-grow: 0;
      min-height: auto;
      height: auto;
      max-height: none;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 8px;
      padding: 6px 12px 8px;
      margin: 0;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      position: static;
      z-index: auto;
    }

    .plans-head__title {
      order: 1;
      flex: 0 1 auto;
      width: auto;
      max-width: 45%;
      min-width: 0;
      font-size: 14px;
      line-height: 1.3;
      padding: 0;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .plans-head .plans-week-summary {
      order: 2;
      flex: 1 1 auto;
      width: auto;
      max-width: none;
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: baseline;
      text-align: right;
      gap: 3px 12px;
      margin: 0;
      padding: 0;
      border: none;
      font-size: 11.5px;
      line-height: 1.35;
      overflow: hidden;
    }
    .plans-head .plans-week-summary > span {
      display: inline-flex;
      align-items: baseline;
      gap: 3px;
      white-space: nowrap;
    }

    .plans-head .plans-actions {
      order: 3;
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
      margin: 0 0 0 4px;
      padding: 0;
      justify-content: flex-end;
      align-self: center;
      position: static;
      top: auto; right: auto; bottom: auto; left: auto;
    }
    .plans-head .plans-actions > button,
    .plans-head .plans-actions .plans-btn-sm {
      width: 32px;
      height: 32px;
      min-width: 32px;
      max-width: 32px;
      padding: 0;
      font-size: 13px;
      line-height: 1;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    /* Фильтр-лупа (JS переносит её в .plans-actions первым ребёнком) */
    .plans-head .plans-actions .plans-filters__toggle,
    .plans-head .plans-actions .plans-actions__toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      min-width: 32px;
      max-width: 32px;
      padding: 0;
      margin: 0;
      font-size: 14px;
      line-height: 1;
      border-radius: 8px;
      flex: 0 0 auto;
    }
    /* SaveBtn — вернуть текст, отключить ::before-эмодзи из §86 */
    .plans-head .plans-actions #plansSaveBtn {
      width: auto;
      min-width: 90px;
      max-width: none;
      font-size: 13px;
      padding: 0 12px;
    }
    .plans-head .plans-actions #plansSaveBtn::before {
      content: none;
      display: none;
    }

    .plans-head .plans-view-toggle {
      order: 4;
      flex: 0 0 100%;
      width: 100%;
      margin: 6px 0 0 0;
      padding: 3px;
      display: flex;
      border-radius: 8px;
    }
    .plans-head .plans-view-toggle__btn {
      flex: 1 1 0;
      justify-content: center;
      padding: 7px 8px;
      font-size: 12px;
      min-width: 0;
      gap: 4px;
      border-radius: 6px;
    }
    .plans-head .plans-view-toggle__btn .pvt-i {
      font-size: 12px;
    }
  }

  /* ── Mobile (<=768px): плотнее отступы, мельче шрифты ── */
  @media (max-width: 768px) {
    .plans-head {
      padding: 8px 12px 6px;
      gap: 4px 8px;
    }
    .plans-head__title {
      font-size: 13px;
      max-width: 60%;
    }
    .plans-head .plans-week-summary {
      font-size: 11px;
      gap: 2px 10px;
    }
    .plans-head .plans-view-toggle__btn {
      padding: 6px 8px;
      font-size: 11px;
    }
  }



  /* ═══════════════════════════════════════════════════════════
     §AK3. MANAGERS TABLE — колонки с длинным текстом.
     attachTable даёт <td class="col-perms"> / .col-filters.
     Раньше были inline-стили max-width/word-break — вынесены.
     ═══════════════════════════════════════════════════════════ */
  #managersList td.col-filters {
    font-size: 12px;
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
  }
  #managersList td.col-actions {
    white-space: nowrap;
  }



  /* ═══════════════════════════════════════════════════════════
     §AL2. МОБИЛЬНЫЙ ФИЛЬТР ОБЪЯВЛЕНИЙ (≤768px).

     Desktop: фильтр-строка внутри .ann-table (attachTable).
     Mobile: карточки .ann-card — отдельный input над списком.
     ═══════════════════════════════════════════════════════════ */
  .ann-mobile-filter { display: none; }

  @media (max-width: 768px) {
    .ann-mobile-filter {
      display: block;
      width: 100%;
      height: 40px;
      padding: 8px 14px;
      font-size: 13px;
      font-family: inherit;
      border-radius: 10px;
      background: var(--bg-hover);
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      box-sizing: border-box;
      margin: 0 0 8px 0;
      -webkit-appearance: none;
      appearance: none;
      transition: border-color 120ms ease;
    }
    .ann-mobile-filter::placeholder {
      color: var(--text-muted);
      opacity: 0.85;
    }
    .ann-mobile-filter:focus {
      border-color: var(--accent);
      outline: none;
    }
    /* Крестик очистки в WebKit — на цвет темы */
    .ann-mobile-filter::-webkit-search-cancel-button {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      background: currentColor;
      color: var(--text-muted);
      mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/16px no-repeat;
      cursor: pointer;
    }
  }



  /* ═══════════════════════════════════════════════════════════
     §AM2. CLIENTS TABLE — колонки Лимиты / Действия.
     Раньше были inline-стили в renderClients. Теперь — tdClassName
     из attachTable: td.col-limits / td.col-actions.
     ═══════════════════════════════════════════════════════════ */
  #clientsList td.col-limits {
    font-size: 12px;
    white-space: nowrap;
  }
  #clientsList td.col-actions {
    white-space: nowrap;
  }



  /* ═══════════════════════════════════════════════════════════
     §AN2. DEADLINES TABLE — колонки + ячейки (attachTable).
     Раньше всё было inline-стилями в renderDeadlines.
     Теперь — tdClassName из attachTable + .dl-cell-* / .dl-overdue.
     ═══════════════════════════════════════════════════════════ */
  #deadlinesList td.col-dl-product {
    white-space: normal;
    max-width: 220px;
  }
  #deadlinesList td.col-dl-date {
    white-space: nowrap;
  }
  #deadlinesList td.col-dl-store {
    white-space: normal;
    max-width: 200px;
  }
  #deadlinesList td.col-dl-created {
    font-size: 12px;
    color: var(--text-muted);
  }
  #deadlinesList td.col-dl-actions {
    white-space: nowrap;
  }

  #deadlinesList .dl-cell-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.35;
  }
  #deadlinesList .dl-cell-addr {
    color: var(--text-muted);
    font-size: 11px;
  }
  #deadlinesList .dl-overdue {
    color: var(--danger);
    font-weight: 600;
  }

  /* §SIDEBAR_COMPACT_V2 — уменьшение высоты кнопок навигации на ~11%
     (36px → 32px). Перебивает §SIDEBAR_LABELS_FIX: тот же селектор,
     тот же @layer modern, но ниже по файлу (source-order внутри слоя). */
  @media (min-width: 1024px) {
      /* Expanded: 36px → 32px */
      html body .sidebar__nav .tab-btn,
      html body .sidebar__nav .tab-btn-cleanup {
          height: 32px !important;
          min-height: 32px !important;
      }
      /* Collapsed: сохраняем 36px (иконка по центру, touch target) */
      html body .sidebar.is-collapsed .sidebar__nav .tab-btn,
      html body .sidebar.is-collapsed .sidebar__nav .tab-btn-cleanup {
          height: 36px !important;
          min-height: 36px !important;
      }
      /* Зазор между кнопками: 1px → 0 */
      html body .sidebar__nav {
          gap: 0 !important;
      }
  }

  /* §CUSTOMNAV_SEAMLESS — Каталог и ИИ-Игра встроены в основной
     список навигации. Перебивает inline border-bottom + margin
     + padding у #customNav. Стык с #tabBar — 1px (как gap между
     штатными кнопками). */
  #customNav {
      border-bottom: 0 !important;
      margin: 1px 0 0 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }
  #tabBar {
      padding-bottom: 0 !important;
  }

  /* §SIDEBAR_NAV_SCROLL — единый скролл для #tabBar и #customNav.
     Обёртка создаётся JS (sidebar.js → wrapNavs). Все вкладки,
     включая Каталог и ИИ-Игру, прокручиваются как один список. */
  html body #sidebarNavScroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 8px 10px 10px;
      scrollbar-width: thin;
  }
  html body #sidebarNavScroll > #tabBar,
  html body #sidebarNavScroll > #customNav {
      flex: 0 0 auto !important;
      min-height: auto !important;
      max-height: none !important;
      overflow: visible !important;
      padding: 0 !important;
  }
  @media (min-width: 1024px) {
      html body .sidebar.is-collapsed #sidebarNavScroll {
          padding: 6px 0 8px;
      }
  }

} /* /@layer modern */

/* ============================================================
   §AG2. FIX: карта задач — читаемость попапа.

   Диагноз. Leaflet CSS подключён с CDN и лежит ВНЕ каскадных
   слоёв (unlayered). По правилам каскада unlayered normal-
   декларации выигрывают у layered. Наш §AF2 (внутри
   @layer modern) проиграл Leaflet'овским:
       .leaflet-popup-content-wrapper { background: white; color: #333 }
       .leaflet-popup-tip             { background: white; }

   Результат: popup получился белый (от Leaflet), а заголовок,
   адрес и поставщик внутри — светлые (var(--text-primary/muted/
   secondary) из нашего @layer modern). Белый текст на белом.

   Фикс. Переписываем ключевые цвета popup вне слоёв — unlayered
   CSS бьёт и Leaflet, и legacy, и modern. Селектор #tasksMap
   даёт специфичность (1,1,0) — гарантированно перебивает
   Leaflet'овский .leaflet-popup-content-wrapper (0,1,0).
   ============================================================ */

/* ─── Контейнер popup ─── */
#tasksMap .leaflet-popup-content-wrapper {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* ─── Треугольник-указатель: только фон, без border —
       он ломает transform: rotate(45deg)-форму. ─── */
#tasksMap .leaflet-popup-tip {
    background: var(--bg-surface);
    border: none;
    box-shadow: none;
}

/* ─── Тексты внутри popup — явно на цветах темы ─── */
#tasksMap .tsk-pop__title { color: var(--text-primary); }
#tasksMap .tsk-pop__meta  { color: var(--text-muted); }
#tasksMap .tsk-pop__sup   { color: var(--text-secondary); }

/* ─── Кнопки popup — фон/цвет из темы ─── */
#tasksMap .tsk-pop__btn--primary {
    background: var(--accent);
    color: #ffffff;
}
#tasksMap .tsk-pop__btn--secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* ─── Кнопка ✖ Leaflet — на цветах темы ─── */
#tasksMap .leaflet-popup-close-button {
    color: var(--text-muted);
}
#tasksMap .leaflet-popup-close-button:hover {
    color: var(--text-primary);
}




/* ============================================================
   §AI2-BASE. Магазины: переключатель вида, карта, маркеры.
   ============================================================ */

.stores-view-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    height: 32px;
    box-sizing: border-box;
    flex: 0 0 auto;
}
.stores-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms ease, color 120ms ease;
}
.stores-view-toggle__btn:hover {
    background: rgba(148, 163, 184, 0.10);
    color: var(--text-primary);
}
.stores-view-toggle__btn.is-on {
    background: var(--accent-subtle);
    color: var(--accent);
}
.stores-view-toggle__btn > svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
}

#storesMap { width: 100%; height: 100%; background: #0b1120; }

[data-theme="dark"] #storesMap .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.05);
}
[data-theme="dark"] #storesMap .leaflet-control-zoom a,
[data-theme="dark"] #storesMap .leaflet-control-attribution {
    filter: invert(1) hue-rotate(180deg);
}
#storesMap .leaflet-control-zoom a {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
}
#storesMap .leaflet-control-zoom a:hover { background: var(--bg-hover); }

.st-map-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
    font-weight: 800;
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    transition: transform 120ms ease;
    cursor: pointer;
}
.st-map-marker:hover { transform: scale(1.12); }
.st-map-marker--store   { background: #5b8def; }
.st-map-marker--nomerch { background: #d4a04a; }

.tsk-pop__days {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    padding: 1px 5px;
    background: var(--bg-hover);
    border-radius: 4px;
}

@media (max-width: 640px) {
    #storesMapWrap:not(.hidden) {
        height: calc(100vh - 200px);
        min-height: 400px;
    }
}


/* ============================================================
   §AG2-STORES. FIX: карта магазинов — читаемость попапа.
   Зеркало §AG2 для #storesMap. Leaflet CSS unlayered (CDN),
   наш @layer modern проигрывает — переписываем вне слоёв.
   Специфичность (1,1,0) > Leaflet (0,1,0).
   ============================================================ */

#storesMap .leaflet-popup-content-wrapper {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    padding: 0;
}
#storesMap .leaflet-popup-tip {
    background: var(--bg-surface);
    border: none;
    box-shadow: none;
}
#storesMap .tsk-pop__title { color: var(--text-primary); }
#storesMap .tsk-pop__meta  { color: var(--text-muted); }
#storesMap .tsk-pop__sup   { color: var(--text-secondary); }
#storesMap .tsk-pop__btn--primary {
    background: var(--accent);
    color: #ffffff;
}
#storesMap .tsk-pop__btn--secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
#storesMap .leaflet-popup-close-button { color: var(--text-muted); }
#storesMap .leaflet-popup-close-button:hover { color: var(--text-primary); }


/* ============================================================
   #sidebar-over-leaflet — UX fix (2026-10-04)

   1. Z-index. Leaflet CSS подключается из CDN и лежит ВНЕ каскадных
      слоёв. Его .leaflet-top/.leaflet-bottom = z-index: 1000,
      .leaflet-popup = 700, panes = 200–600. Наш .sidebar на мобиле
      (z-index: 200 из §115.2) уходил ПОД карту при свайпе off-canvas.

      Unlayered-правило в конце файла: 1100 > Leaflet 1000. Модалки
      (1000–1300) остаются выше — они и должны перекрывать sidebar.

   2. Мобильная карта — на всю ширину .card. Раньше .card на мобиле
      имеет padding: 6px 4px (§119), карта ужималась. Отрицательный
      margin вытягивает .tasks-map-wrap / #storesMapWrap на всю
      ширину карточки, боковые скругления убираются.

   3. Invalidация размера Leaflet. При смене viewport / развороте
      планшета вызываем _storesMap / _tasksMap.invalidateSize() —
      через resize-listener, если карта инициализирована.
      (В JS — отдельным блоком ниже.)
   ============================================================ */

/* 1. Z-index: sidebar над Leaflet (только mobile/tablet, где off-canvas) */
@media (max-width: 1023px) {
    .sidebar             { z-index: 1100 !important; }
    .sidebar-backdrop    { z-index: 1050 !important; }
    .sidebar-swipe-hint  { z-index: 1000 !important; }
}

/* 2. Карта на мобиле — на всю ширину карточки */
@media (max-width: 640px) {
    .tasks-map-wrap:not(.hidden),
    #storesMapWrap:not(.hidden) {
        margin-left: -4px;
        margin-right: -4px;
        border-left: none;
        border-right: none;
        border-radius: 0;
        width: auto;
        height: calc(100vh - 190px);
        min-height: 420px;
    }
}

/* 3. Карандаш в попапе карты */
.tsk-pop__title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tsk-pop__title-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tsk-pop__edit {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tsk-pop__edit:hover {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: rgba(91, 141, 239, 0.32);
}
.tsk-pop__edit:active {
    transform: scale(0.94);
}
.tsk-pop__edit svg {
    width: 14px;
    height: 14px;
    display: block;
    pointer-events: none;
}


/* ============================================================
   #map-fullheight-v1 — карта растягивается на всю высоту .card.

   Диагноз. #storesMapWrap / .tasks-map-wrap в map-view имели
   фиксированную height: calc(100vh - 220px) из §AF2 / §AI2-BASE.
   При этом .card — flex-column (§135), а #storesTableWrap
   скрыт через .hidden (display: none), но .card не растягивал
   карту — под ней оставалось ~200px пустоты.

   Фикс. flex: 1 1 auto + height: auto. Unlayered, чтобы
   перебить @layer modern (height: calc(100vh - 220px)).

   Работает только на desktop (≥1024px) — там .app-content и
   .card уже flex-column. На мобиле оставляем высоту из
   #sidebar-over-leaflet / #storesMapWrap:not(.hidden).
   ============================================================ */

@media (min-width: 1024px) {

    /* Карта занимает всё свободное место в .card */
    #tab-tasks:not(.hidden) > .card > .tasks-map-wrap:not(.hidden),
    #tab-stores:not(.hidden) > .card > .tasks-map-wrap:not(.hidden) {
        flex: 1 1 auto;
        min-height: 420px;
        height: auto;
        max-height: none;
        margin-top: 0;
    }

    /* .card: снять верхний padding-bottom-фокус — карта должна
       прижиматься к нижнему краю карточки вплотную. */
    #tab-tasks:not(.hidden) > .card,
    #tab-stores:not(.hidden) > .card {
        padding-bottom: 4px;
    }

    /* На карте панель фильтров и тулбар — не сжимаются,
       но и не растягиваются: их место — фиксировано сверху. */
    #tab-tasks:not(.hidden) > .card > .tasks-toolbar,
    #tab-stores:not(.hidden) > .card > .store-filters-panel {
        flex: 0 0 auto;
    }
}

/* Мобильный фолбэк: карта тоже flex-растягивается, но
   внутри .card с фикс. padding. Уже есть в #sidebar-over-leaflet,
   здесь — только подстраховка для таблетов 641..1023px. */
@media (min-width: 641px) and (max-width: 1023px) {
    #tab-tasks:not(.hidden) > .card > .tasks-map-wrap:not(.hidden),
    #tab-stores:not(.hidden) > .card > .tasks-map-wrap:not(.hidden) {
        flex: 1 1 auto;
        height: auto;
        min-height: 420px;
        max-height: none;
    }
}

/* ============================================================
   §STANDARDS_TAB_V1 — вкладка «Стандарты».
   Массовая установка stores.url. Вне @layer — чтобы не зависеть
   от порядка слоёв и точечно перебивать legacy без !important.
   ============================================================ */

.standards-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}
.standards-toolbar .std-filter {
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    min-width: 140px;
    box-sizing: border-box;
}
.standards-toolbar .std-filter:focus {
    outline: none;
    border-color: var(--accent);
}
.standards-toolbar > button {
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
}

.standards-url-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 10px;
}
.standards-url-row #stdUrlInput {
    flex: 1 1 320px;
    min-width: 0;
    height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.standards-url-row #stdUrlInput:focus {
    outline: none;
    border-color: var(--accent);
}
.standards-url-row #stdUrlInput::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}
.standards-url-row > button {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    flex: 0 0 auto;
}
.standards-url-row #stdApplyBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.standards-hint {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 12px;
}

.standards-list-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
}

.standards-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: auto;
}
.standards-table thead th {
    background: var(--bg-body);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
.standards-table tbody td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.standards-table tbody tr:last-child td {
    border-bottom: none;
}
.standards-table tbody tr:hover {
    background: var(--bg-hover);
}
.standards-table td.std-col-check,
.standards-table th.std-col-check {
    width: 40px;
    text-align: center;
    padding-left: 14px;
    padding-right: 6px;
    max-width: 40px;
}
.standards-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    vertical-align: middle;
}
.standards-table td.std-col-url {
    max-width: 340px;
    font-size: 12px;
    color: var(--text-muted);
}
.standards-table td.std-col-url.is-empty {
    font-style: italic;
    opacity: 0.7;
}
.standards-table td.std-col-url a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed rgba(91, 141, 239, 0.4);
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.standards-table td.std-col-url a:hover {
    border-bottom-style: solid;
}
.standards-table tbody td:first-child {
    color: var(--text-primary);
    font-weight: 500;
}

.standards-empty {
    padding: 36px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 640px) {
    .standards-toolbar .std-filter { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .standards-toolbar > button { flex: 1 1 100%; }
    .standards-url-row #stdUrlInput { flex: 1 1 100%; }
    .standards-url-row > button { flex: 1 1 calc(50% - 4px); }
    .standards-table { font-size: 12px; }
    .standards-table thead th,
    .standards-table tbody td { padding: 7px 8px; }
    .standards-table tbody td { max-width: 160px; }
    .standards-table td.std-col-url { max-width: 160px; }
    .standards-table td.std-col-url a { max-width: 150px; }
}


/* §STORE_TYPE_FILTER_V5_COLGROUP (2026-10-07) */
/* ============================================================
   Ширины колонок магазинов заданы через <colgroup> в stores.js.
   Здесь — только вспомогательное: chip ТТ, multi-select, кнопка
   «Стандарты», модалка per-store, компактные кружки графика.
   ============================================================ */

#storesTableWrap table {
    table-layout: fixed !important;
    width: 100% !important;
}

.std-tt-chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 8px; border-radius: 8px;
    background: var(--bg-hover, #2d3748);
    border: 1px solid var(--border-subtle, rgba(148,163,184,0.08));
    font-size: 11px; font-weight: 600;
    color: var(--text-secondary, #cbd5e1);
    white-space: nowrap; line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.std-tt-chip.is-empty {
    background: transparent; border-style: dashed;
    color: var(--text-muted, #94a3b8); opacity: 0.55; font-weight: 400;
}
[data-theme="light"] .std-tt-chip { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
[data-theme="light"] .std-tt-chip.is-empty { color: #94a3b8; border-color: #e2e8f0; }

.std-tt-ms { position: relative; display: inline-block; min-width: 130px; max-width: 220px; flex: 0 0 auto; }
.std-tt-ms__toggle {
    width: 100%; height: 34px; padding: 0 30px 0 10px; border-radius: 8px;
    background: var(--bg-hover, #2d3748);
    border: 1px solid var(--border-subtle, rgba(148,163,184,0.08));
    color: var(--text-primary, #f8fafc);
    font-family: inherit; font-size: 12.5px; font-weight: 500;
    text-align: left; cursor: pointer; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    box-sizing: border-box; transition: border-color 120ms ease;
}
.std-tt-ms__toggle::after {
    content: '\25BC'; position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%); font-size: 10px;
    color: var(--text-muted, #94a3b8); pointer-events: none;
}
.std-tt-ms.is-open .std-tt-ms__toggle { border-color: var(--accent, #5b8def); }
.std-tt-ms__list {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px;
    min-width: 100%; max-height: 220px; overflow-y: auto;
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    z-index: 1500; padding: 4px 0;
}
.std-tt-ms__list[hidden] { display: none; }
.std-tt-ms__item {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px;
    font-size: 12.5px; color: var(--text-secondary, #cbd5e1);
    cursor: pointer; white-space: nowrap; transition: background 100ms ease;
}
.std-tt-ms__item:hover { background: var(--bg-hover, #2d3748); color: var(--text-primary, #f8fafc); }
.std-tt-ms__item input[type="checkbox"] {
    width: 15px; height: 15px; accent-color: var(--accent, #5b8def);
    margin: 0; flex-shrink: 0; cursor: pointer;
}
.std-tt-ms__empty { padding: 10px 12px; color: var(--text-muted, #94a3b8); font-size: 12px; text-align: center; font-style: italic; }
[data-theme="light"] .std-tt-ms__toggle { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
[data-theme="light"] .std-tt-ms__list { background: #ffffff; border-color: #cbd5e1; }
[data-theme="light"] .std-tt-ms__item { color: #334155; }
[data-theme="light"] .std-tt-ms__item:hover { background: #f1f5f9; color: #0f172a; }

#storesTableWrap td.col-url button.standard-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; background: rgba(91, 141, 239, 0.15);
    color: var(--accent, #5b8def);
    border: 1px solid rgba(91, 141, 239, 0.4);
    border-radius: 12px; font-size: 10.5px; font-weight: 600;
    cursor: pointer; font-family: inherit; white-space: nowrap;
    line-height: 1.3; transition: background 0.15s, border-color 0.15s;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
#storesTableWrap td.col-url button.standard-link:hover {
    background: rgba(91, 141, 239, 0.28); border-color: var(--accent, #5b8def);
}
#storesTableWrap td.col-url button.standard-link svg {
    width: 10px; height: 10px; margin: 0; opacity: 0.9; pointer-events: none;
}
[data-theme="light"] #storesTableWrap td.col-url button.standard-link {
    background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe;
}
[data-theme="light"] #storesTableWrap td.col-url button.standard-link:hover {
    background: #dbeafe; border-color: #93c5fd;
}

/* Компактные кружки графика — 7 штук по 15px влезают в любую
   ширину от 110px, остаток от col-schedule простаивает как запас. */
#storesTableWrap td.col-schedule .day-indicators {
    gap: 1px !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}
#storesTableWrap td.col-schedule .day-dot {
    width: 15px !important; height: 15px !important;
    min-width: 15px !important; max-width: 15px !important;
    font-size: 7.5px !important; line-height: 15px !important;
    padding: 0 !important; border-width: 1px !important;
    flex-shrink: 0 !important;
}

/* Кнопка ✎ в «Действия» — вписывается в 46px */
#storesTableWrap td.col-actions { text-align: center !important; padding-left: 2px !important; padding-right: 2px !important; }
#storesTableWrap td.col-actions .edit-store-btn { padding: 2px 6px !important; }

/* ---------- Модалка «Стандарты магазина» ---------- */
.asm-modal { max-width: 720px; width: 94vw; }
.asm-subtitle { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 12px; line-height: 1.4; }
.asm-url-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
    margin-bottom: 12px; padding: 10px 12px; background: var(--bg-hover);
    border-radius: 10px; border: 1px solid var(--border-subtle);
}
.asm-url-row__label { flex: 0 0 100%; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 2px; }
.asm-url-row input[type="url"] {
    flex: 1 1 260px; min-width: 0; height: 36px; padding: 6px 10px;
    border-radius: 8px; background: var(--bg-surface);
    border: 1px solid var(--border-subtle); color: var(--text-primary);
    font-family: inherit; font-size: 12.5px; box-sizing: border-box;
}
.asm-url-row input[type="url"]:focus { outline: none; border-color: var(--accent); }
.asm-url-row__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.asm-url-row__actions > button {
    height: 36px; padding: 0 14px; border-radius: 8px;
    font-family: inherit; font-size: 12.5px; font-weight: 500;
    cursor: pointer; flex: 0 0 auto;
}
.asm-photos-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 8px; flex-wrap: wrap; }
.asm-photos-head__title { font-size: 13px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.asm-photos-head__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 18px; padding: 0 6px; border-radius: 9px;
    background: var(--bg-hover); color: var(--text-muted); font-size: 11px; font-weight: 700;
}
.asm-photo-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px; margin-bottom: 10px; min-height: 80px;
}
.asm-photo-grid:empty::before {
    content: 'Фото не загружены'; grid-column: 1 / -1; text-align: center;
    padding: 20px 12px; color: var(--text-muted); font-size: 12.5px; font-style: italic;
}
.asm-photo-card {
    position: relative; aspect-ratio: 1 / 1; border-radius: 10px;
    overflow: hidden; background: var(--bg-hover); border: 1px solid var(--border);
}
.asm-photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asm-photo-card.is-pdf {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(91, 141, 239, 0.08);
}
.asm-photo-card.is-pdf .asm-photo-card__icon { font-size: 34px; }
.asm-photo-card.is-pdf .asm-photo-card__label {
    font-size: 10.5px; font-weight: 700; color: var(--accent);
    margin-top: 4px; letter-spacing: 0.05em;
}
.asm-photo-card__del {
    position: absolute; top: 5px; right: 5px; width: 22px; height: 22px;
    border-radius: 50%; background: rgba(221, 100, 98, 0.95);
    color: #fff; border: none; font-size: 14px; line-height: 1;
    padding: 0; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; font-family: inherit;
}
.asm-photo-card__del:active { transform: scale(0.9); }
.asm-upload-row {
    display: flex; align-items: center; gap: 10px; margin-top: 4px;
    padding-top: 10px; border-top: 1px dashed var(--border-subtle); flex-wrap: wrap;
}
.asm-upload-row__status { font-size: 12.5px; color: var(--text-secondary); }

.store-group-mobile .smc-sup-name .std-tt-chip,
.task-group-mobile .tmc-sup-name .std-tt-chip {
    margin-left: 6px; font-size: 10px; padding: 1px 6px;
}


/* §STORE_TYPE_FILTER_V6_PHOTO_TT (2026-10-07) */
/* Чип ТТ на карточке фото-стандарта в сетке админки. */
.std-photo-card__tt {
    position: absolute;
    bottom: 26px;
    left: 6px;
    right: 6px;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(91, 141, 239, 0.88);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
[data-theme="light"] .std-photo-card__tt {
    background: #2563eb;
}


/* §STORE_TYPE_FILTER_V7_ASM_SCOPE (2026-10-07) */
.asm-photo-card__scope {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(0,0,0,0.7);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.01em;
}
.asm-photo-card__scope--network {
    background: rgba(91, 141, 239, 0.88);
}


/* §STORE_TYPE_FILTER_V8_LIGHTBOX (2026-10-07) */
.std-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: zoom-out;
}
.std-lightbox.active { display: flex; }
.std-lightbox__img {
    max-width: 95vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
    cursor: default;
}
.std-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-family: inherit;
    transition: background 0.15s ease;
}
.std-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.std-lightbox__close:active { transform: scale(0.92); }


/* §STORE_TYPE_FILTER_V10_STD_TABLE (2026-10-07) */
.std-photos-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: rgba(91, 141, 239, 0.15);
    color: var(--accent, #5b8def);
    border: 1px solid rgba(91, 141, 239, 0.4);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.3;
    transition: background 0.15s, border-color 0.15s;
}
.std-photos-open-btn:hover {
    background: rgba(91, 141, 239, 0.28);
    border-color: var(--accent, #5b8def);
}
[data-theme="light"] .std-photos-open-btn {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
[data-theme="light"] .std-photos-open-btn:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}
.std-col-photos {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}


/* §STORE_TYPE_FILTER_V11_STANDARDS_MOBILE (2026-10-07) */
/* ============================================================
   Мобильная адаптация вкладки «Стандарты» (≤640px).
   - Шапка card → столбик.
   - Scope-radios → столбик.
   - Тулбар фильтров → grid 2×N.
   - URL-строка → столбик.
   - Секция загрузки → столбик.
   - Таблица магазинов → карточки.
   - «Выбрать все» — отдельной плашкой над списком.
   ============================================================ */
@media (max-width: 640px) {

    /* -------- 1. Шапка card: заголовок + scope-radios в столбик -------- */
    #stdUnifiedCard .flex.flex--between {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 10px !important;
    }
    .std-scope-radios {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }
    .std-scope-radio {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        background: var(--bg-hover);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        font-size: 13px;
        cursor: pointer;
    }
    .std-scope-radio input { margin-right: 8px; }
    .std-photos-hint {
        font-size: 12px;
        margin: 4px 0 10px;
    }

    /* -------- 2. Тулбар фильтров: 2 колонки -------- */
    .standards-toolbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }
    .standards-toolbar .std-filter,
    .standards-toolbar .std-tt-ms {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 42px !important;
    }
    .standards-toolbar .std-filter {
        padding: 0 10px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
    .standards-toolbar .std-tt-ms__toggle {
        height: 42px !important;
        font-size: 13px !important;
    }

    /* Клиент и Магазин — на всю ширину */
    .standards-toolbar #stdPhotoClient:not([style*="display: none"]):not([style*="display:none"]) {
        grid-column: 1 / -1;
    }
    .standards-toolbar #stdPhotoStore:not([style*="display: none"]):not([style*="display:none"]) {
        grid-column: 1 / -1;
    }
    /* Скрытые (display:none inline) — не занимают место */
    .standards-toolbar #stdPhotoClient[style*="display: none"],
    .standards-toolbar #stdPhotoClient[style*="display:none"],
    .standards-toolbar #stdPhotoStore[style*="display: none"],
    .standards-toolbar #stdPhotoStore[style*="display:none"] {
        display: none !important;
    }
    /* «Показать» — на всю ширину */
    .standards-toolbar #stdReloadBtn {
        grid-column: 1 / -1 !important;
        height: 44px !important;
        font-size: 14px !important;
    }

    /* -------- 3. URL-строка: input + 2 кнопки в столбик -------- */
    .standards-url-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    .standards-url-row #stdUrlInput {
        width: 100% !important;
        height: 44px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
    .standards-url-row > button {
        width: 100% !important;
        height: 44px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* -------- 4. Секция загрузки фото: столбик -------- */
    .std-photos-upload {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }
    .std-photos-upload #stdPhotoAddBtn {
        width: 100% !important;
        height: 44px !important;
        font-size: 14px !important;
    }
    .std-photo-status {
        text-align: center;
        font-size: 12.5px;
    }

    /* -------- 5. Сетка фото: 2 колонки -------- */
    .std-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 8px !important;
    }

    /* -------- 6. Обёртка списка магазинов — без рамки -------- */
    .standards-list-wrap {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    /* -------- 7. Таблица магазинов → карточки -------- */
    #stdListWrap .standards-table,
    #stdListWrap .standards-table tbody,
    #stdListWrap .standards-table tr,
    #stdListWrap .standards-table td,
    #stdListWrap .standards-table th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* thead — отдельная плашка «Выбрать все» над карточками */
    #stdListWrap .standards-table thead {
        display: block;
        margin-bottom: 8px;
        padding: 10px 12px;
        background: var(--bg-hover);
        border: 1px solid var(--border-subtle);
        border-radius: 10px;
    }
    #stdListWrap .standards-table thead tr {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 0;
        border: none;
        background: transparent;
    }
    #stdListWrap .standards-table thead tr th {
        display: none;
        padding: 0;
        border: none;
        width: auto;
    }
    #stdListWrap .standards-table thead tr th.std-col-check {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
    }
    #stdListWrap .standards-table thead tr th.std-col-check::after {
        content: 'Выбрать все';
        font-size: 13px;
        font-weight: 500;
        color: var(--text-secondary);
        text-transform: none;
        letter-spacing: 0;
    }
    #stdListWrap .standards-table thead input[type="checkbox"] {
        width: 22px;
        height: 22px;
        accent-color: var(--accent);
    }

    /* Карточка строки */
    #stdListWrap .standards-table tbody tr {
        position: relative;
        padding: 12px 14px 12px;
        padding-right: 46px;
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 8px;
        background: var(--bg-surface);
    }
    #stdListWrap .standards-table tbody td {
        padding: 0;
        border: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }

    /* Скрываем Город (не критичен) */
    #stdListWrap .standards-table tbody td:nth-child(4) { display: none; }

    /* Чекбокс — угол карточки */
    #stdListWrap .standards-table tbody td.std-col-check {
        position: absolute;
        top: 12px;
        right: 12px;
        width: auto;
        padding: 0;
    }
    #stdListWrap .standards-table tbody td.std-col-check input[type="checkbox"] {
        width: 22px;
        height: 22px;
        accent-color: var(--accent);
        cursor: pointer;
    }

    /* Сеть — заголовок карточки */
    #stdListWrap .standards-table tbody td:nth-child(2) {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.3;
        margin: 0 0 3px 0;
    }

    /* Адрес */
    #stdListWrap .standards-table tbody td:nth-child(3) {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.35;
        margin: 0 0 8px 0;
    }

    /* Поставщик — верхняя граница-разделитель */
    #stdListWrap .standards-table tbody td:nth-child(5) {
        display: inline-block;
        padding: 6px 8px 6px 0;
        font-size: 13px;
        color: var(--text-secondary);
        border-top: 1px solid var(--border-subtle);
        margin-top: 4px;
    }

    /* ТТ — рядом с поставщиком */
    #stdListWrap .standards-table tbody td:nth-child(6) {
        display: inline-block;
        padding: 6px 0;
        font-size: 12px;
        color: var(--text-muted);
        border-top: 1px solid var(--border-subtle);
        margin-top: 4px;
    }
    #stdListWrap .standards-table tbody td:nth-child(6)::before {
        content: '🏷 ';
        margin-right: 2px;
    }

    /* Кнопка «📷 Фото» — на всю ширину */
    #stdListWrap .standards-table tbody td.std-col-photos {
        padding: 8px 0 0;
        margin: 0;
        border-top: 1px solid var(--border-subtle);
    }
    #stdListWrap .standards-table tbody td.std-col-photos .std-photos-open-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
        font-size: 13.5px;
        border-radius: 8px;
        margin-top: 6px;
    }

    /* URL — компактной строкой внизу */
    #stdListWrap .standards-table tbody td.std-col-url {
        padding: 6px 0 0;
        margin: 0;
        font-size: 11.5px;
        color: var(--text-muted);
        border-top: none;
    }
    #stdListWrap .standards-table tbody td.std-col-url::before {
        content: '🔗 ';
        margin-right: 2px;
        color: var(--accent);
        font-weight: 700;
    }
    #stdListWrap .standards-table tbody td.std-col-url.is-empty {
        display: none;
    }
    #stdListWrap .standards-table tbody td.std-col-url a {
        display: inline-block;
        max-width: calc(100% - 22px);
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Пустые td — скрыть */
    #stdListWrap .standards-table tbody td:empty {
        display: none;
    }
}


/* §STORE_TYPE_FILTER_V12_MOBILE_FIX (2026-10-07) */
/* ============================================================
   Фиксы мобильной адаптации Стандартов:
   - scope-radios в одну строку;
   - убрать пустую «карточку» от thead-чекбокса;
   - сеть + адрес в одну строку в карточке;
   - тёмный дропдаун у <select><option>;
   - живой поиск (мобильный + desktop).
   ============================================================ */
@media (max-width: 640px) {

    /* 1. Scope-radios — в одну строку */
    .std-scope-radios {
        flex-direction: row !important;
        gap: 6px !important;
        flex-wrap: wrap;
    }
    .std-scope-radio {
        flex: 1 1 calc(50% - 3px);
        min-width: 0;
        justify-content: center;
        padding: 8px 10px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 2. thead — убрать пустую плашку-«артефакт».
          «Выбрать все» переносим на первую карточку списка
          (генерируется через ::before на первой tbody tr). */
    #stdListWrap .standards-table thead {
        display: none !important;
    }

    /* 3. Сеть + адрес — одной строкой */
    #stdListWrap .standards-table tbody tr {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "name addr check"
            "sup  sup  sup"
            "tt   tt   tt"
            "btn  btn  btn"
            "url  url  url";
        column-gap: 8px;
        row-gap: 4px;
        align-items: baseline;
        padding: 10px 12px;
        padding-right: 12px;
    }
    #stdListWrap .standards-table tbody td {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        white-space: normal;
    }
    #stdListWrap .standards-table tbody td:nth-child(2) {  /* Сеть */
        grid-area: name;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #stdListWrap .standards-table tbody td:nth-child(3) {  /* Адрес */
        grid-area: addr;
        font-size: 13px;
        color: var(--text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #stdListWrap .standards-table tbody td:nth-child(4) {  /* Город — скрыт */
        display: none !important;
    }
    #stdListWrap .standards-table tbody td:nth-child(5) {  /* Поставщик */
        grid-area: sup;
        font-size: 12.5px;
        color: var(--text-secondary);
        padding-top: 4px !important;
        border-top: 1px solid var(--border-subtle) !important;
    }
    #stdListWrap .standards-table tbody td:nth-child(5)::before {
        content: '🏢 ';
        margin-right: 2px;
    }
    #stdListWrap .standards-table tbody td:nth-child(6) {  /* ТТ */
        grid-area: tt;
        font-size: 11.5px;
        color: var(--text-muted);
    }
    #stdListWrap .standards-table tbody td:nth-child(6)::before {
        content: '🏷 ';
        margin-right: 2px;
    }
    #stdListWrap .standards-table tbody td.std-col-check {
        grid-area: check;
        position: static !important;
        width: auto !important;
        padding: 0 !important;
        justify-self: end;
        align-self: start;
    }
    #stdListWrap .standards-table tbody td.std-col-check input[type="checkbox"] {
        width: 22px;
        height: 22px;
        accent-color: var(--accent);
        cursor: pointer;
    }
    #stdListWrap .standards-table tbody td.std-col-photos {
        grid-area: btn;
        padding-top: 8px !important;
        border-top: 1px solid var(--border-subtle) !important;
        margin-top: 4px !important;
    }
    #stdListWrap .standards-table tbody td.std-col-photos .std-photos-open-btn {
        width: 100%;
        justify-content: center;
        padding: 9px 14px;
        font-size: 13px;
        border-radius: 8px;
    }
    #stdListWrap .standards-table tbody td.std-col-url {
        grid-area: url;
        font-size: 11.5px;
        color: var(--text-muted);
    }
    #stdListWrap .standards-table tbody td.std-col-url::before {
        content: '🔗 ';
        margin-right: 2px;
        color: var(--accent);
        font-weight: 700;
    }
    #stdListWrap .standards-table tbody td.std-col-url.is-empty {
        display: none !important;
    }
    #stdListWrap .standards-table tbody td.std-col-url a {
        display: inline-block;
        max-width: calc(100% - 22px);
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 4. Тёмный дропдаун у <select><option> */
    .standards-toolbar select.std-filter,
    .standards-toolbar select,
    #stdPhotoClient,
    #stdPhotoStore {
        background-color: var(--bg-hover, #2d3748) !important;
        color: var(--text-primary, #f8fafc) !important;
    }
    .standards-toolbar select option,
    #stdPhotoClient option,
    #stdPhotoStore option {
        background: #1e293b !important;
        color: #f1f5f9 !important;
    }
    [data-theme="light"] .standards-toolbar select option,
    [data-theme="light"] #stdPhotoClient option,
    [data-theme="light"] #stdPhotoStore option {
        background: #ffffff !important;
        color: #0f172a !important;
    }
}

/* 5. Живой поиск — работает и на desktop, и на mobile */
.std-store-search {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 14px;
    margin: 8px 0 10px;
    border-radius: 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: border-color 120ms ease;
}
.std-store-search::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}
.std-store-search:focus {
    border-color: var(--accent);
}
.std-store-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    color: var(--text-muted);
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/16px no-repeat;
    cursor: pointer;
}
[data-theme="light"] .std-store-search {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}
@media (max-width: 640px) {
    .std-store-search {
        height: 44px;
        font-size: 14px;
        border-radius: 10px;
        margin: 6px 0 8px;
    }
}


/* §STORE_TYPE_FILTER_V15_CARD (2026-10-07) */
/* Мобильный вид Стандартов: карточки из _buildMobileListHtml(). */

.std-store-search {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 14px;
    margin: 8px 0 10px;
    border-radius: 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: border-color 120ms ease;
}
.std-store-search::placeholder { color: var(--text-muted); opacity: 0.85; }
.std-store-search:focus { border-color: var(--accent); }
.std-store-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    background: currentColor;
    color: var(--text-muted);
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/16px no-repeat;
    cursor: pointer;
}
[data-theme="light"] .std-store-search {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

@media (max-width: 640px) {

    /* Scope-radios — в одну строку */
    .std-scope-radios {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .std-scope-radio {
        flex: 1 1 calc(50% - 3px) !important;
        justify-content: center !important;
        padding: 8px 8px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .std-store-search {
        height: 42px;
        font-size: 13.5px;
        border-radius: 10px;
        margin: 6px 0 8px;
    }

    /* --- Карточка --- */
    .std-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 36px 10px 12px;
        background: var(--bg-surface, #1e293b);
        border: 1px solid var(--border, rgba(148,163,184,0.14));
        border-radius: 10px;
        margin-bottom: 8px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
    [data-theme="light"] .std-card {
        background: #ffffff;
        border-color: #e2e8f0;
    }

    .std-card__check {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 22px;
        height: 22px;
        margin: 0;
        accent-color: var(--accent, #5b8def);
        cursor: pointer;
        z-index: 1;
    }

    /* Строка 1: сеть · адрес */
    .std-card__head {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        gap: 8px !important;
        min-width: 0;
        width: 100%;
    }
    .std-card__name {
        flex: 0 1 auto !important;
        max-width: 55% !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--text-primary, #f8fafc) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    [data-theme="light"] .std-card__name { color: #0f172a !important; }
    .std-card__addr {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        font-size: 12.5px !important;
        color: var(--text-secondary, #cbd5e1) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    [data-theme="light"] .std-card__addr { color: #475569 !important; }

    /* Строка 2: поставщик · ТТ — ОДНА строка */
    .std-card__line {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding-top: 6px !important;
        border-top: 1px solid var(--border-subtle, rgba(148,163,184,0.08)) !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .std-card__sup {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        font-size: 12.5px !important;
        color: var(--text-secondary, #cbd5e1) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    [data-theme="light"] .std-card__sup { color: #334155 !important; }
    .std-card__tt {
        flex: 0 0 auto !important;
        padding: 1px 8px !important;
        background: var(--bg-hover, #2d3748) !important;
        border-radius: 6px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: var(--text-muted, #94a3b8) !important;
        white-space: nowrap !important;
    }
    .std-card__tt.is-empty { display: none !important; }
    [data-theme="light"] .std-card__tt {
        background: #f1f5f9 !important;
        color: #475569 !important;
    }

    /* Строка 3: Фото + Ссылка — одна строка */
    .std-card__actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding-top: 6px !important;
        border-top: 1px solid var(--border-subtle, rgba(148,163,184,0.08)) !important;
        margin-top: 2px !important;
        width: 100% !important;
    }
    .std-card__actions .std-photos-open-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 8px 12px !important;
        font-size: 12.5px !important;
        white-space: nowrap !important;
    }
    .std-card__actions .std-card__url {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 8px 12px !important;
        background: var(--bg-hover, #2d3748) !important;
        border: 1px solid var(--border-subtle, rgba(148,163,184,0.08)) !important;
        border-radius: 8px !important;
        color: var(--accent, #5b8def) !important;
        text-decoration: none !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        cursor: pointer !important;
        font-family: inherit !important;
    }
    .std-card__actions .std-card__url:active { background: var(--bg-btn, #334155) !important; }
    [data-theme="light"] .std-card__actions .std-card__url {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

    /* На мобиле таблица не должна показываться — если по какой-то
       причине отрисовалась. */
    #stdListWrap .standards-table { display: none !important; }
}


/* §STORE_TYPE_FILTER_V17B_SUP_STD_BTN (2026-10-07) */
/* Кнопка 📄 Стандарты в строке поставщика (модалка магазина). */
.sup-actions-cell {
    white-space: nowrap;
    text-align: right;
}
.sup-standards-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    margin-right: 4px;
    border-radius: 6px;
    background: rgba(91, 141, 239, 0.14);
    border: 1px solid rgba(91, 141, 239, 0.35);
    color: var(--accent, #5b8def);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.sup-standards-btn:hover {
    background: rgba(91, 141, 239, 0.24);
    border-color: var(--accent, #5b8def);
}
.sup-standards-btn:active { transform: scale(0.92); }
[data-theme="light"] .sup-standards-btn {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
[data-theme="light"] .sup-standards-btn:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

/* Mobile-вариант — в ряду .store-sup-mobile__row */
.store-sup-mobile__standards-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    margin: 0 2px 0 0;
    border-radius: 6px;
    background: rgba(91, 141, 239, 0.14);
    border: 1px solid rgba(91, 141, 239, 0.35);
    color: var(--accent, #5b8def);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.store-sup-mobile__standards-btn:active { transform: scale(0.92); }
[data-theme="light"] .store-sup-mobile__standards-btn {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

/* Ужимаю input'ы ⏰/💰 на mobile — чтобы 7-я кнопка влезла в ряд */
@media (max-width: 640px) {
    .store-sup-mobile__input {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
    }
    .store-sup-mobile__days .day-dot {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        font-size: 7.5px !important;
        line-height: 15px !important;
    }
}


/* ============================================================
   V18-multiselect (2026-10-13) — мультивыбор в dropdown-фильтрах.
   Выбранные пункты подсвечиваются через .is-selected.
   «Все (сбросить)» — визуально отделён от списка значений.
   ============================================================ */
.filter-dropdown__item.is-selected {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    font-weight: 600;
    position: relative;
}
.filter-dropdown__item.is-selected::before {
    content: '✓ ';
    color: #60a5fa;
    font-weight: 700;
}
.filter-dropdown__item--all {
    border-bottom: 1px solid #334155;
    margin-bottom: 4px;
    padding-bottom: 8px !important;
    color: var(--text-muted);
}
.filter-dropdown__item--all.is-selected {
    color: #60a5fa;
}
[data-theme="light"] .filter-dropdown__item.is-selected {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}


/* ============================================================
   V20-css (2026-10-13) — компактные фильтры в шапке.
   Явно показываем input, сжимаем ▼/↕ до 12px, уменьшаем паддинги.
   ============================================================ */
#tasksTableWrap thead th .filter-input,
#storesTableWrap thead th .filter-input {
    display: block !important;
    width: auto !important;
    min-width: 36px !important;
    flex: 1 1 36px !important;
    height: 20px !important;
    padding: 1px 3px !important;
    font-size: 10.5px !important;
}
#tasksTableWrap thead th .filter-toggle,
#storesTableWrap thead th .filter-toggle {
    min-width: 12px !important;
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
    font-size: 8px !important;
    line-height: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#tasksTableWrap thead th .sort-btn,
#storesTableWrap thead th .sort-btn {
    min-width: 12px !important;
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#tasksTableWrap thead th .sort-btn .i,
#storesTableWrap thead th .sort-btn .i {
    width: 11px !important;
    height: 11px !important;
}
#tasksTableWrap thead th,
#storesTableWrap thead th {
    padding-left: 3px !important;
    padding-right: 3px !important;
}
#tasksTableWrap tbody td,
#storesTableWrap tbody td {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 11.5px !important;
}


/* ============================================================
   V21-tt-dropdown (2026-10-13) — компактный dropdown для ТТ.
   Стили .ss-wrap / .ss-list уже есть в admin.css (для city/network).
   Здесь — только для позиционирования фиксированного списка поверх
   таблицы и узкого вида внутри td.col-supplier-tt.
   ============================================================ */
td.col-supplier-tt .ss-wrap {
    position: relative;
    width: 100%;
}
td.col-supplier-tt .ss-toggle {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 8px;
    padding: 2px 3px;
    cursor: pointer;
    line-height: 1;
}
td.col-supplier-tt .ss-toggle:hover { color: var(--accent); }
td.col-supplier-tt .sup-tt {
    width: 100%;
    padding-right: 16px !important;
    box-sizing: border-box;
}
/* .ss-list как fixed — позционируется из JS */
.ss-list[style*="position: fixed"] {
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    padding: 4px 0;
}
.ss-list[style*="position: fixed"] .ss-item {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-list[style*="position: fixed"] .ss-item:hover {
    background: #334155;
    color: #60a5fa;
}
.ss-list[style*="position: fixed"] .ss-empty {
    padding: 6px 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.3;
}
[data-theme="light"] .ss-list[style*="position: fixed"] {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15);
}
[data-theme="light"] .ss-list[style*="position: fixed"] .ss-item { color: #0f172a; }
[data-theme="light"] .ss-list[style*="position: fixed"] .ss-item:hover {
    background: #e2e8f0;
    color: #2563eb;
}


/* ============================================================
   V22-asm-close (2026-10-13) — «Закрыть» справа от «Добавить фото».
   Строка .asm-upload-row: [Добавить фото] [status] [....gap....] [Закрыть].
   ============================================================ */
#adminStoreStandardsModal .asm-upload-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
#adminStoreStandardsModal .asm-upload-row__status {
    flex: 1 1 auto;
    min-width: 0;
}
#adminStoreStandardsModal .asm-upload-row .asm-upload-row__close {
    margin-left: auto;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    #adminStoreStandardsModal .asm-upload-row {
        gap: 6px;
    }
    #adminStoreStandardsModal .asm-upload-row .asm-upload-row__close {
        /* На узких экранах — во всю ширину под кнопкой. */
        margin-left: 0;
        flex: 1 1 100%;
    }
}


/* ============================================================
   V23-asm-close-mobile (2026-10-13).
   Перебиваем V22: на мобильном «Закрыть» тоже справа в одной строке
   с «Добавить фото», а не во всю ширину под ней.
   Кнопку уменьшаем, чтобы влезли обе без переноса.
   ============================================================ */
@media (max-width: 640px) {
    #adminStoreStandardsModal .asm-upload-row {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
    }
    #adminStoreStandardsModal .asm-upload-row .btn-success {
        flex: 0 0 auto;
        font-size: 13px;
        padding: 8px 12px;
        white-space: nowrap;
    }
    #adminStoreStandardsModal .asm-upload-row__status {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 11px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #adminStoreStandardsModal .asm-upload-row .asm-upload-row__close {
        flex: 0 0 auto;
        margin-left: 0;
        font-size: 12px;
        padding: 8px 10px;
        white-space: nowrap;
    }
}


/* §STORE_STANDARDS_GRID_V1 (2026-10-13) */
/* Вкладка «Стандарты» админа — секция над списком магазинов:
   две группы — «🏪 Фото магазинов» и «🏢 Общие для сети». */
.std-photos-group {
    margin: 12px 0 16px;
}
.std-photos-group:first-child {
    margin-top: 4px;
}
.std-photos-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle, rgba(148,163,184,0.08));
}
.std-photos-group__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--bg-hover, #2d3748);
    color: var(--text-muted, #94a3b8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.std-photos-group__grid {
    /* Тот же grid, что и .std-photos-grid — но без внешних отступов,
       т.к. группа уже даёт отступ. */
    margin: 0 !important;
}


/* §STORE_STANDARDS_GRID_V2 (2026-10-13) */
/* ============================================================
   Финальный фикс плитки вкладки «Стандарты».
   Проблема V1: #stdPhotosGrid сам имеет класс .std-photos-grid
   (grid 120px minmax), а мои .std-photos-group — прямые дети.
   Они становились grid-items шириной 120px — не растягивались
   на всю ширину, и внутри .std-photos-group__grid оставалась
   1 колонка. Отсюда «рулон по одному».
   Фикс: #stdPhotosGrid — обычный block-контейнер. Каждая
   .std-photos-group — 100% ширины. Внутри — свой grid.
   ============================================================ */

#stdPhotosGrid.std-photos-grid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    min-height: 0 !important;
    margin: 12px 0 !important;
    padding: 0 !important;
}

.std-photos-group {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.std-photos-group:last-child {
    margin-bottom: 8px !important;
}

.std-photos-group__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* Мобильный — 2-3 колонки на узком экране */
@media (max-width: 640px) {
    .std-photos-group__grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 8px !important;
    }
}

/* Узкий экран — 90px плитка */
@media (max-width: 400px) {
    .std-photos-group__grid {
        grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important;
        gap: 6px !important;
    }
}

/* Чип ТТ на карточке — не даём растянуться. */
.std-photo-card__tt {
    max-width: calc(100% - 12px) !important;
}


/* ============================================================
   §DROPZONE_V1 (2026-10-14). Дроп-зона вкладки «Стандарты».
   PC-only: drag&drop файлов + Ctrl+V из буфера обмена.
   На mobile (<=640px) скрыта — там камера и <input type=file>.

   Глобальный paste-handler (standards.js) работает независимо
   от видимости зоны — но на мобиле всё равно нечего вставлять
   с физической клавиатуры, так что не мешает.
   ============================================================ */

.std-dropzone { display: none; }

@media (min-width: 641px) {
    .std-dropzone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 24px 20px;
        margin: 4px 0 12px;
        border: 2px dashed var(--border-strong, rgba(148, 163, 184, 0.24));
        border-radius: 12px;
        background: var(--bg-hover, #2d3748);
        color: var(--text-secondary, #cbd5e1);
        cursor: pointer;
        text-align: center;
        transition: background 120ms ease,
                    border-color 120ms ease,
                    color 120ms ease;
        user-select: none;
        outline: none;
        box-sizing: border-box;
    }
    .std-dropzone:hover,
    .std-dropzone:focus-visible {
        background: var(--bg-input, #334155);
        border-color: var(--accent, #5b8def);
        color: var(--text-primary, #f8fafc);
    }
    .std-dropzone.is-dragover {
        background: var(--accent-subtle, rgba(91, 141, 239, 0.12));
        border-color: var(--accent, #5b8def);
        border-style: solid;
        color: var(--accent, #5b8def);
    }
    .std-dropzone__icon {
        width: 32px;
        height: 32px;
        opacity: 0.75;
        flex: 0 0 auto;
        transition: opacity 120ms ease;
    }
    .std-dropzone.is-dragover .std-dropzone__icon { opacity: 1; }

    .std-dropzone__text {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.35;
        pointer-events: none;
    }
    .std-dropzone__sub {
        font-size: 12px;
        font-weight: 400;
        color: var(--text-muted, #94a3b8);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        flex-wrap: wrap;
    }
    .std-dropzone.is-dragover .std-dropzone__sub {
        color: var(--accent, #5b8def);
    }
    .std-dropzone kbd {
        display: inline-block;
        padding: 1px 6px;
        border-radius: 4px;
        background: var(--bg-surface, #1e293b);
        border: 1px solid var(--border-strong, rgba(148, 163, 184, 0.24));
        color: var(--text-primary, #f8fafc);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        box-shadow: 0 1px 0 var(--border-strong, rgba(148, 163, 184, 0.24));
    }
    .std-dropzone.is-dragover kbd {
        background: var(--accent, #5b8def);
        border-color: var(--accent, #5b8def);
        color: #ffffff;
    }

    /* --- Light theme --- */
    [data-theme="light"] .std-dropzone {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #334155;
    }
    [data-theme="light"] .std-dropzone:hover,
    [data-theme="light"] .std-dropzone:focus-visible {
        background: #f1f5f9;
        border-color: #2563eb;
        color: #0f172a;
    }
    [data-theme="light"] .std-dropzone.is-dragover {
        background: rgba(37, 99, 235, 0.08);
        border-color: #2563eb;
        color: #2563eb;
    }
    [data-theme="light"] .std-dropzone kbd {
        background: #ffffff;
        border-color: #cbd5e1;
        color: #0f172a;
    }
    [data-theme="light"] .std-dropzone.is-dragover kbd {
        background: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
    }
}


/* ============================================================
   §STD_VISIBILITY_V1 (2026-10-14). Скрытие сетевого фото у
   конкретного магазина: кнопка 🙈/👁 в модалке магазина.
   ============================================================ */

.asm-photo-card.is-hidden-for-store {
    opacity: 0.5;
}
.asm-photo-card.is-hidden-for-store::after {
    content: '🙈 скрыто у магазина';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

.asm-photo-card__hide {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.85);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.55);
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: background 120ms ease, transform 100ms ease;
    z-index: 3;
}
.asm-photo-card__hide:hover {
    background: rgba(91, 141, 239, 0.95);
    transform: scale(1.08);
}
.asm-photo-card__hide:active {
    transform: scale(0.9);
}
.asm-photo-card__hide.is-hidden {
    background: rgba(61, 174, 127, 0.9);
}
.asm-photo-card__hide.is-hidden:hover {
    background: rgba(61, 174, 127, 1);
}

/* SALE_POINTS_V2B2 (2026-10-14): селект 🏷 МП + бейдж на карточке. */
.asm-sp-select {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    box-sizing: border-box;
    min-width: 130px;
    max-width: 200px;
    transition: border-color 120ms ease;
}
.asm-sp-select:hover {
    border-color: var(--border);
}
.asm-sp-select:focus {
    outline: none;
    border-color: var(--accent);
}
[data-theme="light"] .asm-sp-select {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

.asm-photo-card__sp {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(91, 141, 239, 0.85);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 700;
    text-align: center;
    max-width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .asm-photo-card__sp {
    background: #2563eb;
}

@media (max-width: 640px) {
    .asm-sp-select {
        min-width: 100px;
        max-width: 130px;
        height: 30px;
        font-size: 11.5px;
        padding: 0 8px;
    }
}


/* ============================================================
   §SALE_POINTS_V1 (2026-10-14). Вкладка «🏷 МП» — справочник
   мест продаж (per-client). Список + действия.
   ============================================================ */

.sp-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.sp-hint {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 4px 0 12px;
}

#salePointsList {
    font-size: 13px;
    margin-top: 8px;
}

.sp-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.sp-table thead th {
    text-align: left;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.sp-table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    vertical-align: middle;
}
.sp-table tbody tr:last-child td { border-bottom: none; }
.sp-table tbody tr:hover { background: var(--bg-hover); }
.sp-table tbody td strong { color: var(--text-primary); font-weight: 600; }

.sp-usage {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.sp-usage--used {
    background: var(--accent-subtle);
    color: var(--accent);
}

.sp-table td .edit-store-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
}
.sp-table td .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
}

/* ─── Mobile: строки → карточки ─── */
@media (max-width: 640px) {
    .sp-table, .sp-table tbody, .sp-table tr, .sp-table td {
        display: block;
        width: 100%;
    }
    .sp-table thead { display: none; }
    .sp-table tr {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    .sp-table td {
        padding: 3px 0;
        border: none;
    }
    .sp-table td:first-child { font-weight: 700; color: var(--text-primary); font-size: 14px; }
    .sp-table td:last-child {
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--border-subtle);
        display: flex;
        gap: 6px;
        justify-content: flex-end;
    }
}


/* ============================================================
   §SALE_POINTS_V2B (2026-10-14). Кнопка 🏷 в строке поставщика
   + модалка выбора МП для пары (магазин × поставщик).
   ============================================================ */

.sup-sale-points-btn {
    /* SALE_POINTS_V2B_FIX1: кнопка 🏷 без .sup-standards-btn —
       стили продублированы явно (дизайн 1:1 как у 📄). */
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.1s ease;
}
.sup-sale-points-btn:hover {
    background: rgba(91, 141, 239, 0.14);
    color: var(--accent-blue);
    border-color: rgba(91, 141, 239, 0.4);
}
.sup-sale-points-btn:active {
    transform: scale(0.9);
}
.sup-sale-points-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.sup-sale-points-btn.has-value {
    background: rgba(91, 141, 239, 0.18);
    border-color: rgba(91, 141, 239, 0.45);
    color: var(--accent);
}

/* Mobile — как .store-sup-mobile__standards-btn */
.store-sup-mobile__sale-points-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    margin: 0 2px 0 0;
    border-radius: 6px;
    background: rgba(91, 141, 239, 0.14);
    border: 1px solid rgba(91, 141, 239, 0.35);
    color: var(--accent, #5b8def);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.store-sup-mobile__sale-points-btn:active { transform: scale(0.92); }
[data-theme="light"] .store-sup-mobile__sale-points-btn {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.store-sup-mobile__row .sup-sale-points-btn {
    margin-left: 2px;
}

/* ─── Модалка ─── */
#selectStoreSalePointsModal .modal-content {
    max-width: 520px;
}
.sp-subtitle {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 4px 0 8px;
    line-height: 1.4;
}

.sp-add-row {
    display: flex;
    gap: 6px;
    margin: 8px 0 4px;
}
.sp-add-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.sp-add-input::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}
.sp-add-input:focus {
    outline: none;
    border-color: var(--accent);
}
.sp-add-btn {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, transform 100ms ease;
}
.sp-add-btn:hover { background: var(--accent-hover); }
.sp-add-btn:active { transform: scale(0.97); }
.sp-add-btn:disabled { opacity: 0.55; pointer-events: none; }

.sp-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 2px;
}
.sp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.sp-row:hover {
    background: var(--bg-input);
    border-color: var(--border);
}
.sp-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex: 0 0 auto;
    cursor: pointer;
    margin: 0;
}
.sp-row__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-row__count {
    flex: 0 0 auto;
    width: 64px;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    text-align: center;
    box-sizing: border-box;
}
.sp-row__count:focus {
    outline: none;
    border-color: var(--accent);
}
.sp-row__count:disabled {
    opacity: 0.4;
    pointer-events: none;
}
.sp-row.is-off {
    opacity: 0.7;
}
.sp-row.is-off .sp-row__name {
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .sp-row {
        padding: 10px 12px;
    }
    .sp-row__count {
        width: 56px;
    }
}


/* ============================================================
   §SALE_POINTS_V2B2_FIX1 (2026-10-15). Колонки ТТ и URL
   в таблице поставщиков (модалка магазина).
   ТТ: 90px — «MM01», «SM03», «НМ» + стрелка ▼.
   URL: 80px — влезает «Стандарты»-заголовок, длинные адреса и так
        обрезаются ellipsis. За счёт этого ТТ расширено.
   ============================================================ */

.store-suppliers-table thead th:nth-child(2),
.store-suppliers-table tbody td.col-supplier-tt {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}
.store-suppliers-table tbody td.col-supplier-tt .ss-wrap {
    width: 90px;
    max-width: 90px;
}
.store-suppliers-table thead th:nth-child(6),
.store-suppliers-table tbody td:nth-child(6) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}


/* ============================================================
   §SALE_POINTS_V2B3 (2026-10-15).
   - .std-sp-select — селект 🏷 МП во вкладке «Стандарты».
   - .std-photo-card__sp — бейдж МП на карточке фото.
   ============================================================ */

.std-sp-select {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    box-sizing: border-box;
    min-width: 140px;
    max-width: 220px;
    transition: border-color 120ms ease;
}
.std-sp-select:hover { border-color: var(--border); }
.std-sp-select:focus {
    outline: none;
    border-color: var(--accent);
}
[data-theme="light"] .std-sp-select {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

.std-photo-card__sp {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(91, 141, 239, 0.85);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    max-width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .std-photo-card__sp {
    background: #2563eb;
}

@media (max-width: 640px) {
    .std-sp-select {
        min-width: 100px;
        max-width: 140px;
        height: 34px;
        font-size: 12px;
    }
}


/* ============================================================
   §SALE_POINTS_MOBILE_V1 (2026-10-15). Мобильная адаптация
   элементов МП: строка поставщика (9 элементов), селект 🏷 МП
   в модалке стандартов магазина, модалка выбора МП.
   Только admin.css — JS и разметка не трогаются.
   ============================================================ */

@media (max-width: 640px) {

    /* ─── 1. Строка поставщика в мобильной карточке модалки магазина ───
       9 элементов: [🏷 ТТ] [⏰] [💰] [7 кружков] [🔗] [💬] [📄] [🏷] [×]
       Плотнее: input 26px, кнопки 20px, кружки 13px, gap 2px. */
    .store-sup-mobile__row {
        gap: 2px !important;
    }
    .store-sup-mobile__input {
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        padding: 2px 1px !important;
        font-size: 10px !important;
    }
    .store-sup-mobile__days {
        gap: 1px !important;
    }
    .store-sup-mobile__days .day-dot {
        width: 13px !important;
        height: 13px !important;
        min-width: 13px !important;
        font-size: 6.5px !important;
        line-height: 13px !important;
        border-width: 1px !important;
    }
    .store-sup-mobile__field .icon {
        font-size: 10px !important;
    }
    .store-sup-mobile__url-btn,
    .store-sup-mobile__comment-btn,
    .store-sup-mobile__standards-btn,
    .store-sup-mobile__sale-points-btn,
    .store-sup-mobile__row .sup-sale-points-btn {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        font-size: 11px !important;
        padding: 0 !important;
    }
    .store-sup-mobile__row .sup-sale-points-btn svg {
        width: 11px !important;
        height: 11px !important;
    }
    .store-sup-mobile__remove {
        width: 18px !important;
        height: 20px !important;
        min-width: 18px !important;
        font-size: 14px !important;
        padding: 0 !important;
    }

    /* ─── 2. Селект 🏷 МП в модалке стандартов магазина ───
       .asm-upload-row: [селект] [📷 Добавить фото] [status] [✖ Закрыть].
       На узком экране селект переносится на отдельную строку. */
    #adminStoreStandardsModal .asm-upload-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #adminStoreStandardsModal .asm-sp-select {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        order: -1 !important;
        height: 36px !important;
        font-size: 13px !important;
    }
    #adminStoreStandardsModal .asm-upload-row .btn-success {
        flex: 0 0 auto !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    #adminStoreStandardsModal .asm-upload-row__status {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 11px !important;
        text-align: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    #adminStoreStandardsModal .asm-upload-row .asm-upload-row__close {
        flex: 0 0 auto !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* ─── 3. Модалка выбора МП (#selectStoreSalePointsModal) ─── */
    .sp-add-row {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    .sp-add-input {
        height: 36px !important;
        font-size: 12.5px !important;
    }
    .sp-add-btn {
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 12.5px !important;
    }
    .sp-row {
        padding: 9px 10px !important;
        gap: 8px !important;
    }
    .sp-row__name {
        font-size: 13px !important;
    }
    .sp-row__count {
        width: 52px !important;
        font-size: 12.5px !important;
    }

    /* ─── 4. Вкладка «МП» — список МП (карточки). На 640px уже
       карточки (V2A), здесь добиваем плотность на 400px. ─── */
    .sp-table tr {
        padding: 8px 10px !important;
    }
    .sp-table td:first-child {
        font-size: 13.5px !important;
    }
}

/* Очень узкие экраны (≤400px): ещё плотнее. */
@media (max-width: 400px) {

    .store-sup-mobile__input {
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        font-size: 9.5px !important;
    }
    .store-sup-mobile__days .day-dot {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        font-size: 6px !important;
        line-height: 12px !important;
    }
    .store-sup-mobile__url-btn,
    .store-sup-mobile__comment-btn,
    .store-sup-mobile__standards-btn,
    .store-sup-mobile__sale-points-btn,
    .store-sup-mobile__row .sup-sale-points-btn {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        font-size: 10px !important;
    }
    .store-sup-mobile__row .sup-sale-points-btn svg {
        width: 10px !important;
        height: 10px !important;
    }
    .store-sup-mobile__remove {
        width: 16px !important;
        height: 18px !important;
        min-width: 16px !important;
        font-size: 13px !important;
    }

    .sp-row__name {
        font-size: 12.5px !important;
    }
    .sp-row__count {
        width: 48px !important;
        font-size: 12px !important;
    }
}


/* ============================================================
   §SALE_POINTS_MOBILE_V2 (2026-10-15). Компактная карточка МП
   на мобиле. Было: 5 блоков по строкам (~220px). Стало: 2 строки
   по 30-32px (~68px).

   Раскладка mobile:
     <tr> = строка-карточка (flex column, padding 8px 10px)
       <td>[Клиент]                (только superadmin)
       <td>[Порядок] [Название] [chip] [✎] [🗑]   ← одна строка
   ============================================================ */

@media (max-width: 640px) {

    /* <tr> — колонка */
    .sp-table tr {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        margin-bottom: 6px !important;
    }

    /* Каждая <td> — flex-строка внутри */
    .sp-table td {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        border: none !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* Клиент (только superadmin): мелкий label сверху */
    .sp-table td:nth-child(1) {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: var(--text-muted) !important;
        margin-bottom: 2px !important;
    }

    /* Порядок + Название + chip + кнопки — на одной строке */
    .sp-table td:nth-child(2) { /* Порядок */
        display: inline-flex !important;
        min-width: 22px !important;
        justify-content: center !important;
        font-size: 11px !important;
        color: var(--text-muted) !important;
        margin-right: 8px !important;
    }
    .sp-table td:nth-child(3) { /* Название */
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
    }
    .sp-table td:nth-child(3) strong { font-weight: 700 !important; }
    .sp-table td:nth-child(4) { /* Используется — chip справа */
        flex: 0 0 auto !important;
        margin-left: 6px !important;
    }
    .sp-table td:nth-child(5) { /* Действия */
        flex: 0 0 auto !important;
        margin-left: 6px !important;
    }

    /* Chip компактнее */
    .sp-table .sp-usage {
        padding: 2px 8px !important;
        font-size: 10.5px !important;
    }

    /* Кнопки в строке — 28px, иконка 13px */
    .sp-table td:nth-child(5) .edit-store-btn,
    .sp-table td:nth-child(5) .btn-danger {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        border-radius: 6px !important;
    }
    .sp-table td:nth-child(5) .btn-danger {
        margin-left: 4px !important;
    }

    /* Убираем разделитель-бордер между td — он был от V2A */
    .sp-table td:last-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        justify-content: flex-end !important;
    }
}

/* Для superadmin: 5 колонок → две строки. Клиент сверху, всё
   остальное — во второй строке. */
@media (max-width: 640px) {
    .sp-table td:nth-child(5) { margin-left: auto !important; }
}


/* ============================================================
   §SALE_POINTS_MOBILE_V3 (2026-10-15). Компактная карточка МП
   на мобиле — ОДНА строка.

   Причина прошлого раздувания (§SALE_POINTS_MOBILE_V2): `<tr>`
   был flex-column, каждая `<td>` вставала в свою строку.

   Теперь `<tr>` — flex-row + flex-wrap + align-items: center.
   Все `<td>` — inline-flex (мелкие). Порядок: клиент (если есть),
   порядок, название, chip, кнопки.
   ============================================================ */

@media (max-width: 640px) {

    /* Один ряд, перенос при нехватке */
    .sp-table tr {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px 8px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        margin-bottom: 6px !important;
    }

    /* Все ячейки — inline-flex */
    .sp-table td {
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 !important;
        border: none !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    /* Клиент (superadmin) — серым, мелким */
    .sp-table td:nth-child(1) {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: var(--text-muted) !important;
    }

    /* Порядок — маленькая цифра */
    .sp-table td:nth-child(2) {
        justify-content: center !important;
        min-width: 18px !important;
        font-size: 11px !important;
        color: var(--text-muted) !important;
    }

    /* Название — растягивается, тянет chip + кнопки вправо */
    .sp-table td:nth-child(3) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .sp-table td:nth-child(3) strong {
        font-weight: 700 !important;
    }

    /* Chip */
    .sp-table td:nth-child(4) {
        margin-left: auto !important;
    }
    .sp-table .sp-usage {
        padding: 2px 8px !important;
        font-size: 10.5px !important;
    }

    /* Кнопки */
    .sp-table td:nth-child(5) {
        flex: 0 0 auto !important;
    }
    .sp-table td:nth-child(5) .edit-store-btn,
    .sp-table td:nth-child(5) .btn-danger {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        border-radius: 6px !important;
    }
    .sp-table td:nth-child(5) .btn-danger {
        margin-left: 4px !important;
    }

    /* Убираем разделитель-бордер между td от V2A */
    .sp-table td:last-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }
}


/* ============================================================
   §STORES_IMPORT_V1 (2026-10-15). Модалка импорта CSV/XLSX.
   ============================================================ */

#importFileModal .imp-modal {
    max-width: 900px;
    width: 95vw;
}
#importFileModal .imp-hint {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 4px 0 12px;
}
#importFileModal .imp-file-info {
    padding: 8px 12px;
    background: var(--bg-hover);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    border-left: 3px solid var(--accent);
}

#importFileModal .imp-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    margin: 8px 0 12px;
    border: 2px dashed var(--border-strong);
    border-radius: 12px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    transition: background 120ms ease, border-color 120ms ease;
}
#importFileModal .imp-dropzone:hover,
#importFileModal .imp-dropzone:focus-visible {
    background: var(--bg-input);
    border-color: var(--accent);
    color: var(--text-primary);
    outline: none;
}
#importFileModal .imp-dropzone.is-dragover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    border-style: solid;
    color: var(--accent);
}
#importFileModal .imp-dropzone .i--lg {
    width: 36px;
    height: 36px;
    opacity: 0.7;
}
#importFileModal .imp-dropzone__text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}
#importFileModal .imp-dropzone__sub {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

/* --- Маппинг --- */
#importFileModal .imp-mapping {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 45vh;
    overflow-y: auto;
    padding: 4px 0;
    margin-bottom: 12px;
}
#importFileModal .imp-map-row {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}
#importFileModal .imp-map-head {
    background: transparent;
    border: none;
    padding: 0 10px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
#importFileModal .imp-map-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#importFileModal .imp-map-select {
    height: 32px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
}
#importFileModal .imp-map-select:focus {
    outline: none;
    border-color: var(--accent);
}
#importFileModal .imp-map-example {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Превью --- */
#importFileModal .imp-preview-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 8px 0 6px;
}
#importFileModal .imp-preview {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface);
    max-height: 30vh;
}
#importFileModal .imp-preview-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
}
#importFileModal .imp-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
#importFileModal .imp-preview-table th {
    padding: 7px 10px;
    text-align: left;
    background: var(--bg-body);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
#importFileModal .imp-preview-table td {
    padding: 7px 10px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
#importFileModal .imp-preview-table tr:last-child td { border-bottom: none; }

/* --- Результат --- */
#importFileModal .imp-result {
    padding: 16px 20px;
    background: var(--bg-hover);
    border-radius: 10px;
    border-left: 3px solid var(--success);
}
#importFileModal .imp-result-line {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 4px 0;
}
#importFileModal .imp-result-line b {
    color: var(--text-primary);
    font-size: 16px;
    margin-right: 4px;
}
#importFileModal .imp-result-ok b { color: var(--success); }
#importFileModal .imp-result-errors {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--danger-subtle);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    max-height: 200px;
    overflow-y: auto;
}
#importFileModal .imp-result-errors b {
    color: var(--danger);
    display: block;
    margin-bottom: 6px;
}
#importFileModal .imp-result-errors ul {
    margin: 0;
    padding-left: 18px;
    line-height: 1.5;
}
#importFileModal .imp-result-errors li {
    word-break: break-word;
}

/* --- Mobile --- */
@media (max-width: 640px) {
    #importFileModal .imp-modal {
        max-width: 100%;
        width: 100%;
    }
    #importFileModal .imp-map-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 8px 10px;
    }
    #importFileModal .imp-map-head {
        display: none;
    }
    #importFileModal .imp-map-header {
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    #importFileModal .imp-map-example {
        font-size: 11.5px;
        padding-left: 2px;
    }
    #importFileModal .imp-dropzone {
        padding: 28px 16px;
    }
    #importFileModal .imp-preview-table th,
    #importFileModal .imp-preview-table td {
        padding: 5px 7px;
        font-size: 11px;
    }
}


/* ============================================================
   §STORES_IMPORT_V2A (2026-10-15). Контекст импорта в модалке:
   лист файла / клиент / поставщик + 2 чекбокса.
   ============================================================ */

#importFileModal .imp-context {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 12px 14px;
    margin: 8px 0 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 10px;
}
#importFileModal .imp-ctx-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
#importFileModal .imp-ctx-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
#importFileModal .imp-ctx-field select {
    height: 34px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
#importFileModal .imp-ctx-field select:focus {
    outline: none;
    border-color: var(--accent);
}
#importFileModal .imp-ctx-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 2px;
}
#importFileModal .imp-ctx-checks {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 4px;
}
#importFileModal .imp-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    user-select: none;
}
#importFileModal .imp-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
[data-theme="light"] #importFileModal .imp-context {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] #importFileModal .imp-ctx-field select {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

@media (max-width: 640px) {
    #importFileModal .imp-context {
        grid-template-columns: 1fr;
    }
    #importFileModal .imp-ctx-checks {
        flex-direction: column;
        gap: 8px;
    }
}

/* ============================================================
   §PLANS_MAP_ENHANCE (2026-10-18)
   ============================================================ */

/* 1. Карта в планах на весь экран */
#plansViewMap {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    min-height: 400px;
    flex: 1;
}
.plans-map-days-filter {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.plans-map-day-btn {
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: 0.12s;
}
.plans-map-day-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}
.plans-map-day-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}
#plansMap {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 350px;
    border-radius: 0 0 10px 10px;
}

/* 2. Фикс мобильной шапки зарплаты в планах */
@media (max-width: 768px) {
    #plansModal .plans-monthly-summary {
        font-size: 10.5px !important;
        padding: 2px 6px !important;
        margin: 0 !important;
        white-space: normal !important;
        display: inline-block;
        line-height: 1.3;
    }
    #plansModal .plans-month-inline {
        flex: 1 1 100%;
        justify-content: space-between;
        margin-bottom: 4px;
    }
}

/* 3. Фикс переноса кнопок в списке работников */
@media (max-width: 768px) {
    #workersList .wk-chip--salary {
        flex: 0 1 auto !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 4px 2px !important;
        min-width: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #workersList .worker-edit-btn,
    #workersList .worker-delete-btn {
        flex: 0 0 auto !important;
        margin-left: 4px !important;
    }
    #workersList .worker-delete-btn {
        margin-left: 0 !important;
    }
    /* Прижимаем зарплату вправо, чтобы она не раздувала строку */
    #workersList .wk-chip--salary {
        margin-left: auto;
        margin-right: 8px;
    }
}


/* ============================================================
   §PLANS_MAP_VIEW (2026-10-18) — Карта в модалке планов
   ============================================================ */
#plansViewMap {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    min-height: 400px;
}
#plansMap {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 10px;
    background: #0b1120;
    z-index: 1;
}
/* Тёмные тайлы */
[data-theme="dark"] #plansMap .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.05);
}
[data-theme="dark"] #plansMap .leaflet-control-zoom a,
[data-theme="dark"] #plansMap .leaflet-control-attribution {
    filter: invert(1) hue-rotate(180deg);
}
#plansMap .leaflet-control-zoom a {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
}
#plansMap .leaflet-control-zoom a:hover {
    background: var(--bg-hover);
}


/* ============================================================
   §PLANS_HEADER_POLISH_V2 (2026-10-18) — Аккуратная шапка в 2 строки.
   ============================================================ */

/* 1. Общий контейнер шапки */
html body #plansModal .plans-head {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 12px !important;
    padding: 4px 16px 6px !important;
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Сбрасываем старые order, чтобы выстроить заново */
html body #plansModal .plans-head > * {
    order: initial !important;
}

/* 2. Строка 1: Заголовок (ФИО) */
html body #plansModal .plans-head__title {
    order: 1 !important;
    flex: 0 1 auto !important;
    max-width: 350px !important;
    margin: 0 !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Месяц и Год */
html body #plansModal .plans-month-inline {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
}
html body #plansModal .plans-month-inline select {
    height: 28px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    background: var(--bg-hover) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    min-width: 90px !important;
}
html body #plansModal .plans-month-inline input[type="number"] {
    width: 56px !important;
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    background: var(--bg-hover) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    text-align: center !important;
}

/* ЗП за месяц (зеленый бейдж) */
html body #plansModal .plans-monthly-summary {
    order: 3 !important;
    flex: 0 0 auto !important;
    font-weight: 700 !important;
    color: var(--success, #34d399) !important;
    background: var(--success-subtle, rgba(52,211,153,0.15)) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    margin: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

/* Кнопки (Лупа, Обновить, Закрыть и т.д.) */
html body #plansModal .plans-actions {
    order: 4 !important;
    margin-left: auto !important;
    display: flex !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
}

/* 3. Переключатель Магазины/Дни + Кнопки (в правом углу) */
html body #plansModal .plans-view-toggle {
    order: 4 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    width: auto !important;
}
html body #plansModal .plans-actions {
    order: 5 !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
}

/* Сводка за неделю (цифры) */
html body #plansModal .plans-week-summary {
    order: 6 !important;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 4px 0 0 0 !important;
}

/* Мобильная адаптация */
@media (max-width: 640px) {
    html body #plansModal .plans-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    html body #plansModal .plans-head__title {
        order: 1 !important;
        max-width: 100% !important;
        margin-bottom: 4px !important;
    }
    html body #plansModal .plans-actions {
        order: 5 !important;
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }
    html body #plansModal .plans-view-toggle {
        order: 4 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    html body #plansModal .plans-month-inline {
        order: 3 !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    html body #plansModal .plans-monthly-summary {
        order: 4 !important;
        width: 100% !important;
        text-align: center !important;
        margin: 4px 0 !important;
    }
    html body #plansModal .plans-view-toggle {
        order: 5 !important;
        width: 100% !important;
    }
    html body #plansModal .plans-week-summary {
        order: 6 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-top: 6px !important;
        padding-top: 8px !important;
        border-top: 1px dashed var(--border-subtle) !important;
    }
}


/* ============================================================
   §PLANS_MAP_ENHANCE_V3 (2026-10-18)
   ============================================================ */

/* 1. Карта планов на 100% высоты */
#plansViewMap.plans-view-wrap {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
.plans-map-days-filter {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    flex-wrap: wrap !important;
    border-radius: 10px 10px 0 0 !important;
}
.plans-map-day-btn {
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: var(--bg-hover) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: 0.12s !important;
}
.plans-map-day-btn:hover { background: var(--bg-input) !important; color: var(--text-primary) !important; }
.plans-map-day-btn.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; }
#plansMap {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 0 10px 10px !important;
    z-index: 1 !important;
}

/* 2. Перенос длинной зарплаты в мобильных планах */
@media (max-width: 768px) {
    #plansMonthWrap {
        flex-wrap: wrap !important;
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 4px !important;
    }
    #plansModal .plans-monthly-summary {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 11px !important;
        padding: 2px 6px !important;
        display: inline-block !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* 3. Кнопки в списке работников в одну строку с зарплатой */
@media (max-width: 768px) {
    #workersList tbody tr {
        gap: 4px 6px !important;
        padding: 8px 10px !important;
    }
    #workersList .wk-chip--metric {
        padding: 3px 6px !important;
        font-size: 11px !important;
    }
    #workersList .wk-chip--salary {
        margin-left: auto !important;
        margin-right: 4px !important;
        padding: 3px 0 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    #workersList .worker-edit-btn,
    #workersList .worker-delete-btn {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    #workersList .worker-delete-btn {
        margin-left: 0 !important;
    }
}

/* ============================================================
   §PLANS_MAP_FIX_HEIGHT_V4 (2026-10-18)
   ============================================================ */

/* 1. Карта планов: жесткая высота, чтобы Leaflet не схлопывался */
#plansViewMap.plans-view-wrap {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    /* Жесткая высота, чтобы карта отрисовалась */
    height: calc(100vh - 220px) !important;
    min-height: 400px !important;
}
.plans-map-days-filter {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    flex-wrap: wrap !important;
    border-radius: 10px 10px 0 0 !important;
}
.plans-map-day-btn {
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: var(--bg-hover) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: 0.12s !important;
}
.plans-map-day-btn:hover { background: var(--bg-input) !important; color: var(--text-primary) !important; }
.plans-map-day-btn.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; }
#plansMap {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 350px !important;
    border-radius: 0 0 10px 10px !important;
    z-index: 1 !important;
}

/* 2. Мобильная адаптация высоты карты */
@media (max-width: 768px) {
    #plansViewMap.plans-view-wrap {
        height: calc(100vh - 300px) !important;
        min-height: 300px !important;
    }
}


/* ============================================================
   §PLANS_MAP_FINAL_V5 (2026-10-18) — Сброс конфликтов и фиксы
   ============================================================ */

/* 1. Отменяем фиксированные высоты старых патчей для карты */
#plansViewMap.plans-view-wrap {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.plans-map-days-filter {
    flex: 0 0 auto !important;
}
#plansMap {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    border-radius: 0 0 10px 10px !important;
}

/* 2. Мобильная шапка планов (ЗП не уезжает за край) */
@media (max-width: 768px) {
    #plansModal .plans-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 8px 12px !important;
    }
    #plansModal .plans-head__title {
        max-width: 100% !important;
    }
    #plansModal .plans-month-inline {
        width: 100% !important;
        justify-content: space-between !important;
        margin: 0 !important;
    }
    #plansModal .plans-monthly-summary {
        width: 100% !important;
        white-space: normal !important; /* Текст переносится */
        word-break: break-word !important;
        text-align: left !important;
        display: block !important;
        margin-top: 4px !important;
        padding: 6px 8px !important;
    }
    #plansModal .plans-week-summary {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        border-top: 1px dashed var(--border-subtle) !important;
        padding-top: 8px !important;
    }
    #plansModal .plans-view-toggle {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* 3. Список работников на мобиле (кнопки в одной строке с ЗП) */
@media (max-width: 768px) {
    #workersList tbody tr {
        flex-wrap: wrap !important;
        gap: 4px 6px !important;
        padding: 8px 10px !important;
    }
    #workersList .wk-chip--city,
    #workersList .wk-chip--name {
        flex: 1 1 auto !important;
    }
    #workersList .wk-chip--client {
        width: 100% !important;
    }
    #workersList .wk-chip--metric {
        flex: 0 0 auto !important;
    }
    /* Прижимаем ЗП вправо */
    #workersList .wk-chip--salary {
        margin-left: auto !important;
        margin-right: 6px !important;
        font-size: 11.5px !important;
        padding: 3px 0 !important;
        white-space: nowrap !important;
    }
    /* Кнопки не сжимаются */
    #workersList .worker-edit-btn,
    #workersList .worker-delete-btn {
        flex: 0 0 auto !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #workersList .worker-edit-btn {
        margin-left: 4px !important;
    }
}


/* ============================================================
   §PLANS_MAP_FINAL_V6 (2026-10-18) — Фикс карты и мобильных элементов
   ============================================================ */

/* 1. Карта: убираем конфликтующий display: flex !important и жесткие высоты */
#plansViewMap.plans-view-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    /* display: flex управляется через JS (inline style) */
}

.plans-map-days-filter {
    flex: 0 0 auto !important;
}

#plansMap {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 350px !important;
    border-radius: 0 0 10px 10px !important;
}

/* 2. Мобильная шапка планов: ЗП не уезжает за экран */
@media (max-width: 768px) {
    #plansModal .plans-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 8px 12px !important;
    }
    #plansModal .plans-head__title {
        max-width: 100% !important;
    }
    #plansModal .plans-month-inline {
        width: 100% !important;
        justify-content: space-between !important;
        margin: 0 !important;
    }
    /* Бейдж зарплаты: перенос строк */
    #plansModal .plans-monthly-summary {
        width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
        display: block !important;
        margin-top: 4px !important;
        padding: 6px 8px !important;
        text-align: center !important;
    }
    #plansModal .plans-week-summary {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        border-top: 1px dashed var(--border-subtle) !important;
        padding-top: 8px !important;
    }
    #plansModal .plans-view-toggle {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* 3. Список работников на мобиле: кнопки держатся вместе с ЗП */
@media (max-width: 768px) {
    #workersList tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 6px !important;
        padding: 8px 10px !important;
        align-items: center !important;
    }
    #workersList .wk-chip--city {
        flex: 0 0 auto !important;
    }
    #workersList .wk-chip--name {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #workersList .wk-chip--client {
        flex: 0 0 100% !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }
    #workersList .wk-chip--metric {
        flex: 0 0 auto !important;
    }
    
    /* ЗП прижимается вправо, не сжимается */
    #workersList .wk-chip--salary {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        margin-right: 6px !important;
        font-size: 11.5px !important;
        padding: 3px 0 !important;
    }
    /* Кнопки не сжимаются и не переносятся */
    #workersList .worker-edit-btn,
    #workersList .worker-delete-btn {
        flex: 0 0 auto !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #workersList .worker-edit-btn {
        margin-left: 0 !important;
    }
    #workersList .worker-delete-btn {
        margin-left: 4px !important;
    }
}


/* ============================================================
   §PLANS_MAP_V7 + MOBILE_FIX_V7 (2026-10-18)
   ============================================================ */

/* 1. Mobile — зарплата в шапке планов переносится по строкам.
   CSS !important применяется ко ВСЕМ потомкам, чтобы перебить
   inline white-space:nowrap из renderMonthlyTotals(). */
@media (max-width: 768px) {
    #plansModal .plans-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 8px 12px !important;
    }
    #plansModal .plans-head__title {
        max-width: 100% !important;
    }
    #plansModal .plans-month-inline {
        width: 100% !important;
        justify-content: space-between !important;
        margin: 0 !important;
    }
    #plansModal .plans-monthly-summary,
    #plansModal .plans-monthly-summary * {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
    }
    #plansModal .plans-monthly-summary {
        width: 100% !important;
        display: block !important;
        margin-top: 4px !important;
        padding: 6px 8px !important;
        text-align: center !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }
    #plansModal .plans-week-summary {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        border-top: 1px dashed var(--border-subtle) !important;
        padding-top: 8px !important;
    }
    #plansModal .plans-view-toggle {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* 2. Mobile — работники: edit/delete не падают на строку ниже.
   Уменьшаем метрики, ограничиваем зарплату, кнопки 24×24. */
@media (max-width: 768px) {
    #workersList tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 5px !important;
        padding: 8px 10px !important;
        align-items: center !important;
    }
    #workersList .wk-chip--city {
        flex: 0 0 auto !important;
        order: 1 !important;
    }
    #workersList .wk-chip--name {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        order: 2 !important;
    }
    #workersList .wk-chip--client {
        flex: 0 0 100% !important;
        order: 3 !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }
    #workersList .wk-chip--metric {
        flex: 0 0 auto !important;
        order: 4 !important;
        padding: 2px 6px !important;
        font-size: 10.5px !important;
        gap: 2px !important;
    }
    #workersList .wk-chip--metric .icon {
        font-size: 10px !important;
    }
    #workersList .wk-chip--salary {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 90px !important;
        order: 4 !important;
        margin-left: auto !important;
        margin-right: 4px !important;
        font-size: 10.5px !important;
        padding: 2px 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #workersList .worker-edit-btn,
    #workersList .worker-delete-btn {
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        order: 5 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #workersList .worker-edit-btn svg,
    #workersList .worker-delete-btn svg {
        width: 12px !important;
        height: 12px !important;
    }
    #workersList .worker-edit-btn { margin-left: 0 !important; }
    #workersList .worker-delete-btn { margin-left: 2px !important; }
}


/* ============================================================
   §PLANS_MAP_FULLHEIGHT_V8 (2026-10-18) — Карта на всю высоту модалки.
   Перебивает height: calc(...) из старых патчей V3/V4.
   ============================================================ */
html body #plansModal #plansViewMap.plans-view-wrap {
    /* Отменяем жесткую высоту, чтобы flex-родитель растянул блок */
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
}

html body #plansModal .plans-map-days-filter {
    flex: 0 0 auto !important;
}

html body #plansModal #plansMap {
    /* Карта забирает всё оставшееся место */
    flex: 1 1 auto !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 350px !important; /* Минимальный запас, если экран низкий */
    border-radius: 0 0 10px 10px !important;
    background: #0b1120 !important;
    z-index: 1 !important;
}


/* ============================================================
   §PLANS_MAP_FULLHEIGHT_V9 (2026-10-18) — Карта на всю высоту модалки.
   Перебивает height: calc(...) из старых патчей V3/V4.
   ============================================================ */

/* 1. Жестко задаем высоту модалке */
html body #plansModal .modal-content.plans-v2-modal {
    height: 96vh !important;
    max-height: 96vh !important;
}

/* 2. Контейнер карты забирает оставшееся место */
html body #plansModal #plansViewMap.plans-view-wrap {
    height: auto !important;
    min-height: 0 !important;
    /* flex: 1 1 0% — ключевой фикс. Заставляет игнорировать размер контента */
    flex: 1 1 0% !important; 
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
}

html body #plansModal .plans-map-days-filter {
    flex: 0 0 auto !important;
}

/* 3. Сама карта тянется на 100% контейнера */
html body #plansModal #plansMap {
    flex: 1 1 0% !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 350px !important; /* Минимальный запас для низких экранов */
    border-radius: 0 0 10px 10px !important;
    background: #0b1120 !important;
    z-index: 1 !important;
}


/* ============================================================
   §STORES_MAP_COLORS_V1 (2026-10-18) — Легенда и цвета маркеров
   ============================================================ */

/* Легенда: контейнер */
.map-legend-ctrl {
    margin-bottom: 20px;
    margin-left: 10px;
    font-family: inherit;
    z-index: 1000;
}

/* Кнопка «Легенда» */
.map-legend-btn {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.map-legend-btn:hover { background: var(--bg-hover); }
.map-legend-btn:active { transform: scale(0.98); }

/* Панель со списком */
.map-legend-panel {
    margin-top: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    max-height: 250px;
    overflow-y: auto;
    min-width: 180px;
    max-width: 240px;
}

.map-legend-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.map-legend-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-legend-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Адаптация маркера (убираем хардкод цвета из базового CSS) */
.st-map-marker {
    /* background и border задаются inline в JS */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
    font-weight: 800;
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    transition: transform 120ms ease;
    cursor: pointer;
    box-sizing: border-box;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .map-legend-ctrl {
        margin-bottom: 10px;
        margin-left: 10px;
    }
    .map-legend-btn {
        padding: 6px 10px;
        font-size: 11.5px;
    }
    .map-legend-panel {
        max-height: 180px;
    }
}

/* Тёмная тема для попапа (сброс светлых фонов leaflet) */
#storesMap .leaflet-popup-content-wrapper { background: var(--bg-surface); color: var(--text-primary); }
#storesMap .tsk-pop__row { padding: 6px 0; border-bottom: 1px dashed rgba(148,163,184,0.1); }
#storesMap .tsk-pop__row:last-child { border-bottom: none; }


/* ============================================================
   §STORES_MAP_CLUSTERS_V2 (2026-10-18) — Мини-кнопка легенды
   ============================================================ */
.map-legend-ctrl {
    margin: 0 !important;
    z-index: 1000;
    position: relative;
}

.map-legend-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-surface, #1e293b);
    color: var(--text-primary, #f8fafc);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.15s;
}

.map-legend-btn:hover { 
    background: var(--bg-hover, #2d3748); 
}

.map-legend-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    max-height: 250px;
    overflow-y: auto;
    min-width: 180px;
    max-width: 240px;
}

/* Корректировка для темной темы Leaflet */
[data-theme="dark"] .map-legend-btn {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}
[data-theme="dark"] .map-legend-btn:hover {
    background: #334155;
}


/* ============================================================
   §STORES_MAP_MARKERS_V3 (2026-10-18) — Бейдж количества заданий
   ============================================================ */
.st-map-marker {
    position: relative; /* Важно для позиционирования бейджа */
}

.st-map-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #f87171;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 0 4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1.5px solid var(--bg-surface, #1e293b);
    box-sizing: border-box;
    z-index: 2;
}

/* Leaflet контролы под наш дизайн */
.leaflet-bar.locate-btn {
    transition: background 0.15s;
}
.leaflet-bar.locate-btn:hover {
    background: var(--bg-hover, #2d3748) !important;
}


/* ============================================================
   §STORES_MAP_LEGEND_V4 (2026-10-18) — Правый нижний угол
   ============================================================ */

/* Контейнер оверлея */
.map-legend-overlay {
    position: absolute;
    bottom: 80px; /* Поднимаем над кнопками зума Leaflet */
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: inherit;
}

/* Сама кнопка (мини) */
.map-legend-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-surface, #1e293b);
    color: var(--text-primary, #f8fafc);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.15s;
}

.map-legend-btn:hover { 
    background: var(--bg-hover, #2d3748); 
}

/* Выпадающая панель */
.map-legend-panel {
    margin-bottom: 6px; /* Отступ от кнопки вверх */
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    max-height: 250px;
    overflow-y: auto;
    min-width: 180px;
    max-width: 240px;
}

/* Внутренности панели */
.map-legend-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.map-legend-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-legend-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Сброс старых стилей контрола Leaflet, если остались */
.map-legend-ctrl { display: none !important; }

/* Темная тема Leaflet */
[data-theme="dark"] .map-legend-btn {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}
[data-theme="dark"] .map-legend-btn:hover {
    background: #334155;
}


/* ============================================================
   §STORES_MAP_LEGEND_V5 (2026-10-18) — Фикс правого нижнего угла
   ============================================================ */

/* Контейнер оверлея */
.map-legend-overlay {
    position: absolute;
    bottom: 80px; /* Над кнопками зума Leaflet */
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: inherit;
}

/* Сама кнопка */
.map-legend-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-surface, #1e293b);
    color: var(--text-primary, #f8fafc);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.15s;
}

.map-legend-btn:hover { 
    background: var(--bg-hover, #2d3748); 
}

/* Выпадающая панель */
.map-legend-panel {
    margin-bottom: 6px;
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    max-height: 250px;
    overflow-y: auto;
    min-width: 180px;
    max-width: 240px;
}

.map-legend-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.map-legend-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-legend-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Убираем старые контролы, если они остались в DOM */
.map-legend-ctrl { display: none !important; }

/* ============================================================
   Фикс кнопки геолокации (📍)
   ============================================================ */
.leaflet-bar.locate-btn {
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    background: var(--bg-surface, #1e293b) !important;
    color: var(--text-primary, #f8fafc) !important;
    border-radius: 6px !important;
    border: 1px solid var(--border, rgba(148,163,184,0.14)) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    cursor: pointer !important;
    margin-bottom: 6px !important;
    box-sizing: border-box !important;
}
.leaflet-bar.locate-btn:hover {
    background: var(--bg-hover, #2d3748) !important;
}


/* ============================================================
   §STORES_MAP_LEGEND_V6 (2026-10-18) — Финальные стили легенды
   ============================================================ */
.map-legend-overlay {
    position: absolute;
    bottom: 80px; /* Над кнопками зума */
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: inherit;
}

.map-legend-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-surface, #1e293b);
    color: var(--text-primary, #f8fafc);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.15s;
}

.map-legend-btn:hover { 
    background: var(--bg-hover, #2d3748); 
}

.map-legend-panel {
    margin-bottom: 6px;
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    max-height: 250px;
    overflow-y: auto;
    min-width: 180px;
    max-width: 240px;
}

.map-legend-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.map-legend-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-legend-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   §STORES_MAP_LEGEND_V7 (2026-10-18) — Фикс кликабельности
   ============================================================ */

.map-legend-overlay {
    position: absolute;
    bottom: 80px; /* Над кнопками зума */
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: inherit;
    /* КРИТИЧНО: разрешаем клики по этому блоку, игнорируя Leaflet */
    pointer-events: auto;
}

.map-legend-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-surface, #1e293b);
    color: var(--text-primary, #f8fafc);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.15s;
    /* Убеждаемся, что кнопка кликабельна */
    pointer-events: auto;
}

.map-legend-btn:hover { 
    background: var(--bg-hover, #2d3748); 
}

.map-legend-panel {
    margin-bottom: 6px;
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    max-height: 250px;
    overflow-y: auto;
    min-width: 180px;
    max-width: 240px;
    pointer-events: auto;
}

.map-legend-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.map-legend-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-legend-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   §STORES_MAP_LEGEND_V8 (2026-10-18) — Фикс обрезки
   ============================================================ */

/* Разрешаем контейнеру карты показывать контент за пределами */
#storesMapWrap.tasks-map-wrap,
#tasksMapWrap.tasks-map-wrap {
    overflow: visible !important;
}

/* Ограничиваем панель по высоте, чтобы не уходила за верхний край */
.map-legend-panel {
    /* Максимум 50% от высоты экрана или 250px, что меньше */
    max-height: min(250px, calc(100vh - 200px)) !important;
    overflow-y: auto !important;
}

/* Опускаем легенду чуть ниже, чтобы точно не задевать верхний тулбар */
.map-legend-overlay {
    bottom: 60px !important; 
}


/* ============================================================
   §STORES_MAP_LEGEND_V9 (2026-10-18) — Фикс ухода за край экрана
   ============================================================ */

/* 1. Возвращаем карте нормальное поведение */
#storesMapWrap.tasks-map-wrap,
#tasksMapWrap.tasks-map-wrap {
    overflow: hidden !important;
}

/* 2. Оверлей легенды: жестко привязываем к правому нижнему углу ЭКРАНА, 
      а не карты. Используем fixed, чтобы игнорировать ширину родителя. */
.map-legend-overlay {
    position: fixed !important; 
    bottom: 80px !important;  /* Отступ от низа экрана */
    right: 20px !important;   /* Отступ от правого края экрана */
    z-index: 2000 !important; /* Поверх карты и Leaflet */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: inherit;
    pointer-events: none; /* Клики проходят сквозь пустую область */
}

/* 3. Кнопка и панель кликабельны */
.map-legend-btn, 
.map-legend-panel {
    pointer-events: auto;
}

/* 4. Кнопка */
.map-legend-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-surface, #1e293b);
    color: var(--text-primary, #f8fafc);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.15s;
}

.map-legend-btn:hover { 
    background: var(--bg-hover, #2d3748); 
}

/* 5. Панель (не дает уйти за верхний край) */
.map-legend-panel {
    margin-bottom: 6px;
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    
    /* Ограничение высоты: не выше 60% экрана */
    max-height: 60vh; 
    overflow-y: auto;
    min-width: 180px;
    max-width: 240px;
}

/* 6. Внутренности */
.map-legend-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.map-legend-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-legend-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   §STORES_MAP_LEGEND_V10 (2026-10-18) — Левый нижний угол
   ============================================================ */

/* 1. Убеждаемся, что контейнер карты — база для absolute */
#storesMapWrap.tasks-map-wrap {
    position: relative !important;
    overflow: hidden !important; /* Карта не должна вылезать за свои границы */
}

/* 2. Привязываем легенду к ЛЕВОМУ нижнему углу */
.map-legend-overlay {
    position: absolute !important;
    bottom: 20px !important; /* Отступ от нижнего края */
    left: 10px !important;   /* Отступ от левого края */
    right: auto !important;  /* Сбрасываем право, чтобы не растягивало */
    top: auto !important;
    z-index: 1000 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Прижимаем к левому краю */
    pointer-events: none; 
}

/* 3. Кнопка и панель кликабельны */
.map-legend-btn, 
.map-legend-panel {
    pointer-events: auto;
}

/* 4. Кнопка */
.map-legend-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-surface, #1e293b);
    color: var(--text-primary, #f8fafc);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.15s;
}

.map-legend-btn:hover { 
    background: var(--bg-hover, #2d3748); 
}

/* 5. Выпадающая панель (открывается вверх и вправо) */
.map-legend-panel {
    margin-bottom: 6px; /* Отступ от кнопки */
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border, rgba(148,163,184,0.14));
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    
    max-height: min(250px, 50vh); /* Чтобы не улететь за верхний край */
    overflow-y: auto;
    min-width: 180px;
    max-width: 240px;
}

/* 6. Внутренности */
.map-legend-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.map-legend-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-legend-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   §STORES_MAP_LEGEND_FILTER_V1 (2026-10-18) — Интерактивный список
   ============================================================ */

/* Элемент списка */
.map-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.map-legend-item:hover {
    background: var(--bg-hover, #2d3748);
}

/* Активный элемент (фильтр включен) */
.map-legend-item.is-active {
    background: var(--accent-subtle, rgba(91, 141, 239, 0.15));
    color: var(--accent, #5b8def);
    font-weight: 700;
}

.map-legend-item.is-active .map-legend-name {
    color: var(--accent, #5b8def);
}

/* Кнопка сброса */
#mapLegendResetFilter:hover {
    background: rgba(248, 113, 113, 0.15) !important;
}


/* ============================================================
   §PLANS_MOBILE_HEADER_FIX_V1 (2026-10-18)
   ============================================================ */

@media (max-width: 768px) {

    /* 1. Прячем вылезающую сводку за неделю */
    html body #plansModal .plans-head .plans-week-summary {
        display: none !important;
    }

    /* 2. Перестраиваем шапку в нормальную колонку */
    html body #plansModal .plans-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        position: relative !important;
    }

    /* Заголовок */
    html body #plansModal .plans-head__title {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    /* Месяц и Год */
    html body #plansModal .plans-month-inline {
        order: 2 !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* Зеленая плашка с зарплатой */
    html body #plansModal .plans-monthly-summary {
        order: 3 !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Переключатель вкладок */
    html body #plansModal .plans-view-toggle {
        order: 4 !important;
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
    }
    html body #plansModal .plans-view-toggle__btn {
        flex: 1 1 0 !important;
        justify-content: center !important;
    }

    /* 3. Кнопки (Лупа, Обновить, Закрыть) */
    html body #plansModal .plans-actions {
        order: 5 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }

    /* Размеры кнопок */
    html body #plansModal .plans-actions > button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Иконки внутри кнопок */
    html body #plansModal .plans-actions > button > .i,
    html body #plansModal .plans-actions > button > svg {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }

    /* Кнопка Сохранить (если появится) */
    html body #plansModal .plans-actions #plansSaveBtn {
        width: auto !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    /* 4. Контейнер с данными (таблица/карта) */
    html body #plansModal .plans-view-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}


/* ============================================================
   §PLANS_MOBILE_SPACING_FIX_V2 (2026-10-18) — Убираем отступы
   ============================================================ */

@media (max-width: 768px) {

    /* 1. Модалка на весь экран (без лишних рамок) */
    html body #plansModal .modal-content.plans-v2-modal {
        padding: 4px !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
    }

    /* 2. Шапка: плотнее, без лишних зазоров */
    html body #plansModal .plans-head {
        padding: 4px 8px 8px !important;
        gap: 4px !important;
        border-bottom: none !important;
    }

    html body #plansModal .plans-head__title {
        margin-bottom: 2px !important;
        font-size: 14px !important;
    }

    html body #plansModal .plans-month-inline {
        gap: 4px !important;
    }
    html body #plansModal .plans-month-inline select,
    html body #plansModal .plans-month-inline input {
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
    }

    html body #plansModal .plans-monthly-summary {
        padding: 6px 8px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    html body #plansModal .plans-view-toggle {
        padding: 2px !important;
    }
    html body #plansModal .plans-view-toggle__btn {
        padding: 4px 6px !important;
        font-size: 11px !important;
        height: 28px !important;
    }

    /* 3. Кнопки: компактные (32px) */
    html body #plansModal .plans-actions {
        gap: 4px !important;
        padding-top: 2px !important;
    }

    html body #plansModal .plans-actions > button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 6px !important;
    }

    html body #plansModal .plans-actions #plansSaveBtn {
        width: auto !important;
        padding: 0 10px !important;
        font-size: 11.5px !important;
        height: 32px !important;
    }
    
    html body #plansModal .plans-actions #plansSaveBtn::before {
        display: none !important; /* Убираем иконку диске��ы, оставляем текст */
    }

    /* 4. Контейнер данных: прижимаем к краям, убираем пустоту */
    html body #plansModal .plans-view-wrap {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* 5. Карточки внутри (Пн, Вт): без внешних отступов */
    html body #plansModal .plans-daycol {
        border-radius: 6px !important;
        padding: 0 !important;
    }
    html body #plansModal .plans-daycol__body {
        padding: 4px !important;
    }
    html body #plansModal .plans-daycol__head {
        padding: 6px 8px !important;
    }
}


/* ============================================================
   §STORES_BRAND_COLORS_MOBILE_V9 (2026-10-20)
   ============================================================ */
#storesTableWrap .smc-name,
#storesTableWrap .tmc-name {
    /* Снимаем жесткое ограничение цвета, чтобы работали inline-стили */
    color: inherit !important; 
    display: flex;
    align-items: center;
}

#storesTableWrap .smc-name span,
#storesTableWrap .tmc-name span {
    /* Убеждаемся, что плашка не обрезается */
    max-width: 100%;
    box-sizing: border-box;
}


/* ============================================================
   §BRAND_COLORS_FIX_V10 (2026-10-20)
   ============================================================ */
.store-card__title span,
.wp-store__name span,
.tmc-name span {
    max-width: 100%;
    box-sizing: border-box;
    pointer-events: none; /* Чтобы клики проходили на родительский элемент */
}


/* ============================================================
   §BRAND_COLORS_FIX_V11 (2026-10-20)
   ============================================================ */
.store-card__title span,
.wp-store__name span,
.tmc-name span {
    max-width: 100%;
    box-sizing: border-box;
    pointer-events: none; /* Чтобы клики проходили на родительский элемент */
}

/* ===== PLAN_DRAFTS_N1_3_CSS ===== */
/* «Режим Если» — фронт-каркас (PLAN_DRAFTS_N1_3_FRONTEND_V1_20261028).
   Unlayered append — по §0 PROJECT.md. Объединить в layer modern — отдельная задача. */

.pd-list { display: flex; flex-direction: column; gap: 8px; }
.pd-list__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pd-list__title { font-size: 18px; font-weight: 700; }
.pd-list__empty { padding: 30px 16px; text-align: center; color: var(--text-muted); font-size: 13px; line-height: 1.5; }

.pd-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pd-card__title { font-weight: 700; font-size: 14px; }
.pd-card__meta { color: var(--text-muted); font-size: 12.5px; margin-top: 3px; }
.pd-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }

.pd-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 6px;
}
.pd-status--draft     { background: rgba(96,165,250,0.15); color: #60a5fa; }
.pd-status--scheduled { background: rgba(245,158,11,0.15); color: #f59e0b; }
.pd-status--applied   { background: rgba(52,211,153,0.15); color: #34d399; }
.pd-status--cancelled { background: rgba(148,163,184,0.15); color: #94a3b8; }
.pd-status--reversed  { background: rgba(248,113,113,0.15); color: #f87171; }

.pd-editor { display: flex; flex-direction: column; gap: 16px; }
.pd-editor__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.pd-editor__title { font-size: 18px; font-weight: 700; }
.pd-editor__actions { display: flex; gap: 6px; flex-wrap: wrap; }

.pd-table-wrap { overflow: auto; max-height: 60vh; border: 1px solid var(--border-color); border-radius: 8px; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pd-table th, .pd-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    white-space: nowrap;
}
.pd-table th {
    background: var(--bg-input);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1;
}
.pd-table td.pd-merch-cell, .pd-table th.pd-merch-cell {
    text-align: left;
    min-width: 140px;
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 2;
}
.pd-table th.pd-merch-cell { z-index: 3; background: var(--bg-input); }
.pd-table td.pd-merch-cell { font-weight: 600; }
.pd-table .pd-cell { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; }
.pd-table .pd-cell__count { font-weight: 700; color: var(--text-primary); }
.pd-table .pd-cell__sum { font-size: 10px; color: var(--text-muted); }
.pd-table .pd-cell--empty { color: var(--text-muted); opacity: 0.45; }
.pd-table .pd-cell--diff-pos { color: #34d399; font-weight: 700; }
.pd-table .pd-cell--diff-neg { color: #f87171; font-weight: 700; }
.pd-table tr.pd-merch-row--virtual td.pd-merch-cell { color: #a78bfa; font-style: italic; }
.pd-table tr.pd-merch-row--virtual td.pd-merch-cell::after { content: ' (вирт.)'; font-size: 10px; opacity: 0.7; }

.pd-matrix-wrap { overflow: auto; max-height: 60vh; border: 1px solid var(--border-color); border-radius: 8px; }
.pd-matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pd-matrix th, .pd-matrix td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: middle;
}
.pd-matrix th {
    background: var(--bg-input);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1;
}
.pd-matrix tr.pd-store-row--dirty td { background: rgba(245,158,11,0.08); }
.pd-matrix select {
    width: 100%;
    min-width: 160px;
    padding: 4px 6px;
    font-size: 12.5px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
}
.pd-matrix .pd-store-addr { color: var(--text-muted); font-size: 11.5px; }
.pd-matrix .pd-store-prev { color: var(--text-muted); font-size: 11px; font-style: italic; }

.pd-banner { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; }
.pd-banner--info   { background: rgba(96,165,250,0.10); border-left: 3px solid #60a5fa; }
.pd-banner--warn   { background: rgba(245,158,11,0.10); border-left: 3px solid #f59e0b; }
.pd-banner--danger { background: rgba(248,113,113,0.10); border-left: 3px solid #f87171; }

/* ===== PLAN_DRAFT_INLINE_MODE_V1_CSS ===== */
/* N.1-4: бейдж + подсветка при активном режиме «Если». */

.plan-mode-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
    font-size: 13px;
    font-weight: 600;
    flex-wrap: wrap;
}
.plan-mode-banner[hidden] { display: none; }
.plan-mode-banner__badge {
    background: rgba(255, 255, 255, 0.22);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
}
.plan-mode-banner__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.95;
}
.plan-mode-banner__dirty {
    color: #fef3c7;
    font-size: 12px;
    animation: pdPulse 1.6s ease-in-out infinite;
}
.plan-mode-banner__dirty[hidden] { display: none; }
@keyframes pdPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
.plan-mode-banner__btn {
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
    white-space: nowrap;
}
.plan-mode-banner__btn:hover { background: rgba(255, 255, 255, 0.32); }
.plan-mode-banner__btn--exit {
    background: rgba(248, 113, 113, 0.85);
    border-color: rgba(248, 113, 113, 0.9);
}
.plan-mode-banner__btn--exit:hover { background: rgba(248, 113, 113, 1); }

/* Пока активен режим — сдвигаем контент вниз под баннер. */
body.plan-mode-active .app-shell,
body.plan-mode-active .container {
    padding-top: 44px !important;
}

/* Подсветка контента — рамка вокруг рабочей области. */
body.plan-mode-active .app-content {
    position: relative;
    box-shadow: inset 0 0 0 3px rgba(167, 139, 250, 0.45);
    border-radius: 8px;
}

/* Подсветка изменённых/новых/удалённых в overlay.
   Классы `_plan_dirty` / `_plan_new` прилетают из planDrafts._overlayArray.
   В магазинах/заданиях строки получают эти атрибуты как data-атрибуты,
   но для надёжности дублируем через tr с inline-признаком. */
body.plan-mode-active #storesTableWrap tr[data-plan-dirty="1"],
body.plan-mode-active #tasksTableWrap tr[data-plan-dirty="1"] {
    background: rgba(245, 158, 11, 0.08) !important;
    box-shadow: inset 4px 0 0 #f59e0b;
}
body.plan-mode-active #storesTableWrap tr[data-plan-new="1"],
body.plan-mode-active #tasksTableWrap tr[data-plan-new="1"] {
    background: rgba(52, 211, 153, 0.08) !important;
    box-shadow: inset 4px 0 0 #34d399;
}

/* ===== PLAN_DRAFT_INLINE_WRITE_V1_CSS_EXT ===== */
/* N.1-5: подсветка на уровне <tbody data-plan-dirty|data-plan-new>. */

body.plan-mode-active #storesTableWrap tbody[data-plan-dirty="1"] tr,
body.plan-mode-active #storesTableWrap tr[data-plan-dirty="1"] {
    background: rgba(245, 158, 11, 0.08) !important;
}
body.plan-mode-active #storesTableWrap tbody[data-plan-dirty="1"] tr:first-child,
body.plan-mode-active #storesTableWrap tr[data-plan-dirty="1"]:first-child {
    box-shadow: inset 4px 0 0 #f59e0b;
}
body.plan-mode-active #storesTableWrap tbody[data-plan-new="1"] tr {
    background: rgba(52, 211, 153, 0.08) !important;
}
body.plan-mode-active #storesTableWrap tbody[data-plan-new="1"] tr:first-child {
    box-shadow: inset 4px 0 0 #34d399;
}

body.plan-mode-active #tasksTableWrap tbody[data-plan-dirty="1"] tr,
body.plan-mode-active #tasksTableWrap tr[data-plan-dirty="1"] {
    background: rgba(245, 158, 11, 0.08) !important;
}
body.plan-mode-active #tasksTableWrap tbody[data-plan-dirty="1"] tr:first-child {
    box-shadow: inset 4px 0 0 #f59e0b;
}
body.plan-mode-active #tasksTableWrap tbody[data-plan-new="1"] tr {
    background: rgba(52, 211, 153, 0.08) !important;
}
body.plan-mode-active #tasksTableWrap tbody[data-plan-new="1"] tr:first-child {
    box-shadow: inset 4px 0 0 #34d399;
}

/* ===== PLAN_DRAFT_APPLY_V1_CSS ===== */
/* N.2a: модалка миграции. */
#planMigrationModal .modal-content { max-width: 720px; }
#planMigrationModal details summary { padding: 6px 0; }
#planMigrationModal .pd-matrix select { min-width: auto; }

/* ============================================================
   §FIX_WORKERS_SCROLL — исправление обрезки списка работников
   и других табличных вкладок на десктопе (flex-chain).
   ============================================================ */

@media (min-width: 1024px) {
    /* 1. Активные вкладки — flex-контейнеры */
    .app-content > #tab-workers:not(.hidden),
    .app-content > #tab-clients:not(.hidden),
    .app-content > #tab-suppliers:not(.hidden),
    .app-content > #tab-managers:not(.hidden),
    .app-content > #tab-announcements:not(.hidden),
    .app-content > #tab-deadlines:not(.hidden),
    .app-content > #tab-audit:not(.hidden) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* 2. Карточка внутри — растягивается */
    #tab-workers:not(.hidden) > .card,
    #tab-clients:not(.hidden) > .card,
    #tab-suppliers:not(.hidden) > .card,
    #tab-managers:not(.hidden) > .card,
    #tab-announcements:not(.hidden) > .card,
    #tab-deadlines:not(.hidden) > .card,
    #tab-audit:not(.hidden) > .card {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        margin-bottom: 0;
        padding-bottom: 0;
        overflow: hidden;
    }

    /* 3. Верхние панели (тулбары) — не сжимаются */
    #tab-workers:not(.hidden) > .card > .flex,
    #tab-clients:not(.hidden) > .card > .flex,
    #tab-suppliers:not(.hidden) > .card > .flex,
    #tab-managers:not(.hidden) > .card > .flex,
    #tab-announcements:not(.hidden) > .card > .flex,
    #tab-deadlines:not(.hidden) > .card > .stores-toolbar,
    #tab-audit:not(.hidden) > .card > .flex {
        flex: 0 0 auto;
    }

    /* 4. Область с таблицей — скроллится */
    #tab-workers:not(.hidden) > .card > .table-wrap,
    #tab-clients:not(.hidden) > .card > .table-wrap,
    #tab-suppliers:not(.hidden) > .card > #suppliersList,
    #tab-managers:not(.hidden) > .card > #managersList,
    #tab-announcements:not(.hidden) > .card > #announcementsList,
    #tab-deadlines:not(.hidden) > .card > #deadlinesList,
    #tab-audit:not(.hidden) > .card > #auditLogWrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none; /* Перебиваем 70vh из §5 */
        overflow: auto;
    }
    
    /* 5. Внутренние .table-wrap не должны иметь ограничений по высоте */
    #tab-suppliers:not(.hidden) > .card > #suppliersList .table-wrap,
    #tab-managers:not(.hidden) > .card > #managersList .table-wrap,
    #tab-announcements:not(.hidden) > .card > #announcementsList .table-wrap,
    #tab-deadlines:not(.hidden) > .card > #deadlinesList .table-wrap,
    #tab-audit:not(.hidden) > .card > #auditLogWrap .table-wrap {
        max-height: none;
        overflow: visible;
    }
}

/* Кастомный мульти-селект работников в шапке планов */
.plans-worker-select-wrap {
    position: relative;
    display: inline-block;
    margin-left: auto;
    z-index: 100;
}
.plans-worker-select-toggle {
    height: 32px;
    padding: 0 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.plans-worker-select-toggle::after {
    content: '▼';
    font-size: 8px;
    opacity: 0.6;
}
.plans-worker-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 220px;
    max-height: 250px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    padding: 4px 0;
    z-index: 101;
}
.plans-worker-select-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text-secondary);
    user-select: none;
}
.plans-worker-select-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.plans-worker-select-item input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    margin: 0;
    cursor: pointer;
}
@media (max-width: 768px) {
    .plans-worker-select-wrap {
        width: 100%;
        margin: 4px 0;
    }
    .plans-worker-select-toggle {
        width: 100%;
        justify-content: space-between;
    }
    .plans-worker-select-dropdown {
        width: 100%;
    }
}


/* ============================================================
   §STORE_ACTIVE_V1 (2026-11-07) — колонка обслуживания.
   ============================================================ */
#storesTableWrap .col-active {
    width: 60px;
    max-width: 60px;
    text-align: center;
}
.toggle-active-btn {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    vertical-align: middle;
}
.toggle-active-btn:hover {
    transform: scale(1.1);
}
.store-group.store-inactive td.col-name,
.store-group.store-inactive td.col-city,
.store-group.store-inactive td.col-address {
    opacity: 0.6;
}


/* ============================================================
   §STORE_INACTIVE_CROSSOUT_V1 — зачеркивание необслуживаемых
   ============================================================ */
.supplier-inactive {
    text-decoration: line-through;
    opacity: 0.6;
}
.store-group.store-inactive td.col-supplier,
.store-group.store-inactive td.col-name,
.store-group-mobile.store-inactive .smc-sup-name,
.store-group-mobile.store-inactive .smc-name {
    text-decoration: line-through;
    opacity: 0.6;
}


/* ============================================================
   §STORE_INACTIVE_CROSSOUT_V2 — зачеркивание необслуживаемых
   ============================================================ */
.store-group.store-inactive td.col-name,
.store-group.store-inactive td.col-city,
.store-group.store-inactive td.col-address,
.store-group.store-inactive td.col-supplier,
.store-group-mobile.store-inactive .smc-name,
.store-group-mobile.store-inactive .smc-sup-name {
    text-decoration: line-through !important;
    opacity: 0.6;
}


/* ============================================================
   §PLANS_HEADER_COMPACT_V1 (2026-11-09) — Компактная шапка планов
   ============================================================ */
html body #plansModal .plans-head {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
}

/* Сброс лишних отступов и размеров у элементов */
html body #plansModal .plans-head > * {
    margin: 0 !important;
}

html body #plansModal .plans-head__title {
    order: 2 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

html body #plansModal .plans-worker-select-wrap {
    order: 1 !important;
    margin: 0 !important;
}

html body #plansModal .plans-month-inline {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

html body #plansModal .plans-month-inline select,
html body #plansModal .plans-month-inline input {
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

/* Переключатель (Магазины, По дням, Карта) прижимаем вправо */
html body #plansModal .plans-view-toggle {
    order: 5 !important;
    margin-left: auto !important;
    height: 28px !important;
    padding: 2px !important;
    display: flex !important;
    gap: 2px !important;
}

html body #plansModal .plans-view-toggle__btn {
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
}

/* Кнопки (Лупа, Обновить, Сохранить, Закрыть) */
html body #plansModal .plans-actions {
    order: 6 !important;
    display: flex !important;
    gap: 4px !important;
    margin: 0 !important;
}

html body #plansModal .plans-actions > button {
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Зеленая плашка (За месяц) и Сводка (За неделю) — на вторую строку */
html body #plansModal .plans-monthly-summary {
    order: 7 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    border-radius: 4px !important;
}

html body #plansModal .plans-week-summary {
    order: 8 !important;
    flex: 1 1 100% !important;
    margin: 4px 0 0 0 !important;
    padding: 6px 0 0 0 !important;
    border-top: 1px dashed var(--border-subtle) !important;
    font-size: 11.5px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
}

html body #plansModal .plans-week-summary > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

/* Фильтры (Лупа в тексте) — прячем, так как она уже есть в actions */
html body #plansModal .plans-filters {
    order: 9 !important;
    flex: 1 1 100% !important;
    margin-top: 4px !important;
    display: none !important; /* Скрываем стандартный бар, чтобы не занимал место */
}

html body #plansModal .plans-filters.is-open {
    display: flex !important;
}

@media (max-width: 768px) {
    html body #plansModal .plans-head {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    html body #plansModal .plans-view-toggle,
    html body #plansModal .plans-actions {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    html body #plansModal .plans-view-toggle__btn {
        flex: 1 !important;
    }
}


/* ============================================================
   §PLANS_HEADER_COMPACT_V2 (2026-11-09) — Единая строка для сводок
   ============================================================ */
html body #plansModal .plans-head {
    row-gap: 6px !important;
}

/* Зеленая плашка (За месяц) */
html body #plansModal .plans-monthly-summary {
    order: 7 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}

/* Сводка (За неделю) */
html body #plansModal .plans-week-summary {
    order: 8 !important;
    flex: 1 1 auto !important;
    margin: 0 0 0 12px !important;
    padding: 0 !important;
    border-top: none !important;
    font-size: 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

html body #plansModal .plans-week-summary > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

/* Если экран узкий (ноутбуки, планшеты), сводка переносится */
@media (max-width: 1250px) {
    html body #plansModal .plans-week-summary {
        margin-left: 0 !important;
        margin-top: 4px !important;
        flex: 1 1 100% !important;
    }
}