/* ============================================================
   THEME.CSS — «Стеклянные» темы поверх базового style.css
   Подключается ПОСЛЕ style.css. Логика приложения не меняется.
   Темы: [data-theme="classic"] (без изменений),
         [data-theme="glass-light"], [data-theme="glass-dark"]
   ============================================================ */

/* ---------- Переменные тем ---------- */
html[data-theme="glass-light"] {
    --bg: #dfe4ec;
    --mesh:
      radial-gradient(42% 55% at 12% 18%, rgba(30,90,200,.32), transparent 70%),
      radial-gradient(45% 60% at 88% 12%, rgba(0,150,190,.28), transparent 70%),
      radial-gradient(50% 60% at 78% 88%, rgba(70,110,160,.26), transparent 70%),
      radial-gradient(40% 50% at 22% 90%, rgba(100,130,155,.24), transparent 70%);
    --panel: rgba(255,255,255,.72);
    --panel-solid: rgba(255,255,255,.92);
    --panel-opaque: #ffffff;
    --panel-blur: 12px;
    --panel-border: rgba(255,255,255,.65);
    --text: #10121a; --text-muted: #4c5568;
    --border: rgba(255,255,255,.62);
    --blue: #1d63d8; --blue-hover: #164fae;
    --chip: rgba(255,255,255,.5); --chip-border: rgba(140,150,190,.35);
    --input-bg: rgba(255,255,255,.6);
    --shadow: 0 10px 32px rgba(20,20,60,.14);
    --st-open: #e5133a; --st-prog: #0269e3; --st-pend: #e07800; --st-close: #0c9e5e;
    --st-open-bg: rgba(229,19,58,.10); --st-prog-bg: rgba(2,105,227,.10); --st-pend-bg: rgba(224,120,0,.12); --st-close-bg: rgba(12,158,94,.12);
    --accent-grad: linear-gradient(135deg, #1d63d8, #0e9bc4);
    --red: #e5133a;
}
html[data-theme="glass-dark"] {
    --bg: #0c0f16;
    --mesh:
      radial-gradient(45% 60% at 10% 15%, rgba(30,90,200,.30), transparent 70%),
      radial-gradient(45% 60% at 90% 10%, rgba(0,140,255,.22), transparent 70%),
      radial-gradient(50% 60% at 80% 90%, rgba(0,150,180,.16), transparent 70%),
      radial-gradient(40% 55% at 18% 88%, rgba(90,110,140,.16), transparent 70%);
    --panel: rgba(23,28,38,.78);
    --panel-solid: rgba(27,32,44,.96);
    --panel-opaque: #1c222e;
    --panel-blur: 12px;
    --panel-border: rgba(255,255,255,.10);
    --text: #eef1f8; --text-muted: #9aa3b8;
    --border: rgba(255,255,255,.12);
    --blue: #3b82e0; --blue-hover: #2f6bbd;
    --chip: rgba(255,255,255,.07); --chip-border: rgba(255,255,255,.12);
    --input-bg: rgba(255,255,255,.07);
    --shadow: 0 12px 36px rgba(0,0,0,.45);
    --st-open: #ef7285; --st-prog: #6aaef5; --st-pend: #e9b45c; --st-close: #57c795;
    --st-open-bg: rgba(239,114,133,.10); --st-prog-bg: rgba(106,174,245,.10); --st-pend-bg: rgba(233,180,92,.10); --st-close-bg: rgba(87,199,149,.10);
    --accent-grad: linear-gradient(135deg, #2f6bbd, #0e9bc4);
    --red: #ef7285;
}

/* ---------- Общее для обеих стеклянных тем ---------- */
html[data-theme="glass-light"] body, html[data-theme="glass-dark"] body { background: transparent; color: var(--text); }
html[data-theme="glass-light"] body::before, html[data-theme="glass-dark"] body::before {
    content: ''; position: fixed; inset: -20%; z-index: -1;
    background: var(--mesh); background-color: var(--bg);
    animation: sdMeshFloat 26s ease-in-out infinite alternate;
}
@keyframes sdMeshFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(3%,-3%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { html[data-theme] body::before { animation: none; } }

/* Ниже везде селектор-«хвост» применяется к обеим темам */
html[data-theme="glass-light"], html[data-theme="glass-dark"] { color-scheme: light; }
html[data-theme="glass-dark"] { color-scheme: dark; }

/* === ПАНЕЛИ / СТЕКЛО === */
html[data-theme$="light"] .form-panel, html[data-theme$="dark"] .form-panel,
html[data-theme$="light"] .dashboard-header, html[data-theme$="dark"] .dashboard-header,
html[data-theme$="light"] .admin-sidebar, html[data-theme$="dark"] .admin-sidebar,
html[data-theme$="light"] .admin-content, html[data-theme$="dark"] .admin-content,
html[data-theme$="light"] .login-box, html[data-theme$="dark"] .login-box {
    background: var(--panel);
    backdrop-filter: blur(var(--panel-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(1.4);
    border-color: var(--panel-border);
    box-shadow: var(--shadow);
    border-radius: 16px;
}

/* === КАРТОЧКИ ТИКЕТОВ === */
html[data-theme$="light"] .ticket-card, html[data-theme$="dark"] .ticket-card {
    background: var(--panel);
    backdrop-filter: blur(var(--panel-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(1.4);
    border-color: var(--panel-border);
    border-radius: 16px;
}
html[data-theme$="light"] .ticket-card:hover, html[data-theme$="dark"] .ticket-card:hover { box-shadow: var(--shadow); }
html[data-theme$="light"] .ticket-header, html[data-theme$="dark"] .ticket-header,
html[data-theme$="light"] .ticket-footer, html[data-theme$="dark"] .ticket-footer { background: var(--chip); border-color: var(--panel-border); }
html[data-theme$="light"] .ticket-object, html[data-theme$="dark"] .ticket-object,
html[data-theme$="light"] .tl-time, html[data-theme$="dark"] .tl-time,
html[data-theme$="light"] .tl-comment, html[data-theme$="dark"] .tl-comment,
html[data-theme$="light"] .sidebar-value, html[data-theme$="dark"] .sidebar-value,
html[data-theme$="light"] .group-header, html[data-theme$="dark"] .group-header { color: var(--text); }
html[data-theme$="light"] .ticket-sidebar, html[data-theme$="dark"] .ticket-sidebar { background: var(--chip); border-color: var(--panel-border); }
html[data-theme$="light"] .tl-author, html[data-theme$="dark"] .tl-author { background: var(--chip); color: var(--text-muted); border: 1px solid var(--chip-border); }
html[data-theme$="light"] .ticket-timeline, html[data-theme$="dark"] .ticket-timeline { border-left-color: var(--chip-border); }
html[data-theme$="light"] .timeline-item::before, html[data-theme$="dark"] .timeline-item::before { background: var(--blue); border-color: var(--panel-solid); box-shadow: 0 0 0 2px var(--chip-border); }

/* Подсветки приоритетных/закрытых карточек */
html[data-theme$="light"] .ticket-card.high-priority-card, html[data-theme$="dark"] .ticket-card.high-priority-card,
html[data-theme$="light"] .ticket-card.high-priority-card .ticket-header, html[data-theme$="dark"] .ticket-card.high-priority-card .ticket-header,
html[data-theme$="light"] .ticket-card.high-priority-card .ticket-footer, html[data-theme$="dark"] .ticket-card.high-priority-card .ticket-footer { background: var(--st-open-bg); border-color: color-mix(in srgb, var(--st-open) 35%, transparent); }
html[data-theme$="light"] .ticket-card.high-priority-card .ticket-sidebar, html[data-theme$="dark"] .ticket-card.high-priority-card .ticket-sidebar { background: var(--chip); border-color: color-mix(in srgb, var(--st-open) 30%, transparent); }

/* Тёмная тема: подсветка высокого приоритета — мягкая: еле заметный тон + полоска слева */
html[data-theme$="dark"] .ticket-card.high-priority-card,
html[data-theme$="dark"] .ticket-card.high-priority-card .ticket-header,
html[data-theme$="dark"] .ticket-card.high-priority-card .ticket-footer { background: rgba(239,114,133,.05); border-color: rgba(239,114,133,.16); }
html[data-theme$="dark"] .ticket-card.high-priority-card { border-left: 3px solid color-mix(in srgb, var(--st-open) 70%, transparent); }
html[data-theme$="dark"] .ticket-card.high-priority-card .ticket-sidebar { background: var(--chip); border-color: rgba(239,114,133,.14); }
html[data-theme$="dark"] .group-header[style*="color: rgb(229, 62, 62)"],
html[data-theme$="dark"] .group-header[style*="color:#e53e3e"] { color: var(--st-open) !important; border-bottom-color: rgba(239,114,133,.3) !important; }
html[data-theme$="light"] .ticket-card.closed-card, html[data-theme$="dark"] .ticket-card.closed-card,
html[data-theme$="light"] .ticket-card.closed-card .ticket-header, html[data-theme$="dark"] .ticket-card.closed-card .ticket-header,
html[data-theme$="light"] .ticket-card.closed-card .ticket-footer, html[data-theme$="dark"] .ticket-card.closed-card .ticket-footer { background: var(--st-close-bg); border-color: color-mix(in srgb, var(--st-close) 35%, transparent); }
html[data-theme$="light"] .ticket-card.closed-card .ticket-sidebar, html[data-theme$="dark"] .ticket-card.closed-card .ticket-sidebar { background: var(--chip); border-color: color-mix(in srgb, var(--st-close) 30%, transparent); }

/* === КНОПКИ === */
html[data-theme$="light"] .btn-primary, html[data-theme$="dark"] .btn-primary {
    background: var(--accent-grad); color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 40%, transparent);
    border-radius: 12px;
}
html[data-theme$="light"] .btn-primary:hover, html[data-theme$="dark"] .btn-primary:hover { filter: brightness(1.08); background: var(--accent-grad); }
html[data-theme$="light"] .btn-secondary, html[data-theme$="dark"] .btn-secondary { background: var(--chip); color: var(--text); border: 1px solid var(--chip-border); border-radius: 12px; }
html[data-theme$="light"] .btn-secondary:hover, html[data-theme$="dark"] .btn-secondary:hover { background: var(--chip); border-color: var(--blue); color: var(--blue); }

/* Кнопки-иконки в шапке формы (в style.css заданы с !important — перебиваем) */
html[data-theme$="light"] .create-panel-actions button, html[data-theme$="dark"] .create-panel-actions button {
    background: var(--chip) !important;
    border: 1px solid var(--chip-border) !important;
    color: var(--text) !important;
}
html[data-theme$="light"] .create-panel-actions button:hover, html[data-theme$="dark"] .create-panel-actions button:hover { border-color: var(--blue) !important; }
html[data-theme$="light"] .create-panel-title, html[data-theme$="dark"] .create-panel-title { color: var(--text) !important; }
html[data-theme$="light"] .create-panel-header, html[data-theme$="dark"] .create-panel-header { border-bottom-color: var(--panel-border); }

/* === ПОЛЯ ВВОДА === */
html[data-theme$="light"] input, html[data-theme$="dark"] input,
html[data-theme$="light"] select, html[data-theme$="dark"] select,
html[data-theme$="light"] textarea, html[data-theme$="dark"] textarea {
    background: var(--input-bg); color: var(--text); border-color: var(--chip-border); border-radius: 11px;
}
html[data-theme$="light"] input:focus, html[data-theme$="dark"] input:focus,
html[data-theme$="light"] select:focus, html[data-theme$="dark"] select:focus,
html[data-theme$="light"] textarea:focus, html[data-theme$="dark"] textarea:focus {
    background: var(--input-bg); border-color: var(--blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}
html[data-theme$="dark"] input::placeholder, html[data-theme$="dark"] textarea::placeholder { color: rgba(255,255,255,.35); }
html[data-theme$="dark"] select option { background: #1a1e30; color: var(--text); }
html[data-theme$="light"] input[readonly], html[data-theme$="dark"] input[readonly],
html[data-theme$="light"] textarea[readonly], html[data-theme$="dark"] textarea[readonly],
html[data-theme$="light"] input:disabled, html[data-theme$="dark"] input:disabled,
html[data-theme$="light"] select:disabled, html[data-theme$="dark"] select:disabled {
    background-color: var(--chip) !important; color: var(--text-muted) !important;
}
html[data-theme$="light"] [contenteditable="true"]:focus, html[data-theme$="dark"] [contenteditable="true"]:focus { background: var(--input-bg); border-bottom-color: var(--blue); }

/* === ФИЛЬТРЫ === */
html[data-theme$="light"] .filter-group, html[data-theme$="dark"] .filter-group { background: var(--chip); border-color: var(--chip-border); border-radius: 11px; }
html[data-theme$="light"] .filter-btn, html[data-theme$="dark"] .filter-btn { color: var(--text-muted); }
html[data-theme$="light"] .filter-btn:hover, html[data-theme$="dark"] .filter-btn:hover { background: var(--chip); color: var(--text); }
html[data-theme$="light"] .filter-btn.active, html[data-theme$="dark"] .filter-btn.active { background: var(--blue); color: #fff; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 45%, transparent); }
html[data-theme$="light"] .search-group input, html[data-theme$="dark"] .search-group input { background: var(--input-bg); border-color: var(--chip-border); }
html[data-theme$="light"] .mobile-filter-toggle, html[data-theme$="dark"] .mobile-filter-toggle { color: var(--text); }
html[data-theme$="light"] .filters-content, html[data-theme$="dark"] .filters-content { border-color: var(--panel-border); }

/* Переключатель Список/Доска: в kanban.js фон задается инлайном — перебиваем */
html[data-theme$="light"] .view-toggle, html[data-theme$="dark"] .view-toggle { background: var(--chip); border: 1px solid var(--chip-border); }
html[data-theme$="light"] .view-toggle .filter-btn.active, html[data-theme$="dark"] .view-toggle .filter-btn.active { background: var(--blue) !important; color: #fff; }
html[data-theme$="light"] .view-toggle .filter-btn:not(.active), html[data-theme$="dark"] .view-toggle .filter-btn:not(.active) { background: transparent !important; }

/* Мультиселект категорий */
html[data-theme$="light"] .custom-multi-select, html[data-theme$="dark"] .custom-multi-select { background: var(--input-bg); border-color: var(--chip-border); color: var(--text); }
html[data-theme$="light"] .multi-select-dropdown, html[data-theme$="dark"] .multi-select-dropdown { background: var(--panel-solid); border-color: var(--panel-border); box-shadow: var(--shadow); backdrop-filter: blur(var(--panel-blur)); }
html[data-theme$="light"] .multi-cb-label, html[data-theme$="dark"] .multi-cb-label { color: var(--text-muted); }
html[data-theme$="light"] .multi-cb-label:hover, html[data-theme$="dark"] .multi-cb-label:hover { background: var(--chip); color: var(--blue); }

/* === СТАТУСЫ / БЕЙДЖИ === */
html[data-theme$="light"] .tl-status.open, html[data-theme$="dark"] .tl-status.open { background: var(--st-open-bg); color: var(--st-open); border-color: color-mix(in srgb, var(--st-open) 45%, transparent); }
html[data-theme$="light"] .tl-status.prog, html[data-theme$="dark"] .tl-status.prog { background: var(--st-prog-bg); color: var(--st-prog); border-color: color-mix(in srgb, var(--st-prog) 45%, transparent); }
html[data-theme$="light"] .tl-status.pend, html[data-theme$="dark"] .tl-status.pend { background: var(--st-pend-bg); color: var(--st-pend); border-color: color-mix(in srgb, var(--st-pend) 45%, transparent); }
html[data-theme$="light"] .tl-status.close, html[data-theme$="dark"] .tl-status.close { background: var(--st-close-bg); color: var(--st-close); border-color: color-mix(in srgb, var(--st-close) 45%, transparent); }
html[data-theme$="light"] .pr-high, html[data-theme$="dark"] .pr-high,
html[data-theme$="light"] .pr-st-open, html[data-theme$="dark"] .pr-st-open { background: var(--st-open-bg); color: var(--st-open); border-color: color-mix(in srgb, var(--st-open) 45%, transparent); }
html[data-theme$="light"] .pr-normal, html[data-theme$="dark"] .pr-normal,
html[data-theme$="light"] .pr-st-pend, html[data-theme$="dark"] .pr-st-pend { background: var(--st-pend-bg); color: var(--st-pend); border-color: color-mix(in srgb, var(--st-pend) 45%, transparent); }
html[data-theme$="light"] .pr-st-prog, html[data-theme$="dark"] .pr-st-prog { background: var(--st-prog-bg); color: var(--st-prog); border-color: color-mix(in srgb, var(--st-prog) 45%, transparent); }
html[data-theme$="light"] .pr-low, html[data-theme$="dark"] .pr-low,
html[data-theme$="light"] .pr-st-close, html[data-theme$="dark"] .pr-st-close,
html[data-theme$="light"] .pr-closed, html[data-theme$="dark"] .pr-closed { background: var(--st-close-bg); color: var(--st-close); border-color: color-mix(in srgb, var(--st-close) 45%, transparent); }
html[data-theme$="light"] .cam-link, html[data-theme$="dark"] .cam-link { background: var(--st-prog-bg); color: var(--st-prog); }
html[data-theme$="light"] .cam-link:hover, html[data-theme$="dark"] .cam-link:hover { background: color-mix(in srgb, var(--st-prog) 22%, transparent); }

/* === МОДАЛКИ === */
html[data-theme$="light"] dialog, html[data-theme$="dark"] dialog {
    background: var(--panel-solid); color: var(--text);
    border: 1px solid var(--panel-border); border-radius: 18px;
    backdrop-filter: blur(var(--panel-blur));
    box-shadow: var(--shadow);
}
html[data-theme$="light"] dialog::backdrop, html[data-theme$="dark"] dialog::backdrop { background: rgba(8,10,18,.5); backdrop-filter: blur(4px); }
html[data-theme$="light"] .media-modal, html[data-theme$="dark"] .media-modal { background: transparent; border: none; }
html[data-theme$="dark"] #mediaContent { background: #10131f; }
html[data-theme$="light"] .btn-delete-event, html[data-theme$="dark"] .btn-delete-event { border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
html[data-theme$="light"] .btn-delete-event:hover, html[data-theme$="dark"] .btn-delete-event:hover { background: var(--st-open-bg); }

/* === КАНБАН === */
html[data-theme$="light"] .kanban-column, html[data-theme$="dark"] .kanban-column {
    background: var(--panel);
    backdrop-filter: blur(var(--panel-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(1.4);
    border-color: var(--panel-border); border-radius: 16px;
}
html[data-theme$="light"] .kb-col-header, html[data-theme$="dark"] .kb-col-header { background: var(--chip); color: var(--text); border-bottom-color: var(--panel-border); border-radius: 16px 16px 0 0; }
html[data-theme$="light"] .kb-count, html[data-theme$="dark"] .kb-count { background: var(--chip); color: var(--text-muted); border: 1px solid var(--chip-border); }
html[data-theme$="light"] .kb-card, html[data-theme$="dark"] .kb-card { background: var(--panel-solid); border-color: var(--panel-border); border-radius: 13px; }
html[data-theme$="light"] .kb-card:hover, html[data-theme$="dark"] .kb-card:hover { border-color: var(--blue); box-shadow: var(--shadow); }
html[data-theme$="light"] .kb-high-priority, html[data-theme$="dark"] .kb-high-priority { background: var(--st-open-bg); border-color: color-mix(in srgb, var(--st-open) 45%, transparent); }
html[data-theme$="dark"] .kb-high-priority { background: rgba(239,114,133,.06); border-color: rgba(239,114,133,.25); border-left: 3px solid color-mix(in srgb, var(--st-open) 70%, transparent); }
html[data-theme$="light"] .kb-obj, html[data-theme$="dark"] .kb-obj { color: var(--text); }
html[data-theme$="light"] .kb-issue, html[data-theme$="dark"] .kb-issue { color: var(--text-muted); }
html[data-theme$="light"] .kb-footer, html[data-theme$="dark"] .kb-footer { border-top-color: var(--chip-border); color: var(--text-muted); }
html[data-theme$="light"] .kb-assignee, html[data-theme$="dark"] .kb-assignee { background: var(--st-pend-bg); border-color: color-mix(in srgb, var(--st-pend) 50%, transparent); color: var(--st-pend); }
html[data-theme$="light"] .kb-empty, html[data-theme$="dark"] .kb-empty { color: var(--text-muted); }

/* === ТАБЛИЦЫ / АДМИНКА / СПРАВОЧНИКИ === */
html[data-theme$="light"] .admin-table, html[data-theme$="dark"] .admin-table { background: var(--panel); border-color: var(--panel-border); backdrop-filter: blur(var(--panel-blur)); }
html[data-theme$="light"] .admin-table th, html[data-theme$="dark"] .admin-table th { background: var(--chip); color: var(--text-muted); border-bottom-color: var(--panel-border); }
html[data-theme$="light"] .admin-table td, html[data-theme$="dark"] .admin-table td { border-bottom-color: var(--chip-border); color: var(--text); }
html[data-theme$="light"] .admin-table tr:hover, html[data-theme$="dark"] .admin-table tr:hover { background: var(--chip); }
html[data-theme$="light"] .admin-header-title, html[data-theme$="dark"] .admin-header-title { color: var(--text); border-bottom-color: var(--panel-border); }
html[data-theme$="light"] .admin-logo, html[data-theme$="dark"] .admin-logo { color: var(--blue); }
html[data-theme$="light"] .admin-menu li, html[data-theme$="dark"] .admin-menu li { background: var(--chip); color: var(--text-muted); }
html[data-theme$="light"] .admin-menu li:hover, html[data-theme$="dark"] .admin-menu li:hover { background: var(--chip); color: var(--text); }
html[data-theme$="light"] .admin-menu li.active, html[data-theme$="dark"] .admin-menu li.active { background: var(--blue); color: #fff; border-color: transparent; }
html[data-theme$="light"] .cat-perm-table th, html[data-theme$="dark"] .cat-perm-table th { color: var(--text-muted); border-bottom-color: var(--panel-border); }
html[data-theme$="light"] .cat-perm-table td, html[data-theme$="dark"] .cat-perm-table td { border-bottom-color: var(--chip-border); }
html[data-theme$="light"] .perm-cb-label, html[data-theme$="dark"] .perm-cb-label { color: var(--text); }
html[data-theme$="light"] .btn-sm-del, html[data-theme$="dark"] .btn-sm-del { border-color: color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); }
html[data-theme$="light"] .btn-sm-del:hover, html[data-theme$="dark"] .btn-sm-del:hover { background: var(--red); color: #fff; }
@media (max-width: 900px) {
    html[data-theme$="light"] .admin-table tr, html[data-theme$="dark"] .admin-table tr { background: var(--panel); border-color: var(--panel-border); }
}

/* === ВЫПАДАЮЩИЕ МЕНЮ / УВЕДОМЛЕНИЯ === */
html[data-theme$="light"] .tools-dropdown-content, html[data-theme$="dark"] .tools-dropdown-content { background: var(--panel-solid); border-color: var(--panel-border); box-shadow: var(--shadow); backdrop-filter: blur(var(--panel-blur)); }
html[data-theme$="light"] .tool-link, html[data-theme$="dark"] .tool-link { color: var(--text-muted); border-bottom-color: var(--chip-border); }
html[data-theme$="light"] .tool-link:hover, html[data-theme$="dark"] .tool-link:hover { background: var(--chip); color: var(--blue); }
html[data-theme$="light"] .notif-item, html[data-theme$="dark"] .notif-item { background: var(--panel-solid); border-bottom-color: var(--chip-border); }
html[data-theme$="light"] .notif-item:hover, html[data-theme$="dark"] .notif-item:hover { background: var(--chip); }
html[data-theme$="light"] .notif-item.unread, html[data-theme$="dark"] .notif-item.unread { background: var(--st-prog-bg); border-left-color: var(--blue); }
html[data-theme$="light"] .notif-title, html[data-theme$="dark"] .notif-title { color: var(--text); }
html[data-theme$="light"] .notif-msg, html[data-theme$="dark"] .notif-msg { color: var(--text-muted); }

/* === МЕДИА-МИНИАТЮРЫ === */
html[data-theme$="light"] .media-thumb-wrap, html[data-theme$="dark"] .media-thumb-wrap { background: var(--chip); border-color: var(--panel-border); }

/* === ЛОГИН === */
html[data-theme$="light"] .login-box h1, html[data-theme$="dark"] .login-box h1 { color: var(--blue); }

/* === СКРОЛЛБАРЫ === */
html[data-theme$="dark"] .create-content-mobile::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
html[data-theme$="dark"] .create-content-mobile::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

/* === ПЕРЕБИВАЕМ ИНЛАЙН-СТИЛИ, КОТОРЫЕ ГЕНЕРИРУЕТ JS (светлые фоны) === */
html[data-theme$="light"] [style*="background:white"], html[data-theme$="dark"] [style*="background:white"],
html[data-theme$="light"] [style*="background: white"], html[data-theme$="dark"] [style*="background: white"],
html[data-theme$="light"] [style*="background:#f8fafc"], html[data-theme$="dark"] [style*="background:#f8fafc"],
html[data-theme$="light"] [style*="background: #f8fafc"], html[data-theme$="dark"] [style*="background: #f8fafc"] {
    background: var(--chip) !important;
    border-color: var(--chip-border) !important;
}
html[data-theme$="dark"] [style*="color: #4a5568"], html[data-theme$="dark"] [style*="color:#4a5568"],
html[data-theme$="dark"] [style*="color: #2d3748"], html[data-theme$="dark"] [style*="color:#2d3748"],
html[data-theme$="dark"] [style*="color: #1a202c"], html[data-theme$="dark"] [style*="color:#1a202c"] {
    color: var(--text) !important;
}

/* Заголовки h1-h4 и текст по умолчанию в тёмной теме */
html[data-theme$="dark"] h1, html[data-theme$="dark"] h2, html[data-theme$="dark"] h3, html[data-theme$="dark"] h4 { color: var(--text); }

/* ============================================================
   ПЛАВАЮЩИЙ ПЕРЕКЛЮЧАТЕЛЬ ТЕМ (создается theme.js)
   ============================================================ */
.sd-theme-switch {
    position: fixed; left: 14px; bottom: 14px; z-index: 9999;
    display: flex; gap: 3px; padding: 4px;
    background: var(--panel, rgba(255,255,255,.9));
    border: 1px solid var(--panel-border, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.sd-theme-switch button {
    width: 34px; height: 34px; padding: 0;
    border: none; border-radius: 10px; cursor: pointer;
    background: transparent; color: var(--text-muted, #718096);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; transition: .2s;
}
.sd-theme-switch button:hover { color: var(--text, #1a202c); }
.sd-theme-switch button.active {
    background: var(--blue, #3182ce); color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
@media (max-width: 900px) {
    .sd-theme-switch { left: 10px; bottom: 10px; }
    .sd-theme-switch button { width: 32px; height: 32px; }
}

/* ============================================================
   НОВАЯ РАСКЛАДКА «СТЕКЛО»: топбар, KPI, панель «Новый тикет»
   (элементы создаёт theme.js; в классике всё это скрыто)
   ============================================================ */

/* --- по умолчанию (классика): новые элементы скрыты --- */
.sd-topbar, .sd-kpis, .sd-fab, .sd-drawer-overlay, .sd-drawer-close { display: none; }

/* --- ТОПБАР --- */
html[data-theme$="light"] .sd-topbar,
html[data-theme$="dark"] .sd-topbar {
    display: flex; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 500;
    width: 100%; max-width: 1500px;
    margin: 8px auto 6px; padding: 10px 18px;
    background: var(--panel);
    backdrop-filter: blur(var(--panel-blur)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(1.5);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.sd-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; letter-spacing: .2px; color: var(--text); white-space: nowrap; }
.sd-brand-dot { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-grad, var(--blue)); box-shadow: 0 4px 12px rgba(30,99,216,.45); }
.sd-nav { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--chip); border: 1px solid var(--chip-border); }
.sd-nav a { padding: 6px 13px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: .2s; }
.sd-nav a:hover { color: var(--text); }
.sd-nav a.active { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.sd-spacer { flex: 1; }
.sd-topbar-actions { display: flex; align-items: center; }
.sd-topbar .create-panel-actions { display: flex; gap: 6px; align-items: center; }
.sd-user {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #fff;
    background: var(--accent-grad, var(--blue));
    box-shadow: 0 4px 12px rgba(30,99,216,.4);
}

/* сегментный переключатель тем в топбаре */
.sd-theme-seg { display: flex; gap: 3px; padding: 4px; border-radius: 12px; background: var(--chip, #edf2f7); border: 1px solid var(--chip-border, #e2e8f0); }
.sd-theme-seg .sd-theme-btn {
    border: none; cursor: pointer; background: transparent;
    padding: 6px 11px; border-radius: 9px; font-size: 12px; font-weight: 600;
    color: var(--text-muted); display: flex; align-items: center; gap: 4px; transition: .2s; white-space: nowrap;
}
.sd-theme-seg .sd-theme-btn:hover { color: var(--text); }
.sd-theme-seg .sd-theme-btn.active { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); }

/* в стекле переключатель живёт в топбаре — плавающий не нужен */
html[data-theme$="light"] body.sd-has-topbar .sd-theme-switch,
html[data-theme$="dark"] body.sd-has-topbar .sd-theme-switch { display: none; }

/* --- KPI-КАРТОЧКИ --- */
html[data-theme$="light"] .sd-kpis,
html[data-theme$="dark"] .sd-kpis {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px;
    justify-content: space-between; /* Распределяем по ширине */
}
.sd-kpi {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    flex: 1 1 auto; /* Позволяет тянуться по горизонтали */
    padding: 8px 16px; border-radius: 20px; /* Делаем пилюлей */
    background: var(--panel); border: 1px solid var(--panel-border);
    backdrop-filter: blur(var(--panel-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(1.4);
    box-shadow: var(--shadow);
    position: relative; overflow: hidden;
}
.sd-kpi::before { content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none; }
.sd-kpi-open::before  { background: radial-gradient(120% 120% at 0% 0%, var(--st-open), transparent 70%); }
.sd-kpi-prog::before  { background: radial-gradient(120% 120% at 0% 0%, var(--st-prog), transparent 70%); }
.sd-kpi-pend::before  { background: radial-gradient(120% 120% at 0% 0%, var(--st-pend), transparent 70%); }
.sd-kpi-close::before { background: radial-gradient(120% 120% at 0% 0%, var(--st-close), transparent 70%); }
.sd-kpi-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.sd-kpi-num { font-size: 15px; font-weight: 800; color: var(--text); }

/* --- ФОРМА СОЗДАНИЯ = ВЫЕЗЖАЮЩАЯ ПАНЕЛЬ СПРАВА --- */
html[data-theme$="light"] .container,
html[data-theme$="dark"] .container { display: block; }

html[data-theme$="light"] #leftCreatePanel,
html[data-theme$="dark"] #leftCreatePanel {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: 420px; max-width: 94vw; height: 100vh;
    margin: 0; border-radius: 20px 0 0 20px;
    background: var(--panel-solid);
    backdrop-filter: blur(26px) saturate(1.5);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    border: 1px solid var(--panel-border); border-right: none;
    box-shadow: -18px 0 50px rgba(0,0,0,.35);
    z-index: 1000;
    transform: translateX(110%);
    transition: transform .3s ease;
    display: flex; flex-direction: column;
    padding: 20px;
}
html[data-theme$="light"] body.sd-drawer-open #leftCreatePanel,
html[data-theme$="dark"] body.sd-drawer-open #leftCreatePanel { transform: translateX(0); }

/* содержимое формы всегда развернуто внутри панели (и на мобилке) */
html[data-theme$="light"] #createTicketContent,
html[data-theme$="dark"] #createTicketContent { display: block !important; overflow-y: auto; }
html[data-theme$="light"] .mobile-create-icon,
html[data-theme$="dark"] .mobile-create-icon { display: none !important; }
html[data-theme$="light"] .create-panel-title,
html[data-theme$="dark"] .create-panel-title { pointer-events: none; }

html[data-theme$="light"] .sd-drawer-close,
html[data-theme$="dark"] .sd-drawer-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--chip-border);
    background: var(--chip); color: var(--text); cursor: pointer; font-size: 14px;
    margin-left: 8px; flex-shrink: 0;
}
html[data-theme$="light"] body.sd-drawer-open .sd-drawer-overlay,
html[data-theme$="dark"] body.sd-drawer-open .sd-drawer-overlay {
    display: block; position: fixed; inset: 0; z-index: 999;
    background: rgba(5,8,18,.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* --- FAB «Новый тикет» --- */
html[data-theme$="light"] .sd-fab,
html[data-theme$="dark"] .sd-fab {
    display: flex; align-items: center; gap: 7px;
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    padding: 13px 20px; border: none; border-radius: 16px; cursor: pointer;
    font-size: 14px; font-weight: 700; color: #fff;
    background: var(--accent-grad, var(--blue));
    box-shadow: 0 10px 30px rgba(30,99,216,.45);
    transition: .2s;
}
html[data-theme$="light"] .sd-fab:hover,
html[data-theme$="dark"] .sd-fab:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* --- основная колонка на всю ширину --- */
html[data-theme$="light"] .data-panel,
html[data-theme$="dark"] .data-panel { width: 100%; max-width: 1500px; margin: 0 auto; }

/* --- мобильная адаптация новой раскладки --- */
@media (max-width: 900px) {
    html[data-theme$="light"] .sd-topbar,
    html[data-theme$="dark"] .sd-topbar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
    .sd-seg-label { display: none; }
    .sd-theme-seg .sd-theme-btn { padding: 6px 9px; font-size: 14px; }
    .sd-nav a { padding: 5px 10px; font-size: 12px; }
    html[data-theme$="light"] .sd-kpis,
    html[data-theme$="dark"] .sd-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .sd-kpi { padding: 10px 12px; border-radius: 13px; }
    .sd-kpi-num { font-size: 19px; }
    html[data-theme$="light"] #leftCreatePanel,
    html[data-theme$="dark"] #leftCreatePanel { width: 100vw; max-width: 100vw; border-radius: 0; }
    html[data-theme$="light"] .sd-fab,
    html[data-theme$="dark"] .sd-fab { right: 14px; bottom: 14px; padding: 12px 16px; }
}

/* ============================================================
   ДОРАБОТКИ: иконки, z-index, разделители, «наверх», мобильная шапка
   ============================================================ */

/* --- SVG-иконки --- */
.sd-ico { flex-shrink: 0; display: inline-block; vertical-align: -2px; }
.sd-nav a { display: inline-flex; align-items: center; gap: 6px; }
.sd-theme-seg .sd-theme-btn { gap: 5px; }
.sd-brand-dot { display: flex; align-items: center; justify-content: center; }
html[data-theme$="light"] .view-toggle .filter-btn,
html[data-theme$="dark"] .view-toggle .filter-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Кнопки действий в топбаре: прячем эмодзи (font-size:0) и рисуем SVG маской */
.sd-topbar .create-panel-actions button { font-size: 0 !important; position: relative; width: 38px; height: 38px; padding: 0 !important; border-radius: 11px; }
.sd-topbar .create-panel-actions .desktop-text { display: none !important; }
.sd-topbar .create-panel-actions button::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px;
    background: currentColor;
    -webkit-mask: var(--sd-ico) center / contain no-repeat;
    mask: var(--sd-ico) center / contain no-repeat;
}
.sd-topbar .bell-btn { --sd-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>'); }
.sd-topbar #btnAdminPanel { --sd-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>'); }
.sd-topbar .create-panel-actions button[onclick="logout()"] { --sd-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>'); }
.sd-topbar .create-panel-actions button[onclick="toggleToolsMenu(event)"] { --sd-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>'); }
/* DIFF39: иконка для "Печать сводки" (кнопка добавлена в diff38).
   Без своей --sd-ico маска пустая и ::before заливался сплошным
   цветом — на экране это выглядело как чёрный квадрат. */
.sd-topbar #btnPrintReportTop { --sd-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>'); }
.sd-topbar .bell-btn .bell-badge { font-size: 10px; }

/* KPI: цветные точки вместо эмодзи */
.sd-kpi-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.sd-kpi-dot-open  { background: var(--st-open);  box-shadow: 0 0 10px color-mix(in srgb, var(--st-open) 60%, transparent); }
.sd-kpi-dot-prog  { background: var(--st-prog);  box-shadow: 0 0 10px color-mix(in srgb, var(--st-prog) 60%, transparent); }
.sd-kpi-dot-pend  { background: var(--st-pend);  box-shadow: 0 0 10px color-mix(in srgb, var(--st-pend) 60%, transparent); }
.sd-kpi-dot-close { background: var(--st-close); box-shadow: 0 0 10px color-mix(in srgb, var(--st-close) 60%, transparent); }

/* --- Выпадающие списки не прячутся под тикеты --- */
html[data-theme$="light"] .dashboard-header,
html[data-theme$="dark"] .dashboard-header { position: relative; z-index: 40; }
html[data-theme$="light"] .multi-select-dropdown,
html[data-theme$="dark"] .multi-select-dropdown { z-index: 600; }

/* --- Подписи фильтров не обрезаются --- */
html[data-theme$="light"] .filter-group,
html[data-theme$="dark"] .filter-group { overflow: visible; padding: 8px 12px; }
html[data-theme$="light"] .filter-label,
html[data-theme$="dark"] .filter-label { white-space: nowrap; line-height: 1.4; }
html[data-theme$="light"] .filter-group.select-box,
html[data-theme$="dark"] .filter-group.select-box { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
html[data-theme$="light"] .select-box .filter-label,
html[data-theme$="dark"] .select-box .filter-label { margin: 0; }

/* --- Мягкие разделители вместо резкого пунктира --- */
html[data-theme$="light"] [style*="2px dashed"], html[data-theme$="dark"] [style*="2px dashed"] { border-top: 1px solid var(--chip-border) !important; }
html[data-theme$="light"] [style*="1px dashed"], html[data-theme$="dark"] [style*="1px dashed"] { border-style: solid !important; }
html[data-theme$="light"] [style*="dashed #cbd5e0"], html[data-theme$="dark"] [style*="dashed #cbd5e0"] { border-color: var(--chip-border) !important; }
html[data-theme$="light"] .kb-footer, html[data-theme$="dark"] .kb-footer { border-top-style: solid; }
html[data-theme$="light"] .kb-assignee, html[data-theme$="dark"] .kb-assignee { border-style: solid; }
html[data-theme$="light"] .select-all-row, html[data-theme$="dark"] .select-all-row { border-bottom-style: solid; }

/* --- Кнопка «наверх» --- */
#sdScrollTop {
    position: fixed; right: 22px; bottom: 88px; z-index: 890;
    width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--chip-border, #e2e8f0);
    background: var(--panel-solid, rgba(255,255,255,.95)); color: var(--text, #1a202c);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity .25s, transform .25s;
}
#sdScrollTop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
#sdScrollTop:hover { border-color: var(--blue, #3182ce); color: var(--blue, #3182ce); }
html[data-theme="classic"] #sdScrollTop { bottom: 22px; right: 16px; }

/* --- Компактная шапка на телефоне --- */
@media (max-width: 900px) {
    html[data-theme$="light"] .sd-topbar,
    html[data-theme$="dark"] .sd-topbar {
        gap: 6px; padding: 7px 8px; margin: 6px 6px 4px; width: auto;
        justify-content: center; border-radius: 14px;
    }
    .sd-topbar .sd-spacer { display: none; }
    .sd-brand { font-size: 13px; gap: 6px; }
    .sd-brand-dot { width: 19px; height: 19px; border-radius: 6px; }
    .sd-nav { padding: 3px; }
    .sd-nav a { padding: 4px 8px; font-size: 11px; gap: 4px; }
    .sd-theme-seg { padding: 3px; }
    .sd-theme-seg .sd-theme-btn { padding: 5px 7px; }
    .sd-user { width: 28px; height: 28px; font-size: 10px; }
    .sd-topbar .create-panel-actions { gap: 4px; }
    .sd-topbar .create-panel-actions button { width: 32px; height: 32px; border-radius: 9px; }
    .sd-topbar .create-panel-actions button::before { width: 15px; height: 15px; }

    /* KPI: ультра-компактные пилюли в ОДНУ СТРОКУ для телефона */
    html[data-theme$="light"] .sd-kpis,
    html[data-theme$="dark"] .sd-kpis { 
        gap: 4px; 
        margin-bottom: 10px; 
        flex-wrap: nowrap; /* Принудительно в одну строку */
        overflow-x: auto;  /* Мягкий скролл, если экран супер-узкий */
        padding-bottom: 2px;
    }
    html[data-theme$="light"] .sd-kpis::-webkit-scrollbar,
    html[data-theme$="dark"] .sd-kpis::-webkit-scrollbar { display: none; /* Прячем полосу прокрутки */ }
    
    .sd-kpi { 
        padding: 4px 6px; 
        border-radius: 10px; 
        gap: 4px; 
        flex: 1 0 auto; /* Сжимаем, но не ломаем */
    }
    .sd-kpi-dot { width: 6px; height: 6px; }
    .sd-kpi-label { font-size: 8.5px; letter-spacing: -0.2px; } /* Микро-текст */
    .sd-kpi-num { font-size: 12px; }

    #sdScrollTop { right: 14px; bottom: 76px; width: 40px; height: 40px; }
}

/* --- Мобильные инструменты в топбаре: фильтры / список / доска --- */
.sd-mobile-tools { display: none; }
.sd-mtool {
    width: 32px; height: 32px; border-radius: 9px;
    border: 1px solid var(--chip-border, #e2e8f0);
    background: var(--chip, rgba(255,255,255,.6));
    color: var(--text, #1a202c);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sd-mtool.active { background: var(--accent-grad, #3182ce); color: #fff; border-color: transparent; }

@media (max-width: 900px) {
    html[data-theme$="light"] .sd-mobile-tools,
    html[data-theme$="dark"] .sd-mobile-tools { display: flex; gap: 5px; }

    /* Надпись ServiceDesk прячем, остаётся только логотип */
    html[data-theme$="light"] .sd-brand,
    html[data-theme$="dark"] .sd-brand { font-size: 0; gap: 0; }

    /* Плашка фильтров скрыта; открывается кнопкой-воронкой из топбара */
    html[data-theme$="light"] .dashboard-header,
    html[data-theme$="dark"] .dashboard-header { display: none; }
    html[data-theme$="light"] body.sd-filters-open .dashboard-header,
    html[data-theme$="dark"] body.sd-filters-open .dashboard-header {
        display: block;
        position: sticky; top: 50px; z-index: 450;
        background: var(--panel-solid);
        max-height: 70vh; overflow-y: auto;
    }
    /* Внутри открытой панели свиток не нужен — фильтры сразу развёрнуты */
    html[data-theme$="light"] body.sd-filters-open .mobile-filter-toggle,
    html[data-theme$="dark"] body.sd-filters-open .mobile-filter-toggle { display: none; }
    html[data-theme$="light"] body.sd-filters-open .filters-content,
    html[data-theme$="dark"] body.sd-filters-open .filters-content { display: flex !important; max-height: none !important; overflow: visible !important; flex-direction: column; gap: 8px; }
}

/* --- Справочники и админка: читаемость в тёмной теме --- */
/* Строки-статусы со светлыми инлайн-фонами перекрашиваем в тёмные тона */
html[data-theme$="dark"] tr[style*="#fff5f5"], html[data-theme$="dark"] tr[style*="255, 245, 245"] { background-color: rgba(239,114,133,.10) !important; }
html[data-theme$="dark"] tr[style*="#fffff0"], html[data-theme$="dark"] tr[style*="255, 255, 240"] { background-color: rgba(233,180,92,.10) !important; }
html[data-theme$="dark"] tr[style*="#f0fff4"], html[data-theme$="dark"] tr[style*="240, 255, 244"] { background-color: rgba(87,199,149,.10) !important; }
html[data-theme$="dark"] tr[style*="#f7fafc"], html[data-theme$="dark"] tr[style*="247, 250, 252"] { background-color: rgba(255,255,255,.06) !important; }
/* Светлые инлайн-плашки/кнопки (права в админке, стрелки, метки) */
html[data-theme$="dark"] [style*="background:#edf2f7"], html[data-theme$="dark"] [style*="background: #edf2f7"] { background: var(--chip) !important; border-color: var(--chip-border) !important; color: var(--text) !important; }
html[data-theme$="dark"] [style*="background:#f8fafc"], html[data-theme$="dark"] [style*="background: #f8fafc"] { background: var(--chip) !important; color: var(--text) !important; }
html[data-theme$="dark"] [style*="background:#f0fff4"], html[data-theme$="dark"] [style*="background: #f0fff4"] { background: rgba(87,199,149,.15) !important; }
html[data-theme$="dark"] [style*="background:#fffaf0"], html[data-theme$="dark"] [style*="background: #fffaf0"] { background: rgba(233,180,92,.15) !important; }
/* Тёмно-серый статусный текст не виден на тёмном фоне */
html[data-theme$="dark"] span[style*="color:#4a5568"], html[data-theme$="dark"] span[style*="color: #4a5568"],
html[data-theme$="dark"] span[style*="74, 85, 104"] { color: var(--text-muted) !important; }

/* --- Меню «Справочники» на телефоне: не уходит за экран --- */
@media (max-width: 900px) {
    html[data-theme$="light"] .sd-topbar .tools-dropdown-wrapper,
    html[data-theme$="dark"] .sd-topbar .tools-dropdown-wrapper { position: static; }
    html[data-theme$="light"] .sd-topbar .tools-dropdown-content,
    html[data-theme$="dark"] .sd-topbar .tools-dropdown-content {
        position: fixed; left: 10px; right: 10px; top: 104px;
        max-height: 70vh; overflow-y: auto;
    }
}
html[data-theme$="dark"] .tools-dropdown-content { background-color: var(--panel-solid); border-color: var(--panel-border); }
html[data-theme$="dark"] .tool-link { color: var(--text); }
html[data-theme$="dark"] .tool-link:hover { background: var(--chip); }

/* --- Плотные (непрозрачные) выпадающие меню: читаемость + производительность --- */
html[data-theme$="light"] .tools-dropdown-content, html[data-theme$="dark"] .tools-dropdown-content,
html[data-theme$="light"] .multi-select-dropdown, html[data-theme$="dark"] .multi-select-dropdown,
html[data-theme$="light"] .notif-item, html[data-theme$="dark"] .notif-item {
    background: var(--panel-opaque) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- Оптимизация для слабых устройств: без blur и тяжёлых теней на телефоне --- */
@media (max-width: 900px) {
    html[data-theme="glass-light"], html[data-theme="glass-dark"] { --panel-blur: 0px; --shadow: 0 4px 14px rgba(0,0,0,.18); }
    html[data-theme="glass-light"] { --panel: rgba(255,255,255,.9); --panel-solid: rgba(255,255,255,.97); }
    html[data-theme="glass-dark"] { --panel: rgba(24,29,40,.94); --panel-solid: rgba(27,32,44,.98); }
    html[data-theme$="light"] *, html[data-theme$="dark"] * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ============================================================
   ПЕРЕНОС ПЕРЕКЛЮЧАТЕЛЯ "СПИСОК/ДОСКА" В ТОПБАР
   ============================================================ */
/* Прячем старый контейнер с полоской в index.html для стеклянных тем */
html[data-theme$="light"] #viewToggleContainer,
html[data-theme$="dark"] #viewToggleContainer {
    display: none !important;
}
/* Стили для слота в топбаре */
.sd-topbar-view-toggle {
    display: flex;
}
/* На мобилках этот слот прячем, т.к. там генерируются отдельные кнопки .sd-mobile-tools */
@media (max-width: 900px) {
    .sd-topbar-view-toggle {
        display: none !important;
    }
}

/* ============================================================
   СУПЕР-КОМПАКТНАЯ ШАПКА ДЛЯ ТЕЛЕФОНА (ОДИН РЯД И МЕНЮ АВАТАРКИ)
   ============================================================ */
@media (max-width: 900px) {
    /* 1. ЖЕСТКО В ОДИН РЯД: Идеальное равномерное распределение */
    html[data-theme$="light"] .sd-topbar,
    html[data-theme$="dark"] .sd-topbar { 
        flex-wrap: nowrap !important;
        padding: 6px 12px !important; /* Чуть увеличили поля по краям экрана */
        gap: 0 !important; /* Отключаем жесткий отступ */
        justify-content: space-between !important; /* CSS сам распределит блоки равномерно */
    }
    
    /* Прячем логотип, текст ServiceDesk и старый спейсер */
    .sd-brand { display: none !important; }
    .sd-spacer { display: none !important; }
    
    /* Компактный виджет Тикеты/Карта */
    .sd-nav { gap: 2px !important; padding: 2px !important; }
    .sd-nav a { padding: 6px 12px !important; } 
    .sd-nav a span { display: none !important; } 
    
    /* Отступы ВНУТРИ групп кнопок (например, между фильтром и доской) */
    html[data-theme$="light"] .sd-mobile-tools,
    html[data-theme$="dark"] .sd-mobile-tools { gap: 4px !important; }

    .sd-topbar .create-panel-actions { gap: 4px !important; }
    
    /* Возвращаем комфортный размер 32px (теперь они точно влезут) */
    .sd-mtool, .sd-topbar .create-panel-actions button { 
        width: 32px !important; 
        height: 32px !important; 
    }
    
    /* Аватарка теперь не "отталкивается" марджином, а слушается общей сетки */
    .sd-user { 
        margin: 0 !important; 
        align-self: center !important;
        width: 32px !important; 
        height: 32px !important; 
        flex-shrink: 0; 
    }

    /* =========================================
       КРАСИВОЕ ВЫПАДАЮЩЕЕ МЕНЮ (ПОДЛОЖКА И СПИСОК)
       ========================================= */
    
    /* Сама подложка (эффект размытого стекла + заголовок) */
    .sd-topbar::after {
        content: 'НАСТРОЙКИ';
        position: absolute;
        right: 8px;
        top: 50px;
        width: 220px;
        height: 135px; /* Высота по умолчанию (без админки) */
        background: var(--panel-solid);
        backdrop-filter: blur(16px) saturate(1.5);
        border: 1px solid var(--panel-border);
        border-radius: 16px;
        box-shadow: 0 10px 35px rgba(0,0,0,0.4);
        z-index: 900;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        font-size: 10px;
        font-weight: 800;
        color: var(--text-muted);
        padding: 12px 15px;
        box-sizing: border-box;
        pointer-events: none;
    }

    /* Анимация открытия подложки */
    body.sd-user-menu-open .sd-topbar::after {
        opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
    }

    /* Умная магия CSS: Увеличиваем подложку, если есть кнопка Админки */
    .sd-topbar:has(#btnAdminPanel:not([style*="none"]))::after {
        height: 180px;
    }

    /* --- ПОЗИЦИОНИРОВАНИЕ КНОПОК ПОВЕРХ ПОДЛОЖКИ --- */
    .sd-theme-seg,
    .sd-topbar .create-panel-actions button#btnAdminPanel,
    .sd-topbar .create-panel-actions button[onclick="logout()"] {
        position: absolute !important;
        right: 20px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 910 !important;
        margin: 0 !important;
    }

    body.sd-user-menu-open .sd-theme-seg,
    body.sd-user-menu-open .sd-topbar .create-panel-actions button#btnAdminPanel,
    body.sd-user-menu-open .sd-topbar .create-panel-actions button[onclick="logout()"] {
        opacity: 1; visibility: visible; transform: translateY(0);
    }

    /* Стили для переключателя тем внутри меню */
    .sd-theme-seg {
        top: 78px;
        width: 196px;
        background: var(--chip) !important;
        border: 1px solid var(--chip-border) !important;
        padding: 4px !important;
        justify-content: space-between;
    }
    .sd-theme-seg .sd-theme-btn { flex: 1; justify-content: center; }

    /* Превращаем кнопки "Админка" и "Выход" в пункты списка */
    .sd-topbar .create-panel-actions button#btnAdminPanel,
    .sd-topbar .create-panel-actions button[onclick="logout()"] {
        width: 196px !important;
        height: 40px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        justify-content: flex-start !important; /* Текст прижимаем влево */
        padding: 0 10px !important;
        border-radius: 10px !important;
    }
    .sd-topbar .create-panel-actions button#btnAdminPanel:hover,
    .sd-topbar .create-panel-actions button[onclick="logout()"]:hover {
        background: var(--chip) !important;
    }

    /* Восстанавливаем иконки кнопок, чтобы они стояли ровно */
    .sd-topbar .create-panel-actions button#btnAdminPanel::before,
    .sd-topbar .create-panel-actions button[onclick="logout()"]::before {
        position: static !important;
        display: inline-block;
        width: 18px; height: 18px;
        margin-right: 12px !important;
    }

    /* Показываем ТЕКСТ кнопок (Админка, Выход) */
    .sd-topbar .create-panel-actions button#btnAdminPanel .desktop-text,
    .sd-topbar .create-panel-actions button[onclick="logout()"] .desktop-text {
        display: inline-block !important;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
    }

    /* Размещаем их сверху вниз по пикселям */
    body.sd-user-menu-open .sd-topbar .create-panel-actions button#btnAdminPanel { top: 130px; }
    body.sd-user-menu-open .sd-topbar .create-panel-actions button[onclick="logout()"] { top: 130px; } /* Дефолт для Выхода, если админки нет */
    
    /* Если админка ЕСТЬ, сдвигаем Выход еще ниже */
    .sd-topbar:has(#btnAdminPanel:not([style*="none"])) button[onclick="logout()"] {
        top: 174px !important;
    }
}

/* ==========================================================================
   DIFF47: выпадающий список категорий обрезался снизу, справа появлялась
   узкая полоса прокрутки.

   НАСТОЯЩАЯ ПРИЧИНА (найдена через elementFromPoint, а не по догадке):
     style.css:12   html, body { overflow-x: hidden !important; }

   По спецификации CSS, если по одной оси задан hidden, а по другой visible,
   то visible принудительно вычисляется как auto. Поэтому body получал
   overflow-y: auto и становился прокручиваемым контейнером высотой всего
   в контент. Когда заявок нет, страница короткая (171 px), и список
   категорий (234 px) физически обрезался её низом.

   Версии, которые проверены и ОТВЕРГНУТЫ:
     - backdrop-filter на .dashboard-header: контрольный замер дал
       одинаковую высоту со стеклом и без (212 px = 212 px);
     - max-height: 300px у самого списка: он не был ограничителем
       при 6 категориях (нужно 234 px).

   РЕШЕНИЕ: не давать странице схлопываться до высоты контента.
   min-height гарантирует, что под открытым списком всегда есть место.
   ========================================================================== */

/* страница не короче экрана - списку есть куда раскрыться */
html[data-theme$="light"] body,
html[data-theme$="dark"] body {
    min-height: 100vh;
}

/* когда список открыт, добавляем странице запас снизу */
html[data-theme$="light"] body:has(.multi-select-dropdown.show),
html[data-theme$="dark"] body:has(.multi-select-dropdown.show) {
    min-height: calc(100vh + 260px);
}

/* сам список: поверх соседей, с разумным потолком высоты */
html[data-theme$="light"] .multi-select-dropdown,
html[data-theme$="dark"] .multi-select-dropdown {
    z-index: 1200;
    max-height: min(70vh, 460px);
    overscroll-behavior: contain;
}

/* контейнеры между панелью и списком не должны резать */
html[data-theme$="light"] .dashboard-header,
html[data-theme$="dark"] .dashboard-header,
html[data-theme$="light"] .filters-content,
html[data-theme$="dark"] .filters-content,
html[data-theme$="light"] .filter-group.select-box,
html[data-theme$="dark"] .filter-group.select-box {
    overflow: visible;
}

/* Браузеры без :has() - постоянный небольшой запас снизу у панели данных */
@supports not selector(:has(*)) {
    html[data-theme$="light"] .data-panel,
    html[data-theme$="dark"] .data-panel { padding-bottom: 280px; }
}

/* Телефон: список не больше половины экрана */
@media (max-width: 900px) {
    html[data-theme$="light"] .multi-select-dropdown,
    html[data-theme$="dark"] .multi-select-dropdown { max-height: min(50vh, 340px); }
}