/* ===================================================================
   SimlaSupport — Omnica Design System + EvoStat Dark Sidebar
   Based on omnica-core.css v2026 tokens
   =================================================================== */

:root {
    --primary-color: #005EEB;
    --primary-hover: #0052CC;
    --primary-active: #0044B7;
    --primary-light: #E0ECFF;
    --primary-ultra-light: rgba(0, 94, 235, 0.12);
    --primary-gradient: linear-gradient(180deg, #0068FF 0%, #005BD5 100%);

    --success-color: #1EB383;
    --success-light: #E1FAF2;
    --success-dark: #19976E;

    --warning-color: #FEA025;
    --warning-light: #FFF4E5;
    --warning-dark: #D07601;

    --danger-color: #F04747;
    --danger-light: #FFEDED;
    --danger-dark: #DD4141;

    --dark-color: #1E2248;
    --text-secondary: #8A96A6;
    --text-muted: #98A4B1;
    --text-tertiary: #AFB9C3;

    --light-bg: #F4F6F8;
    --bg-hover: #F9FAFB;
    --border-color: #DEE2E6;
    --border-active: #C7CDD4;

    --card-shadow: 0 1px 3px rgba(30,34,72,.06), 0 1px 2px rgba(30,34,72,.04);
    --card-shadow-hover: 0 10px 25px rgba(30,34,72,.10), 0 4px 10px rgba(30,34,72,.06);
    --shadow-lg: 0 10px 30px rgba(30,34,72,.12);
    --focus-ring: 0 0 0 4px rgba(0,94,235,.12);
    --overlay-color: rgba(45,51,108,.40);

    --neutral-bg: #E9ECEE;
    --neutral-color: #2D336C;
    --info-color: #4191FF;
    --info-light: #E0ECFF;
    --purple-color: #6B31D9;
    --purple-light: #ECE5FA;
    --pill-stripe-text: #635BFF;
    --pill-whatsapp-text: #128C7E;
    --badge-type-text: #7C3AED;

    --transition-fast: .15s ease;
    --transition-normal: .25s ease;
    --topbar-surface: rgba(255,255,255,.82);

    /* Backward compat aliases for existing templates */
    --bg: var(--light-bg);
    --surface: #ffffff;
    --surface-secondary: var(--bg-hover);
    --surface-tertiary: var(--neutral-bg);
    --surface-soft: var(--surface-secondary);
    --border: var(--border-color);
    --border-strong: var(--border-active);
    --separator: rgba(0,0,0,.04);
    --text: var(--dark-color);
    --blue: var(--primary-color);
    --blue-hover: var(--primary-hover);
    --blue-bg: var(--primary-ultra-light);
    --green: var(--success-color);
    --green-bg: var(--success-light);
    --orange: var(--warning-color);
    --orange-bg: var(--warning-light);
    --red: var(--danger-color);
    --red-bg: var(--danger-light);
    --purple: var(--purple-color);
    --purple-bg: var(--purple-light);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --shadow-sm: var(--card-shadow);
    --shadow-md: var(--card-shadow-hover);
    --shadow-xl: var(--shadow-lg);

    --sidebar-width: 240px;
    --sidebar-collapsed-width: 60px;
    --topbar-height: 52px;
}

html[data-theme="dark"],
html.dark {
    --primary-light: rgba(56, 189, 248, .16);
    --primary-ultra-light: rgba(56, 189, 248, .14);
    --success-light: rgba(30, 179, 131, .16);
    --warning-light: rgba(254, 160, 37, .16);
    --danger-light: rgba(240, 71, 71, .18);
    --dark-color: #E5EAF3;
    --text-secondary: #A8B3C5;
    --text-muted: #8F9BAD;
    --text-tertiary: #748195;
    --light-bg: #0F172A;
    --bg-hover: #111D33;
    --border-color: #26364F;
    --border-active: #37506F;
    --card-shadow: 0 1px 3px rgba(0,0,0,.35);
    --card-shadow-hover: 0 12px 30px rgba(0,0,0,.35);
    --neutral-bg: #18243A;
    --neutral-color: #DDE7F7;
    --info-light: rgba(65,145,255,.16);
    --purple-light: rgba(107,49,217,.18);
    --pill-stripe-text: #B8B5FF;
    --pill-whatsapp-text: #5EE6B2;
    --badge-type-text: #C4B5FD;
    --surface: #142035;
    --surface-secondary: #111D33;
    --surface-tertiary: #1B2942;
    --separator: rgba(255,255,255,.08);
    --text: #E5EAF3;
    --topbar-surface: rgba(15,23,42,.88);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--light-bg);
    color: var(--dark-color);
    font-size: 14px; font-weight: 400; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.011em;
}

a { color: var(--primary-color); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(0,94,235,.2); }

/* ===== Dark Sidebar (EvoStat style) ===== */

.sidebar {
    position: fixed; top: 0; left: 0; height: 100vh;
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #1a1d3a 0%, #0f1129 100%);
    z-index: 1000; display: flex; flex-direction: column;
    overflow-x: hidden; transition: width var(--transition-normal);
}

.sidebar .logo {
    color: #fff; font-size: 1.15rem; font-weight: 700;
    padding: 1rem 1.25rem; display: flex; align-items: center;
    gap: .5rem; border-bottom: 1px solid rgba(255,255,255,.08);
    min-height: 56px; text-decoration: none; white-space: nowrap;
    transition: background var(--transition-fast);
}
.sidebar .logo:hover { background: rgba(255,255,255,.04); text-decoration: none; }

.brand-mark {
    width: 32px; height: 32px; min-width: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-color); border-radius: 8px;
    color: #fff; font-weight: 700; font-size: 16px;
    box-shadow: 0 2px 10px rgba(0,94,235,.45);
}
.brand-text {
    letter-spacing: -.02em; font-weight: 600; color: #fff;
    overflow: hidden; transition: opacity var(--transition-normal);
}

.sidebar .nav-list {
    padding: 1rem .75rem 2rem; flex: 1; overflow-y: auto;
    list-style: none; margin: 0;
}

.sidebar .nav-list a {
    color: rgba(255,255,255,.6); padding: 9px 14px; border-radius: 8px;
    margin-bottom: 2px; display: flex; align-items: center;
    gap: 10px; font-size: 13.5px; font-weight: 400; line-height: 1.43;
    white-space: nowrap; text-decoration: none;
    transition: all var(--transition-fast);
}
.sidebar .nav-list a:hover {
    background: rgba(255,255,255,.08); color: #fff; text-decoration: none;
}
.sidebar .nav-list a.active {
    background: linear-gradient(135deg, rgba(0,94,235,.9) 0%, rgba(0,68,183,.9) 100%);
    color: #fff; font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,94,235,.3);
}
.sidebar .nav-list a i {
    font-size: 18px; width: 20px; min-width: 20px; text-align: center;
}

/* Local icon fallbacks keep navigation and actions usable without a CDN. */
.bi {
    display: inline-block;
    width: 1em;
    height: 1em;
    min-width: 1em;
    background-color: currentColor;
    mask: var(--bi-icon) center / contain no-repeat;
    -webkit-mask: var(--bi-icon) center / contain no-repeat;
    vertical-align: -.125em;
}
.bi-grid-1x2 { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 2a1 1 0 0 1 1-1h5v6H1V2Zm8-1h5a1 1 0 0 1 1 1v5H9V1ZM1 9h6v6H2a1 1 0 0 1-1-1V9Zm8 0h6v5a1 1 0 0 1-1 1H9V9Z'/%3E%3C/svg%3E"); }
.bi-ticket-detailed { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2.25a1.75 1.75 0 0 0 0 3.5V12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9.75a1.75 1.75 0 0 0 0-3.5V4Zm4 0v1h6V4H5Zm0 3v1h6V7H5Zm0 3v1h4v-1H5Z'/%3E%3C/svg%3E"); }
.bi-star { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1.5 9.9 5.6 14.5 6.2 11.2 9.4 12 14 8 11.8 4 14 4.8 9.4 1.5 6.2 6.1 5.6 8 1.5Z'/%3E%3C/svg%3E"); }
.bi-people { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6 7a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm7-1.5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0ZM0 13c0-2.2 2.7-4 6-4s6 1.8 6 4v1H0v-1Zm11.5-3.5c2.5.3 4.5 1.7 4.5 3.5v1h-3v-1c0-1.3-.6-2.4-1.5-3.5Z'/%3E%3C/svg%3E"); }
.bi-person-badge { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4 1h8a2 2 0 0 1 2 2v12H2V3a2 2 0 0 1 2-2Zm4 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm-4 5h8c0-2-1.8-3.5-4-3.5S4 11 4 13Z'/%3E%3C/svg%3E"); }
.bi-bar-chart-line { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 14h14v1H0V1h1v13Zm2-1h2V7H3v6Zm4 0h2V3H7v10Zm4 0h2V9h-2v4Z'/%3E%3C/svg%3E"); }
.bi-robot { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M7.5 1h1v2H12a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.5V1ZM5 8a1.25 1.25 0 1 0 0-2.5A1.25 1.25 0 0 0 5 8Zm6 0a1.25 1.25 0 1 0 0-2.5A1.25 1.25 0 0 0 11 8Zm-6 3h6v-1H5v1Z'/%3E%3C/svg%3E"); }
.bi-diagram-3 { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M7 1h2v4H7V1ZM2 11h4v4H2v-4Zm8 0h4v4h-4v-4ZM8 6v2H4v2H3V7h4V6h1Zm5 4h-1V8H8V7h5v3Z'/%3E%3C/svg%3E"); }
.bi-plug { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5 1h1.5v3.5H5V1Zm4.5 0H11v3.5H9.5V1ZM3 5.5h10V8a5 5 0 0 1-4.25 4.94V15h-1.5v-2.06A5 5 0 0 1 3 8V5.5Z'/%3E%3C/svg%3E"); }
.bi-shield-exclamation { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 .5 2.5 2.6V8c0 3.4 2.3 6.2 5.5 7.4 3.2-1.2 5.5-4 5.5-7.4V2.6L8 .5Zm-.75 4h1.5v4.5h-1.5V4.5Zm0 5.75h1.5v1.5h-1.5v-1.5Z'/%3E%3C/svg%3E"); }
.bi-exclamation-triangle { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1.5 15 14H1L8 1.5Zm-.75 4.25h1.5v4h-1.5v-4Zm0 5.25h1.5v1.5h-1.5v-1.5Z'/%3E%3C/svg%3E"); }
.bi-chat-dots { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2 2h12v9H6l-4 3V2Zm3 4.5a1 1 0 1 0 2 0 1 1 0 0 0-2 0Zm3 0a1 1 0 1 0 2 0 1 1 0 0 0-2 0Z'/%3E%3C/svg%3E"); }
.bi-lightning-charge { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M9 0 3 9h4l-1 7 7-10H9l1-6Z'/%3E%3C/svg%3E"); }
.bi-sliders { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2 3h7v2H2V3Zm9-1h2v4h-2V2ZM2 11h2v2H2v-2Zm4-1h8v4H6v-4ZM2 7h12v2H2V7Z'/%3E%3C/svg%3E"); }
.bi-clipboard-check { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6 1a1 1 0 0 0-1 1v1h6V2a1 1 0 0 0-1-1H6ZM4 2H3a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-1v2H4V2Zm3.1 10.3L4.6 9.8l1-1 1.5 1.5 3.4-3.4 1 1-4.4 4.4Z'/%3E%3C/svg%3E"); }
.bi-gear { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M9 1 7 1.1l-.5 1.6c-.4.1-.7.3-1 .5L3.9 2.5 2.5 3.9l.7 1.6c-.2.3-.4.7-.5 1L1.1 7 1 9l1.7.5c.1.4.3.7.5 1l-.7 1.6 1.4 1.4 1.6-.7c.3.2.7.4 1 .5L7 14.9l2 .1.5-1.7c.4-.1.7-.3 1-.5l1.6.7 1.4-1.4-.7-1.6c.2-.3.4-.7.5-1L14.9 9 15 7l-1.7-.5c-.1-.4-.3-.7-.5-1l.7-1.6-1.4-1.4-1.6.7c-.3-.2-.7-.4-1-.5L9 1ZM8 10.5A2.5 2.5 0 1 1 8 5a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E"); }
.bi-chevron-left { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M10.5 2 4.5 8l6 6 1.4-1.4L7.3 8l4.6-4.6L10.5 2Z'/%3E%3C/svg%3E"); }
.bi-chevron-right { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m5.5 14 6-6-6-6-1.4 1.4L8.7 8l-4.6 4.6L5.5 14Z'/%3E%3C/svg%3E"); }
.bi-chevron-up { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2 10.5 8 4.5l6 6-1.4 1.4L8 7.3l-4.6 4.6L2 10.5Z'/%3E%3C/svg%3E"); }
.bi-chevron-down { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m14 5.5-6 6-6-6 1.4-1.4L8 8.7l4.6-4.6L14 5.5Z'/%3E%3C/svg%3E"); }
.bi-box-arrow-up-right { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M3 3h5v2H5v6h6V8h2v5H3V3Zm7 0h4v4h-2V6.4L8.7 9.7 7.3 8.3 10.6 5H10V3Z'/%3E%3C/svg%3E"); }
.bi-arrow-repeat { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2 8a6 6 0 0 1 10.2-4.2L14 2v5H9l1.8-1.8A4 4 0 0 0 4 8H2Zm12 0A6 6 0 0 1 3.8 12.2L2 14V9h5l-1.8 1.8A4 4 0 0 0 12 8h2Z'/%3E%3C/svg%3E"); }
.bi-info-circle { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm1 11H7V7h2v5ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E"); }
.bi-translate { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 2h6v2H5.5c-.3 1.6-.9 3-1.8 4.2.7.7 1.5 1.3 2.5 1.8l-1 1.7a12 12 0 0 1-2.8-2A12 12 0 0 1 0 11.3l-.8-1.8A9 9 0 0 0 1 8.3 10 10 0 0 1-.1 6l1.8-.6c.2.5.4 1 .7 1.4.5-.8.8-1.7 1-2.8H1V2Zm9 3h2l4 10h-2.2l-.9-2.5H9.1L8.2 15H6l4-10Zm0 5.5h2.2L11.1 7.4 10 10.5Z'/%3E%3C/svg%3E"); }
.bi-file-earmark-arrow-down { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M3 1h6l4 4v10H3V1Zm2 2v10h6V6H8V3H5Zm2 4h2v2h1.5L8 12 5.5 9H7V7Z'/%3E%3C/svg%3E"); }

.sidebar .nav-section {
    font-size: 10px; font-weight: 600; color: rgba(255,255,255,.3);
    text-transform: uppercase; letter-spacing: .08em;
    padding: 1rem 14px .5rem; margin-top: .5rem;
}

.sidebar-admin {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .5rem .75rem; flex-shrink: 0;
}
.sidebar-admin a {
    padding: 9px 14px; color: rgba(255,255,255,.5); font-size: 13px;
    font-weight: 500; display: flex; align-items: center; gap: 10px;
    border-radius: 8px; text-decoration: none;
    transition: all var(--transition-fast);
}
.sidebar-admin a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }

/* Версия сборки в самом низу сайдбара: должна быть доступна взгляду, но не спорить
   за внимание с навигацией — отсюда приглушённый цвет и мелкий моноширинный sha. */
.sidebar-release {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .6rem 1.1rem .7rem; flex-shrink: 0;
    display: flex; align-items: baseline; gap: .5ch;
    font-size: 11px; line-height: 1.4; color: rgba(255,255,255,.35);
    cursor: default; user-select: text;
}
.sidebar-release .release-version { font-weight: 600; letter-spacing: .01em; }
.sidebar-release .release-sha {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px; color: rgba(255,255,255,.25);
}
/* Переменные выкладки не заданы — код мог обновиться, а надпись остаться старой.
   Это состояние должно быть заметным, а не выглядеть нормальным. */
.sidebar-release .release-undeclared { color: #f0a63c; font-weight: 600; }
.sidebar-admin a.active {
    background: linear-gradient(135deg, rgba(0,94,235,.9) 0%, rgba(0,68,183,.9) 100%);
    color: #fff;
}

/* ===== Main layout ===== */

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh; display: flex; flex-direction: column;
    transition: margin-left var(--transition-normal);
}

.topbar {
    height: var(--topbar-height);
    background: var(--topbar-surface);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-color);
    padding: 0 24px; display: flex; justify-content: space-between;
    align-items: center; gap: 16px;
    position: sticky; top: 0; z-index: 10;
}
.topbar-title { display: flex; align-items: baseline; gap: 10px; }
.topbar-title h1 {
    font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em;
}
.topbar-title .subtitle {
    font-size: 12px; color: var(--text-tertiary); font-weight: 400;
}
.topbar-right {
    display: flex; align-items: center; gap: 12px;
    color: var(--text-secondary); font-size: 13px;
}

.theme-label {
    font-size: 11px; font-weight: 600; color: var(--text-tertiary);
}
.theme-selector {
    min-height: 34px; min-width: 92px; padding: 5px 28px 5px 9px;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font: inherit;
    font-size: 12px; font-weight: 600;
}
.theme-selector:focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

.content { padding: 20px 24px 36px; max-width: 1360px; }

/* ===== Cards ===== */

.card {
    background: var(--surface); border-radius: 10px;
    box-shadow: var(--card-shadow); border: 1px solid var(--border-color);
    margin-bottom: 16px;
}
.card-header {
    padding: 14px 20px; border-bottom: 1px solid var(--border-color);
    font-weight: 600; font-size: 14px; display: flex;
    align-items: center; justify-content: space-between;
}
.card-body { padding: 20px; }
.card-flush .card-body { padding: 0; }

/* ===== Stat cards / KPI ===== */

.stat-grid {
    display: grid; gap: 12px; margin-bottom: 20px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat-card {
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 16px 18px;
    box-shadow: var(--card-shadow);
}
.stat-card .stat-label {
    font-size: 12px; color: var(--text-tertiary); font-weight: 500;
    margin-bottom: 6px;
}
.stat-card .stat-value {
    font-size: 24px; font-weight: 700; letter-spacing: -.02em;
}
.stat-card .stat-sub {
    font-size: 12px; color: var(--text-secondary); margin-top: 4px;
}

/* ===== Tables ===== */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; font-size: 13px; vertical-align: middle; }
th {
    font-size: 11px; color: var(--text-tertiary); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--border-color); padding: 8px 14px;
    background: var(--bg-hover);
}
td { border-bottom: 1px solid var(--separator); }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--bg-hover); }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--primary-ultra-light) !important; }

/* ===== Badges ===== */

.badge {
    display: inline-block; padding: 3px 10px; border-radius: 980px;
    font-size: 11px; font-weight: 500; letter-spacing: .01em;
}
.badge-primary { background: var(--primary-light); color: var(--primary-color); }
.badge-success { background: var(--success-light); color: var(--success-dark); }
.badge-warning { background: var(--warning-light); color: var(--warning-dark); }
.badge-danger  { background: var(--danger-light); color: var(--danger-dark); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral-color); }
.badge-info    { background: var(--info-light); color: var(--primary-color); }
.badge-purple  { background: var(--purple-light); color: var(--purple-color); }

/* ===== Buttons ===== */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; font: inherit; border: none; border-radius: 6px; cursor: pointer;
    text-decoration: none; font-weight: 500; font-size: 13px;
    padding: 7px 16px; transition: all var(--transition-fast);
    letter-spacing: -.01em;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 14px rgba(0,94,235,.25); }

.btn-secondary {
    background: var(--surface); color: var(--dark-color);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-active); }

.btn-ghost { background: transparent; color: var(--primary-color); }
.btn-ghost:hover { background: var(--primary-ultra-light); }

.btn-danger { background: var(--danger-color); color: #fff; }
.btn-danger:hover { background: var(--danger-dark); }

.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; }

.btn-icon {
    padding: 6px; border-radius: 6px; background: transparent;
    color: var(--text-secondary); border: 1px solid var(--border-color);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--dark-color); }

/* ===== Forms ===== */

.form-group { margin-bottom: 12px; }
.form-label {
    font-size: 12px; color: var(--text-secondary); font-weight: 500;
    margin-bottom: 4px; display: block;
}
.form-control, .form-select {
    font: inherit; width: 100%; border: 1px solid var(--border-color);
    border-radius: 6px; padding: 7px 12px; font-size: 13px;
    background: var(--surface); color: var(--dark-color);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus, .form-select:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* ===== Filters bar ===== */

.filters {
    display: flex; gap: 10px; flex-wrap: wrap;
    align-items: flex-end; margin-bottom: 16px;
}
.filters .form-group { margin-bottom: 0; }

/* ===== Detail page ===== */

.page-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px;
}
.page-header .back-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; color: var(--text-secondary);
}
.page-header .back-link:hover { color: var(--primary-color); text-decoration: none; }
.page-header h2 { font-size: 18px; font-weight: 600; margin: 0; }

.detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.detail-item .detail-label {
    font-size: 11px; color: var(--text-tertiary); font-weight: 500;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.detail-item .detail-value { font-size: 14px; font-weight: 500; }

.external-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--primary-color); font-size: 13px;
}
.external-link:hover { text-decoration: underline; }
.external-link i { font-size: 12px; }

/* ===== Messages / Chat ===== */

.msg-list { max-width: 840px; }
.msg-item { margin-bottom: 10px; display: flex; flex-direction: column; }
.msg-meta {
    font-size: 11px; color: var(--text-tertiary); margin-bottom: 3px;
    display: flex; gap: 8px; align-items: center;
}
.msg-meta .sender { font-weight: 600; }
.msg-meta .sender.customer { color: var(--primary-color); }
.msg-meta .sender.operator { color: var(--success-dark); }
.msg-meta .sender.bot { color: var(--purple-color); }

.msg-bubble {
    padding: 10px 14px; border-radius: 10px; font-size: 13px;
    line-height: 1.55; max-width: 680px; word-break: break-word;
}
.msg-item.customer .msg-bubble {
    background: var(--primary-light); color: var(--dark-color);
    border-bottom-left-radius: 3px;
}
.msg-item.operator .msg-bubble {
    background: var(--success-light); color: var(--dark-color);
    border-bottom-right-radius: 3px; align-self: flex-end;
}
.msg-item.bot .msg-bubble {
    background: var(--purple-light); color: var(--dark-color);
    border-bottom-left-radius: 3px;
}
.msg-item.system .msg-bubble {
    background: var(--neutral-bg); color: var(--text-secondary);
    font-size: 12px; font-style: italic; padding: 6px 12px;
}

.msg-bubble audio { width: 100%; max-width: 300px; margin-top: 6px; }
.msg-bubble img.media-preview {
    max-width: 260px; max-height: 200px; border-radius: 6px; margin-top: 6px;
}
.msg-translation {
    margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-color);
    font-size: 12px; color: var(--text-secondary); font-style: italic;
}

/* ===== Pager ===== */

.pager {
    display: flex; align-items: center; gap: 4px;
    justify-content: center; padding: 16px 0;
}
.pager a, .pager span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border-radius: 6px; font-size: 13px; font-weight: 500;
    text-decoration: none; transition: all var(--transition-fast);
}
.pager a { color: var(--dark-color); border: 1px solid var(--border-color); }
.pager a:hover { background: var(--primary-ultra-light); border-color: var(--primary-color); color: var(--primary-color); }
.pager span.current {
    background: var(--primary-color); color: #fff;
    border: 1px solid var(--primary-color);
}
.pager span.dots { border: none; color: var(--text-tertiary); }

/* ===== Modal ===== */

.modal-overlay {
    position: fixed; inset: 0; background: var(--overlay-color);
    z-index: 2000; display: none; align-items: flex-start;
    justify-content: center; padding: 40px 20px; overflow-y: auto;
}
.modal-overlay.show { display: flex; }

.modal-panel {
    background: var(--surface); border-radius: 12px; width: 100%; max-width: 800px;
    box-shadow: var(--shadow-lg);
    animation: modalSlide .2s ease;
}
@keyframes modalSlide {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-header {
    padding: 16px 20px; border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; font-size: 15px;
}
.modal-header .close-btn {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--text-tertiary); font-size: 20px; line-height: 1;
}
.modal-header .close-btn:hover { color: var(--danger-color); }
.modal-body { padding: 20px; }

/* ===== Translate button ===== */

.btn-translate {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 4px; font-size: 11px;
    background: var(--info-light); color: var(--primary-color);
    border: none; cursor: pointer; transition: all var(--transition-fast);
}
.btn-translate:hover { background: var(--primary-light); }
.btn-translate.loading { opacity: .5; pointer-events: none; }

/* ===== Staff cards ===== */

.staff-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.staff-card {
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 18px 20px;
    box-shadow: var(--card-shadow); text-decoration: none; color: var(--dark-color);
    transition: all var(--transition-fast);
}
.staff-card:hover {
    box-shadow: var(--card-shadow-hover); border-color: var(--primary-color);
    text-decoration: none; transform: translateY(-2px);
}
.staff-card .staff-name { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.staff-card .staff-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.staff-card .staff-metric-value { font-size: 18px; font-weight: 700; }
.staff-card .staff-metric-label { font-size: 11px; color: var(--text-tertiary); }

/* ===== KPI row (staff detail) ===== */

.kpi-row {
    display: grid; gap: 12px; margin-bottom: 20px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.kpi-box {
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 14px 16px; text-align: center;
    box-shadow: var(--card-shadow);
}
.kpi-box .kpi-value { font-size: 22px; font-weight: 700; }
.kpi-box .kpi-label { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* ===== Period pills ===== */

.period-pills { display: flex; gap: 4px; }
.period-pills a {
    padding: 5px 14px; border-radius: 980px; font-size: 12px;
    font-weight: 500; text-decoration: none;
    color: var(--text-secondary); background: var(--surface);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}
.period-pills a:hover { border-color: var(--primary-color); color: var(--primary-color); text-decoration: none; }
.period-pills a.active {
    background: var(--primary-color); color: #fff;
    border-color: var(--primary-color);
}

.alert {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    background: var(--surface);
}
.alert-success { border-color: rgba(30,179,131,.35); color: var(--success-color); }
.alert-warning { border-color: rgba(245,166,35,.35); color: var(--warning-color); }
.alert-danger { border-color: rgba(240,71,71,.35); color: var(--danger-color); }

/* ===== First-party charts ===== */
.support-bar-chart { min-height: 240px; }
.support-bar-plot {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 210px;
    padding: 12px 2px 8px;
    border-bottom: 1px solid var(--border-color);
}
.support-bar {
    position: relative;
    flex: 1 1 0;
    min-width: 4px;
    height: var(--bar-height);
    min-height: 3px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, rgba(0,94,235,.84), rgba(0,94,235,.52));
}
.support-bar.is-zero { min-height: 0; background: transparent; }
.support-bar-value {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.support-chart-axis {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    color: var(--text-tertiary);
    font-size: 11px;
}
.support-donut-chart { width: 220px; height: 220px; margin: 0 auto; }
.support-donut-chart.is-empty { display: none; }
.support-donut-svg { display: block; width: 100%; height: 100%; }
.support-donut-track,
.support-donut-segment { fill: none; stroke-width: 16; }
.support-donut-track { stroke: var(--surface-tertiary); }
.support-donut-segment {
    stroke: var(--chart-color);
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.chart-legend-dot { background: var(--chart-color); }
.chart-legend-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.chart-legend-count span { color: var(--text-tertiary); font-size: 11px; }
.chart-color-0 { --chart-color: #3366CC; }
.chart-color-1 { --chart-color: #DC3912; }
.chart-color-2 { --chart-color: #FF9900; }
.chart-color-3 { --chart-color: #109618; }
.chart-color-4 { --chart-color: #990099; }
.chart-color-5 { --chart-color: #0099C6; }
.chart-color-6 { --chart-color: #DD4477; }
.chart-color-7 { --chart-color: #66AA00; }
.chart-color-8 { --chart-color: #B82E2E; }
.chart-color-9 { --chart-color: #316395; }
.chart-color-10 { --chart-color: #994499; }
.chart-color-11 { --chart-color: #22AA99; }
.chart-color-12 { --chart-color: #AAAA11; }
.chart-color-13 { --chart-color: #6633CC; }
.chart-color-14 { --chart-color: #E67300; }
.chart-color-15 { --chart-color: #8B0707; }
.chart-color-16 { --chart-color: #651067; }
.chart-color-17 { --chart-color: #329262; }

/* ===== Two-col layout ===== */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ===== Utils ===== */

.text-primary { color: var(--primary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger  { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-muted   { color: var(--text-tertiary) !important; }
.text-sm { font-size: 12px; }
.fw-600 { font-weight: 600; }
.nowrap { white-space: nowrap; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.gap-8 { gap: 8px; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.2); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb,
html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

/* ===== Responsive ===== */

@media (max-width: 1100px) {
    .sidebar { width: var(--sidebar-collapsed-width); }
    .sidebar .brand-text { opacity: 0; width: 0; }
    .sidebar .nav-list a { padding: 9px 0; justify-content: center; font-size: 0; gap: 0; }
    .sidebar .nav-list a i { font-size: 18px; margin-right: 0; }
    .sidebar .nav-section { font-size: 0; padding: .5rem 0; }
    .sidebar-admin a { padding: 9px 0; justify-content: center; font-size: 0; gap: 0; }
    .main-content { margin-left: var(--sidebar-collapsed-width); }
    .content { padding: 16px; }
    .two-col { grid-template-columns: 1fr; }
    .donut-layout { grid-template-columns: 1fr; }
    .support-donut-chart { width: 190px; height: 190px; }
}

@media (max-width: 720px) {
    .topbar {
        min-height: var(--topbar-height); height: auto; padding: 8px 12px;
        align-items: flex-start; flex-wrap: wrap;
    }
    .topbar-title { min-width: 0; flex: 1 1 160px; }
    .topbar-title .subtitle { display: none; }
    .topbar-right {
        flex: 1 1 100%; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    }
    .theme-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .theme-selector { min-height: 40px; }
}

/* ===================================================================
   Legacy component aliases
   -------------------------------------------------------------------
   Шаблоны, написанные до перехода на Omnica, ссылаются на эти имена,
   но при полной перезаписи app.css классы не перенесли — блоки на
   `/reports/processing-time`, обзоре и «Команде» рендерились без стилей.
   Правила намеренно выражены через существующие токены и повторяют
   .stat-* / .card-header, чтобы в интерфейсе остался один визуальный
   язык, а тёмная тема работала без отдельных переопределений.
   =================================================================== */

.row {
    display: grid; gap: 12px; margin-bottom: 20px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.metric {
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 16px 18px; box-shadow: var(--card-shadow);
}
.metric .label {
    font-size: 12px; color: var(--text-tertiary); font-weight: 500; margin-bottom: 6px;
}
.metric .value {
    font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text);
}

.section-title { font-weight: 600; font-size: 14px; color: var(--text); }
/* Отступы только у прямых детей карточки: вложенные заголовки уже внутри .card-body. */
.card > .section-title { padding: 14px 20px 10px; }
.card > .form-inline { padding: 0 20px 16px; }
.card > .alert { margin: 0 20px 12px; }

.muted { color: var(--text-secondary); }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

.form-inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-inline label {
    display: block; font-size: 12px; color: var(--text-tertiary);
    font-weight: 500; margin-bottom: 4px;
}

.text-blue { color: var(--primary-color); }
.text-green { color: var(--success-color); }

.badge-green { background: var(--success-light); color: var(--success-dark); }
.badge-red   { background: var(--danger-light); color: var(--danger-dark); }
.badge-gray  { background: var(--neutral-bg); color: var(--neutral-color); }

/* ===== Клавиатурная доступность кликабельных строк =====
   Строка таблицы не может быть фокусируемой без потери семантики таблицы,
   поэтому точка входа с клавиатуры живёт в первой ячейке: настоящая ссылка
   там, где строка ведёт на URL, и настоящая кнопка там, где она открывает
   модалку. onclick на самой строке остаётся удобством для мыши. */

.row-open {
    background: none; border: none; padding: 0; font: inherit;
    color: var(--primary-color); font-weight: 600; cursor: pointer;
    text-align: left; border-radius: var(--radius-sm);
}
.row-open:hover { text-decoration: underline; }

.clickable-row a:focus-visible,
.row-open:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* ===== Горизонтальное переполнение =====
   Широкие таблицы лежат прямо в карточках и распирали страницу целиком:
   на узких экранах сайдвейс-скроллился весь документ. Скролл отдаётся
   карточке, поэтому таблица сохраняет обычную раскладку колонок, а страница
   больше не едет вбок. Виджеты со sticky-заголовком (.processing-table-wrap,
   .model-table-wrap) держат собственный контейнер прокрутки внутри карточки,
   так что их поведение не меняется. */
.card { overflow-x: auto; }

/* Скрыто визуально, но доступно скринридеру.
   Нужно подписям чекбоксов в матрице «роль × право»: в ячейке видна только галка,
   и без подписи у неё нет доступного имени. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Closed quality report ===== */

.closed-quality-table td { overflow-wrap: anywhere; }
.closed-quality-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 180px;
}
.closed-quality-table .badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

/* ===== CSAT ratings =====
   Полоса распределения — единственный элемент раздела, размер которого приходит из
   данных, поэтому ширина передаётся переменной, а оформление живёт в CSS: других
   инлайновых стилей в шаблоне раздела нет. */
.ratings-bar-track {
    min-width: 160px;
    height: 8px;
    border-radius: 5px;
    background: var(--border-color);
}
.ratings-bar-fill {
    width: var(--bar-width, 0%);
    height: 8px;
    border-radius: 5px;
    background: var(--primary-color);
}
.ratings-bar-fill.is-positive { background: var(--success-color); }
.ratings-bar-fill.is-neutral { background: var(--warning-color); }
.ratings-bar-fill.is-negative { background: var(--danger-color); }

/* ===== CSAT appeals =====
   Аппеляция — не строка таблицы, а разбор одного случая: три колонки читаются рядом
   (что оценил клиент, чем менеджер не согласен, что решил администратор), а на узком
   экране складываются в столбик. Раскладка на grid, без таблицы: содержимое каждой
   колонки разной высоты, и выравнивание по строкам здесь только мешало бы. */
.appeal-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--surface-secondary);
}
.appeal-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.appeal-card-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.appeal-column {
    min-width: 0;
}
.appeal-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}
.appeal-column > div:last-child {
    overflow-wrap: anywhere;
}