/* ============================================================
   LAMA CRM — единая дизайн-система (макеты).
   Плотный data-heavy интерфейс, светлая тема + опц. тёмная.
   ============================================================ */

/* ---- Переменные: палитра, отступы, типографика ----

   ПРАВИЛО ОДНО: в правилах ниже не должно быть ни одного «живого» цвета —
   только `var(--…)`. Тема переключается ЗДЕСЬ, и любой захардкоженный #hex
   переживает переключение и становится белым текстом на белом (так и было с
   тултипом) или бледной плашкой на тёмной строке (так было со статусами).

   Слоя два. Палитра — сами краски (`--green`, `--surface`). Токены назначения
   (`--on-accent`, `--tooltip-bg`, `--overlay`) — то, ЧЕМ красят: правило
   говорит «фон тултипа», а не «тёмно-синий», и тогда тёмная тема правится в
   одном месте, а не поиском по файлу.
   ---------------------------------------------------------------- */
:root {
  /* нейтральные */
  --bg:            #f4f6f9;
  --surface:       #ffffff;
  --surface-2:     #f9fafb;
  --surface-3:     #eef1f5;
  --border:        #dfe3e8;
  --border-strong: #c7cdd6;
  --text:          #1c2430;
  --text-2:        #55606e;
  --text-3:        #8a94a2;

  /* бренд LAMA */
  --brand:         #2f6df0;
  --brand-600:     #2559cc;
  --brand-050:     #e8f0ff;
  --brand-light:   #6aa0ff;   /* светлый конец градиентов логотипа */
  --brand-dark:    #1e3a8a;   /* тёмный конец градиента промо-панели */

  /* акценты статусов */
  --green:   #17a35a;  --green-bg:   #e4f6ec;
  --amber:   #d98b00;  --amber-bg:   #fdf1dc;
  --red:     #d94141;  --red-bg:     #fbe6e6;
  --blue:    #2f6df0;  --blue-bg:    #e8f0ff;
  --violet:  #7b58d6;  --violet-bg:  #efe9fb;
  --teal:    #0f9c9c;  --teal-bg:    #dcf3f3;
  --yellow:  #b39000;  --yellow-bg:  #fbf6d3;
  --gray:    #6b7683;  --gray-bg:    #eceff3;
  --orange:  #e8730c;  --orange-bg:  rgba(232,115,12,.10);
  --orange-text: #b45806;     /* читаемый текст на светлой оранжевой подложке */
  --pink:    #db2777;  --pink-bg:    #fce7f1;
  --slate:   #4b5563;
  /* Оттенки статусов заявки (05.09.2026). Владельцу нужно РАЗЛИЧАТЬ соседние
     стадии одним взглядом: «Ожидает» от «В пути», «В работе» от «В работе СД»,
     «Готов» от синих отмен. Обычной палитры для этого не хватает — берём вторые
     ступени тех же семейств. */
  --green-strong: #0f7a43;  --green-strong-bg: #cbead8;
  --orange-strong: #c2570a; --orange-strong-bg: #f8ddc4;
  --sky:     #0b7fb0;  --sky-bg:     #d3edf9;
  /* ЗАЛИВКА статуса заявки. Пастельные подложки для этого не годятся: соседние
     стадии на глаз сливались (различие яркости 1.02–1.16 при потребном 1.3+),
     а владельцу нужно отличать «Ожидает» от «В пути» одним взглядом. Здесь
     фон — сам цвет, текст — контрастный к нему. */
  --st-wait:    #7fd6a2;  --st-wait-fg:    #0b2e1b;
  --st-road:    #0d6b3b;  --st-road-fg:    #ffffff;
  --st-work:    #e8a317;  --st-work-fg:    #2b1c00;
  --st-work-sd: #a04e12;  --st-work-sd-fg: #ffffff;
  --st-closing: #b83b7e;  --st-closing-fg: #ffffff;
  --st-cancel:  #1c7878;  --st-cancel-fg:  #ffffff;
  --st-refusal: #c62f2f;  --st-refusal-fg: #ffffff;
  --st-ready:   #57bde8;  --st-ready-fg:   #10222b;
  --st-void:    #6e49cf;  --st-void-fg:    #ffffff;

  /* назначения: чем красим, а не какого цвета */
  --on-accent:   #ffffff;     /* текст и значки поверх заливки брендом/статусом */
  --on-accent-soft: rgba(255,255,255,.16);  /* подложки внутри брендовой панели */
  --on-accent-line: rgba(255,255,255,.20);  /* и границы там же */
  --green-glow:  rgba(23,163,90,.5);        /* пульс «онлайн» */
  --danger-text: var(--red);  /* ошибки форм и предупреждения */
  --tooltip-bg:  #1c2430;     /* подсказка всегда контрастна странице */
  --tooltip-text:#ffffff;
  --overlay:     rgba(16,24,40,.5);   /* затемнение под модалкой */
  --knob:        #ffffff;     /* бегунок переключателя */
  --map-land:    #eef2f5;
  --map-river:   #bcd7f0;
  --map-park:    #cfe8cf;
  --map-street:  #d6dde5;
  --map-stroke:  #ffffff;     /* обводка точек на карте */

  /* Краски аватарок. В тёмной теме НЕ меняются: инициалы на них белые, и
     осветлённая заливка сделала бы их нечитаемыми. */
  --ava-1: #2f6df0;  --ava-2: #17a35a;  --ava-3: #d98b00;  --ava-4: #7b58d6;
  --ava-5: #0f9c9c;  --ava-6: #d94141;  --ava-7: #4b5563;  --ava-8: #db2777;

  /* размеры */
  --radius:    8px;
  --radius-sm: 5px;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  --header-h: 56px;
  --sidebar-w: 224px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 16px rgba(16,24,40,.12);
  --shadow-lg: 0 12px 40px rgba(16,24,40,.18);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Тёмная тема ----
   Переопределяем ВЕСЬ набор, а не только фоны. Раньше здесь были только
   нейтральные цвета, поэтому бейджи статусов оставались светлыми пятнами на
   тёмной строке, а подсказка рисовалась белым по белому.

   Акценты на тёмном берём светлее и менее насыщенные (тот же зелёный #17a35a
   на тёмном читается плохо), подложки — полупрозрачные от самого акцента:
   так они ложатся на любой фон и не спорят с соседней строкой. */
[data-theme="dark"] {
  --bg:            #12161c;
  --surface:       #1a1f27;
  --surface-2:     #20262f;
  --surface-3:     #262d38;
  --border:        #2d3540;
  --border-strong: #3a4453;
  --text:          #e7ebf0;
  --text-2:        #a7b0bd;
  --text-3:        #737e8c;

  --brand:         #4c8dff;
  --brand-600:     #3b7bff;
  --brand-050:     #1b2740;
  --brand-light:   #8ab4ff;
  --brand-dark:    #16224a;

  --green:   #4ade80;  --green-bg:   rgba(23,163,90,.20);
  --amber:   #fbbf24;  --amber-bg:   rgba(217,139,0,.20);
  --red:     #f87171;  --red-bg:     rgba(217,65,65,.22);
  --blue:    #60a5fa;  --blue-bg:    rgba(47,109,240,.24);
  --violet:  #a78bfa;  --violet-bg:  rgba(123,88,214,.24);
  --teal:    #2dd4bf;  --teal-bg:    rgba(15,156,156,.22);
  --yellow:  #facc15;  --yellow-bg:  rgba(179,144,0,.22);
  --gray:    #9aa4b2;  --gray-bg:    rgba(107,118,131,.24);
  --orange:  #fb923c;  --orange-bg:  rgba(232,115,12,.16);
  --orange-text: #fdba74;
  --pink:    #f472b6;  --pink-bg:    rgba(219,39,119,.20);
  --slate:   #94a3b8;
  --green-strong: #86efac;  --green-strong-bg: rgba(15,122,67,.28);
  --orange-strong: #fdba74; --orange-strong-bg: rgba(194,87,10,.28);
  --sky:     #7dd3fc;  --sky-bg:     rgba(11,127,176,.24);
  /* На тёмной странице те же заливки берём чуть глуше: насыщенные цвета на
     чёрном слепят, а различать их нужно не яркостью, а оттенком. */
  --st-wait:    #6cc492;  --st-wait-fg:    #082418;
  --st-road:    #0f5f38;  --st-road-fg:    #eafaf0;
  --st-work:    #c78f1c;  --st-work-fg:    #221700;
  --st-work-sd: #92551a;  --st-work-sd-fg: #fdf3ea;
  --st-closing: #a63a70;  --st-closing-fg: #fdf0f6;
  --st-cancel:  #1b6f6e;  --st-cancel-fg:  #eefafa;
  --st-refusal: #ab2f2f;  --st-refusal-fg: #fdefef;
  --st-ready:   #3f9cc4;  --st-ready-fg:   #06161d;
  --st-void:    #5f41ab;  --st-void-fg:    #f3effc;

  --tooltip-bg:  #e7ebf0;     /* на тёмной странице подсказка светлая */
  --tooltip-text:#12161c;
  --overlay:     rgba(0,0,0,.66);
  --map-land:    #1b222c;
  --map-river:   #21384f;
  --map-park:    #22402a;
  --map-street:  #2a323d;
  --map-stroke:  #12161c;

  /* На тёмном фоне мягкая тень не видна — берём чёрную и заметнее. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 4px 16px rgba(0,0,0,.50);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.60);
}

/* ---- База ---- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; }
p { margin: 0; }

/* ============================================================
   Каркас приложения: хедер + сайдбар + контент
   ============================================================ */
.app { display: flex; min-height: 100vh; }

/* ---- Верхняя панель ---- */
.header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 40;
}
.logo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: 17px; letter-spacing: .5px; }
.logo .mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  color: var(--on-accent); display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.header .spacer { flex: 1; }

/* инфо-виджеты в шапке */
.header-widget {
  display: flex; flex-direction: column; line-height: 1.2;
  padding: 0 var(--sp-3); border-left: 1px solid var(--border);
}
.header-widget .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); }
.header-widget .val { font-size: 13px; font-weight: 600; }
.header-widget .val.mono { font-variant-numeric: tabular-nums; }

/* пользователь + шляпа */
.header-user { display: flex; align-items: center; gap: var(--sp-2); padding-left: var(--sp-3); border-left: 1px solid var(--border); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-050); color: var(--brand-600);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.header-user .who { line-height: 1.2; }
.header-user .who .name { font-weight: 600; }
.header-user .who .role { font-size: 11px; color: var(--text-2); }

/* переключатель шляп в шапке (виден только при >1 шляпы) */
.hat-switch { position: relative; }
.hat-switch__btn {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--brand-050); color: var(--brand-600);
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 6px 10px; font-weight: 600; cursor: pointer; font-size: 12px;
}
.hat-switch__btn:hover { border-color: var(--brand); }
.hat-switch__menu {
  position: absolute; right: 0; top: calc(100% + 6px); width: 300px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: var(--sp-2); display: none; z-index: 60;
}
.hat-switch__menu.open { display: block; }
.hat-switch__menu .head { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); padding: 4px 8px; }
.hat-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: 8px; border-radius: var(--radius-sm); cursor: pointer;
}
.hat-item:hover { background: var(--surface-3); }
.hat-item.active { background: var(--brand-050); }
.hat-item .hat-ico { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); font-size: 15px; }
.hat-item .hat-txt { line-height: 1.25; }
.hat-item .hat-txt .r { font-weight: 600; }
.hat-item .hat-txt .u { font-size: 11px; color: var(--text-2); }
.hat-item .hat-cur { margin-left: auto; font-size: 10px; color: var(--green); font-weight: 700; }

/* ---- Сайдбар ---- */
.sidebar {
  position: fixed; top: var(--header-h); bottom: 0; left: 0; width: var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-2); overflow-y: auto; z-index: 30;
}
.nav-group { margin-bottom: var(--sp-4); }
.nav-group__title { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); padding: 4px 10px; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 500; cursor: pointer; margin-bottom: 2px;
}
.nav-item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--brand-050); color: var(--brand-600); font-weight: 600; }
.nav-item .ico { width: 18px; text-align: center; font-size: 15px; }
/* «АДМИНКА» — кнопка-выход в инфраструктуру, поэтому выделена и стоит первой:
   её жмут осознанно, спутать с разделом CRM она не должна. */
.nav-item--admin { width: 100%; text-align: left; background: var(--surface-3); border: 1px solid var(--border-strong); cursor: pointer; font-weight: 700; letter-spacing: .3px; margin-bottom: 8px; }
.nav-item--admin:hover { border-color: var(--brand); color: var(--brand); }
.nav-item .badge-count { margin-left: auto; background: var(--red); color: var(--on-accent); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; }

/* ---- Вложенное меню: разделы → подразделы (роль Владелец, §фидбек 2026-07-29) ---- */
.nav-parent { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 600; cursor: pointer; margin-bottom: 2px; }
.nav-parent:hover { background: var(--surface-3); color: var(--text); }
.nav-parent .ico { width: 18px; text-align: center; font-size: 15px; }
.nav-parent .chev { margin-left: auto; font-size: 10px; transition: transform .15s ease; opacity: .6; }
.nav-parent.open .chev { transform: rotate(90deg); }
.nav-parent.has-active { color: var(--brand-600); }
.nav-sub { margin: 0 0 4px 0; padding-left: 10px; border-left: 1px solid var(--border); display: none; }
.nav-sub.open { display: block; }
.nav-sub .nav-item { padding: 6px 10px; font-size: 12.5px; font-weight: 500; }
.nav-sub .nav-item .ico { font-size: 12px; }
body.sidebar-collapsed .sidebar .nav-parent .chev,
body.sidebar-collapsed .sidebar .nav-sub { display: none; }
body.sidebar-collapsed .sidebar .nav-parent { justify-content: center; padding: 9px 0; }

/* ---- Контент ---- */
.content {
  margin-left: var(--sidebar-w); margin-top: var(--header-h);
  padding: var(--sp-5); width: calc(100% - var(--sidebar-w)); min-width: 0;
}
.page-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.page-head h1 { font-size: 20px; }
.page-head .sub { color: var(--text-2); font-size: 12px; }
.page-head .spacer { flex: 1; }
/* подзаголовок блока внутри страницы (несколько таблиц на экране) */
.page-head--sub { margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.page-head--sub h2 { font-size: 15px; font-weight: 700; }
/* календарь чисел месяца: график инкассации города */
.month-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; max-width: 560px; }
.month-day { position: relative; display: grid; place-items: center; height: 36px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; font-variant-numeric: tabular-nums; user-select: none; background: var(--surface); }
.month-day input { position: absolute; opacity: 0; pointer-events: none; }
.month-day:hover { border-color: var(--border-strong); }
.month-day--on { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); font-weight: 700; }
.month-days__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }


/* хлебные крошки */
.crumbs { font-size: 12px; color: var(--text-3); margin-bottom: var(--sp-2); }
.crumbs a { color: var(--text-2); }

/* ============================================================
   Компоненты
   ============================================================ */

/* ---- Кнопки ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  padding: 7px 13px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; font-family: var(--font);
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.btn--primary:hover { background: var(--brand-600); }
.btn--danger { background: var(--red); border-color: var(--red); color: var(--on-accent); }
/* Кнопка для колонки действий: две штуки в строке таблицы не должны
   расширять столбец, поэтому меньше отступы и мельче шрифт. */
.btn--xs { padding: 2px 6px; font-size: 11px; line-height: 1.3; border-radius: var(--radius-sm); }
.btn--danger:hover { filter: brightness(.94); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-3); }
.btn--sm { padding: 4px 9px; font-size: 12px; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Бейджи-статусы ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--green  { color: var(--green);  background: var(--green-bg); }
.badge--amber  { color: var(--amber);  background: var(--amber-bg); }
.badge--red    { color: var(--red);    background: var(--red-bg); }
.badge--blue   { color: var(--blue);   background: var(--blue-bg); }
.badge--violet { color: var(--violet); background: var(--violet-bg); }
.badge--teal   { color: var(--teal);   background: var(--teal-bg); }
.badge--yellow { color: var(--yellow); background: var(--yellow-bg); }
.badge--gray   { color: var(--gray);   background: var(--gray-bg); }
.badge--pink   { color: var(--pink);   background: var(--pink-bg); }
.badge--orange { color: var(--orange-text); background: var(--orange-bg); }
.badge--sky    { color: var(--sky);    background: var(--sky-bg); }
/* Вторые ступени: соседние стадии заявки должны различаться одним взглядом. */
.badge--green-strong  { color: var(--green-strong);  background: var(--green-strong-bg); }
.badge--orange-strong { color: var(--orange-strong); background: var(--orange-strong-bg); }

/* СТАТУС ЗАЯВКИ — заливкой, а не подложкой (05.09.2026). Пастель не давала
   отличить соседние стадии: «Ожидает» и «В пути» сливались в один светлый
   прямоугольник. Здесь у каждого свой фон и подобранный к нему текст. */
/* Каждый класс объявляет ПАРУ переменных и сразу красит себя ими. Пара нужна
   потому, что тот же класс висит на выпадашке статуса, а её правило
   (`table.data td .cell-select`) по специфичности сильнее одиночного класса и
   затирало заливку прозрачным — в списке цвета не появлялись вовсе
   (05.09.2026). Через переменную красит уже само правило выпадашки, и спор о
   специфичности исчезает. */
.badge--st-wait    { --st-bg: var(--st-wait);    --st-fg: var(--st-wait-fg); }
.badge--st-road    { --st-bg: var(--st-road);    --st-fg: var(--st-road-fg); }
.badge--st-work    { --st-bg: var(--st-work);    --st-fg: var(--st-work-fg); }
.badge--st-work-sd { --st-bg: var(--st-work-sd); --st-fg: var(--st-work-sd-fg); }
.badge--st-closing { --st-bg: var(--st-closing); --st-fg: var(--st-closing-fg); }
.badge--st-cancel  { --st-bg: var(--st-cancel);  --st-fg: var(--st-cancel-fg); }
.badge--st-refusal { --st-bg: var(--st-refusal); --st-fg: var(--st-refusal-fg); }
.badge--st-ready   { --st-bg: var(--st-ready);   --st-fg: var(--st-ready-fg); }
.badge--st-void    { --st-bg: var(--st-void);    --st-fg: var(--st-void-fg); }
.badge--st-wait, .badge--st-road, .badge--st-work, .badge--st-work-sd,
.badge--st-closing, .badge--st-cancel, .badge--st-refusal, .badge--st-ready,
.badge--st-void { background: var(--st-bg); color: var(--st-fg); }

.tag { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; background: var(--surface-3); color: var(--text-2); font-weight: 500; }
.tag--profile { background: var(--blue-bg); color: var(--blue); }
.tag--nonprofile { background: var(--gray-bg); color: var(--gray); }

/* ---- Карточки ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
/* Плитка документов сотрудника: паспорт видно сразу, без открытия вкладки —
   его смотрят, чтобы сверить данные, а не «когда-нибудь потом». */
.doc-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.doc-tile { width: 190px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.doc-tile img { display: block; width: 100%; height: 130px; object-fit: cover; background: var(--surface-3); }
.doc-tile .doc-tile__pdf { display: grid; place-items: center; height: 130px; font-size: 28px; color: var(--text-3); }
.doc-tile__foot { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 11.5px; }
.doc-tile__foot .nm { font-weight: 600; }

/* Блок, который здесь менять нельзя: не прячем, а гасим — человек должен
   видеть, что настройка есть, и понимать, почему она недоступна. */
.card--locked { background: var(--surface-3); border-style: dashed; box-shadow: none; }
.card--locked .card__body { color: var(--text-2); }
.card--locked input, .card--locked select { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
.card__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.card__head h3 { font-size: 14px; }
.card__head .spacer { flex: 1; }
.card__body { padding: var(--sp-4); }
.card__body--flush { padding: 0; }

.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* KPI-плитки */
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.kpi .lbl { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .3px; }
.kpi .val { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .delta { font-size: 11px; margin-top: 2px; }
/* Плашки в СТРОКУ и мелкие (05.09.2026): их стало шесть, крупные карточки
   занимали пол-экрана над таблицей, ради которой человек сюда и пришёл.
   Строка переносится сама, если экран узкий. */
.kpi-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kpi--tight {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; box-shadow: none;
}
.kpi--tight .lbl { font-size: 10px; margin: 0; }
.kpi--tight .val { font-size: 16px; margin: 0; }
.kpi .delta.up { color: var(--green); }
.kpi .delta.down { color: var(--red); }

/* ---- Таблицы ---- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data th, table.data td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
/* Длинные текстовые ячейки (адрес, поломка, комментарий) переносятся и не
   тянут строку в бесконечность: nowrap хорош для чисел и дат, но не для адреса. */
table.data td.wrap { white-space: normal; min-width: 160px; max-width: 260px; }
table.data thead th {
  position: sticky; top: 0; background: var(--surface-2); color: var(--text-2);
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; z-index: 1;
}
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .id-cell { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
table.data .muted { color: var(--text-3); }
.row-clickable { cursor: pointer; }

/* Сортируемые заголовки-числа (§фидбек 2026-07-29) */
table.data th.th-sort { cursor: pointer; user-select: none; }
table.data th.th-sort:hover { color: var(--text); }
table.data th.th-sort::after { content: "⇅"; margin-left: 5px; opacity: .35; font-size: 10px; }
table.data th.th-sort.sort-desc::after { content: "▼"; opacity: .9; }
table.data th.th-sort.sort-asc::after { content: "▲"; opacity: .9; }
/* Строка-итог «Общее» вверху таблицы (§фидбек 2026-07-29) */
table.data tbody tr.row-total { background: var(--surface-2); font-weight: 700; }
table.data tbody tr.row-total:hover { background: var(--surface-2); }
table.data tbody tr.row-total td { border-bottom: 2px solid var(--border-strong); }

/* подсветка сроков (используется orders.js) */
tr.row-soon    { background: var(--amber-bg) !important; }
tr.row-overdue { background: var(--red-bg) !important; }
@keyframes blink-red { 0%,100% { background: var(--red-bg);} 50% { background: transparent;} }
tr.row-overdue.blink { animation: blink-red 1.1s ease-in-out infinite; }
/* Заявка ждёт проверки логиста — мигает КРАСНОЙ РАМКОЙ, не заливкой: строку
   надо заметить, но читать её при этом никто не должен переставать. Мигание
   не прекращается, пока заявку не проверят. */
@keyframes blink-frame {
  0%, 100% { box-shadow: inset 0 2px 0 var(--red), inset 0 -2px 0 var(--red); }
  50%      { box-shadow: inset 0 2px 0 transparent, inset 0 -2px 0 transparent; }
}
@keyframes blink-frame-left {
  0%, 100% { box-shadow: inset 2px 2px 0 -0px var(--red), inset 0 -2px 0 var(--red),
                         inset 2px 0 0 var(--red); }
  50%      { box-shadow: none; }
}
tr.row-review td { animation: blink-frame 1.2s ease-in-out infinite; }
tr.row-review td:first-child { animation-name: blink-frame-left; }

.due { font-variant-numeric: tabular-nums; font-weight: 600; }
.due.soon { color: var(--amber); }
.due.overdue { color: var(--red); }

/* ---- Фильтры / тулбар ---- */
.toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.toolbar .spacer { flex: 1; }
.filter { display: flex; flex-direction: column; gap: 3px; }
.filter > label { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); }

/* ---- Фильтры В СТОЛБЦАХ + слим-строка действий (§фидбек 2026-07-29) ---- */
.table-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.table-actions .spacer { flex: 1; }
table.data thead tr.col-filters th {
  position: sticky; top: 27px; z-index: 2; background: var(--surface-1);
  padding: 3px 6px; border-bottom: 1px solid var(--border-strong);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
table.data.dense thead tr.col-filters th { top: 22px; padding: 2px 5px; }
table.data thead tr.col-filters input,
table.data thead tr.col-filters select {
  width: 100%; min-width: 54px; box-sizing: border-box;
  font-size: 11px; padding: 2px 5px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--surface-1); color: var(--text); font-weight: 400;
}
table.data thead tr.col-filters input::placeholder { color: var(--text-3); }

/* В узких колонках-галочках («П», «Закрыта», «Отписка») фильтр не должен
   растягивать столбец: там одна буква в шапке и одна галка в строке, а
   `min-width: 54px` раздувал его втрое (05.09.2026). */
table.data thead tr.col-filters th.col-c select,
table.data thead tr.col-filters th.col-c input { min-width: 0; }
/* Узкие колонки-галочки: потолок ширины ОБРЕЗАЕТ содержимое, а не пускает его
   поверх соседей. Без overflow длинная подпись техники («ХД · Холодильник»)
   вылезала из своих 44px и ложилась на столбец «Поломка» (06.09.2026). */
table.data th.col-c, table.data td.col-c {
  max-width: 44px; overflow: hidden; text-overflow: ellipsis;
}

/* Столбец действий шириной ПО СОДЕРЖИМОМУ. Раньше он ходил под `col-c` с
   потолком в 44px «под иконку копирования», и когда у заявки появлялась кнопка
   «Проверить», она вылезала поверх соседнего столбца и закрывала номер заявки
   (06.09.2026, скрин 16 в батче). `width: 1%` + nowrap заставляют таблицу
   отдать столбцу ровно столько, сколько нужно кнопкам, и ни пикселем больше. */
table.data th.col-act, table.data td.col-act { width: 1%; white-space: nowrap; }

/* Экран доступов к ботам. Колонки ботов раньше ходили под `col-c` — потолок в
   44px «под галочку», из-за которого от названия оставалась одна буква, и что
   это за бот, можно было узнать только наведением (06.09.2026). Название
   должно быть видно, а сама галочка — по центру под ним. Столбец сотрудника,
   наоборот, ужимаем: длинных ФИО там не бывает, а место нужно названиям. */
table.data th.col-bot, table.data td.col-bot { text-align: center; white-space: nowrap; }
table.data th.col-name, table.data td.col-name { width: 1%; white-space: nowrap; }

/* ---- Статистика: карточки показателей и столбики динамики ---- */
.metric-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.metric {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; background: var(--surface);
}
.metric__label { font-size: 11px; color: var(--text-3); }
.metric__value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric__delta { font-size: 12px; color: var(--text-2); }
/* График рисуем столбиками на CSS: сторонних библиотек в CRM нет, а
   зависимость ради десятка полосок — плохой обмен. */
.chart { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin-top: 6px; }
.chart__bar { flex: 1 1 auto; min-width: 2px; background: var(--brand); border-radius: 2px 2px 0 0; opacity: .75; }
.chart__bar:hover { opacity: 1; }
.stats-filters label { display: inline-flex; flex-direction: column; font-size: 11px; color: var(--text-3); gap: 2px; }
.stats-filters select[multiple] { min-width: 190px; }

/* Поле-подсказка: писать можно, и список раскрывается кнопкой. Обёртка нужна,
   чтобы стрелка стояла вплотную к полю, а не уезжала по строке формы. */
.picker { display: inline-flex; align-items: stretch; gap: 2px; }
.picker > input, .picker > select { flex: 1 1 auto; min-width: 0; }
.picker__toggle {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-2);
  cursor: pointer; padding: 0 7px; font-size: 11px; line-height: 1;
}
.picker__toggle:hover { border-color: var(--brand); color: var(--brand); }

/* Правка прямо в клетке таблицы: поле должно выглядеть как текст, пока его не
   трогают, — иначе таблица превращается в частокол рамок. */
table.data td .cell-input {
  width: 100%; min-width: 46px; border: 1px solid transparent; background: transparent;
  color: inherit; font: inherit; padding: 1px 4px; border-radius: 4px;
}
table.data td .cell-input:hover { border-color: var(--border); }
table.data td .cell-input:focus { border-color: var(--brand); background: var(--surface); outline: none; }
table.data td .cell-input.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td .cell-select--paid { background-color: var(--green-bg); }
table.data td .cell-select--free { background-color: var(--blue-bg); }
table.data td .cell-select--none { background-color: var(--red-bg); }

/* Свободный текст (поломка, комментарий, причина) обрезаем по ширине филиала:
   ячейки таблицы не переносятся, и один абзац растягивал столбец на пол-экрана.
   Целиком текст показывает кнопка «⋯» — её ставит JS и только там, где текст
   реально не поместился, чтобы короткие поломки не обрастали кнопками. */
/* Ширина — примерно по заголовку столбца («ПОЛОМКА»), как просил владелец:
   в строке видно начало, остальное открывает кнопка «⋯» или подсказка при
   наведении. `em` вместо пикселей — чтобы держаться шрифта таблицы. */
table.data td.cell-clip { max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; }
table.data td.cell-clip.is-clipped { position: relative; padding-right: 24px; }
.cell-more {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
  background: var(--surface-2); color: var(--text-2);
  font-size: 11px; line-height: 1; padding: 2px 4px;
}
.cell-more:hover { border-color: var(--brand); color: var(--brand); }
.longtext-body { white-space: pre-wrap; word-break: break-word; font-size: 13px; }
/* Управляющая выпадашка прямо в ячейке (статус, мастер): по размеру как текст
   строки, чтобы таблица не разъезжалась. */
table.data td .cell-select {
  max-width: 100%; min-width: 132px; font-size: 11.5px; padding: 2px 18px 2px 6px;
  background-position: right 5px center; border-radius: 4px;
  border: 1px solid var(--border); background-color: transparent; color: inherit;
}
table.data td .cell-select:hover { border-color: var(--brand); }

/* Статус в строке — это ВЫПАДАШКА, а не бейдж: логист меняет его прямо здесь.
   Красить надо и её, иначе таблица остаётся бесцветной (05.09.2026), а весь
   смысл цветов — увидеть стадию, не читая текст. Классы те же, что у бейджа. */
table.data td .cell-select--status {
  font-weight: 600; border-color: transparent;
  /* Красим ЗДЕСЬ, а не в классе цвета: у этого селектора специфичность выше,
     и иначе `background-color: transparent` соседнего правила побеждало. */
  background-color: var(--st-bg, transparent);
  color: var(--st-fg, inherit);
}
table.data td .cell-select--status option { color: var(--text); background: var(--surface); }
table.data thead tr.col-filters th.no-filter { background: var(--surface-1); }

/* ---- Формы ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--full { grid-column: 1 / -1; }
.field > label { font-size: 12px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.field .req { color: var(--red); }
/* Ошибка поля: рамка и подпись красным — без этого человек ищет, что не так,
   глазами по всей форме. */
.field--error > label { color: var(--red); }
.field--error input, .field--error select, .field--error textarea {
  border-color: var(--red); background: var(--red-bg);
}
.field-error { color: var(--red); font-size: 11px; font-weight: 600; }
/* Поле выключено, пока его не спросили (напр. «Что за техника» до выбора
   «Прочее»): видно, что оно есть, но заполнять пока нечего. */
.field--off > label { color: var(--text-3); }
.field--off input, .field--off textarea, .field--off select {
  background: var(--surface-3); color: var(--text-3); cursor: not-allowed;
}
/* Поле включилось и ждёт ввода — мигает, пока в него не начали писать. */
@keyframes wanted-green {
  0%, 100% { border-color: var(--green); box-shadow: 0 0 0 0 var(--green-bg); }
  50%      { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
}
.field--wanted input, .field--wanted textarea { animation: wanted-green 1.1s ease-in-out infinite; }
.field--wanted > label { color: var(--green); }
/* иконка-подсказка = help_text (§9) */
.hint {
  display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-3); font-size: 10px; font-weight: 700; cursor: help; user-select: none;
}
.field .help { font-size: 11px; color: var(--text-3); }

input[type="text"], input[type="tel"], input[type="number"], input[type="date"],
input[type="time"], input[type="datetime-local"], input[type="search"], input[type="password"],
select, textarea {
  width: 100%; padding: 7px 10px; font-size: 13px; font-family: var(--font);
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }
input[readonly], .readonly-field { background: var(--surface-3); color: var(--text-2); cursor: not-allowed; }
textarea { resize: vertical; min-height: 66px; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%238a94a2' d='M2 4l4 4 4-4z'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

.checkbox, .radio { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 500; }
.checkbox input, .radio input { width: auto; }

.form-section { margin-bottom: var(--sp-5); }
.form-section__title { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin-bottom: var(--sp-3); padding-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-2); }

/* гейтинг по правам (напр. Финансы видны не всем) */
.gate {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600;
  color: var(--amber); background: var(--amber-bg); padding: 1px 8px; border-radius: 10px; text-transform: none; letter-spacing: 0;
}

/* ---- Вкладки ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); }
.tab { padding: 8px 14px; font-weight: 600; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--brand-600); border-bottom-color: var(--brand); }

/* ---- Модалки (управляет components.js) ---- */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: none; align-items: flex-start; justify-content: center; z-index: 100; padding: 60px 16px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px; overflow: hidden;
}
.modal--wide { max-width: 720px; }
.modal__head { display: flex; align-items: center; padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.modal__head h3 { font-size: 15px; }
.modal__head .close { margin-left: auto; cursor: pointer; color: var(--text-3); font-size: 20px; line-height: 1; background: none; border: none; }
.modal__body { padding: var(--sp-4); max-height: 62vh; overflow-y: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); background: var(--surface-2); }

/* ---- Таймлайн истории статусов ---- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding: 0 0 var(--sp-4) 0; }
.tl-item::before {
  content: ""; position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand);
}
.tl-item.done::before { background: var(--brand); }
.tl-item .tl-title { font-weight: 600; }
.tl-item .tl-meta { font-size: 11px; color: var(--text-3); }
.tl-item .tl-dur { font-size: 11px; color: var(--brand-600); font-weight: 600; }

/* ---- Прогресс-бары ---- */
.progress { height: 8px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.progress > span.green { background: var(--green); }
.progress > span.amber { background: var(--amber); }

/* CSS-бары для отчётов */
.bar-cell { display: flex; align-items: center; gap: 8px; }
.bar-track { flex: 1; height: 7px; background: var(--surface-3); border-radius: 5px; overflow: hidden; min-width: 60px; }
.bar-track > span { display: block; height: 100%; background: var(--brand); }
.bar-cell .bar-val { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 56px; text-align: right; }

/* ---- Фото-плитки ---- */
.photo-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.photo-thumb {
  width: 92px; height: 92px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); font-size: 11px; text-align: center;
  overflow: hidden;
}
.photo-add { border-style: dashed; cursor: pointer; }
.photo-add:hover { border-color: var(--brand); color: var(--brand); }
.photo-thumb.photo-empty { border-style: dashed; color: var(--text-3); font-style: italic; }

/* ---- Просмотр подкреплённых документов (админ-закрытие, §фидбек 2026-07-29) ---- */
.doc-review { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3); }
.doc-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--surface-1); }
.doc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.doc-card__head .doc-nm { font-weight: 600; font-size: 12.5px; }
.doc-card__foot { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; }
.tag--green { background: var(--green-bg); color: var(--green); }
/* Доп. цвета текста для 5-балльной шкалы эффективности промов (§фидбек 2026-07-29) */
.text-orange { color: var(--orange); }
.text-blue { color: var(--blue); }

/* Ошибка формы. Раньше цвет писали прямо в шаблоне (`style="color:#b3261e"`)
   в десятке мест — в тёмной теме бордовый по тёмному почти не читался, и
   поправить это можно было только обходом всех шаблонов. */
.form-error { color: var(--danger-text); }
.form-error--field { font-size: 11px; }

/* ---- Разное ---- */
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.muted { color: var(--text-3); }
.strong { font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; }
.money::before { }
.text-green { color: var(--green); } .text-red { color: var(--red); } .text-amber { color: var(--amber); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.divider { height: 1px; background: var(--border); margin: var(--sp-4) 0; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; font-size: 13px; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; font-weight: 500; }

.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.status-dot .d { width: 8px; height: 8px; border-radius: 50%; }
.status-dot .d.free { background: var(--green); }
.status-dot .d.busy { background: var(--amber); }
.status-dot .d.off  { background: var(--gray); }

.note { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12px; }
.note--info { background: var(--blue-bg); color: var(--brand-600); }
.note--warn { background: var(--amber-bg); color: var(--amber); }

/* оглавление index */
.nav-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.nav-card {
  display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); box-shadow: var(--shadow-sm); color: var(--text);
}
.nav-card:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-1px); transition: .12s; }
.nav-card .nc-ico { font-size: 24px; }
.nav-card h3 { margin: 8px 0 4px; font-size: 15px; }
.nav-card p { color: var(--text-2); font-size: 12px; }
.nav-card .nc-tag { display: inline-block; margin-top: 10px; font-size: 11px; color: var(--brand-600); background: var(--brand-050); padding: 2px 8px; border-radius: 10px; }

/* ============================================================
   Расширение: бургер, тема, сворачивание сайдбара,
   density-режим, плашка роли, переключение аккаунтов
   ============================================================ */

/* иконочные кнопки в шапке (бургер, тема) */
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; font-size: 15px; color: var(--text-2);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }

/* плавность */
.sidebar { transition: width .15s ease, padding .15s ease; }
.content { transition: margin-left .15s ease, width .15s ease; }

/* обёртка текста пункта меню (чтобы прятать при сворачивании) */
.nav-item .label { flex: 1; }

/* --- Свёрнутый сайдбар (только иконки) --- */
body.sidebar-collapsed .sidebar { width: 60px; padding: 12px 6px; }
body.sidebar-collapsed .sidebar .label,
body.sidebar-collapsed .sidebar .nav-group__title,
body.sidebar-collapsed .sidebar .nav-item .badge-count { display: none; }
body.sidebar-collapsed .sidebar .nav-item { justify-content: center; padding: 9px 0; position: relative; }
body.sidebar-collapsed .sidebar .nav-group { margin-bottom: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
body.sidebar-collapsed .sidebar .nav-group:first-child { border-top: 0; padding-top: 0; }
body.sidebar-collapsed .content { margin-left: 60px; width: calc(100% - 60px); }

/* --- Density-режим для таблиц (компактно) --- */
table.data.dense th, table.data.dense td { padding: 3px 8px; font-size: 11.5px; }
table.data.dense .badge { padding: 1px 7px; font-size: 10px; }
table.data.dense .tag { font-size: 10px; padding: 0 5px; }
.density-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.density-toggle button { border: 0; background: var(--surface); color: var(--text-2); padding: 5px 10px; cursor: pointer; font-size: 12px; font-family: var(--font); }
.density-toggle button.active { background: var(--brand); color: var(--on-accent); }

/* --- Плашка «Вы смотрите как: роль» --- */
.rolebar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: linear-gradient(90deg, var(--brand-050), transparent);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius); padding: 10px 16px; margin-bottom: var(--sp-4);
}
.rolebar .eye { font-size: 18px; }
.rolebar .rb-main { line-height: 1.3; }
.rolebar .rb-main .rb-role { font-weight: 700; }
.rolebar .rb-main .rb-scope { font-size: 12px; color: var(--text-2); }
.rolebar .rb-restrict {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--amber); background: var(--amber-bg);
  padding: 4px 10px; border-radius: 20px; max-width: 520px;
}

/* --- Переключение учётных записей --- */
.account-switch { display: grid; gap: var(--sp-2); }
.account-row {
  display: flex; align-items: center; gap: var(--sp-3); padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer;
}
.account-row:hover { border-color: var(--brand); background: var(--surface-2); }
.account-row.current { border-color: var(--brand); background: var(--brand-050); }
.account-row .acc-av { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-weight: 700; color: var(--text-2); }
.account-row .acc-info { line-height: 1.3; }
.account-row .acc-info .acc-name { font-weight: 600; }
.account-row .acc-info .acc-meta { font-size: 11px; color: var(--text-2); }
.account-row .acc-hats { margin-left: auto; display: flex; gap: 4px; }
.hat-pill { font-size: 10px; background: var(--surface-3); color: var(--text-2); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }

/* мелкая матрица прав/скрытого в ролевых видах */
.gate-list { display: grid; gap: 6px; font-size: 12px; }
.gate-list .gl { display: flex; align-items: center; gap: 8px; }
.gate-list .gl .yes { color: var(--green); } .gate-list .gl .no { color: var(--red); }

/* ============================================================
   Расширение 2: логотип-ссылка, аватары, графики (пончик,
   спарклайн, мини-бары), легенды, аккордеоны, экран входа
   ============================================================ */

a.logo { color: var(--text); text-decoration: none; }
a.logo:hover { text-decoration: none; opacity: .85; }

/* аватары людей */
.uava {
  width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--on-accent); flex: 0 0 auto;
}
.uava--lg { width: 40px; height: 40px; font-size: 14px; }
/* У аватарок свои краски, одни на обе темы: инициалы на них белые, и если
   заливку осветлить под тёмную тему (как сделано у статусов), белое по
   светло-зелёному читать будет нельзя. */
.uava.c1 { background: var(--ava-1); } .uava.c2 { background: var(--ava-2); }
.uava.c3 { background: var(--ava-3); } .uava.c4 { background: var(--ava-4); }
.uava.c5 { background: var(--ava-5); } .uava.c6 { background: var(--ava-6); }
.uava.c7 { background: var(--ava-7); } .uava.c8 { background: var(--ava-8); }
.user-cell { display: inline-flex; align-items: center; gap: 8px; }

/* пончик (conic-gradient) */
.donut {
  --p: 60; --c: var(--brand); --sz: 120px;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0);
  display: grid; place-items: center; flex: 0 0 auto;
}
.donut::before { content: ""; position: absolute; width: calc(var(--sz) - 34px); height: calc(var(--sz) - 34px); border-radius: 50%; background: var(--surface); }
.donut { position: relative; }
.donut .donut-lbl { position: relative; text-align: center; line-height: 1.1; }
.donut .donut-lbl .v { font-size: 20px; font-weight: 700; }
.donut .donut-lbl .t { font-size: 10px; color: var(--text-2); }

/* легенда графиков */
.legend { display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend-item .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.legend-item .lg-val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* вертикальные мини-бары (динамика) */
.mini-bars { display: flex; align-items: flex-end; gap: 4px; height: 68px; }
.mini-bars .mb { flex: 1; background: var(--brand); border-radius: 3px 3px 0 0; min-width: 6px; opacity: .85; }
.mini-bars .mb:hover { opacity: 1; }
.mini-bars.green .mb { background: var(--green); }
.mini-bars .mb.hl { background: var(--amber); }
.chart-x { display: flex; gap: 4px; margin-top: 4px; }
.chart-x span { flex: 1; text-align: center; font-size: 9px; color: var(--text-3); }

/* спарклайн (inline SVG) */
.spark { display: inline-block; vertical-align: middle; }
.spark path { fill: none; stroke: var(--brand); stroke-width: 2; }
.spark .area { fill: var(--brand-050); stroke: none; }

/* горизонтальная линейка сравнения */
.hbar { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: 10px; margin-bottom: 8px; }
.hbar .hb-name { font-size: 12px; }
.hbar .hb-track { height: 10px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.hbar .hb-track > span { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.hbar .hb-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; }

/* аккордеон / раскрывающиеся секции */
.acc { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; background: var(--surface); }
.acc__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; }
.acc__head:hover { background: var(--surface-2); }
.acc__head .chev { margin-left: auto; transition: transform .15s; color: var(--text-3); }
.acc__head.open .chev { transform: rotate(90deg); }
.acc__body { padding: 0 16px 14px; display: none; }
.acc__body.open { display: block; }
.acc__head .acc-sum { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.acc__head .acc-sum + .chev { margin-left: 12px; }

/* раскрываемая строка таблицы (общий паттерн) */
tr.exp-row { cursor: pointer; }
tr.exp-row .exp-ico { display: inline-block; width: 12px; color: var(--text-3); transition: transform .15s; }
tr.exp-row.open .exp-ico { transform: rotate(90deg); }
tr.exp-detail > td { background: var(--surface-2); padding: 0; }
/* таблица внутри раскрытия (история заказов клиента и т.п.) */
table.data.sub-table { margin: 0; background: var(--surface); }
table.data.sub-table th { position: static; background: var(--surface-2); font-size: 11px; }
table.data.sub-table td { font-size: 12px; }
table.data.sub-table tr:last-child td { border-bottom: none; }

/* дебет-кредит «касса сошлась» */
.reconcile { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--green-bg); color: var(--green); font-weight: 600; }
.reconcile.bad { background: var(--red-bg); color: var(--red); }

/* ============================================================
   Экран входа (index.html)
   ============================================================ */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-promo {
  background: linear-gradient(140deg, var(--brand-dark), var(--brand) 55%, var(--brand-light));
  color: var(--on-accent); padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.login-promo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, var(--on-accent-soft), transparent 40%); }
.login-promo .lp-logo { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 800; letter-spacing: 1px; margin-bottom: 28px; }
.login-promo .lp-logo .mark { width: 44px; height: 44px; border-radius: 11px; background: var(--on-accent-soft); display: grid; place-items: center; font-size: 20px; }
.login-promo h1 { font-size: 34px; line-height: 1.15; margin-bottom: 16px; max-width: 460px; }
.login-promo p { font-size: 15px; opacity: .92; max-width: 440px; }
.login-promo .lp-feats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; position: relative; }
.login-promo .lp-feat { background: var(--on-accent-soft); border: 1px solid var(--on-accent-line); border-radius: 20px; padding: 6px 14px; font-size: 12px; }
.login-promo .lp-stats { display: flex; gap: 36px; margin-top: 40px; position: relative; }
.login-promo .lp-stat .n { font-size: 26px; font-weight: 800; }
.login-promo .lp-stat .l { font-size: 12px; opacity: .85; }

.login-panel { padding: 48px 52px; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; }
.login-card { max-width: 400px; width: 100%; margin: 0 auto; }
.login-card h2 { font-size: 22px; margin-bottom: 4px; }
.login-card .sub { color: var(--text-2); margin-bottom: 24px; }
.login-form .field { margin-bottom: 14px; }

.quick { margin-top: 30px; }
.quick .q-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.quick .q-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.quick-card {
  display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer;
}
.quick-card:hover { text-decoration: none; border-color: var(--brand); background: var(--brand-050); transform: translateY(-1px); transition: .12s; }
.quick-card .qc-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 17px; background: var(--surface-3); flex: 0 0 auto; }
.quick-card .qc-txt { line-height: 1.25; min-width: 0; }
.quick-card .qc-txt .r { font-weight: 600; font-size: 13px; }
.quick-card .qc-txt .u { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-card.multi { grid-column: 1 / -1; border-style: dashed; }
.login-overview { text-align: center; margin-top: 22px; font-size: 12px; }

@media (max-width: 860px) { .login-wrap { grid-template-columns: 1fr; } .login-promo { display: none; } }

/* ============================================================
   Расширение 3: минималистичный вход + таблица заявок §5.2
   ============================================================ */

/* минималистичный центрированный вход */
.login-mini { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.login-mini .box { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); padding: 32px 28px; }
.login-mini .brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; }
.login-mini .brand .mark { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--brand), var(--brand-light)); color: var(--on-accent); display: grid; place-items: center; font-size: 26px; font-weight: 800; }
.login-mini .brand .nm { font-size: 23px; font-weight: 800; letter-spacing: 1px; }
.login-mini .brand .sub { font-size: 12px; color: var(--text-3); }
.login-mini .lm-foot { text-align: center; margin-top: 18px; font-size: 11px; }

/* компактная таблица заявок (§5.2): узкие колонки, аббревиатуры техники */
th.col-c, td.col-c { text-align: center; width: 1%; white-space: nowrap; }
.pn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.pn.p { background: var(--blue-bg); color: var(--blue); }
.pn.n { background: var(--gray-bg); color: var(--gray); }
.eq-abbr { font-weight: 700; cursor: help; border-bottom: 1px dotted var(--text-3); }
.act-btn { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 5px; height: 22px; min-width: 24px; cursor: pointer; color: var(--text-2); font-size: 12px; padding: 0 5px; }
.act-btn:hover { background: var(--surface-3); color: var(--text); }
table.data td.tight { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
select.mini { padding: 2px 20px 2px 6px; font-size: 11.5px; background-position: right 6px center; }
.msel { display: inline-flex; align-items: center; gap: 5px; }
.msel .d { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.msel .d.free { background: var(--green); } .msel .d.busy { background: var(--amber); }

/* подвал заявки (раскрытие строки вниз) */
.detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 20px; padding: 14px 16px; }
.detail-grid .di .k { color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
.detail-grid .di .v { font-weight: 600; font-size: 13px; }
.detail-grid .di .v.mono { font-variant-numeric: tabular-nums; }
.detail-photos { grid-column: 1 / -1; }

/* адаптив */
@media (max-width: 900px) {
  .form-grid, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .content { margin-left: 0; width: 100%; }
  body.sidebar-collapsed .content { margin-left: 0; width: 100%; }
  .quick-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Расширение 4: живой интерфейс — тумблеры, активные состояния,
   «динамические» индикаторы, департаментная подпись
   ============================================================ */

/* «живой» пульсирующий индикатор для дашбордов */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; animation: lama-pulse 1.6s ease-in-out infinite; vertical-align: middle; }
@keyframes lama-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--green-glow); } 50% { opacity: .4; box-shadow: 0 0 0 5px transparent; } }
.live-tag { display: inline-flex; align-items: center; font-size: 11px; color: var(--text-2); }

/* активные/тактильные состояния кнопок и карточек */
.btn:active { transform: translateY(1px); }
.kpi { transition: box-shadow .12s ease, transform .12s ease; }
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.nav-item, .tab, .quick-card, .account-row, .acc__head { transition: background .12s ease, color .12s ease, border-color .12s ease; }
.icon-btn:active { transform: translateY(1px); }

/* тумблер-переключатель */
.switch { position: relative; display: inline-block; width: 38px; height: 20px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 20px; cursor: pointer; transition: background .15s ease; }
.switch .track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: var(--knob); border-radius: 50%; transition: transform .15s ease; box-shadow: var(--shadow-sm); }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::before { transform: translateX(18px); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.switch-row:last-child { border-bottom: 0; }

/* KPI-подпись «динамически обновляется» */
.dash-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.dash-head h3 { font-size: 14px; }
.dash-head .spacer { flex: 1; }

/* ============================================================
   Расширение 5: карты (стилизованный inline-SVG), зоны,
   маршруты, тепловая карта, ИИ-макеты рекламы
   ============================================================ */

/* раскладка карта + панель */
.map-wrap { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-4); align-items: start; }
.map-wrap.rev { grid-template-columns: 300px 1fr; }
.map-canvas { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); position: relative; }
.map-svg { width: 100%; height: auto; display: block; cursor: crosshair; }
.map-svg.pan { cursor: grab; }

/* Элементы стилизованной карты города. Тема — переменными: раньше на каждый
   слой стояла отдельная строчка `[data-theme="dark"] .map-…`, и новый слой
   легко было завести без тёмного варианта. */
.map-land   { fill: var(--map-land); }
.map-river  { fill: var(--map-river); opacity: .8; }
.map-park   { fill: var(--map-park); opacity: .7; }
.map-street { stroke: var(--map-street); stroke-width: 2; }
.map-street.major { stroke-width: 4; }
.map-label  { fill: var(--text-2); font-size: 12px; font-weight: 600; font-family: var(--font); }
.map-sub    { fill: var(--text-3); font-size: 10px; font-family: var(--font); }

/* зоны */
.zone { stroke-width: 2; cursor: pointer; transition: opacity .12s; }
.zone:hover { opacity: .85; }
.zone.center    { fill: var(--blue-bg);   stroke: var(--blue); }
.zone.suburb    { fill: var(--amber-bg);  stroke: var(--amber); }
.zone.outskirts { fill: var(--green-bg);  stroke: var(--green); }
.zone-handle { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }

/* маршруты офлайн-рекламы */
.route { fill: var(--violet-bg); stroke: var(--violet); stroke-width: 2; cursor: pointer; }
.route:hover { fill: var(--violet-bg); opacity: .75; }
.route-chip { fill: var(--surface); stroke: var(--border-strong); }
.route-chip-txt { fill: var(--text); font-size: 10px; font-weight: 700; font-family: var(--font); }

/* Точки-заявки по статусу. Обводка — цветом карты, а не белым: на тёмной
   карте белый ободок вокруг каждой точки превращал её в звёздное небо. */
.pt { stroke: var(--map-stroke); stroke-width: 1.5; }
.pt.green { fill: var(--green); } .pt.amber { fill: var(--amber); } .pt.blue { fill: var(--blue); }
.pt.red { fill: var(--red); } .pt.teal { fill: var(--teal); } .pt.gray { fill: var(--gray); }

/* тепловая карта */
.heat { filter: url(#heatblur); }
.heat circle { fill: var(--red); }

/* панель инструментов карты */
.map-tools { display: flex; flex-direction: column; gap: var(--sp-3); }
.tool-group { display: flex; flex-direction: column; gap: 6px; }
.tool-group > .tg-title { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); }
.tool-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.tool-btn { flex: 1; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 12px; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.tool-btn:hover { background: var(--surface-3); }
.tool-btn.active { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.tool-btn.z-center.active { background: var(--blue); border-color: var(--blue); }
.tool-btn.z-suburb.active { background: var(--amber); border-color: var(--amber); }
.tool-btn.z-outskirts.active { background: var(--green); border-color: var(--green); }

/* слайдеры (наклон/поворот) */
.slider-row { display: flex; align-items: center; gap: 8px; }
.slider-row label { font-size: 12px; color: var(--text-2); min-width: 60px; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--brand); }
.slider-row .val { font-size: 11px; color: var(--text-3); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* легенда карты */
.map-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--border); font-size: 12px; }
.map-legend .lg { display: flex; align-items: center; gap: 6px; }
.map-legend .lg .sw { width: 11px; height: 11px; border-radius: 3px; }
.map-legend .lg .dotc { width: 10px; height: 10px; border-radius: 50%; }

/* тумблер вида карты (точки/кучность) */
.map-viewtoggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.map-viewtoggle button { border: 0; background: var(--surface); color: var(--text-2); padding: 6px 12px; cursor: pointer; font-size: 12px; font-family: var(--font); }
.map-viewtoggle button.active { background: var(--brand); color: var(--on-accent); }

/* ИИ-макеты рекламы */
.creative-gen { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-4); }
.creative-gen textarea { min-height: 44px; }
.creative-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.creative-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.creative-thumb { height: 150px; display: grid; place-items: center; color: var(--on-accent); font-size: 30px; text-align: center; background: linear-gradient(135deg, var(--ava-4), var(--ava-1)); }
.creative-thumb.c2 { background: linear-gradient(135deg, var(--ava-2), var(--ava-5)); }
.creative-thumb.c3 { background: linear-gradient(135deg, var(--ava-3), var(--ava-6)); }
.creative-thumb.c4 { background: linear-gradient(135deg, var(--ava-1), var(--brand-light)); }
.creative-thumb.gen { background: repeating-linear-gradient(45deg, var(--surface-3), var(--surface-3) 10px, var(--surface-2) 10px, var(--surface-2) 20px); color: var(--text-3); }
.creative-body { padding: 10px 12px; }
.creative-body .cp { font-size: 12px; color: var(--text); line-height: 1.35; min-height: 34px; }
.creative-body .cm { font-size: 10px; color: var(--text-3); margin: 6px 0 8px; }
.creative-body .row { gap: 6px; }

@media (max-width: 900px) { .map-wrap, .map-wrap.rev { grid-template-columns: 1fr; } }

/* ============================================================
   Расширение 6: форма найма — зоны загрузки паспорта, чипы-мультивыбор
   ============================================================ */

/* drag&drop-зоны фото */
.passport-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 14px; background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.dropzone:hover { border-color: var(--brand); background: var(--brand-050); }
.dropzone .dz-ico { font-size: 22px; }
.dropzone .dz-title { font-weight: 600; font-size: 13px; margin-top: 2px; }
.dropzone .dz-hint { font-size: 11px; color: var(--text-3); }
.dz-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: center; }

/* чипы-мультивыбор территории (:has — статичный макет) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 20px; cursor: pointer; font-size: 12px; user-select: none; background: var(--surface); transition: background .12s, color .12s, border-color .12s; }
.chip-check:hover { border-color: var(--brand); }
.chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-check::before { content: "＋"; font-weight: 700; color: var(--text-3); }
.chip-check:has(input:checked) { background: var(--brand); color: var(--on-accent); border-color: var(--brand); }
.chip-check:has(input:checked)::before { content: "✓"; color: var(--on-accent); }
.chip-check.locked { opacity: .5; cursor: not-allowed; background: var(--surface-3); }

/* плашка ограничения scope */
.scope-note { display: inline-flex; align-items: center; gap: 8px; background: var(--amber-bg); color: var(--amber); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; font-weight: 600; margin-bottom: 12px; }

/* ============================================================
   Расширение 7: dev/заказчик-сноска (раскрывает скрытую механику).
   Отличается от обычных user-тултипов — заметная пунктирная плашка.
   ============================================================ */
.dev-note {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px dashed var(--orange); border-radius: var(--radius-sm);
  background: var(--orange-bg); color: var(--orange-text);
  padding: 8px 12px; font-size: 11.5px; line-height: 1.4; margin-top: 10px;
}
.dev-note .dn-ico { flex: 0 0 auto; font-size: 13px; }
.dev-note .dn-body { min-width: 0; }
.dev-note b { color: var(--orange-text); }
.dev-note::after {
  content: "для разработки / заказчика"; margin-left: auto; flex: 0 0 auto;
  font-size: 9px; text-transform: uppercase; letter-spacing: .4px; opacity: .7; white-space: nowrap;
  align-self: center;
}
.dev-note--inline { display: inline-flex; margin-top: 0; }
.dev-note--inline::after { content: none; }

/* ============================================================
   Расширение 8: двойное состояние закрытия (выполнена / касса сдана)
   ============================================================ */
.dual { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.dchk { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 9px; font-weight: 800; cursor: help; }
.dchk.done { background: var(--green-bg); color: var(--green); }
.dchk.wait { background: var(--amber-bg); color: var(--amber); }
/* крупный бейдж «полностью закрыта» */
.closed-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.closed-badge .part { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 20px; }
.closed-badge .part.done { background: var(--green-bg); color: var(--green); }
.closed-badge .part.wait { background: var(--amber-bg); color: var(--amber); }

/* строки сдачи по заявкам (мастер) */
.cash-list .cash-row { display: grid; grid-template-columns: 26px 1fr auto 120px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.cash-list .cash-row:last-child { border-bottom: 0; }
.cash-list .cash-row .cr-remain { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 12px; }
.cash-list .cash-row input[type="number"] { padding: 5px 8px; }
.cash-list .cash-row.done { opacity: .6; }
.cash-total { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 2px solid var(--border-strong); margin-top: 4px; font-weight: 700; }

/* ============================================================
   Расширение 9: тост «в чат КЦ», прозвон, подсветка строки с карты
   ============================================================ */
/* Здесь жил ПЕРВЫЙ вариант тоста — одиночное облачко по центру снизу, видимое
   только с классом `.show`. Его давно заменила стопка справа (`.toast-stack`),
   но правило осталось и продолжало действовать на те же `.toast`: `opacity: 0`
   без `.show` гасил сообщение, а видно его было ровно те 0.16 с, пока шла
   анимация появления. Отсюда жалоба «появляется и сразу исчезает» — при чём
   тут перезагрузка страницы, было не понять (06.09.2026). */
.act-btn.prz { border-color: var(--brand); color: var(--brand); }
.act-btn.prz:hover { background: var(--brand-050); }
/* подсветка строки при переходе с карты заявок */
@keyframes lama-hl { 0% { background: var(--green-bg); } 100% { background: var(--green-bg); } }
tr.row-highlight > td { background: var(--green-bg) !important; }
tr.row-highlight { box-shadow: inset 3px 0 0 var(--green); }

/* валидация суммы сдачи (расчёт мастера) */
input.cash-amt.bad { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-bg); }
.sum-err { display: block; font-size: 9px; color: var(--red); visibility: hidden; line-height: 1.1; margin-bottom: 2px; }
select.mini2 { padding: 2px 18px 2px 6px; font-size: 11px; background-position: right 5px center; }
input.cash-amt { width: 92px; padding: 3px 6px; }

/* ============================================================
   Расширение 10: ГЛОБАЛЬНАЯ ПЛОТНОСТЬ (§1 #11).
   Единый компактный табличный дизайн — минимум воздуха,
   видимая сетка ячеек, узкие KPI-строки вместо крупных плиток.
   Блок последний → перекрывает предыдущие отступы.
   ============================================================ */

/* — Хром: шапка/сайдбар плотнее — */
:root { --header-h: 46px; }
.header { padding: 0 12px; gap: 8px; }
.header-widget { padding: 0 8px; }
.header-widget .lbl { font-size: 9px; }
.header-widget .val { font-size: 12px; }
.header-user .who .name { font-size: 12px; }
.header-user .who .role { font-size: 10px; }
.avatar { width: 26px; height: 26px; }
.icon-btn { width: 30px; height: 30px; }
.sidebar { padding: 8px 6px; }
.nav-group { margin-bottom: 8px; }
.nav-group__title { padding: 3px 9px; }
.nav-item { padding: 5px 9px; margin-bottom: 1px; }

/* — Контент / заголовки / крошки — */
.content { padding: 14px 16px; }
.page-head { margin-bottom: 12px; gap: 10px; }
.page-head h1 { font-size: 17px; }
.crumbs { margin-bottom: 6px; }
.rolebar { padding: 7px 12px; margin-bottom: 12px; }
.dash-head { margin-bottom: 8px; }

/* — Карточки — */
.card { border-radius: 7px; }
.card__head { padding: 7px 12px; }
.card__head h3 { font-size: 13px; }
.card__body { padding: 10px 12px; }

/* — Сетки / стеки / тулбары / формы: меньше межблочного воздуха — */
.grid { gap: 12px; }
.grid--2, .grid--3, .grid--4 { gap: 12px; }
.stack { gap: 12px; }
.toolbar { gap: 6px; margin-bottom: 12px; }
.form-grid { gap: 10px; }
.form-section { margin-bottom: 14px; }
.form-section__title { margin-bottom: 8px; padding-bottom: 5px; }
.field { gap: 4px; }
.divider { margin: 10px 0; }
.mt-4 { margin-top: 10px; } .mt-3 { margin-top: 8px; }
input[type="text"], input[type="tel"], input[type="number"], input[type="date"],
input[type="time"], input[type="datetime-local"], input[type="search"], input[type="password"],
select, textarea { padding: 5px 8px; }

/* — KPI: узкие строки чисел, а не крупные плитки с воздухом — */
.kpi { padding: 7px 10px; }
.kpi .lbl { font-size: 10px; }
.kpi .val { font-size: 17px; margin-top: 1px; }
.kpi .delta { font-size: 10px; }

/* — Модалки / деталка плотнее — */
.modal__head { padding: 10px 14px; }
.modal__body { padding: 12px 14px; }
.modal__foot { padding: 8px 14px; }
.detail-grid { padding: 10px 12px; gap: 8px 16px; }

/* — ТАБЛИЦЫ: видимая сетка ячеек + плотные паддинги (единый плотный режим) — */
table.data { border: 1px solid var(--border); font-size: 12px; }
table.data th, table.data td { padding: 3px 8px; border: 1px solid var(--border); }
table.data thead th { padding: 4px 8px; border-color: var(--border-strong); font-size: 10.5px; }
table.data.dense th, table.data.dense td { padding: 3px 8px; }
table.data tfoot td { border-top: 2px solid var(--border-strong); }
/* аккордеоны/списки метрик плотнее */
.acc__head { padding: 8px 12px; }
.acc__body { padding: 0 12px 10px; }
.switch-row { padding: 7px 0; }
.hbar { margin-bottom: 6px; }
.kv { gap: 5px 12px; }

/* Плотность одинаковая на всех устройствах (мобильный тоже) */
@media (max-width: 900px) { .content { padding: 12px; } }

/* ============================================================
   Расширение 11: панель вкладок НИКОГДА не вылезает за ширину.
   Много вкладок (owner/analytics, finance, create_city, …) →
   горизонтальный скролл полосы с тонким скроллбаром.
   ============================================================ */
.tabs {
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-track { background: transparent; }
.tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.tab {
  flex: 0 0 auto;          /* не сжимаются — уезжают в скролл */
  padding: 6px 11px;
  font-size: 12px;
  white-space: nowrap;
}
/* активная вкладка чётко выделена (подчёркивание + цвет) */
.tab.active { color: var(--brand-600); border-bottom-color: var(--brand); font-weight: 700; }

/* --- Дополнения проекта (в макете их нет) --- */
/* Индикатор realtime: сокет отвалился — точка гаснет и перестаёт пульсировать. */
.live-dot--off { background: var(--text-3); animation: none; box-shadow: none; }

/* Блок фото: превью сеткой, клик открывает снимок целиком. Один вид на весь
   проект — заявки, документы сотрудников, заявки на наём. */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sp-2); }
.photo-tile { margin: 0; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--surface-2); }
.photo-tile img { width: 100%; height: 92px; object-fit: cover; cursor: zoom-in;
  display: block; }
.photo-tile img:hover { filter: brightness(1.06); }
.photo-tile__file { display: flex; align-items: center; justify-content: center;
  height: 92px; font-size: 30px; text-decoration: none; }
.photo-tile figcaption { display: flex; flex-direction: column; padding: 4px 6px 6px;
  font-size: 11px; line-height: 1.25; }
.photo-tile figcaption .nm { font-weight: 600; }
.photo-viewer__body { text-align: center; }
.photo-viewer__body img { max-width: 100%; max-height: 70vh; border-radius: 8px; }
.modal--wide { max-width: 900px; }

/* Раздел «СЕРВЕР» (srvops). Приставка в именах классов — чтобы функционал
   можно было найти и вырезать целиком вместе со стилями. */

/* Плашки состояния: одним взглядом видно, всё ли живо. */
.srvops-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2); margin-bottom: var(--sp-4); }
.srvops-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.srvops-tile--alarm { border-color: var(--red); }
.srvops-tile__label { font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--text-2); }
.srvops-tile__value { font-size: 20px; font-weight: 700; line-height: 1.1; }
.srvops-tile--alarm .srvops-tile__value { color: var(--red); }
.srvops-tile__note { font-size: 11px; color: var(--text-3); overflow: hidden;
  text-overflow: ellipsis; }

/* Шаг чек-листа: галочка слева, объяснение справа. Кликается вся строка. */
.srvops-step { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer;
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: var(--sp-2); background: var(--surface); }
.srvops-step:hover { background: var(--surface-2); }
.srvops-step input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.srvops-step input[type="checkbox"]:disabled { opacity: .4; }
.srvops-step__body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.srvops-step__note { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.srvops-step--danger { border-color: var(--red); }
.srvops-confirm { max-width: 320px; margin-top: var(--sp-2); }

/* Настройки шага: свёрнуты, пока не понадобились. */
.srvops-details { margin: -4px 0 var(--sp-3) 34px; }
.srvops-details > summary { cursor: pointer; font-size: 12px; color: var(--text-2);
  padding: 4px 0; }
.srvops-details__body { padding: var(--sp-3); border: 1px dashed var(--border);
  border-radius: 8px; margin-top: 4px; }

.srvops-flows .row { align-items: stretch; }
.srvops-flow { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.srvops-flow__hint { font-size: 12px; color: var(--text-2); line-height: 1.4; }

.srvops-restore { display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-2); max-width: 460px; }

.srvops-run { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.btn--lg { padding: 10px 20px; font-size: 14px; }

/* Раздел «СЕРВЕР» (srvops): вывод логов контейнера. Приставка в имени класса —
   чтобы функционал можно было найти и вырезать целиком вместе со стилями. */
.srvops-log {
  margin: 0; padding: var(--sp-3); max-height: 70vh; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.45;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
}

/* ============================================================
   Всплывающие сообщения (тосты) — правый нижний угол.
   Раньше всё, что система хотела сказать, рисовалось одинаковой
   бледной плашкой в потоке страницы: в длинном списке заявок её
   просто не было видно, и отказ выглядел как «кнопка не работает».
   ============================================================ */
.toast-stack {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  /* column-reverse: свежее сообщение оказывается СВЕРХУ стопки, а старые
     оседают вниз и оттуда же убираются. Разворачивать список в шаблоне нельзя —
     хранилище сообщений Django не поддерживает reversed. */
  display: flex; flex-direction: column-reverse; gap: 8px;
  width: min(380px, calc(100vw - 32px));
}
.toast {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--gray);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 10px 34px 10px 12px; position: relative;
  font-size: 12px; color: var(--text);
  animation: toast-in .16s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.toast { cursor: pointer; }        /* клик по облачку закрывает его целиком */
.toast--leaving { opacity: 0; transform: translateX(12px); transition: .15s ease-in; }
.toast__title { font-weight: 600; margin-bottom: 2px; }
.toast__hint { color: var(--text-2); }
.toast__close {
  position: absolute; top: 6px; right: 8px; border: 0; background: none;
  cursor: pointer; color: var(--text-3); font-size: 14px; line-height: 1; padding: 2px;
}
.toast__close:hover { color: var(--text); }
.toast--error   { border-left-color: var(--red); }
.toast--error   .toast__title { color: var(--red); }
.toast--warning { border-left-color: var(--amber); }
.toast--warning .toast__title { color: var(--amber); }
.toast--success { border-left-color: var(--green); }
.toast--success .toast__title { color: var(--green); }
.toast--info    { border-left-color: var(--blue); }
.toast--info    .toast__title { color: var(--brand-600); }