/* Гранит Град — интерфейс.

   Тона взяты с демо-системы, с которой заказчик к нам пришёл: глубокий
   тёмный фон, карточки на подложке, индиговый акцент. Он узнаёт на стенде
   то, что уже видел и что ему понравилось.

   Правило цвета при этом осталось прежним: яркое на экране — только
   подсветка простоя. Жёлтый, красный, кислотный. Цвет стадий живёт в точке
   размером с букву и в тонкой полосе, а не заливкой — иначе застрявший
   заказ перестанет бросаться в глаза, а ради этого подсветка и сделана. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.c329d9ac3c7b.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

/* --- тёмная тема: основная --------------------------------------------- */

:root,
.theme-dark {
  --bg: #111112;
  --side-bg: #0d0d0e;
  --surface: #171718;
  --surface-2: #1d1d1f;
  --surface-3: #252527;
  --border: rgba(255, 255, 255, .065);
  --border-2: rgba(255, 255, 255, .12);

  --ink: #ededed;
  --ink-2: #bcbcbf;
  --muted: #8e8e93;
  --dim: #5f5f64;

  --accent: #dcdcdc;
  --accent-2: #ececec;
  --accent-rgb: 220, 220, 220;
  --on-accent: #121213;

  --warn: #e8c547;
  --warn-rgb: 232, 197, 71;
  --alert: #ef7a74;
  --alert-rgb: 239, 122, 116;
  --crit: #c2ec4a;
  --crit-rgb: 194, 236, 74;
  --ok: #34d399;

  --shadow: 0 18px 48px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
  --hover-veil: rgba(255, 255, 255, .025);
  --tile-lift: 0 12px 32px rgba(0, 0, 0, .35);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* --- светлая: то же самое днём ----------------------------------------- */

.theme-light {
  --bg: #f4f4f3;
  --side-bg: #ededec;
  --surface: #ffffff;
  --surface-2: #f8f8f7;
  --surface-3: #efefee;
  --border: rgba(20, 20, 20, .07);
  --border-2: rgba(20, 20, 20, .14);

  --ink: #161616;
  --ink-2: #444446;
  --muted: #737376;
  --dim: #a5a5a8;

  --accent: #1f1f20;
  --accent-2: #3a3a3c;
  --accent-rgb: 31, 31, 32;
  --on-accent: #ffffff;

  --warn: #b98900;
  --warn-rgb: 234, 179, 8;
  --alert: #dc2626;
  --alert-rgb: 239, 68, 68;
  --crit: #5b8a00;
  --crit-rgb: 163, 230, 53;
  --ok: #059669;

  --shadow: 0 18px 44px rgba(20, 20, 20, .12), 0 2px 6px rgba(20, 20, 20, .05);
  --hover-veil: rgba(20, 20, 20, .025);
  --tile-lift: 0 12px 28px rgba(20, 20, 20, .08);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23737376' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* --- основа ------------------------------------------------------------- */

* { box-sizing: border-box; }

/* Масштаб всего интерфейса. Крутить здесь, а не по размерам в каждом
   правиле: сетка, отступы и шрифты уменьшаются согласованно. */
:root { --ui-zoom: .88; }
/* На телефоне уменьшать нечего: текст и так на пределе читаемости. */
@media (max-width: 900px) { :root { --ui-zoom: 1; } }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 500 13px/1.5 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  zoom: var(--ui-zoom);
  /* Доска шире экрана и прокручивается сама; страница вбок уезжать не
     должна — иначе срезается край меню. clip, а не hidden: hidden
     ломает липкое меню. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-2); }

::selection { background: rgba(var(--accent-rgb), .35); }

* { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), .35) transparent; }

.num, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1; }

.icon { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 15px; height: 15px; flex-basis: 15px; }

/* --- каркас ------------------------------------------------------------- */

.shell { display: flex; min-height: calc(100vh / var(--ui-zoom)); }

.side {
  width: 232px;
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  padding: 18px 12px 14px;
  border-right: 1px solid var(--border);
  background: var(--side-bg);
  position: sticky;
  top: 0;
  height: calc(100vh / var(--ui-zoom));
}

.brand { display: flex; gap: 12px; align-items: center; padding: 0 6px 20px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px; letter-spacing: -.02em;
  color: var(--on-accent);
  background: var(--accent);
}
.brand b { display: block; font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.brand span { display: block; font-size: 12px; color: var(--muted); }

.nav-group { margin-bottom: 16px; }
.nav-title { padding: 0 10px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px;
  margin-bottom: 1px;
  border-radius: 8px;
  color: var(--ink-2);
  font-weight: 600;
  transition: background .15s, color .15s;
}
.nav-item .icon { color: var(--muted); transition: color .15s; }
.nav-item:hover { color: var(--ink); background: var(--surface-2); }
.nav-item:hover .icon { color: var(--ink); }
.nav-item.is-active { color: var(--ink); background: rgba(var(--accent-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .22); }
.nav-item.is-active .icon { color: var(--accent-2); }
.nav-count { margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(var(--alert-rgb), .16); color: var(--alert); }

.side-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--border); }
.who { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.who-link {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
  margin: -6px; padding: 6px;
  border-radius: 10px;
  color: var(--ink);
  transition: background .15s;
}
.who-link:hover { background: var(--surface-2); color: var(--ink); }
/* Заглушка аватарки: инициалы в кольце. Своих фото в системе нет, и
   кружок с буквами различает людей не хуже. */
.avatar {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 750; letter-spacing: .02em; line-height: 1;
  color: var(--ink);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.avatar--lg { width: 64px; height: 64px; flex-basis: 64px; font-size: 21px; }
.avatar--sm { width: 24px; height: 24px; flex-basis: 24px; font-size: 9.5px; }
.avatar--xs { width: 18px; height: 18px; flex-basis: 18px; font-size: 7.5px; letter-spacing: 0; }
/* Сотрудник в строке текста: в истории, движениях, карточке. Имя ярче
   приглушённого текста вокруг — иначе «кто» теряется среди дат и стадий. */
.person { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; margin-block: -2px; }
.person-name { color: var(--ink); font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-cell { display: flex; align-items: center; gap: 10px; }
.people { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.who-text { min-width: 0; }
.who-text b { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-text small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who form { margin: 0; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border); }

.theme-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.theme-switch button {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 12px "Manrope", sans-serif;
  padding: 6px 8px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }

.main { flex: 1; min-width: 0; padding: 24px 28px 60px; }

/* --- шапка экрана ------------------------------------------------------- */

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.page-head h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 750; letter-spacing: -.025em; }
.page-head .lead { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 760px; }
.page-head .crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.page-head .crumbs a:hover { color: var(--ink); }
/* «Назад» — одна ссылка: стрелка и подпись под одним наведением. */
.crumb-back { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.crumb-back .icon { display: block; }
.page-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.page-meta { font-size: 13px; color: var(--muted); font-weight: 600; }
.page-meta b { color: var(--ink); }


/* --- кнопки и поля ------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--border-2);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink);
  font: 650 13px "Manrope", sans-serif;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { color: var(--ink); background: var(--surface-3); border-color: var(--border-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn--primary {
  border-color: transparent;
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: none;
}
.btn--primary:hover { color: var(--on-accent); background: var(--accent); filter: brightness(1.1); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--border); }
.btn--sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; gap: 6px; }
.btn--icon { padding: 0; width: 32px; height: 32px; border-radius: 9px; }
.btn--danger:hover { color: var(--alert); border-color: rgba(var(--alert-rgb), .45); background: rgba(var(--alert-rgb), .08); }

input[type=text], input[type=number], input[type=date], input[type=time], input[type=email],
input[type=password], input[type=search], input[type=tel], select, textarea {
  font: 500 13px "Manrope", sans-serif;
  color: var(--ink);
  padding: 7px 10px;
  border: 1px solid var(--border-2);
  border-radius: 9px;
  background: var(--surface-2);
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--dim); }
input:hover, select:hover, textarea:hover { border-color: rgba(var(--accent-rgb), .35); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), .75);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16);
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }

input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0;
  border-radius: 6px;
  border: 1.5px solid var(--border-2);
  background: var(--surface-2);
  display: inline-grid; place-items: center;
  cursor: pointer;
  vertical-align: -4px;
}
input[type=checkbox]::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--on-accent); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::after { opacity: 1; }

input[type=file] { font: 500 13px "Manrope", sans-serif; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button {
  font: 650 12.5px "Manrope", sans-serif;
  margin-right: 10px;
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px dashed var(--border-2);
  background: var(--surface-3);
  color: var(--ink);
  cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--accent); }

.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }

/* --- кастомный выпадающий список ---------------------------------------- */

.dd { position: relative; display: inline-block; min-width: 0; }
.dd > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dd-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border-2);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink);
  font: 600 13px "Manrope", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.dd-btn:hover { border-color: rgba(var(--accent-rgb), .35); }
.dd.is-open .dd-btn, .dd-btn:focus-visible { outline: none; border-color: rgba(var(--accent-rgb), .75); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }
.dd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-label.is-empty { color: var(--dim); font-weight: 500; }
.dd-prefix { color: var(--muted); font-weight: 600; }
.dd-chev { width: 14px; height: 14px; color: var(--muted); transition: transform .18s; flex: 0 0 14px; }
.dd.is-open .dd-chev { transform: rotate(180deg); }
.dd-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.dd-person { display: flex; flex: 0 0 auto; }
.dd-person[hidden] { display: none; }

.dd-menu {
  position: absolute; z-index: 60;
  top: calc(100% + 6px); left: 0;
  min-width: 100%;
  max-width: min(420px, 90vw);
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left;
  pointer-events: none;
  transition: opacity .14s, transform .14s;
}
.dd.is-open .dd-menu { opacity: 1; transform: none; pointer-events: auto; }
.dd.is-up .dd-menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.dd.is-right .dd-menu { left: auto; right: 0; }
.dd-search { width: 100%; margin-bottom: 6px; padding: 8px 11px 8px 34px; font-size: 13px;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 11px center;
}
.dd-list { max-height: 300px; overflow-y: auto; }
.dd-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dd-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font: 600 13.5px "Manrope", sans-serif;
  text-align: left;
  cursor: pointer;
}
.dd-opt:hover, .dd-opt.is-focus { background: var(--surface-3); color: var(--ink); }
.dd-opt.is-selected { color: var(--ink); }
.dd-opt .dd-tick { margin-left: auto; width: 15px; height: 15px; color: var(--accent-2); opacity: 0; }
.dd-opt.is-selected .dd-tick { opacity: 1; }
.dd-opt.is-empty-opt { color: var(--muted); font-weight: 500; }
/* display: flex у пункта перебивал hidden: поиск подсвечивал совпадение, а лишнее не прятал. */
.dd-opt[hidden], .dd-group[hidden], .dd-none[hidden] { display: none; }
.dd-none { padding: 12px 10px; font-size: 13px; color: var(--muted); }
.dd-opt small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }

/* Меню-действие (не поле формы): «другая стадия», «ещё». */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; z-index: 60; right: 0; top: calc(100% + 6px);
  min-width: 230px;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow);
  animation: pop .14s ease-out;
}
.menu-pop form { margin: 0; }
.menu-head { padding: 8px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* --- карточки ----------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-head h2 { margin: 0; font-size: 14.5px; font-weight: 750; letter-spacing: -.01em; }
.card-head .muted { font-size: 13px; }
.card-head .card-actions { margin-left: auto; display: flex; gap: 8px; }
.card--flush { padding: 0; overflow: hidden; }
.card--flush .card-head { padding: 15px 18px 0; }
.card-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
/* Заметки заказа — своей карточкой и в полный цвет: мелким серым внизу
   карточки «Заказ» их не замечали. */
.note-text { font-size: 13.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.card--alert { border-color: rgba(var(--alert-rgb), .35); }
.card--quiet { background: transparent; border-style: dashed; }

.empty { padding: 20px 12px; text-align: center; color: var(--muted); font-size: 12.5px; }
.empty .icon { width: 28px; height: 28px; margin: 0 auto 8px; display: block; color: var(--dim); }

/* --- уведомления -------------------------------------------------------- */

.toasts { position: fixed; z-index: 100; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow);
  font-size: 13.5px; font-weight: 600;
  animation: toast-in .22s ease-out;
}
.toast .icon { color: var(--ok); }
.toast--error .icon { color: var(--alert); }
.toast.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- фильтры ------------------------------------------------------------ */

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar .search { position: relative; min-width: 260px; }
.toolbar .search input { width: 100%; padding-left: 38px; }
.toolbar .search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.toolbar .spacer { flex: 1; }

/* --- таблицы ------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; }
table.grid th, table.grid td { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
table.grid th {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--dim);
  background: var(--surface);
  position: sticky; top: 0; z-index: 1;
}
table.grid th:first-child, table.grid td:first-child { padding-left: 18px; }
table.grid th:last-child, table.grid td:last-child { padding-right: 18px; }
table.grid tbody tr { transition: background .12s; }
table.grid tbody tr:hover td { box-shadow: inset 0 0 0 999px var(--hover-veil); }
table.grid tbody tr[data-href] { cursor: pointer; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tfoot th, table.grid tfoot td { border-bottom: 0; border-top: 1px solid var(--border-2); font-size: 13px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 750; background: var(--surface-2); }
table.grid .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.grid .strong { font-weight: 700; color: var(--ink); }
table.grid.compact th, table.grid.compact td { padding-top: 10px; padding-bottom: 10px; }
table.grid td.actions { width: 1%; white-space: nowrap; text-align: right; }
table.grid td.actions form { display: inline; }

.row-link { font-weight: 700; color: var(--ink); }
.row-sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.mono { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); font-weight: 650; letter-spacing: .01em; }

/* Застрявшая строка — полоса слева и лёгкий тон, а не заливка на весь ряд:
   таблица должна читаться, а не рябить. */
tr.row--warn td { background: rgba(var(--warn-rgb), .05); }
tr.row--alert td { background: rgba(var(--alert-rgb), .06); }
tr.row--crit td { background: rgba(var(--crit-rgb), .07); }
tr.row--warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.row--alert td:first-child { box-shadow: inset 3px 0 0 var(--alert); }
tr.row--crit td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
tr.row--warn:hover td:first-child { box-shadow: inset 3px 0 0 var(--warn), inset 0 0 0 999px var(--hover-veil); }
tr.row--alert:hover td:first-child { box-shadow: inset 3px 0 0 var(--alert), inset 0 0 0 999px var(--hover-veil); }
tr.row--crit:hover td:first-child { box-shadow: inset 3px 0 0 var(--crit), inset 0 0 0 999px var(--hover-veil); }

/* --- метки -------------------------------------------------------------- */

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 650;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag .dot, .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; display: inline-block; }
.tag--accent { background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .3); color: var(--accent-2); }
.tag--ok { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .28); color: var(--ok); }

.stale-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.stale-flag .icon { width: 14px; height: 14px; flex-basis: 14px; }
.stale-flag--warn { color: var(--warn); }
.stale-flag--alert { color: var(--alert); }
.stale-flag--crit { color: var(--crit); }

.pill-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 750; background: var(--surface-3); color: var(--muted); }
.pill-count--alert { background: rgba(var(--alert-rgb), .16); color: var(--alert); }

/* --- доска -------------------------------------------------------------- */
/* Доску смотрят весь день, поэтому она тихая: карточка — это имя, сумма и
   одна строка про то, кто ведёт и куда ехать. Кнопки перехода появляются
   при наведении, простой — тонкой линией слева и числом дней в углу.
   Громче карточка не становится даже тогда, когда заказ застрял: цвет
   говорит сам. */

.board {
  display: flex; gap: 22px; align-items: stretch;
  overflow-x: auto;
  padding: 2px 2px 28px;
  scroll-snap-type: x proximity;
}
.col { flex: 0 0 268px; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
/* Столбцы тянутся до самого длинного, а список карточек — до низа столбца:
   карточку можно отпустить и в пустоту под последней. */
.col > .col-body { flex: 1; }
/* min-width: 0 — иначе длинное название кладбища без переноса раздувает
   колонку до своей ширины, и доска разъезжается. */

.col-head {
  position: sticky; top: 0; z-index: 5;
  padding: 4px 2px 12px;
  margin-bottom: 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.col-head::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 28px; height: 1px;
  background: var(--stage);
}
.col-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.col-title .dot { width: 6px; height: 6px; flex-basis: 6px; background: var(--stage); }
.col-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.col-sum { margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; display: flex; gap: 6px; }
.col-sum .stale-note { color: var(--alert); font-weight: 650; }
.col-body { display: flex; flex-direction: column; gap: 10px; min-height: 60px; border-radius: 14px; transition: background .15s, box-shadow .15s; }
.col-empty { padding: 22px 12px; border: 1px dashed var(--border-2); border-radius: 12px; text-align: center; font-size: 12px; color: var(--dim); }

/* Перетаскивание: колонка, над которой держат карточку, чуть светлеет. */
.col-body.is-drop { background: var(--surface); box-shadow: 0 0 0 1px var(--border-2); }
.tile.is-dragging { opacity: .4; }

.tile {
  position: relative;
  padding: 16px 16px 15px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tile[draggable="true"] { cursor: grab; }
.tile:hover { border-color: var(--border-2); box-shadow: var(--tile-lift); }
.tile--warn { box-shadow: inset 2px 0 0 var(--warn); }
.tile--alert { box-shadow: inset 2px 0 0 var(--alert); }
.tile--crit { box-shadow: inset 2px 0 0 var(--crit); }
.tile--warn:hover { box-shadow: inset 2px 0 0 var(--warn), var(--tile-lift); }
.tile--alert:hover { box-shadow: inset 2px 0 0 var(--alert), var(--tile-lift); }
.tile--crit:hover { box-shadow: inset 2px 0 0 var(--crit), var(--tile-lift); }

.tile-link { display: block; color: inherit; }
.tile-link:hover { color: inherit; }
.tile-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tile-top .mono { font-size: 11px; letter-spacing: .04em; color: var(--dim); }
.tile-top .when { margin-left: auto; font-size: 11px; color: var(--dim); font-weight: 600; }
.tile-idle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-idle i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tile-idle--warn { color: var(--warn); }
.tile-idle--alert { color: var(--alert); }
.tile-idle--crit { color: var(--crit); }
.tile-name { font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.tile-sum { margin-top: 8px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.tile-meta {
  display: flex; align-items: center; gap: 7px;
  margin-top: 5px;
  font-size: 12px; color: var(--muted);
  min-width: 0;
}
.tile-sum + .tile-meta { margin-top: 10px; }
.tile-meta .icon { width: 13px; height: 13px; flex: 0 0 13px; color: var(--dim); }
.tile-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Действия — только при наведении: двадцать одинаковых кнопок на экране
   мозолят глаза сильнее, чем помогают. На сенсорных экранах наведения нет,
   там они видны всегда. */
.tile-actions {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; gap: 4px;
  opacity: 0; transform: translateY(3px);
  transition: opacity .18s, transform .18s;
}
/* Фокус — только клавиатурный (:focus-visible). С :focus-within панель
   зависала после отменённого перетаскивания: мышь зажали на ссылке, фокус
   остался в карточке, и кнопки висели до следующего клика. */
.tile:hover .tile-actions, .tile:has(:focus-visible) .tile-actions, .tile:has(.menu[open]) .tile-actions { opacity: 1; transform: none; }
.tile-actions form { margin: 0; display: flex; }
.tile-next {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--ink);
  font: 650 11.5px "Manrope", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: background .15s, border-color .15s;
}
.tile-next:hover { background: var(--surface-3); border-color: var(--muted); }
.tile-next .icon { width: 13px; height: 13px; flex-basis: 13px; }
.tile-more > summary {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.tile-more > summary:hover, .tile-more[open] > summary { color: var(--ink); border-color: var(--muted); }
.tile:has(.tile-actions) .tile-meta { padding-right: 0; }

@media (hover: none) {
  .tile-actions { position: static; opacity: 1; transform: none; margin-top: 12px; }
  .tile-next { flex: 1; justify-content: center; box-shadow: none; }
  .tile-actions form { flex: 1; }
  .tile-more > summary { box-shadow: none; }
}

.stage-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font: 600 13px "Manrope", sans-serif;
  text-align: left;
  cursor: pointer;
}
.stage-opt:hover { background: var(--surface-3); color: var(--ink); }
.stage-opt .dot { width: 7px; height: 7px; flex-basis: 7px; }
.stage-opt small { margin-left: auto; font-size: 11px; color: var(--dim); font-weight: 600; }
.stage-opt.is-current { color: var(--ink); background: var(--surface-2); cursor: default; }

/* --- карточка заказа ---------------------------------------------------- */

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.cols.cols--half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .cols.cols--half { grid-template-columns: minmax(0, 1fr); } }
/* minmax(0, …): иначе широкая таблица сметы раздувает колонку шире экрана. */

.stepper {
  display: flex; gap: 4px;
  padding: 5px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow-x: auto;
}
.stepper form { margin: 0; flex: 1 1 0; display: flex; min-width: 0; }
.step {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 650 12px "Manrope", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.step .dot { width: 7px; height: 7px; flex-basis: 7px; background: var(--dim); }
.step:hover { background: var(--surface-2); color: var(--ink); }
.step.is-done { color: var(--ink-2); }
.step.is-done .dot { background: var(--stage); }
.step.is-current {
  color: var(--ink);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage) 45%, transparent), 0 4px 14px rgba(0, 0, 0, .18);
  cursor: default;
}
.step.is-current .dot { background: var(--stage); box-shadow: 0 0 10px var(--stage); }
.step.is-lost { flex: 0 0 auto; }

.head-stats { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

.facts { display: grid; grid-template-columns: 108px 1fr; gap: 8px 12px; margin: 0; font-size: 13px; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.facts dd.big { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.facts .big-num { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.facts .sep { grid-column: 1 / -1; height: 1px; background: var(--border); margin: 3px 0; }

.money-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 8px; }
.money-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

.line-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.line-form > .dd, .line-form > input, .line-form > select, .line-form > div { width: 100%; min-width: 0; }
.line-form > .dd:nth-of-type(1), .line-form > .dd:nth-of-type(2), .line-form > input[name=name] { grid-column: span 2; }
.line-form .line-note { grid-column: span 2; }
/* У владельца в строке ещё и факт: примечание сжимается, чтобы скидка встала в ряд. */
.line-form:has(input[name=fact_sum]) .line-note { grid-column: span 1; }
.discount-cell { width: 96px; }
.discount-cell .dd-menu { min-width: 240px; }
.discount-cell .dd-btn { min-height: 32px; padding: 5px 9px; font-size: 12.5px; border-color: transparent; background: transparent; }
tr:hover .discount-cell .dd-btn { border-color: var(--border-2); background: var(--surface); }
.net-sum { text-align: right; padding-right: 9px; }
.estimate-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 24px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.estimate-hint span { flex: 1; min-width: 220px; }
.estimate-hint form { margin: 0; }
.pay-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pay-list li { display: flex; align-items: flex-start; gap: 8px; }
.pay-list form { margin: 0 0 0 auto; }
.pay-main { min-width: 0; font-size: 13px; }
.pay-main b { font-weight: 750; margin-right: 4px; }
.pay-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.pay-form > * { min-width: 0; width: 100%; }
.pay-form > input[name=note] { grid-column: 1 / -1; }
.pay-form .btn { grid-column: 1 / -1; }
.line-form .line-submit { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.line-form .line-submit .btn { width: auto; }

input.cell-input { width: 100%; min-width: 0; padding: 6px 8px; font-size: 13.5px; font-weight: 650; border-radius: 8px; background: transparent; border-color: transparent; text-align: right; font-variant-numeric: tabular-nums; }
input.cell-input--text { text-align: left; font-weight: 500; }
tr:hover input.cell-input { border-color: var(--border-2); background: var(--surface); }
input.cell-input:focus { background: var(--surface); border-color: rgba(var(--accent-rgb), .75); }

.diff-up { color: var(--alert); font-weight: 700; }
.diff-down { color: var(--ok); font-weight: 700; }

.layout {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.layout.is-approved { border-color: rgba(52, 211, 153, .45); }
.layout-thumb {
  width: 64px; height: 64px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface-3) center / cover no-repeat;
  border: 1px solid var(--border);
  color: var(--dim);
  font-weight: 800; font-size: 13px;
}
.layout-title { display: flex; align-items: center; gap: 8px; font-weight: 750; }
.layout-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.layout-files { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; font-weight: 650; min-width: 0; }
.layout-files li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.layout-files a { color: var(--accent-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.layout-role { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); min-width: 96px; }
.layout-files--work { margin: 0; }
.layout-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.layout-actions form { display: flex; gap: 6px; margin: 0; }
.layout-actions input { min-width: 190px; padding: 6px 10px; font-size: 12.5px; }

.uploader {
  display: grid; gap: 10px;
  padding: 16px;
  margin-top: 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.uploader-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.uploader-kind { width: 220px; }

/* Зона загрузки: перетащить или выбрать, сразу несколько файлов. */
.dropzone {
  position: relative;
  border-radius: 12px;
  border: 1px dashed var(--border-2);
  background: var(--surface);
  transition: border-color .12s, background .12s;
}
.dropzone.is-ready > input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone:not(.is-ready) > input[type=file] { margin: 12px; }
.dropzone:not(.is-ready) .dropzone-cta { display: none; }
.dropzone.is-over { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.dropzone-cta { display: flex; align-items: center; gap: 14px; padding: 16px 16px; cursor: pointer; }
.dropzone-ico { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .1); color: var(--accent-2); }
.dropzone-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dropzone-text b { font-size: 13.5px; font-weight: 700; }
.dropzone-text span { font-size: 12px; color: var(--muted); }
.dropzone-list { display: grid; gap: 6px; padding: 0 12px 12px; }
.dropzone-error { padding: 0 16px 12px; font-size: 12.5px; color: var(--alert); font-weight: 650; }
.pick {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 8px 8px 8px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
}
.pick-thumb { width: 44px; height: 44px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3) center / cover no-repeat; border: 1px solid var(--border); color: var(--dim); font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.pick-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
/* Имя целиком: длинное переносится на вторую строку, дальше — многоточие. */
.pick-name { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pick-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.pick-role { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 1px; }
.pick-role button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 999px; cursor: pointer; }
.pick-role button.is-on { background: var(--surface-3); color: var(--ink); }
.pick .icon-btn { flex: none; }
.uploader-row > label { font-size: 12.5px; color: var(--muted); font-weight: 650; min-width: 110px; }
.uploader-row input[type=text] { flex: 1; min-width: 200px; }

.file-group { margin-bottom: 16px; }
.file-group-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.file {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  min-width: 0;
}
.file:hover { border-color: var(--border-2); }
.file-ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .14); color: var(--accent-2); font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.file-name { display: block; font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 11.5px; color: var(--muted); }
.file form { margin-left: auto; flex: none; }
.file-body { min-width: 0; flex: 1; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--stage, var(--dim)); box-shadow: 0 0 0 4px var(--surface); }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--border-2); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline b { font-weight: 700; }
.timeline .when { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

.install-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 8px; }
.install-date { text-align: center; min-width: 44px; }
.install-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Погода и состояние выезда — столбиком справа: в узкой колонке карточки
   в одну строку с бригадой они не помещаются. */
.install-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.install-date b { display: block; font-size: 19px; font-weight: 800; line-height: 1; }
.install-date span { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.install-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.install-form .dd, .install-form input { width: 100%; }
.install-form .btn { grid-column: 1 / -1; }

.weather { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.weather-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }

/* --- формы -------------------------------------------------------------- */
/* Форма — это подписи и поля, без абзацев объяснений: пояснение, если оно
   нужно, живёт в значке «?» у подписи. Ширина ограничена, чтобы поля не
   растягивались через весь экран и форма читалась одним взглядом. */

.form-card { max-width: 760px; }
.form-stack { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.form-stack > .card { margin-bottom: 0; }
.form-section { padding: 20px 22px 22px; border-bottom: 1px solid var(--border); }
.form-section:last-of-type { border-bottom: 0; }
.form-section h3 {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-shape-only][hidden] { display: none; }
/* Сумма к оплате под полем скидки — пересчитывается на ходу. */
.money-due { font-size: 13px; color: var(--muted); }
.money-due b { color: var(--ink); font-weight: 750; }
.field > label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.field .req { color: var(--dim); font-weight: 700; margin-left: 1px; }
.field .dd, .field input, .field select, .field textarea { width: 100%; }
.field textarea { min-height: 76px; }
.field .errorlist { margin: 0; padding: 0; list-style: none; color: var(--alert); font-size: 12px; font-weight: 600; }
.field.has-error input, .field.has-error .dd-btn { border-color: rgba(var(--alert-rgb), .6); }
.form-foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); }
.form-foot .spacer { flex: 1; }

/* Подсказка значком: наведи или сфокусируйся — появится текст. */
.hint {
  position: relative;
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-left: 3px;
  border-radius: 50%;
  font-size: 10px; font-weight: 800; line-height: 1;
  color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--border-2);
  cursor: help;
}
.hint:hover, .hint:focus { color: var(--ink); outline: none; }
.hint::after {
  content: attr(data-tip);
  position: absolute; z-index: 40; left: -8px; top: calc(100% + 8px);
  width: max-content; max-width: 280px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.45;
  white-space: normal;
  opacity: 0; transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.hint:hover::after, .hint:focus::after { opacity: 1; transform: none; }
/* Подсказка открывается вниз и вправо от значка — так она не уходит за край
   формы. А сама форма ничего не обрезает: скругления ей обрезка не нужна. */
.form-card.card--flush { overflow: visible; }

/* Переключатель вместо галочки. */
.switch-row { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 2px; }
.field--switch { flex-direction: row; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch-ui {
  position: relative; flex: 0 0 34px;
  width: 34px; height: 20px;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border-2);
  transition: background .18s;
}
.switch-ui::after {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--muted);
  transition: transform .18s, background .18s;
}
.switch input:checked + .switch-ui { background: var(--accent); box-shadow: none; }
.switch input:checked + .switch-ui::after { transform: translateX(14px); background: var(--on-accent); }
.switch input:focus-visible + .switch-ui { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }

/* Профиль. */
.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-name { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.profile-sub { margin-top: 3px; font-size: 12.5px; color: var(--muted); }

/* --- цифры -------------------------------------------------------------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi {
  position: relative;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.kpi-label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); font-weight: 650; }
.kpi-label .icon { width: 16px; height: 16px; color: var(--dim); }
.kpi-value { margin-top: 6px; font-size: 21px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-sub { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.kpi--accent { border-color: rgba(var(--accent-rgb), .4); }
.kpi--accent .kpi-label .icon { color: var(--accent-2); }
.kpi--alert .kpi-value { color: var(--alert); }

.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 190px 1fr 120px; gap: 14px; align-items: center; font-size: 13px; }
.bar-row .bar-name { display: flex; gap: 9px; align-items: center; font-weight: 650; }
/* Длинное имя с аватаркой (nowrap) не должно раздвигать сетку за край карточки. */
.bar-row > * { min-width: 0; }
.bar-track { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--stage, var(--accent)); opacity: .85; min-width: 3px; }
.bar-row .bar-val { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; }
.bar-row .bar-val small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.seg a { padding: 7px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.seg a:hover { color: var(--ink); }
.seg a.is-active { background: var(--surface-3); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }

/* --- график ------------------------------------------------------------- */

.week-wrap { overflow-x: auto; }
.week { display: grid; grid-template-columns: 150px repeat(7, minmax(118px, 1fr)); min-width: 980px; }
.week-cell { padding: 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 150px; }
.week-cell:nth-child(8n) { border-right: 0; }
.week-head { min-height: 0; padding: 14px 12px; background: var(--surface); position: sticky; top: 0; }
.week-head .d { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.week-head .w { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 4px; }
.week-head.is-today .d { color: var(--accent-2); }
.week-head.is-today { box-shadow: inset 0 -2px 0 var(--accent); }
.week-cell.is-today { background: rgba(var(--accent-rgb), .045); }
.week-cell.is-weekend { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.week-crew { background: var(--surface); }
.week-crew b { display: block; font-size: 14px; font-weight: 750; }
.week-crew span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.week-crew .pill-count { margin-top: 10px; }
.slot {
  display: block;
  padding: 9px 10px;
  margin-bottom: 8px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--stage, var(--accent));
  font-size: 12.5px;
  transition: border-color .15s, background .15s;
}
.slot:hover { background: var(--surface-3); color: inherit; }
.slot b { display: block; font-size: 13px; font-weight: 750; color: var(--ink); }
.slot .mono { font-size: 11.5px; }
.slot .slot-place { display: block; color: var(--muted); margin-top: 3px; }
.slot.is-done { opacity: .5; }
.slot-foot { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.slot-foot form { margin: 0; }
.slot-foot .time { font-weight: 700; color: var(--ink-2); }
.slot-foot .icon-btn { width: 26px; height: 26px; margin-left: auto; }

.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.queue-item { padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.queue-item .install-form { margin-top: 12px; }

/* --- вход --------------------------------------------------------------- */

.login-err { padding: 10px 12px; margin-bottom: 16px; border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--alert); background: rgba(var(--alert-rgb), .1); border: 1px solid rgba(var(--alert-rgb), .3); }

/* --- телефон ------------------------------------------------------------ */

.mobile-bar { display: none; }

@media (max-width: 900px) {
  .shell { display: block; }
  .side { position: fixed; z-index: 80; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; background: var(--bg); box-shadow: var(--shadow); }
  body.nav-open .side { transform: none; }
  .mobile-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 70; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
  .mobile-bar b { font-weight: 750; }
  .main { padding: 22px 16px 60px; }
  .page-head { flex-direction: column; gap: 12px; }
  .page-actions { margin-left: 0; justify-content: flex-start; }
  .board { margin-right: -16px; padding-right: 16px; }
  .col { flex-basis: 84vw; }
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .layout { grid-template-columns: 52px 1fr; }
  .layout-actions { grid-column: 1 / -1; }
}

/* Открытое меню стадий должно лежать поверх соседних плиток: у плитки при
   наведении transform, и без z-index её меню уходит под следующую. */
.tile:has(.menu[open]) { z-index: 30; }
.menu.is-up .menu-pop { top: auto; bottom: calc(100% + 6px); }

/* Выпадающий список, который стоит в ячейке один, занимает её целиком. */
div > .dd:only-child { width: 100%; display: block; }

.res-list { list-style: none; margin: 0; padding: 0; }
.res-list li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.res-list li:last-child { border-bottom: 0; }
.res-list li b { margin-left: auto; font-weight: 750; white-space: nowrap; }

/* Приход и пересчёт в строке остатков: в одну линию, иначе таблица
   расползается и колонка названия схлопывается в столбик букв. */
.stock-move { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; margin: 0; }
.stock-move .dd-btn { min-height: 34px; padding: 6px 10px; font-size: 12.5px; }
.stock-move input { width: 70px; padding: 6px 10px; font-size: 13px; }


/* Легенда подсветки простоя — чтобы цвет читался без объяснений. */
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.page-head > div:first-child { min-width: 0; flex: 1; }
.nav-item span:not(.nav-count) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Смета в карточке: колонка слева узкая, поэтому поля ячеек поджаты. */
#estimate table.grid th, #estimate table.grid td { padding-left: 10px; padding-right: 10px; }
#estimate table.grid th:first-child, #estimate table.grid td:first-child { padding-left: 24px; }
#estimate table.grid th:last-child, #estimate table.grid td:last-child { padding-right: 16px; }

.week-crew .pill-count { display: inline-grid; margin-top: 10px; }
.slot-foot .time { white-space: nowrap; }

/* Логотип мастерской — храм контуром, цветом текста и без плашки: на
   плашке в 28 px его линии рассыпались. Лежит маской, поэтому один файл
   работает в обеих темах. Линии в маске утолщены под мелкий размер. */
.logo {
  display: block;
  flex: 0 0 auto;
  width: 34px; height: 40px;
  background: var(--ink);
  -webkit-mask: url("../img/logo-mask.49c8592d2cd9.png") center / contain no-repeat;
  mask: url("../img/logo-mask.49c8592d2cd9.png") center / contain no-repeat;
}
.brand .logo { width: 34px; height: 40px; }

/* Меню списка — по ширине самого длинного пункта, а не кнопки: «Макет на
   согласовании» в две строки читается хуже и даёт лишнюю прокрутку. */
.dd-menu { width: max-content; }
.dd-opt > span { white-space: nowrap; }
.dd-list { max-height: 340px; }

/* --- справочники -------------------------------------------------------- */

.dir { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 16px; align-items: start; }
.dir-nav { position: sticky; top: 16px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.dir-group + .dir-group { margin-top: 12px; }
.dir-group .nav-title { padding: 4px 8px 5px; }
.dir-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--ink-2);
  font-weight: 600; font-size: 12.5px;
}
.dir-item .icon { color: var(--muted); }
.dir-item small { margin-left: auto; font-size: 11px; color: var(--dim); font-weight: 700; }
.dir-item:hover { color: var(--ink); background: var(--surface-2); }
.dir-item.is-active { color: var(--ink); background: rgba(var(--accent-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .2); }
.dir-item.is-active .icon { color: var(--ink); }
.dir-body { min-width: 0; }
@media (max-width: 900px) { .dir { grid-template-columns: 1fr; } .dir-nav { position: static; } }

table.grid--links tbody tr { cursor: pointer; }
table.grid tr.is-muted td { opacity: .55; }


.kit-lines { display: grid; gap: 8px; max-width: 640px; }
.kit-line { display: grid; grid-template-columns: minmax(0, 1fr) 110px 90px; gap: 8px; align-items: center; }
.kit-line--head { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.kit-line input[type=text] { width: 100%; }
.kit-line .errorlist { margin: 4px 0 0; padding: 0; list-style: none; color: var(--alert); font-size: 12px; }
.form-foot .spacer { flex: 1; }
.dir-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- подгрузка без перезагрузки ----------------------------------------- */

/* Тонкая полоса сверху — появляется, только если ответ идёт дольше 120 мс:
   на быстрых переключениях её не видно вовсе, и экран не мигает. */
.loadbar {
  position: fixed; z-index: 200; left: 0; top: 0;
  height: 2px; width: 0;
  background: var(--accent);
  opacity: 0;
  transition: width 1.2s cubic-bezier(.1, .7, .2, 1), opacity .2s;
  pointer-events: none;
}
.loadbar.is-active { width: 80%; opacity: 1; }
/* Скачивание договора: сколько осталось — неизвестно, поэтому полоса бежит
   по кругу, пока файл не готов. */
.loadbar.is-download {
  width: 35%; height: 3px; opacity: 1; transition: none;
  animation: loadbar-run 1.1s ease-in-out infinite;
}
@keyframes loadbar-run { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.btn.is-busy { opacity: .7; cursor: progress; }

.main { transition: opacity .18s ease, transform .18s ease; }
.main.is-loading { opacity: .72; pointer-events: none; }
/* Новый экран появляется мягко, без скачка: переход на другой раздел. */
.main.is-entering { opacity: 0; transform: translateY(4px); }

/* --- страницы списка ---------------------------------------------------- */

.pager { display: flex; align-items: center; gap: 4px; padding: 12px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.pager a, .pager span.pager-cur, .pager span.pager-gap {
  min-width: 30px; height: 30px; padding: 0 9px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 650;
  color: var(--ink-2);
}
.pager a:hover { background: var(--surface-2); color: var(--ink); }
.pager span.pager-cur { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-2); }
.pager span.pager-gap { color: var(--dim); min-width: 18px; padding: 0; }
.pager .pager-info { margin-left: auto; font-size: 12px; color: var(--muted); }
.pager .is-disabled { opacity: .35; pointer-events: none; }


/* --- вход --------------------------------------------------------------- */
/* Слева — полированный габбро-диабаз (бесшовная плитка static/img/granite.jpg)
   с двойной гравированной рамкой, как на плите. Знак и название «высечены»:
   тень сверху тёмная, снизу светлая — так гравировка выглядит на камне.
   Камень тёмный в обеих темах: он и в жизни чёрный. */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(440px, 1fr);
  min-height: calc(100vh / var(--ui-zoom));
  background: var(--surface);
}

.auth-stone {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #16161b url("../img/granite.a27a27a2b141.jpg") repeat;
  background-size: 540px;
  color: #dedee6;
}
.auth-stone::before,
.auth-stone::after {
  content: "";
  position: absolute;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .06);
}
.auth-stone::before { inset: 30px; border: 1px solid rgba(222, 222, 230, .16); }
.auth-stone::after { inset: 38px; border: 1px solid rgba(222, 222, 230, .08); }

.auth-plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .85)) drop-shadow(0 1px 0 rgba(255, 255, 255, .1));
  animation: auth-rise .7s cubic-bezier(.2, .7, .2, 1) both;
}
.auth-logo { width: 118px; height: 138px; background: #dedee6; margin-bottom: 30px; }
.auth-name {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.05;
  color: #e4e4ea;
  padding-left: .16em; /* разрядка съедает правый край — центрируем по буквам */
}
.auth-rule { display: flex; align-items: center; gap: 12px; width: 240px; margin: 22px 0 16px; }
.auth-rule::before, .auth-rule::after { content: ""; flex: 1; height: 1px; background: rgba(222, 222, 230, .32); }
.auth-rule span { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid rgba(222, 222, 230, .6); }
.auth-place {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(222, 222, 230, .62);
  padding-left: .28em;
}
.auth-foot {
  position: absolute; left: 0; right: 0; bottom: 56px;
  text-align: center;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(222, 222, 230, .3);
}

.auth-panel { position: relative; display: grid; place-items: center; padding: 48px 40px 72px; }
.auth-form { width: 100%; max-width: 372px; animation: auth-rise .6s .08s cubic-bezier(.2, .7, .2, 1) both; }
.auth-form h1 { margin: 0 0 30px; text-align: center; font-size: 28px; font-weight: 750; letter-spacing: -.02em; }

.auth-field { display: block; margin-bottom: 18px; }
.auth-label { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > .icon { position: absolute; left: 15px; color: var(--muted); pointer-events: none; transition: color .15s; }
.auth-input input {
  width: 100%;
  height: 50px;
  padding: 0 46px;
  font-size: 15px;
  border-radius: 12px;
  background: var(--surface-2);
}
.auth-input:focus-within > .icon { color: var(--ink); }
.auth-eye {
  position: absolute; right: 8px;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.auth-eye:hover { color: var(--ink); background: var(--surface-3); }
.auth-eye .auth-eye-off { display: none; }
.auth-eye.is-on .auth-eye-on { display: none; }
.auth-eye.is-on .auth-eye-off { display: block; }

.auth-caps { display: flex; align-items: center; gap: 6px; margin: -8px 0 12px; font-size: 12px; font-weight: 650; color: var(--warn); }
.auth-caps[hidden] { display: none; }

.auth-submit { width: 100%; height: 50px; margin-top: 12px; font-size: 14.5px; border-radius: 12px; gap: 10px; }
.auth-submit .icon { transition: transform .2s; }
.auth-submit:hover .icon { transform: translateX(3px); }

.auth-error {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 20px; padding: 11px 13px;
  border-radius: 11px;
  font-size: 13px; font-weight: 600;
  color: var(--alert);
  background: rgba(var(--alert-rgb), .08);
  border: 1px solid rgba(var(--alert-rgb), .3);
  animation: auth-shake .4s ease-in-out;
}
.auth-error .icon { margin-top: 1px; }

.auth-help { margin: 24px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.auth-made { position: absolute; right: 28px; bottom: 24px; font-size: 12px; color: var(--dim); transition: color .15s; }
.auth-made b { font-weight: 700; color: var(--muted); transition: color .15s; }
.auth-made:hover, .auth-made:hover b { color: var(--ink); }

@keyframes auth-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes auth-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .auth-plaque, .auth-form, .auth-error { animation: none; } }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-stone { min-height: 230px; }
  .auth-stone::before { inset: 16px; }
  .auth-stone::after { inset: 22px; }
  .auth-plaque { padding: 36px 20px; }
  .auth-logo { width: 60px; height: 70px; margin-bottom: 14px; }
  .auth-name { font-size: 26px; }
  .auth-rule { width: 160px; margin: 12px 0 10px; }
  .auth-place { font-size: 10.5px; }
  .auth-foot { display: none; }
  .auth-panel { padding: 32px 20px 72px; place-items: start center; }
  .auth-made { left: 0; right: 0; text-align: center; }
}

/* --- телефон: доработки после обхода экранов ---------------------------- */
@media (max-width: 900px) {
  /* Шторка меню — с затемнением: понятно, что нажатие мимо её закроет. */
  .side { width: 280px; flex-basis: 280px; }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 75;
    background: rgba(0, 0, 0, .5);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.nav-open::after { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}

/* --- таблицы на телефоне — карточками ---------------------------------- */
/* Таблица с классом grid--cards на узком экране разворачивается в карточки:
   строка — блок, ячейки — сетка в две колонки. Подпись поля берётся из
   data-label ячейки. Пустая колонка действий прячется. */
@media (max-width: 700px) {
  table.grid--cards thead { display: none; }
  table.grid--cards, table.grid--cards tbody, table.grid--cards tfoot { display: block; }
  /* Название — во всю ширину, текст — тоже во всю ширину с подписью
     сверху, цифры — ячейками по три в ряд, выровненные по левому краю:
     так они читаются столбиком, а не разбегаются по краям. */
  table.grid--cards tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  table.grid--cards tbody tr:last-child { border-bottom: 0; }
  table.grid--cards td {
    display: block;
    grid-column: 1 / -1;
    padding: 0 !important;
    border: 0;
    box-shadow: none !important;
    background: none !important;
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  table.grid--cards td.num, table.grid--cards td.sm-cell { grid-column: auto; text-align: left; }
  table.grid--cards td:empty { display: none; }
  table.grid--cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 3px;
  }
  /* Первая ячейка — название: без подписи. Ручка перетаскивания на телефоне
     спрятана, поэтому «первой» считается и ячейка сразу за ней. */
  table.grid--cards td:first-child::before, table.grid--cards td.drag-cell + td::before { display: none; }
  table.grid--cards td.sm-hide, table.grid--cards td.actions:empty { display: none; }
  table.grid--cards td.sm-full { grid-column: 1 / -1; }
  table.grid--cards td .empty { padding: 16px 0; }
  /* Приход / пересчёт на складе — во всю ширину карточки. */
  .stock-move input { flex: 1; width: auto; min-width: 0; }

  /* Подсветка простоя в карточке — полосой по всей строке. */
  table.grid--cards tr.row--warn { box-shadow: inset 3px 0 0 var(--warn); background: rgba(var(--warn-rgb), .05); }
  table.grid--cards tr.row--alert { box-shadow: inset 3px 0 0 var(--alert); background: rgba(var(--alert-rgb), .06); }
  table.grid--cards tr.row--crit { box-shadow: inset 3px 0 0 var(--crit); background: rgba(var(--crit-rgb), .07); }

  /* Реестр заказов: имя и сумма сверху, стадия и простой ниже. */
  table.grid--orders tr { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
  table.grid--orders td { grid-column: auto; }
  table.grid--orders td.num { text-align: right; }
  table.grid--orders td:first-child { grid-column: 1; order: 1; }
  table.grid--orders td.o-sum { order: 2; align-self: start; font-size: 15px; }
  table.grid--orders td.o-stage { order: 3; }
  table.grid--orders td.o-idle { order: 4; }

  /* Фильтры — во всю ширину, по одному в строку. */
  .toolbar > .dd, .toolbar > .search, .toolbar > label.search { width: 100% !important; min-width: 0; }
  .toolbar .spacer { display: none; }
  .page-actions .btn--primary { flex: 1; }
  .legend { width: 100%; flex-wrap: wrap; gap: 10px 14px; }
}

@media (max-width: 700px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 11px 12px; }
  .kpi-value { font-size: 17px; }
  .kpi-label { font-size: 11.5px; }
  .card { padding: 14px; border-radius: 12px; }
  .card--flush { padding: 0; }
  .card--flush .card-head { padding: 13px 14px 0; }
  .card-head { flex-wrap: wrap; row-gap: 2px; }
  .res-list li { flex-wrap: wrap; }
  .page-head h1 { font-size: 20px; }
  .facts { grid-template-columns: 96px 1fr; }
}

@media (max-width: 700px) {
  /* Стадии заказа листаются вбок, каждая — своей шириной; текущую скрипт
     прокручивает в видимую часть. */
  .stepper { scroll-snap-type: x proximity; }
  .stepper form, .stepper > div { flex: 0 0 auto !important; }
  .step { padding: 8px 12px; }

  /* Новая строка сметы — в две колонки, позиция и комплект во всю ширину. */
  .line-form { grid-template-columns: 1fr 1fr; padding: 14px; }
  .line-form > .dd:nth-of-type(1), .line-form > .dd:nth-of-type(2),
  .line-form > input[name=name], .line-form .line-note { grid-column: 1 / -1; }
  .line-form .line-submit .btn { width: 100%; }

  .install-form { grid-template-columns: 1fr 1fr; }
  .uploader-row > label { min-width: 0; width: 100%; }
  .uploader-kind { width: 100%; }
  .dropzone-cta { flex-wrap: wrap; }
  .dropzone-cta .btn { width: 100%; justify-content: center; }
  .layout-actions input { min-width: 0; flex: 1; }
  .file-grid { grid-template-columns: 1fr; }
}

/* График на телефоне — списком по дням. На широком экране — сеткой. */
.agenda { display: none; padding: 4px 14px; }
.agenda-day { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.agenda-date { min-width: 0; }
.agenda-date em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.agenda-day:last-child { border-bottom: 0; }
.agenda-date > b { display: block; font-size: 20px; font-weight: 800; line-height: 1; }
.agenda-wd { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.agenda-day.is-today .agenda-date > b { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.agenda-day.is-weekend .agenda-date { opacity: .6; }
.agenda-rows .slot { margin-bottom: 6px; }
.agenda-rows .slot:last-child { margin-bottom: 0; }
.agenda-free { font-size: 12.5px; color: var(--dim); line-height: 34px; }

@media (max-width: 700px) {
  .week-card { display: none; }
  .agenda { display: block; }
  .seg { max-width: 100%; overflow-x: auto; }
  .seg a { white-space: nowrap; }
  .bar-row .bar-val small { white-space: nowrap; }
}

@media (max-width: 900px) {
  /* Разделы справочников — строкой, листается вбок. */
  .dir-nav { display: flex; gap: 4px; padding: 5px; overflow-x: auto; border-radius: 12px; scrollbar-width: none; }
  .dir-nav::-webkit-scrollbar { display: none; }
  .dir-group { display: contents; }
  .dir-group .nav-title { display: none; }
  .dir-item { flex: 0 0 auto; white-space: nowrap; padding: 7px 10px; }
  .dir-item span { overflow: visible; }
}

@media (max-width: 700px) {
  /* Карточка справочника нажимается целиком — стрелка «открыть» лишняя. */
  table.grid--links.grid--cards td.actions { display: none; }
  /* Кнопки формы — столбиком во всю ширину. */
  .form-foot { flex-wrap: wrap; padding: 14px; }
  .form-foot .btn { flex: 1 1 100%; }
  .form-foot .spacer { display: none; }
  .form-section { padding: 14px; }
}

/* Закрытое меню списка — невидимо и для раскладки: иначе длинный пункт
   за правым краем раздвигает страницу вбок. */
.dd-menu { max-width: min(420px, calc(100vw / var(--ui-zoom) - 32px)); visibility: hidden; transition: opacity .14s, transform .14s, visibility 0s .14s; }
.dd.is-open .dd-menu { visibility: visible; transition: opacity .14s, transform .14s; }
@media (max-width: 700px) {
  .dd-menu { width: auto; min-width: 100%; }
  .dd-opt > span { white-space: normal; }
}

/* Кнопки при наведении ложатся на строку «менеджер · кладбище» — строку
   приглушаем, чтобы текст не просвечивал из-под кнопок. */
@media (hover: hover) {
  .tile-meta { transition: opacity .18s; }
  .tile:hover .tile-meta, .tile:has(:focus-visible) .tile-meta { opacity: .15; }
}
@media (max-width: 700px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .hint::after { max-width: min(280px, calc(100vw - 48px)); }
}

/* Перетаскивание строк справочника за ручку слева. */
table.grid th.drag-col, table.grid td.drag-cell { width: 1%; padding-right: 0 !important; }
.drag-handle { display: inline-grid; place-items: center; width: 22px; height: 26px; border-radius: 6px; color: var(--dim); cursor: grab; }
.drag-handle:hover { color: var(--ink); background: var(--surface-3); }
.drag-handle:active { cursor: grabbing; }
tbody[data-sortable] tr.is-dragging td { opacity: .45; }
@media (max-width: 700px) { table.grid--cards td.drag-cell { display: none; } }

/* Закрепление менеджеров за офисом. */
.assign-list { display: grid; gap: 6px; }
.assign {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.assign:hover { border-color: var(--border-2); }
.assign:has(input:checked) { border-color: var(--border-2); background: var(--surface-3); }
.assign .switch { order: 3; margin-left: auto; }
.assign-text b { display: block; font-size: 13px; font-weight: 650; }
.assign-text small { display: block; font-size: 12px; color: var(--muted); }

/* Фото в кружке аватарки. */
img.avatar { object-fit: cover; padding: 0; }
.avatar-upload { margin: 0; }
.avatar-upload label { position: relative; display: block; cursor: pointer; border-radius: 50%; }
.avatar-cam {
  position: absolute; right: -2px; bottom: -2px;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 0 3px var(--surface);
  transition: transform .15s;
}
.avatar-upload label:hover .avatar-cam { transform: scale(1.08); }
.avatar-upload label:hover .avatar { filter: brightness(.85); }

/* Доска тянется мышью за фон, как карта. */
.board { cursor: grab; }
.board .tile { cursor: grab; }
.board.is-panning { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.board.is-panning * { cursor: grabbing !important; }

/* Страница вбок не прокручивается ни при каких условиях: всё широкое
   (доска, таблицы, график) листается внутри себя. Без этого перетаскивание
   к краю или фокус на поле у правого края сдвигали весь экран, и меню
   слева уезжало за край. clip, а не hidden, — иначе ломается липкое меню. */
.shell { overflow-x: clip; }
.main { min-width: 0; overflow-x: clip; }

/* --- фильтры отчётов --------------------------------------------------- */
.filter-panel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.date-range {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 6px 0 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: border-color .15s, box-shadow .15s;
}
.date-range.is-active { border-color: var(--border-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-2); }
.date-range input[type=date] {
  width: 128px; height: 28px; padding: 0 6px;
  border: 0; background: transparent; box-shadow: none;
  font-size: 12.5px; font-weight: 650; color: var(--ink);
}
.date-range input[type=date]:focus { box-shadow: none; background: var(--surface-2); }
.date-range input[type=date]::-webkit-calendar-picker-indicator { opacity: .5; }
@media (max-width: 700px) {
  .date-range { width: 100%; }
  .date-range input[type=date] { flex: 1; width: auto; }
  .filter-row > .dd { width: 100%; }
}

/* Шесть цифр сводки — ровными рядами, без одинокой карточки во втором. */
.kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1280px) { .kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kpis--6 { grid-template-columns: 1fr 1fr; } }

/* Карточка с формой не обрезает выпадающие списки: смета внизу карточки,
   и меню позиций уходило под её край. Скругления держит таблица внутри. */
.card--flush:has(.line-form, form .dd) { overflow: visible; }
.card--flush:has(.line-form) > .table-wrap:first-of-type { border-radius: 14px 14px 0 0; }

/* Вкладки над списком: «В работе» и «Архив». */
.tabs { display: flex; gap: 22px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.tab { position: relative; padding: 0 0 11px; font-size: 13.5px; font-weight: 650; color: var(--muted); }
.tab span { margin-left: 5px; font-size: 12px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); }
.tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.stage-opt .icon { color: var(--muted); }

/* --- окно (причина отказа) --------------------------------------------- */
.modal {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: visible;
}
.modal::backdrop { background: rgba(0, 0, 0, .55); }
.modal[open] { animation: pop .16s ease-out; }
.modal-body { display: flex; flex-direction: column; gap: 14px; padding: 22px; margin: 0; }
.modal-body h2 { margin: 0 0 2px; font-size: 16px; font-weight: 750; }
.modal-error { font-size: 12px; font-weight: 600; color: var(--alert); }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.modal--ask { width: min(420px, calc(100vw / var(--ui-zoom) - 32px)); }
.modal-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; }
.btn--danger-solid { background: var(--alert); border-color: var(--alert); color: #fff; }
.btn--danger-solid:hover { filter: brightness(1.08); color: #fff; }
/* Остаток к оплате — жёлтым, переплата — красным. */
.debt-due { color: var(--warn); font-weight: 700; }
.debt-over { color: var(--alert); font-weight: 700; }
.tag--loss { color: var(--alert); border-color: rgba(var(--alert-rgb), .3); }

/* --- погода -------------------------------------------------------------
   OpenWeather, свои значки. Цвет здесь приглушённый: янтарь солнца и
   серо-голубой дождя не спорят с подсветкой простоя — та по-прежнему
   единственное яркое на экране. «Лучше перенести» — красным, как «пора
   звонить»: это тоже повод взять трубку. */

:root,
.theme-dark {
  --wx-sun: #dcb466;
  --wx-moon: #c9ced8;
  --wx-cloud: #8e9199;
  --wx-cloud-2: #5d6068;
  --wx-rain: #7fa4cc;
  --wx-snow: #dde6f0;
}
.theme-light {
  --wx-sun: #d19a2e;
  --wx-moon: #8f97a6;
  --wx-cloud: #aeb2bb;
  --wx-cloud-2: #7e838d;
  --wx-rain: #4a7fb8;
  --wx-snow: #93aac4;
}

.wx { display: block; flex: none; overflow: visible; }
.wx-rays, .wx-cloud, .wx-drop, .wx-flake, .wx-fog { transform-box: view-box; }

.wx--anim .wx-rays { animation: wx-spin 36s linear infinite; }
.wx--anim .wx-cloud { animation: wx-drift 6s ease-in-out infinite alternate; }
.wx--anim .wx-cloud--back { animation-duration: 8s; animation-direction: alternate-reverse; }
.wx--anim .wx-drop { animation: wx-fall 1.15s linear infinite; }
.wx--anim .wx-flake { animation: wx-flake 2.6s ease-in-out infinite; }
.wx--anim .wx-bolt { animation: wx-flash 3.4s ease-in-out infinite; }
.wx--anim .wx-fog { animation: wx-fog 4.5s ease-in-out infinite alternate; }
.wx--anim .wx-moon { animation: wx-glow 5s ease-in-out infinite alternate; }

@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-drift { from { transform: translateX(-.8px); } to { transform: translateX(.9px); } }
@keyframes wx-fall {
  0% { transform: translate(.6px, -2.5px); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(-1px, 3.5px); opacity: 0; }
}
@keyframes wx-flake {
  0% { transform: translate(-.6px, -2.5px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(.8px, 3.5px); opacity: 0; }
}
@keyframes wx-flash { 0%, 78%, 100% { opacity: 1; } 82% { opacity: .15; } 86% { opacity: 1; } 90% { opacity: .3; } }
@keyframes wx-fog { from { transform: translateX(-1.6px); } to { transform: translateX(1.6px); } }
@keyframes wx-glow { from { opacity: .82; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wx--anim * { animation: none !important; } }

/* Главная карточка над графиком: сейчас — слева, сутки и пять дней — справа. */
.wx-hero { display: grid; grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); padding: 0; overflow: hidden; }
.wx-now { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-right: 1px solid var(--border); }
.wx-now-top { display: flex; align-items: center; gap: 14px; }
.wx-now-icon { margin: -6px -4px -6px -8px; }
.wx-place { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wx-place .icon { width: 13px; height: 13px; }
.wx-now-temp { font-size: 50px; font-weight: 800; letter-spacing: -.045em; line-height: 1; margin: 6px 0; }
.wx-now-text { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.wx-now-text span { color: var(--muted); font-weight: 600; }

.wx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.wx-stats > div { padding: 9px 11px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.wx-stats dt { font-size: 10.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.wx-stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.wx-stats dd small { margin-left: 5px; font-size: 11.5px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.wx-stat-note { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-arrow { width: 12px; height: 12px; flex: none; }

.wx-verdict { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-radius: 11px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); border: 1px solid transparent; }
.wx-verdict i { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 6px; }
.wx-verdict b { color: var(--ink); font-weight: 750; }
.wx-verdict--ok { background: rgba(52, 211, 153, .07); border-color: rgba(52, 211, 153, .16); }
.wx-verdict--ok i { background: var(--ok); }
.wx-verdict--warn { background: color-mix(in srgb, var(--wx-rain) 10%, transparent); border-color: color-mix(in srgb, var(--wx-rain) 24%, transparent); }
.wx-verdict--warn i { background: var(--wx-rain); }
.wx-verdict--bad { background: rgba(var(--alert-rgb), .08); border-color: rgba(var(--alert-rgb), .22); }
.wx-verdict--bad i { background: var(--alert); }

.wx-side { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; min-width: 0; }

/* Сутки по часам: колонки, а под ними линия температуры. */
.wx-hours {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  padding: 10px 4px 58px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border);
}
.wx-hour { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.wx-hour-time { font-size: 11px; font-weight: 700; color: var(--muted); }
.wx-hour b { font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.wx-hour-pop { min-height: 15px; font-size: 10.5px; font-weight: 700; color: var(--dim); }
.wx-hour.is-wet .wx-hour-pop { color: var(--wx-rain); }
.wx-chart { position: absolute; left: 4px; right: 4px; bottom: 10px; height: 40px; }
.wx-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wx-chart-area { fill: rgba(var(--accent-rgb), .05); }
.wx-chart-line { fill: none; stroke: var(--wx-sun); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .8; }
.wx-chart i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--wx-sun); transform: translate(-50%, -50%); }

/* Пять дней вперёд. */
.wx-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.wx-day {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 12px 11px;
  border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .15s, transform .15s;
}
.wx-day:hover { border-color: var(--border-2); transform: translateY(-1px); }
.wx-day.is-today { box-shadow: inset 0 2px 0 var(--accent); }
.wx-day--bad { border-color: rgba(var(--alert-rgb), .22); }
.wx-day-name { font-size: 12.5px; font-weight: 750; text-transform: capitalize; }
.wx-day-name span { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; }
.wx-day-icon { margin: 2px 0 0 -3px; }
.wx-day-temp b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.wx-day-temp span { margin-left: 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
.wx-day-text {
  font-size: 11.5px; line-height: 1.35; color: var(--muted); min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wx-day-rain { display: grid; gap: 4px; }
.wx-day-rain small { font-size: 11px; font-weight: 650; color: var(--muted); }
.wx-bar { display: block; height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.wx-bar i { display: block; height: 100%; border-radius: 99px; background: var(--wx-rain); }
.wx-day-mark { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
.wx-day-mark i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ok); }
.wx-day--warn .wx-day-mark { color: var(--ink-2); }
.wx-day--warn .wx-day-mark i { background: var(--wx-rain); }
.wx-day--bad .wx-day-mark { color: var(--alert); }
.wx-day--bad .wx-day-mark i { background: var(--alert); }

/* Плашка дня: в шапке недели, у выезда, в списке на телефоне. */
.wx-chip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; line-height: 1.5; white-space: nowrap;
}
.wx-chip b { font-weight: 750; }
.wx-chip small { font-size: 11px; font-weight: 650; color: var(--muted); }
.wx-chip i { position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--surface); box-sizing: content-box; }
.wx-chip--warn i { background: var(--wx-rain); }
.wx-chip--bad { border-color: rgba(var(--alert-rgb), .3); }
.wx-chip--bad i { background: var(--alert); }
.week-head-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; }
.agenda-date .wx-chip { margin-top: 6px; max-width: 100%; }

.slot-wx { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1px solid; }
.slot-wx--warn { border-color: color-mix(in srgb, var(--wx-rain) 40%, transparent); background: color-mix(in srgb, var(--wx-rain) 10%, transparent); }
.slot-wx--bad { border-color: rgba(var(--alert-rgb), .4); background: rgba(var(--alert-rgb), .1); }

/* Подсказка у поля даты выезда. */
.date-wx {
  grid-column: 1 / -1; flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  padding: 7px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px;
}
.date-wx[hidden] { display: none; }
.date-wx b { font-weight: 750; }
.date-wx span { color: var(--muted); }
.date-wx em { flex-basis: 100%; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ok); }
.date-wx--warn em { color: var(--wx-rain); }
.date-wx--bad { border-color: rgba(var(--alert-rgb), .3); }
.date-wx--bad em { color: var(--alert); }

/* Погода на выезд в карточке заказа. */
.wx-install { margin-top: 16px; padding: 13px 14px 14px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--border); }
.wx-install-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wx-install-head .weather-label { margin: 0; }
.wx-install-src { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.wx-install-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin-top: 8px; }
.wx-install-temp b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.wx-install-temp span { margin-left: 6px; font-size: 14px; font-weight: 650; color: var(--muted); }
.wx-install-text { font-size: 12.5px; color: var(--ink-2); }
.wx-install-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin: 8px 0 0; }
.wx-install-stats > div { padding: 7px 9px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); }
.wx-install-stats dt { font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.wx-install-stats dd { margin: 1px 0 0; font-size: 13px; font-weight: 750; }
.wx-install-stats small { font-weight: 650; color: var(--muted); }
.wx-install .wx-verdict { margin-top: 10px; }
.wx-install-empty { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* Погода в меню — всегда под рукой, ведёт в график. */
.side-wx {
  display: grid; grid-template-columns: 26px auto minmax(0, 1fr); align-items: center; gap: 8px;
  margin: 14px 8px 0; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  transition: border-color .15s;
}
.side-wx:hover { border-color: var(--border-2); }
.side-wx b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.side-wx span { min-width: 0; font-size: 12px; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.side-wx small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1180px) {
  .wx-hero { grid-template-columns: minmax(0, 1fr); }
  .wx-now { border-right: 0; border-bottom: 1px solid var(--border); }
  .wx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wx-days { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 700px) {
  .wx-now, .wx-side { padding: 16px; }
  .wx-stats { grid-template-columns: 1fr 1fr; }
  .wx-now-temp { font-size: 44px; }
  .wx-hours { padding-left: 0; padding-right: 0; }
  .wx-hour b { font-size: 12.5px; }
  .wx-hour .wx { width: 22px; height: 22px; }
}

/* --- точка погоды: выбор над графиком ------------------------------------ */
.wx-pick { display: flex; align-items: center; gap: 8px; margin: 0; }
.wx-pick .dd { min-width: 0; flex: 1; }
.wx-pick .dd-btn { width: 100%; }
.wx-pick .dd-btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.wx-pick-now { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wx-install-place { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.wx-install-place .icon { width: 13px; height: 13px; color: var(--muted); }
.wx-install-place small { font-weight: 600; color: var(--muted); font-size: 11.5px; }
.wx-install-place a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-2); }

/* --- место на карте ------------------------------------------------------ */
.map-pick { position: relative; margin-top: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); overflow: visible; }
.map-search { position: absolute; z-index: 500; top: 10px; left: 10px; right: 10px; max-width: 420px; }
.map-search > .icon { position: absolute; left: 11px; top: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; z-index: 1; }
.map-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font: inherit; }
.map-results { margin-top: 6px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.map-results[hidden] { display: none; }
.map-results button { display: block; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.map-results button:last-child { border-bottom: 0; }
.map-results button:hover { background: var(--surface-3); }
.map-results b { display: block; font-weight: 750; }
.map-own { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--muted); font-size: 10.5px; font-style: normal; font-weight: 700; }
.map-results span { font-size: 11.5px; color: var(--muted); }
.map-empty { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.map-canvas { height: 340px; border-radius: 13px 13px 0 0; background: var(--surface-3); z-index: 1; }
.map-pick.is-offline .map-canvas { display: none; }
.map-pick.is-offline .map-foot { border-top: 0; }
.map-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 6px 8px 6px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.map-coords { font-variant-numeric: tabular-nums; }
.map-foot [hidden] { display: none; }
.theme-dark .map-tiles { filter: invert(1) hue-rotate(180deg) grayscale(.55) brightness(.82) contrast(.92); }
.theme-light .map-tiles { filter: grayscale(.35) contrast(.95); }
.map-near { padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.map-near[hidden] { display: none; }
.map-near-title { margin-bottom: 7px; font-size: 10.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.map-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .15s, background .15s; }
.map-chip b { font-weight: 700; }
.map-chip span { font-size: 11.5px; color: var(--muted); }
.map-chip:hover { border-color: var(--accent); }
.map-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.map-chip.is-on span { color: inherit; opacity: .7; }
.map-near-note { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* Leaflet в тон интерфейсу. */
.map-pick .leaflet-container { font: inherit; background: var(--surface-3); }
.map-pick .leaflet-control-zoom { border: 1px solid var(--border-2) !important; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.map-pick .leaflet-control-zoom a { background: var(--surface); color: var(--ink); border-color: var(--border); }
.map-pick .leaflet-control-zoom a:hover { background: var(--surface-3); }
.map-pick .leaflet-top.leaflet-left { top: 52px; }
.map-pick .leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--dim); font-size: 10px; }
.map-pick .leaflet-control-attribution a { color: var(--muted); }
.map-place { fill: var(--surface); fill-opacity: 1; stroke: var(--wx-sun); stroke-width: 2.5; }
.map-place--home { fill: var(--wx-sun); stroke: var(--surface); }
.map-tip { padding: 2px 7px; border-radius: 7px; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2); font-size: 11px; font-weight: 700; box-shadow: none; }
.map-tip::before { display: none; }
.map-pin i { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--accent), 0 6px 16px rgba(0, 0, 0, .45); }
.map-pin { cursor: grab; }

@media (max-width: 700px) {
  .map-canvas { height: 280px; }
}

.route-link { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.route-link:hover { color: var(--ink); }
.route-link .icon { width: 13px; height: 13px; }

/* У даты нет погоды — тихая подпись, почему: прогноз ещё не дошёл или
   день прошёл до подключения погоды. */
.wx-gap { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--border-2); font-size: 11px; font-weight: 650; color: var(--dim); white-space: nowrap; }
.agenda-date .wx-gap { margin-top: 6px; }

/* --- табель ------------------------------------------------------------- */

.ts-wrap { margin-top: 12px; }
.ts { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.ts th, .ts td { border-bottom: 1px solid var(--border); padding: 0; }
.ts thead th { padding: 8px 0; font-weight: 600; color: var(--muted); }
.ts-person {
  position: sticky; left: 0; z-index: 1;
  min-width: 210px; max-width: 240px; padding: 10px 14px 10px 22px !important;
  text-align: left; background: var(--surface); font-weight: 500;
}
.ts-person .person { display: flex; }
.ts-offices { display: block; margin-top: 4px; font-size: 11.5px; color: var(--dim); line-height: 1.35; }
.ts-mark-key { font-weight: 750; color: var(--muted); }
.ts-row-actions { display: flex; gap: 10px; margin-top: 6px; }
.ts-row-actions form { margin: 0; }
.ts-day { min-width: 32px; text-align: center; }
.ts-day b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 700; }
.ts-day span { display: block; font-size: 10.5px; text-transform: lowercase; }
.ts-day.is-weekend b, .ts-day.is-weekend span { color: var(--dim); }
.ts-day.is-today b { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.ts-cell-td { text-align: center; }
.ts-cell-td.is-weekend { background: var(--hover-veil); }
.ts-cell {
  width: 30px; height: 30px; margin: 3px 1px; padding: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px dashed var(--border-2); background: transparent;
  font: inherit; color: var(--on-accent); line-height: 1;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.ts-cell b { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ts-cell small { font-size: 8.5px; font-weight: 700; margin-top: 1px; opacity: .7; }
.ts-cell:hover { border-color: var(--muted); }
.ts-cell.is-on { background: var(--accent); border: 1px solid var(--accent); }
/* Неполный или длинный день — контуром, чтобы отличался от обычных восьми часов. */
.ts-cell.is-on.is-part { background: transparent; color: var(--ink); border: 1.5px solid var(--accent); }
.ts-cell.is-busy { opacity: .5; }
.ts-pop {
  position: fixed; z-index: 80; width: 236px; padding: 12px;
  border-radius: 14px; border: 1px solid var(--border-2); background: var(--surface);
  box-shadow: var(--shadow); animation: pop .14s ease-out;
}
.ts-pop[hidden] { display: none; }
.ts-pop-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.ts-pop-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.ts-chip { padding: 7px 0; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.ts-chip:hover { border-color: var(--accent); }
.ts-pop-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ts-pop-row[hidden] { display: none; }
.ts-pop-row input, .ts-pop-row select { width: 100%; min-width: 0; padding: 7px 9px; font-size: 13px; }
.ts-pop-row input.is-error { border-color: rgba(var(--alert-rgb), .7); }
.ts-pop-actions { display: flex; gap: 6px; margin-top: 4px; }
.ts-pop-actions .btn--primary { flex: 1; }
.ts-sum { min-width: 56px; padding: 0 22px 0 10px !important; font-weight: 750; text-align: right; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink); }
.pay-details { margin-top: 6px; font-size: 12px; }
.pay-details summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.pay-details ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pay-details li { display: flex; gap: 8px; align-items: baseline; }
.pay-details li b { margin-left: auto; font-weight: 700; }

/* --- договор и смета к печати ----------------------------------------- */

/* Смета — таблица в восемь колонок: форме документов нужна вся ширина. */
.form-card.doc-form { max-width: 1440px; }
.doc-form .form-section > .form-grid { max-width: 716px; }
.doc-note { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; color: var(--muted); }
.doc-note--warn { border-color: rgba(var(--warn-rgb), .4); }
.doc-form .form-section .card-note { margin-top: 10px; }
.doc-rows td { vertical-align: middle; }
.doc-section { width: 168px; }
.doc-section .dd, .doc-section .dd-btn { width: 100%; }
/* Сумма строки считается сама — выглядит как текст, а не поле. */
input.cell-input--calc { pointer-events: none; border-color: transparent !important; background: transparent !important; color: var(--ink); }
.doc-rows td:nth-child(2) { min-width: 220px; }
.doc-rows td:nth-child(3), .doc-rows td:nth-child(4) { min-width: 110px; }
.doc-section .dd-btn { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.doc-rows-foot { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.doc-totals { margin: 0 0 0 auto; display: grid; grid-template-columns: auto 140px; gap: 6px 14px; align-items: center; font-size: 13px; }
.doc-totals dt { color: var(--muted); font-weight: 600; text-align: right; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.doc-totals dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.doc-totals dd.strong { font-size: 15px; font-weight: 800; }
.doc-discount-label { width: 210px; padding: 6px 9px; font-size: 12.5px; }
.doc-mismatch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--warn); }
.doc-mismatch[hidden] { display: none; }
.layout-pick { display: flex; flex-wrap: wrap; gap: 12px; }
.layout-opt { position: relative; display: flex; flex-direction: column; gap: 8px; width: 150px; padding: 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 12.5px; font-weight: 650; }
.layout-opt input { position: absolute; opacity: 0; pointer-events: none; }
.layout-opt img, .layout-opt-empty { width: 100%; height: 150px; object-fit: contain; border-radius: 8px; background: var(--surface-3); }
.layout-opt-empty { display: grid; place-items: center; color: var(--dim); }
.layout-opt small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.layout-opt:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .25); }
.doc-foot { flex-wrap: wrap; gap: 14px; }
.doc-foot-group { display: inline-flex; align-items: center; gap: 8px; padding-right: 14px; border-right: 1px solid var(--border); }
.doc-foot-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 760px) {
  .doc-totals { margin-left: 0; width: 100%; grid-template-columns: 1fr 120px; }
  .doc-discount-label { width: 100%; }
  .doc-foot-group { border-right: 0; padding-right: 0; }
}

/* --- новый заказ: смета справа ------------------------------------------ */

.order-new { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 380px); gap: 14px; align-items: start; }
.order-new > .form-card { max-width: none; margin: 0; }
.new-lines { position: sticky; top: 14px; }
.nl-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nl-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.nl-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.nl-name small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.nl-sum { font-size: 13px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nl-empty { padding: 8px 0 14px; }
.nl-empty[hidden], .nl-totals[hidden], .new-lines .card-note[hidden] { display: none; }
.nl-add { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.nl-add > * { width: 100%; min-width: 0; }
.nl-add-row { display: grid; grid-template-columns: 70px 70px minmax(0, 1fr); gap: 8px; }
.nl-add-row input { min-width: 0; width: 100%; }
.nl-totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 14px 0 0; font-size: 13px; }
.nl-totals dt { color: var(--muted); font-weight: 600; }
.nl-totals dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.nl-totals dd.strong { font-size: 15px; font-weight: 800; }
input[readonly][name=gross_amount] { color: var(--muted); }
@media (max-width: 1180px) {
  .order-new { grid-template-columns: minmax(0, 1fr); }
  .new-lines { position: static; }
}

/* --- календарь -------------------------------------------------------------- */

.dp { position: relative; display: block; width: 100%; }
.field .dp, .pay-form .dp { width: 100%; }
.dp-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; pointer-events: none; border: 0 !important; }
input.dp-field { width: 100%; padding-right: 34px; font-variant-numeric: tabular-nums; }
.dp-icon { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.dp-icon:hover { color: var(--ink); background: var(--surface-3); }
.dp-pop {
  position: absolute; z-index: 70; left: 0; top: calc(100% + 6px);
  width: 268px; padding: 10px;
  border-radius: 14px; border: 1px solid var(--border-2); background: var(--surface);
  box-shadow: var(--shadow); display: none;
}
.dp.is-open { z-index: 90; }
.dp.is-open .dp-pop { display: block; animation: pop .14s ease-out; }
.dp.is-up .dp-pop { top: auto; bottom: calc(100% + 6px); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-head b { font-size: 13.5px; font-weight: 750; }
.dp-nav { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.dp-nav:hover { background: var(--surface-3); color: var(--ink); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; }
.dp-day {
  height: 32px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.dp-day:hover { background: var(--surface-3); }
.dp-day.is-weekend, .dp-wd.is-weekend { color: var(--muted); }
.dp-day.is-other { color: var(--dim); font-weight: 500; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px var(--border-2); }
.dp-day.is-chosen, .dp-day.is-chosen:hover { background: var(--accent); color: var(--on-accent); }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
/* В «период» сводок — поле без рамки, как было у системного. */
.date-range .dp { width: 116px; }
.date-range input.dp-field { height: 28px; padding: 0 28px 0 6px; border: 0; background: transparent; box-shadow: none; font-size: 12.5px; font-weight: 650; }
.date-range input.dp-field:focus { background: var(--surface-2); box-shadow: none; }
.date-range .dp-pop { left: auto; right: 0; }