/* ════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — единый стиль YA-CRM
   Загружается ПОСЛЕДНИМ на всех рабочих страницах и перекрывает
   легаси-стили. Только визуальный слой: цвета, типографика, отступы,
   радиусы, тени, адаптивность. Логика и тексты не меняются.
   Акцент: синий #1b94d7. База: холодные нейтрали. Шрифт: Inter (локально).
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. ТОКЕНЫ ───────────────────────────────────────────────────── */
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/inter-cyrillic-ext.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/inter-cyrillic.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/inter-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/inter-latin-ext.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* Палитра — холодные нейтрали + синий акцент (единый на всех страницах) */
    --bg: #f1f3f6;
    --surface: #ffffff;
    --surface-strong: #f6f8fa;
    --surface-2: #eceff3;
    --ink: #1c2128;
    --muted: #667085;
    --faint: #98a2b3;
    --line: rgba(28, 33, 40, 0.08);
    --border: #d8dee7;
    --accent: #1b94d7;
    --accent-deep: #1279b3;
    --accent-ink: #0e5f8f;
    --accent-soft: rgba(27, 148, 215, 0.10);
    --accent-line: rgba(27, 148, 215, 0.28);
    --ok: #22a45d;
    --ok-soft: rgba(34, 164, 93, 0.10);
    --danger: #e5484d;
    --danger-soft: rgba(229, 72, 77, 0.10);
    --warn: #f59e0b;
    --warn-soft: rgba(245, 158, 11, 0.12);

    /* Типографика */
    --ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --fs-base: 14px;
    --fs-sm: 12.5px;
    --fs-xs: 11.5px;
    --fs-lg: 16px;
    --fs-h1: 26px;
    --fs-h2: 19px;
    --fs-h3: 16px;
    --lh-body: 1.5;
    --lh-head: 1.3;

    /* Отступы — шкала 4/8/12/16/20/24/32/48 */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

    /* Радиусы — единая система */
    --r-sm: 8px;    /* чипы, мини-элементы */
    --r-md: 10px;   /* кнопки, поля, карточки малые */
    --r-lg: 14px;   /* карточки, панели */
    --r-xl: 16px;   /* модалки, крупные панели */
    --r-pill: 999px;/* бейджи, статусы, табы-пилюли */

    /* Тени — холодные, без чистого чёрного */
    --shadow-xs: 0 1px 2px rgba(28, 33, 40, 0.06);
    --shadow-sm: 0 1px 3px rgba(28, 33, 40, 0.08), 0 1px 2px rgba(28, 33, 40, 0.05);
    --shadow-md: 0 6px 18px rgba(28, 33, 40, 0.08), 0 2px 6px rgba(28, 33, 40, 0.05);
    --shadow-lg: 0 18px 48px rgba(28, 33, 40, 0.16), 0 6px 16px rgba(28, 33, 40, 0.08);
    --shadow-accent: 0 4px 14px rgba(27, 148, 215, 0.28);

    /* Локальные токены легаси-страниц (логин и др.) */
    --amo-bg: #f1f3f6;
    --amo-surface: #ffffff;
    --amo-ink: #1c2128;
    --amo-muted: #667085;
    --amo-teal: #0e5f8f;
    --amo-teal-dark: #1279b3;
    --amo-border: #d8dee7;
    --amo-field-border: #d8dee7;
    --amo-error: #e5484d;
    --ff-body: var(--ff);
}

/* ── 2. БАЗА ──────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--ff);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff);
    color: var(--ink);
    line-height: var(--lh-head);
    letter-spacing: -0.01em;
    margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 650; }
h3 { font-size: var(--fs-h3); font-weight: 650; }
p { margin: 0 0 var(--sp-3); line-height: var(--lh-body); }
a { color: var(--accent-deep); }
.muted, .text-muted, .subtle, .contacts-muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
::selection { background: rgba(27, 148, 215, 0.22); color: var(--ink); }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Скроллбары */
* { scrollbar-width: thin; scrollbar-color: #c3cad6 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #c3cad6;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #a8b1bf; background-clip: padding-box; }

/* Кикеры и микро-лейблы */
.panel-kicker, .panel-meta, .amo-section-head > *, .settings-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── 3. КОМПОНЕНТЫ ───────────────────────────────────────────────── */

/* Кнопки — единая геометрия */
.action {
    height: 38px;
    padding: 0 16px;
    border-radius: var(--r-md);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    gap: 8px;
    transition: background 160ms ease, box-shadow 160ms ease, transform 90ms ease, border-color 160ms ease;
    will-change: transform;
}
.action:active { transform: scale(0.97); }
.action:hover { transform: none; }
.action-small, .action-sm { height: 32px; padding: 0 12px; font-size: 0.8rem; border-radius: var(--r-sm); }
.mini-action { border-radius: var(--r-sm); }

.action-primary {
    color: #fff;
    background: var(--accent);
    box-shadow: var(--shadow-accent);
    border: 0;
}
.action-primary:hover { background: #1680bd; box-shadow: 0 5px 16px rgba(27, 148, 215, 0.34); }
.action-primary:active { background: var(--accent-deep); }

.action-secondary {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.action-secondary:hover { background: var(--surface-strong); border-color: #c9d2dd; color: var(--ink); }

.action-outline {
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    text-transform: none;
    letter-spacing: 0.02em;
}
.action-outline:hover { color: #fff; border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.10); }

.action-danger {
    color: #fff;
    background: var(--danger);
    box-shadow: 0 2px 8px rgba(229, 72, 77, 0.25);
    border: 0;
    margin-left: 0;
}
.action-danger:hover { background: #d6383d; }

.action-accent {
    color: #fff;
    background: var(--accent);
    box-shadow: var(--shadow-accent);
    border: 0;
}
.action-accent:hover { background: #1680bd; }

/* Кнопки легаси (кнопки-дивы, .btn и пр.) */
button, .btn, .action-btn, .action-btn--primary {
    font-family: var(--ff);
}

/* Поля форм — единая геометрия */
input, select, textarea {
    font-family: var(--ff);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    min-height: 38px;
    padding: 8px 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #c2ccd8; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(27, 148, 215, 0.16);
}
input[type="checkbox"], input[type="radio"] {
    min-height: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
select { cursor: pointer; }
textarea { min-height: 84px; resize: vertical; }

.form-input, .form-label { font-family: var(--ff); }
.form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: 6px; }

/* Карточки и панели */
.panel, .card, .analytics-kpi-card, .overview-metric-card, .rail-panel,
.amo-tile, .sla-card, .waiter-card, .contractor-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.panel-head { border-bottom: 1px solid var(--line); }
.panel-kicker { margin-bottom: 6px; }

/* Бейджи и статусы — пилюли */
.badge, .role-badge, .meta-chip, .modal-section-badge, .goals-pct-badge,
.cal-mod-day-badge, .tpl-label, .unsorted-badge {
    border-radius: var(--r-pill);
    font-weight: 600;
}
.badge {
    padding: 3px 10px;
    font-size: 0.72rem;
    background: var(--accent-soft);
    color: var(--accent-deep);
}
.meta-chip {
    padding: 3px 10px;
    font-size: 0.7rem;
    background: var(--accent-soft);
    color: var(--accent-deep);
}
.meta-chip.warm { background: var(--accent-soft); color: var(--accent-deep); }

/* Уведомления */
.notice {
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    border: 1px solid rgba(27, 148, 215, 0.14);
    color: var(--accent-ink);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Таблицы — единая типографика и ритм строк */
table { border-collapse: collapse; }
th, td { padding: 10px 14px; }
thead th, table th {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-align: left;
    background: var(--surface-strong);
    border-bottom: 1px solid var(--line);
}
tbody td {
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--ink);
}
tbody tr { transition: background 120ms ease; }
tbody tr:hover { background: rgba(27, 148, 215, 0.035); }

/* Модалки */
.modal-overlay {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(5px);
    padding: 20px;
}
.modal {
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.5);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}
.modal h2, .modal h3, .modal .modal-section-title { color: var(--ink); }

/* Скелетоны */
.skeleton {
    background: linear-gradient(100deg, #e9edf3 40%, #f4f6f9 50%, #e9edf3 60%);
    background-size: 200% 100%;
    animation: ds-skeleton 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
}
@keyframes ds-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Разделители */
hr, .divider { border: 0; border-top: 1px solid var(--line); }

/* ── 4. АДАПТИВНОСТЬ ──────────────────────────────────────────────── */

/* Обёртки таблиц — горизонтальный скролл вместо поломки */
.results, .table-wrap, .tbl-wrap,
[class*="-table-wrap"], [class*="TableWrap"], [class*="-tableWrap"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1280px) {
    .action { height: 36px; }
    .workspace-toolbar, .top-grid, .workspace-grid { gap: 12px; }
}

@media (max-width: 1024px) {
    .top-grid, .workspace-grid { grid-template-columns: 1fr; }
    .workspace-toolbar { flex-wrap: wrap; }
    .workspace-toolbar-actions { flex-wrap: wrap; }
    .filters, .toolbar { flex-wrap: wrap; }
    .grid2 { grid-template-columns: 1fr; }
    input, select, textarea { max-width: 100%; }
}

@media (max-width: 768px) {
    .wrap { padding: 0 14px; }
    .modal-overlay { padding: 12px; }
    .modal { width: 96vw; max-height: calc(100dvh - 24px); }
    .filters .field, .role-filter .field { min-width: 0 !important; }
    .filters .field select { width: 100%; min-width: 0; }
    .row { align-items: stretch; }
    h1 { font-size: 22px; }
    h2 { font-size: 17px; }
    .action { height: 40px; padding: 0 14px; }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    input, select, textarea { font-size: 16px; } /* запрет зума iOS */
    .workspace-toolbar { padding: 12px; }
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal {
        width: 100%;
        max-height: 92dvh;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        border: 0;
        border-top: 1px solid var(--line);
    }
    .m-actions { flex-wrap: wrap; }
    .m-actions button { flex: 1 1 100%; }
    th, td { padding: 9px 10px; }
    .pay-check { flex-wrap: wrap; }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   СТРАНИЦЫ: Персонал / Подрядчики / Холодильник (легаси-зелёная тема)
   → единый синий акцент + тёмно-слейтовый шапка (как сайдбар CRM)
   ════════════════════════════════════════════════════════════════════ */

/* Шапка */
.top {
    background: linear-gradient(180deg, #273142 0%, #1c2533 100%);
    padding: 16px 28px;
}
.top h1 { color: #fff; font-size: 22px; letter-spacing: -0.01em; }
.top a { color: #cfe3f5; }
.top a:hover { color: #fff; }

/* Каркас */
.wrap { max-width: 1440px; margin: 20px auto; padding: 0 18px; }
.tabs { gap: 8px; margin-bottom: 16px; }
.tabs button, button, .primary, .btn-import {
    border-radius: var(--r-md);
    font-family: var(--ff);
    font-weight: 600;
}
.tabs button { background: var(--surface-2); color: var(--ink); border: 1px solid transparent; }
.tabs button:hover { background: #e2e7ee; }
.tabs button.active, .primary, .btn-export {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-accent);
}
.tabs button.active:hover, .primary:hover, .btn-export:hover { background: #1680bd; }
.role-filter button.active { background: var(--accent); color: #fff; }

/* Панели и карточки */
.panel { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.waiter-card { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-xs); }
.waiter-card .contacts a { color: var(--accent-deep); }

/* Поля */
.field input, .field select, .field textarea { border-color: var(--border); border-radius: var(--r-md); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

/* Бейджи категорий — единая палитра */
.role-badge {
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-deep);
}
.role-waiter { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-line); }
.role-chef { background: var(--warn-soft); color: #9a6a0a; border-color: rgba(245, 158, 11, 0.30); }
.role-cleaning { background: rgba(99, 102, 241, 0.10); color: #4f46e5; border-color: rgba(99, 102, 241, 0.25); }
.role-admin { background: var(--danger-soft); color: #b4232c; border-color: rgba(229, 72, 77, 0.28); }

/* Таблицы */
.results th { background: var(--surface-strong); color: var(--muted); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.05em; }
.results th, .results td { border-bottom: 1px solid var(--line); }
.results tbody tr:hover { background: rgba(27, 148, 215, 0.035); }
.shift-row.paid td { background: rgba(34, 164, 93, 0.07); }

/* Кнопки-ссылки и отзывы */
.btn-link, .review-btn { color: var(--accent-deep); }
.btn-export { background: var(--accent); }
.btn-import { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }
.danger { background: var(--danger-soft); color: #b4232c; }
.danger:hover { background: rgba(229, 72, 77, 0.18); }

/* Уведомления */
.notice { background: var(--accent-soft); border: 1px solid rgba(27, 148, 215, 0.14); color: var(--accent-ink); }

/* Чекбоксы и даты */
.pay-check input[type="checkbox"], .modal input[type="checkbox"] { accent-color: var(--accent); }
.pay-sum, .pay-date { border-color: var(--border) !important; border-radius: var(--r-sm) !important; }
.pay-date { font-family: var(--ff) !important; }

/* Модалки */
.modal-overlay { background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(5px); }
.modal { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.modal h3 { color: var(--ink); }

/* Фильтры и тулбары */
.filters, .toolbar { gap: 10px; }
.filters .field select { min-width: 200px; }

/* ════════════════════════════════════════════════════════════════════
   СТРАНИЦА: Логин — единая карточка
   ════════════════════════════════════════════════════════════════════ */
.login-card {
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 44px 40px 36px;
}
.login-brand h1 { font-size: 28px; letter-spacing: -0.01em; }
.login-brand h1 span { color: var(--accent); }
.login-brand p { color: var(--muted); }
.login-field input {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    min-height: 42px;
}
.login-btn {
    background: var(--accent);
    color: #fff;
    border-radius: var(--r-md);
    font-weight: 600;
    box-shadow: var(--shadow-accent);
}
.login-btn:hover { background: #1680bd; }
.login-error { color: var(--danger); }
.login-footer { color: var(--muted); }

/* ════════════════════════════════════════════════════════════════════
   СТРАНИЦА: Скачать YA-CRM (install) — светлая единая карточка
   ════════════════════════════════════════════════════════════════════ */
.install-section, .hero, .instructions {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    color: var(--ink);
}
.install-section h1, .hero h1, .app-name, .instructions h2 { color: var(--ink); }
.app-desc, .app-dev, .install-note { color: var(--muted); }
.install-btn, .install-btn-primary {
    font-family: var(--ff);
    border-radius: var(--r-md);
    font-weight: 600;
}
.install-btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-accent);
}
.install-btn-primary:hover { background: #1680bd; }
.install-btn-secondary { background: var(--surface-strong); color: var(--ink); border: 1px solid var(--border); }
.platform-badge, .step-num {
    background: var(--accent-soft);
    color: var(--accent-deep);
    border-radius: var(--r-pill);
}
.rating { color: var(--warn); }

/* ==== enforcement: выигрывать у высокоспецифичных легаси-правил монолита ==== */
body { background: var(--bg) !important; }
h1, h2, h3, h4, h5 { color: var(--ink) !important; }
.panel { background: var(--surface) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-sm) !important; }
.action { height: 38px !important; border-radius: var(--r-md) !important; transition: background .15s ease, color .15s ease, border-color .15s ease !important; }
.action-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.action-outline { background: transparent !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.action-danger { background: var(--danger-soft) !important; border-color: var(--danger-soft) !important; color: var(--danger-strong) !important; }
.tab-btn-active, .tab-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.tab-btn:hover { background: var(--neutral-soft) !important; }
.toolbar, .toolbar-inner { background: var(--surface) !important; border-bottom-color: var(--line) !important; }
.input-wrap, .field { background: var(--surface) !important; }
input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important; color: var(--ink) !important; box-shadow: none !important;
}
@media (max-width: 640px) {
  .action { height: 40px !important; }
  input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { font-size: 16px !important; }
}

/* ==== аудит 2026-08-15: остатки старой зелёной темы (персонал/подрядчики/установка/документы) ==== */
.tabs button.active, .tabs button.active:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.role-filter button.active { background: var(--accent) !important; color: #fff !important; }
.btn-export { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-import { background: var(--surface-2) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.review-btn, .btn-link, .waiter-card .contacts a { color: var(--accent) !important; }
input[type="checkbox"] { accent-color: var(--accent) !important; }
.notice { background: var(--ok-soft) !important; border: 1px solid var(--line) !important; }
.shift-row.paid td { background: var(--ok-soft) !important; }
.already-installed .txt { color: var(--ok) !important; }
.doc-item-category.estimate { background: var(--ok-soft) !important; color: #1d7a45 !important; }