/* ============================================================
   СУП «МОНОЛИТ» — стили приложения
   Токены, каркас, компоненты. Прототип-2: функциональная версия.
   ============================================================ */

:root{
  --steel:#EDEFF1; --surface:#FFFFFF; --surface2:#F6F8F9;
  --ink:#1F262C; --ink2:#5C6870; --line:#D9DEE3;
  --ember:#E4570A; --ember-deep:#B04106; --ember-tint:#FDEEE3;
  --ok:#1F7A4D; --ok-tint:#E3F2EA;
  --warn:#8F5D06; --warn-tint:#FBF1DC;
  --danger:#C03A2B; --danger-deep:#96291C; --danger-tint:#FAE7E4;
  --info:#2C5F84; --info-tint:#E8F0F6;
  --shadow-1: 0 1px 2px rgba(31,38,44,.06), 0 4px 14px rgba(31,38,44,.05);
  --shadow-2: 0 2px 4px rgba(31,38,44,.07), 0 10px 28px rgba(31,38,44,.09);
}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* hidden обязан работать поверх классов с display:flex/grid */
[hidden]{ display:none !important; }
body{
  font-family:"Golos Text",sans-serif; background:var(--steel); color:var(--ink);
  font-size:14px; line-height:1.55;
}
::selection{ background:var(--ember-tint); }

/* ---------- fallback-утилиты (работают, если Tailwind CDN недоступен;
   при живом CDN его runtime-стили ложатся позже и перекрывают эти) ---------- */
.grid{ display:grid; } .flex{ display:flex; } .flex-col{ flex-direction:column; }
.gap-4{ gap:1rem; } .mt-4{ margin-top:1rem; } .mb-4{ margin-bottom:1rem; }
.grid-cols-1{ grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:640px){
  .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:768px){
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1280px){
  .xl\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .xl\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .xl\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .xl\:col-span-2{ grid-column:span 2/span 2; }
}

/* ---------- каркас ---------- */
.app{ display:grid; grid-template-columns:236px minmax(0,1fr); height:100vh; }
.main-col{ display:flex; flex-direction:column; min-width:0; }
.content{ overflow-y:auto; flex:1; padding:24px 28px 48px; }
.content-inner{ max-width:1400px; margin:0 auto; }

/* ---------- сайдбар ---------- */
.sidebar{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto;
}
.brand{ padding:20px 18px 16px; position:relative; border-bottom:1px solid var(--line); }
.brand::after{ /* двойная линия — как рамка чертёжного штампа */
  content:""; position:absolute; left:0; right:0; bottom:3px; height:1px; background:var(--line);
}
.brand-row{ display:flex; align-items:center; gap:11px; }
.brand-mark{
  width:38px; height:38px; flex:none; background:var(--ink); color:#fff;
  font-family:Unbounded,sans-serif; font-weight:600; font-size:17px;
  display:flex; align-items:center; justify-content:center; border-radius:6px;
  position:relative; overflow:hidden;
}
.brand-mark::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:repeating-linear-gradient(45deg, var(--ember) 0 5px, transparent 5px 10px);
}
.brand-name{ font-family:Unbounded,sans-serif; font-weight:600; font-size:15px; letter-spacing:.04em; }
.brand-sub{ font-size:10.5px; color:var(--ink2); letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }

.nav{ padding:14px 10px; flex:1; }
.nav-eyebrow{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2);
  padding:0 10px 8px;
}
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 10px; border-radius:6px; color:var(--ink2);
  font-size:13.5px; font-weight:500; position:relative; text-align:left;
  transition:background-color .12s ease, color .12s ease; cursor:pointer;
}
.nav-item + .nav-item{ margin-top:2px; }
.nav-item svg{ width:19px; height:19px; flex:none; }
.nav-item:hover{ background:var(--surface2); color:var(--ink); }
.nav-item:active{ transform:translateY(1px); }
.nav-item.active{ background:var(--ember-tint); color:var(--ember-deep); font-weight:600; }
.nav-item.active::before{ /* цеховая разметка — маркер активного раздела */
  content:""; position:absolute; left:-10px; top:6px; bottom:6px; width:4px; border-radius:2px;
  background:repeating-linear-gradient(45deg, var(--ember) 0 4px, var(--ink) 4px 8px);
}
.nav-code{ margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--ink2); opacity:.7; }
.nav-item.active .nav-code{ color:var(--ember-deep); opacity:.9; }

.sidebar-user{
  border-top:1px solid var(--line); padding:14px 16px; display:flex; align-items:center; gap:10px;
}
.sidebar-user-name{ font-size:13px; font-weight:600; line-height:1.3; }
.sidebar-user-role{ font-size:11px; color:var(--ink2); }
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--surface2);
  border:1px solid var(--line); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; flex:none;
}
.ver-tag{
  margin:0 16px 14px; padding:5px 9px; border:1px dashed var(--line); border-radius:5px;
  font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--ink2);
}

/* ---------- верхняя панель ---------- */
.topbar{
  height:56px; flex:none; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 28px;
}
.search{
  flex:1; max-width:420px; display:flex; align-items:center; gap:9px;
  background:var(--surface2); border:1px solid var(--line); border-radius:6px;
  padding:7px 12px; color:var(--ink2);
}
.search input{ background:transparent; border:0; outline:0; width:100%; font-size:13px; color:var(--ink); }
.search input::placeholder{ color:var(--ink2); }
.search:focus-within{ border-color:var(--ember); background:var(--surface); }
.shift-tag{
  font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink2);
  border:1px solid var(--line); border-radius:5px; padding:4px 9px; white-space:nowrap;
}
.date-now{ font-size:12.5px; color:var(--ink2); white-space:nowrap; }
.icon-btn{
  width:36px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  color:var(--ink2); position:relative; transition:background-color .12s ease,color .12s ease;
  cursor:pointer; background:transparent; border:0;
}
.icon-btn:hover{ background:var(--surface2); color:var(--ink); }
.icon-btn:active{ transform:translateY(1px); }
.icon-btn .dot{
  position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%;
  background:var(--ember); border:1.5px solid var(--surface);
}

/* ---------- заголовки разделов ---------- */
.view-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.form-code{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  color:var(--ink2); text-transform:uppercase; margin-bottom:6px;
}
.view-title{ font-family:Unbounded,sans-serif; font-weight:500; font-size:21px; letter-spacing:-.01em; }

/* ---------- карточки/поверхности ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow-1);
}
.card-head{
  padding:13px 16px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card-title{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2); }
.card-pad{ padding:4px 16px 10px; }
.link{
  color:var(--ember-deep); font-size:12.5px; font-weight:600; cursor:pointer;
  border-radius:4px; transition:color .12s ease; background:transparent; border:0;
  font-family:inherit;
}
.link:hover{ color:var(--ember); text-decoration:underline; text-underline-offset:3px; }

/* KPI */
.kpi{ padding:16px 18px 15px; position:relative; overflow:hidden; }
.kpi-label{ font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2); }
.kpi-value{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:30px; line-height:1.15; margin-top:8px; letter-spacing:-.02em; }
.kpi-value small{ font-size:15px; font-weight:500; color:var(--ink2); margin-left:2px; }
.kpi-note{ font-size:12px; color:var(--ink2); margin-top:4px; }
.kpi-note b{ font-weight:600; }
.kpi.danger::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:repeating-linear-gradient(45deg, var(--danger) 0 5px, var(--ink) 5px 10px);
}
.kpi.danger .kpi-value{ color:var(--danger-deep); }
.up{ color:var(--ok); font-weight:600; }
.down{ color:var(--danger); font-weight:600; }

/* бейджи статусов */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:2.5px 8px; border-radius:4px; white-space:nowrap;
}
.badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge.new{ background:var(--info-tint); color:var(--info); }
.badge.prod{ background:var(--ember-tint); color:var(--ember-deep); }
.badge.ready{ background:var(--ok-tint); color:var(--ok); }
.badge.shipped{ background:#EBEEF0; color:#4B565E; }
.badge.overdue{ background:var(--danger-tint); color:var(--danger-deep); }
.badge.deficit{ background:var(--danger-tint); color:var(--danger-deep); }
.badge.norm{ background:var(--ok-tint); color:var(--ok); }
.badge.instock{ background:var(--warn-tint); color:var(--warn); }

/* таблицы-«ведомости» */
.table-scroll{ overflow-x:auto; }
table.sheet{ width:100%; border-collapse:collapse; font-size:13px; }
table.sheet th{
  background:var(--surface2); text-align:left; padding:9px 11px;
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.sheet td{ padding:10px 11px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.sheet tbody tr:last-child td{ border-bottom:0; }
table.sheet tbody tr{ transition:background-color .12s ease; }
table.sheet tbody tr:hover{ background:var(--surface2); }
.mono{ font-family:"JetBrains Mono",monospace; font-size:12.5px; }
table.sheet td.mono{ white-space:nowrap; }
.num{ font-family:"JetBrains Mono",monospace; font-size:12.5px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
th.num{ text-align:right; }
.cell-sub{ font-size:11.5px; color:var(--ink2); margin-top:1px; }
.date-overdue{ color:var(--danger-deep); font-weight:600; }
tr.row-deficit td:first-child{ box-shadow:inset 4px 0 0 0 var(--danger); }
.num-deficit{ color:var(--danger-deep); font-weight:700; }

/* колонка действий: остаётся у правого края при горизонтальной прокрутке таблицы */
table.sheet th.act, table.sheet td.act{
  position:sticky; right:0; z-index:1;
  background:var(--surface); box-shadow:-8px 0 8px -8px rgba(31,38,44,.18);
}
table.sheet th.act{ background:var(--surface2); }
table.sheet tbody tr:hover td.act{ background:var(--surface2); }

/* марка стали — чип */
.grade{
  font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500;
  background:var(--surface2); border:1px solid var(--line); border-radius:4px;
  padding:1.5px 6px; white-space:nowrap;
}

/* прогресс */
.bar{ height:5px; background:var(--line); border-radius:3px; overflow:hidden; min-width:48px; }
.bar i{ display:block; height:100%; background:var(--ink); border-radius:3px; }
.bar i.hot{ background:var(--ember); }
.bar-row{ display:flex; align-items:center; gap:9px; }
.bar-pct{ font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--ink2); min-width:30px; text-align:right; }
.bar-row{ min-width:86px; }

/* чипы-фильтры */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font-size:12.5px; font-weight:500; padding:6px 12px; border-radius:6px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink2);
  cursor:pointer; transition:background-color .12s ease, color .12s ease, border-color .12s ease;
  font-family:inherit;
}
.chip .mono{ font-size:11px; margin-left:4px; opacity:.75; }
.chip[data-filter]:hover{ border-color:var(--ink2); color:var(--ink); }
.chip[data-filter]:active{ transform:translateY(1px); }
.chip.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip.static{ cursor:default; }
.chip.static.chip-danger{ border-color:var(--danger); color:var(--danger-deep); }

/* кнопки */
.btn-primary{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--ember); color:#fff; font-weight:600; font-size:13px;
  padding:9px 16px; border-radius:6px; box-shadow:0 1px 2px rgba(176,65,6,.35), 0 4px 12px rgba(228,87,10,.25);
  transition:background-color .12s ease, transform .1s ease; cursor:pointer; border:0;
  font-family:inherit;
}
.btn-primary:hover{ background:var(--ember-deep); }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary:disabled{ opacity:.55; cursor:not-allowed; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  font-weight:500; font-size:13px; padding:8.5px 14px; border-radius:6px;
  transition:background-color .12s ease; cursor:pointer; font-family:inherit;
}
.btn-ghost:hover{ background:var(--surface2); }
.btn-ghost:active{ transform:translateY(1px); }
.btn-danger{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--danger); color:#fff; font-weight:600; font-size:13px;
  padding:9px 16px; border-radius:6px; border:0; cursor:pointer; font-family:inherit;
  transition:background-color .12s ease, transform .1s ease;
}
.btn-danger:hover{ background:var(--danger-deep); }
.btn-danger:active{ transform:translateY(1px); }

/* мини-кнопки действий в строках/карточках */
.row-actions{ display:flex; gap:4px; justify-content:flex-end; align-items:center; }
.mini-btn{
  width:26px; height:26px; border-radius:5px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; line-height:1; font-family:inherit;
  transition:background-color .12s ease, color .12s ease, border-color .12s ease;
}
.mini-btn svg{ width:13px; height:13px; }
.mini-btn:hover{ background:var(--surface2); color:var(--ink); border-color:var(--ink2); }
.mini-btn:active{ transform:translateY(1px); }
.mini-btn.accent{ color:var(--ember-deep); border-color:var(--ember); }
.mini-btn.accent:hover{ background:var(--ember-tint); }
.mini-btn.danger:hover{ background:var(--danger-tint); color:var(--danger-deep); border-color:var(--danger); }
.mini-btn.wide{ width:auto; padding:0 8px; font-size:11px; font-weight:600; }

/* канбан производства */
.kanban{ display:grid; grid-template-columns:repeat(4,minmax(240px,1fr)); gap:16px; }
.kcol{ background:var(--surface2); }
.kcol-head{ padding:12px 14px 10px; border-bottom:1px solid var(--line); }
.kcol-title{ display:flex; align-items:center; justify-content:space-between; }
.kcol-name{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.kcol-count{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink2); }
.kcol-load{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.kcol-load .bar{ flex:1; }
.kcards{ padding:12px; display:flex; flex-direction:column; gap:10px; min-height:60px; }
.kcard{
  background:var(--surface); border:1px solid var(--line); border-radius:7px;
  padding:11px 13px; box-shadow:var(--shadow-1); position:relative; overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease;
}
.kcard:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.kcard-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.kcard-id{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink2); }
.kcard-name{ font-size:13px; font-weight:600; line-height:1.35; }
.kcard-meta{ font-size:11.5px; color:var(--ink2); margin-top:4px; }
.kcard-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.kcard-actions{ display:flex; gap:4px; margin-top:9px; padding-top:9px; border-top:1px solid var(--line); }
.kcard-actions .spacer{ flex:1; }
.kcard.overdue::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:repeating-linear-gradient(45deg, var(--danger) 0 5px, var(--ink) 5px 10px);
}
.crew{ font-size:11px; color:var(--ink2); }

/* участковые полосы на сводке */
.load-row{ display:grid; grid-template-columns:150px 1fr 44px; align-items:center; gap:12px; padding:9px 0; }
.load-row + .load-row{ border-top:1px solid var(--line); }
.load-name{ font-size:13px; font-weight:500; }
.load-sub{ font-size:11px; color:var(--ink2); }

/* предупреждения */
.alert-item{ display:flex; gap:10px; padding:10px 0; align-items:flex-start; }
.alert-item + .alert-item{ border-top:1px solid var(--line); }
.alert-ico{ width:26px; height:26px; border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center; }
.alert-ico.danger{ background:var(--danger-tint); color:var(--danger-deep); }
.alert-ico.warn{ background:var(--warn-tint); color:var(--warn); }
.alert-ico svg{ width:14px; height:14px; }
.alert-text{ font-size:12.5px; line-height:1.45; }
.alert-text b{ font-weight:600; }
.alert-text .cell-sub{ margin-top:1px; }

/* движения по складу */
.move-item{ display:flex; align-items:baseline; gap:10px; padding:9px 0; }
.move-item + .move-item{ border-top:1px solid var(--line); }
.move-qty{ font-family:"JetBrains Mono",monospace; font-size:12.5px; font-weight:700; min-width:74px; text-align:right; white-space:nowrap; }
.move-qty.in{ color:var(--ok); }
.move-qty.out{ color:var(--ink); }
.move-text{ font-size:12.5px; flex:1; }
.move-actions{ display:flex; gap:4px; align-self:center; }

/* клиенты */
.client-card{ padding:16px 18px; transition:box-shadow .15s ease, transform .15s ease; }
.client-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.client-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.client-name{ font-size:14.5px; font-weight:600; line-height:1.3; }
.client-inn{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink2); margin-top:3px; }
.client-contact{ font-size:12.5px; color:var(--ink2); margin-top:10px; line-height:1.6; }
.client-contact .mono{ color:var(--ink); }
.client-foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  border-top:1px solid var(--line); margin-top:12px; padding-top:11px; font-size:12px; color:var(--ink2);
}
.client-foot span{ white-space:nowrap; }
.client-foot b{ font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ink); font-weight:700; }
.client-actions{ display:flex; gap:4px; margin-top:12px; }

/* отчёты */
.chart-wrap{ padding:14px 16px 12px; }
.chart-note{ font-size:11.5px; color:var(--ink2); }
.hbar-row{ display:grid; grid-template-columns:190px 1fr 64px; align-items:center; gap:12px; padding:8px 0; }
.hbar-row + .hbar-row{ border-top:1px solid var(--line); }
.hbar-track{ height:14px; background:var(--surface2); border-radius:4px; overflow:hidden; }
.hbar-fill{ height:100%; background:var(--ink); border-radius:0 4px 4px 0; border-right:2px solid var(--surface); }
.hbar-name{ font-size:12.5px; font-weight:500; }
#chartTip{
  position:fixed; z-index:50; pointer-events:none; display:none;
  background:var(--ink); color:#fff; font-size:12px; padding:6px 9px; border-radius:5px;
  box-shadow:var(--shadow-2); white-space:nowrap;
}
#chartTip .mono{ color:#fff; }

/* пустые состояния */
.empty-state{
  padding:22px 16px; text-align:center; color:var(--ink2); font-size:12.5px;
}

/* ---------- экран входа ---------- */
.login-screen{
  position:fixed; inset:0; z-index:200; background:var(--steel);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-screen::before{ /* цеховая разметка по верхней кромке */
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:repeating-linear-gradient(45deg, var(--ember) 0 8px, var(--ink) 8px 16px);
}
.login-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow-2); padding:28px 28px 22px;
}
.login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.login-title{ font-family:Unbounded,sans-serif; font-weight:600; font-size:17px; letter-spacing:.04em; }
.login-sub{ font-size:11px; color:var(--ink2); letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }
.login-form{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.login-error{
  display:none; background:var(--danger-tint); color:var(--danger-deep);
  font-size:12.5px; font-weight:500; border-radius:6px; padding:8px 11px;
}
.login-error.show{ display:block; }
.login-hint{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink2); line-height:1.6;
}
.login-hint .mono{ font-size:11px; }
.login-disclaimer{ margin-top:10px; font-size:10.5px; color:var(--ink2); opacity:.8; line-height:1.5; }

/* ---------- поля форм ---------- */
.field{ display:flex; flex-direction:column; gap:5px; }
.field-label{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:13.5px; color:var(--ink);
  background:var(--surface2); border:1px solid var(--line); border-radius:6px;
  padding:8px 11px; outline:0; width:100%;
  transition:border-color .12s ease, background-color .12s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--ember); background:var(--surface);
}
.field input[readonly]{ color:var(--ink2); background:var(--surface2); cursor:default; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--danger); }
.field-error{ display:none; font-size:11.5px; color:var(--danger-deep); }
.field.invalid .field-error{ display:block; }
.field-hint{ font-size:11px; color:var(--ink2); }

.form-error{
  display:none; background:var(--danger-tint); color:var(--danger-deep);
  font-size:12.5px; font-weight:500; border-radius:6px; padding:8px 11px;
}
.form-error.show{ display:block; }

/* ---------- модальные окна ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(31,38,44,.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding:6vh 16px 16px; overflow-y:auto;
}
.modal{
  width:100%; max-width:460px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow-2);
}
.modal.wide{ max-width:560px; }
.modal-head{
  padding:14px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.modal-title{ font-size:14.5px; font-weight:700; }
.modal-body{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.modal-body .cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-foot{
  padding:13px 18px; border-top:1px solid var(--line);
  display:flex; justify-content:flex-end; gap:8px;
}
.modal-text{ font-size:13.5px; line-height:1.55; }

/* ---------- тосты ---------- */
.toast-wrap{
  position:fixed; right:18px; bottom:18px; z-index:300;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}
.toast{
  background:var(--ink); color:#fff; font-size:12.5px; font-weight:500;
  padding:10px 14px; border-radius:7px; box-shadow:var(--shadow-2);
  max-width:340px; display:flex; align-items:center; gap:8px;
  animation:toast-in .18s ease;
}
.toast.ok{ background:var(--ok); }
.toast.danger{ background:var(--danger); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

/* баннер деградации хранилища */
.storage-banner{
  background:var(--warn-tint); color:var(--warn); font-size:12px; font-weight:500;
  padding:7px 28px; border-bottom:1px solid var(--line);
}

/* ---------- доступность и прочее ---------- */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--ember); outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}

/* ---------- адаптив ---------- */
@media (max-width: 1100px){
  .kanban{ grid-template-columns:repeat(2,minmax(240px,1fr)); }
}
@media (max-width: 900px){
  .app{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr; height:100vh; }
  .sidebar{ border-right:0; border-bottom:1px solid var(--line); overflow:visible; min-width:0; max-width:100%; }
  .nav{ min-width:0; display:flex; overflow-x:auto; padding:8px 10px; gap:4px; }
  .brand{ padding:12px 16px; }
  .brand::after{ display:none; }
  .nav-eyebrow{ display:none; }
  .nav-item{ white-space:nowrap; width:auto; }
  .nav-item + .nav-item{ margin-top:0; }
  .nav-item.active::before{ left:6px; right:6px; top:auto; bottom:0; width:auto; height:3px; }
  .nav-code{ display:none; }
  .sidebar-user, .ver-tag{ display:none; }
  .topbar{ padding:0 16px; gap:10px; }
  .shift-tag, .date-now{ display:none; }
  .content{ padding:18px 16px 40px; }
  .load-row{ grid-template-columns:120px 1fr 40px; }
  .hbar-row{ grid-template-columns:130px 1fr 56px; }
  .modal-body .cols-2{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .kanban{ grid-template-columns:minmax(0,1fr); }
}