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

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

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

@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; }
.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); }
.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-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; }
.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); }
.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: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: flex-start;
  overflow-x: auto;
  padding: 2px 2px 28px;
  scroll-snap-type: x proximity;
}
.col { flex: 0 0 268px; min-width: 0; scroll-snap-align: start; }
/* 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;
}
.tile:hover .tile-actions, .tile:focus-within .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); } }
/* 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 .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 .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 { display: flex; gap: 12px; margin-top: 6px; font-size: 12.5px; font-weight: 650; }
.layout-files a { color: var(--accent-2); }
.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 dashed var(--border-2);
  background: var(--surface-2);
}
.uploader-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.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 { 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; }
.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-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; }
.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; }
.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: 1fr 90px; }
  .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; }

.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: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    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;
    padding: 0 !important;
    border: 0;
    box-shadow: none !important;
    background: none !important;
    min-width: 0;
  }
  table.grid--cards td.num { text-align: right; }
  table.grid--cards td:first-child { grid-column: 1 / -1; }
  table.grid--cards td[data-label]:not(:first-child)::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: 2px;
  }
  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; }

  /* Подсветка простоя в карточке — полосой по всей строке. */
  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 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%; }
  .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: 52px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.agenda-day:last-child { border-bottom: 0; }
.agenda-date b { display: block; font-size: 20px; font-weight: 800; line-height: 1; }
.agenda-date span { 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:focus-within .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; }
.tag--loss { color: var(--alert); border-color: rgba(var(--alert-rgb), .3); }