:root{
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --surface-2:#F2F4F7;
  --border:#E4E7EC;
  --border-strong:#D0D5DD;
  --ink:#0F1322;
  --ink-2:#475467;
  --ink-3:#667085;
  --accent:#0B5FFF;
  --accent-soft:#E7EEFF;
  --accent-ink:#0847C4;
  --success:#0E8F5D;
  --success-soft:#E3F5EC;
  --warn:#B26B00;
  --warn-soft:#FFF3DB;
  --danger:#C0362C;
  --danger-soft:#FBE4E1;
  --violet:#6938EF;
  --sans:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-2: 0 4px 6px -2px rgba(16,24,40,.05), 0 12px 16px -4px rgba(16,24,40,.08);
  --shadow-pop: 0 24px 48px -12px rgba(16,24,40,.18);
}
html[data-theme="dark"]{
  --bg:#0B0D12; --surface:#12151C; --surface-2:#181C24;
  --border:#242933; --border-strong:#2F3641;
  --ink:#ECEFF4; --ink-2:#AEB4C2; --ink-3:#7E8594;
  --accent:#4C86FF; --accent-soft:#172446; --accent-ink:#A8C1FF;
  --success:#3DB783; --success-soft:#13271E;
  --warn:#F2B857; --warn-soft:#2A1E07;
  --danger:#E26A60; --danger-soft:#2A1311;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-pop: 0 30px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-feature-settings:"ss01","cv11";}
body{min-height:100vh}
.num, .mono{font-family:var(--mono); font-variant-numeric: tabular-nums}
a{color:inherit}

/* ====== APP CHROME ====== */
.app{display:grid;grid-template-rows:56px 1fr;height:100vh}
.topbar{display:flex;align-items:center;gap:16px;padding:0 20px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:5}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;font-size:16px}
.logo .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg, var(--accent) 0%, #7BA8FF 100%);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.nav{display:flex;gap:2px;margin-left:10px}
.nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r-md);color:var(--ink-2);font-weight:500;font-size:13.5px;text-decoration:none;cursor:pointer}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.on{background:var(--surface-2);color:var(--ink);font-weight:600}
.top-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.sync{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:12px;color:var(--ink-2)}
.sync .dot{width:6px;height:6px;border-radius:999px;background:var(--success)}
.sync.warn .dot{background:var(--warn)}
.sync.err .dot{background:var(--danger)}
.avatar{width:30px;height:30px;border-radius:999px;background:linear-gradient(135deg,#C3D6FF,#7BA8FF);color:#0b2f75;font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-strong)}
.icon-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{color:var(--ink);background:var(--surface-2)}

/* workspace */
.workspace{display:grid;grid-template-columns:240px 1fr;min-height:0;position:relative;transition:grid-template-columns .18s cubic-bezier(.2,.8,.2,1)}
.workspace.side-collapsed{grid-template-columns:56px 1fr}
.side{position:relative;border-right:1px solid var(--border);background:var(--surface);padding:12px 10px;overflow:auto;overflow-x:hidden}
.side h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:14px 8px 6px;font-weight:700;white-space:nowrap}
.side .item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-md);color:var(--ink-2);font-size:13.5px;cursor:pointer;position:relative;white-space:nowrap}
.side .item:hover{background:var(--surface-2);color:var(--ink)}
.side .item.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.side .item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.side .item .count{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.side .item.on .count{color:var(--accent-ink)}
.side .item .ic{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;opacity:.9;flex:0 0 16px}
.side .star{color:#F2B857}

/* sidebar toggle button (on the seam between sidebar and main) */
.side-toggle{position:absolute;top:14px;left:229px;width:22px;height:22px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:4;box-shadow:var(--shadow-1);transition:left .18s cubic-bezier(.2,.8,.2,1), background .1s, color .1s}
.side-toggle:hover{background:var(--surface-2);color:var(--ink)}
.side-toggle .i{width:12px;height:12px;transition:transform .18s}
.workspace.side-collapsed .side-toggle{left:45px}
.workspace.side-collapsed .side-toggle .i{transform:rotate(180deg)}

/* collapsed sidebar */
.workspace.side-collapsed .side{padding:12px 6px}
.workspace.side-collapsed .side h4{height:0;margin:8px 0;padding:0;overflow:hidden;visibility:hidden;border-top:1px dashed var(--border)}
.workspace.side-collapsed .side h4:first-of-type{border-top:0;margin-top:0}
.workspace.side-collapsed .side .item{padding:8px 0;justify-content:center;gap:0;border-radius:var(--r-md)}
.workspace.side-collapsed .side .item .lbl{display:none}
.workspace.side-collapsed .side .item .count{
  position:absolute;top:2px;right:2px;margin:0;
  background:var(--surface-2);color:var(--ink-2);
  font-size:10px;line-height:1;padding:2px 5px;border-radius:999px;
  font-family:var(--sans);font-weight:600;
  border:1px solid var(--border)
}
.workspace.side-collapsed .side .item.on .count{background:var(--accent);color:#fff;border-color:var(--accent)}

.main{overflow:auto;display:flex;flex-direction:column;min-width:0}

/* page header */
.page-hd{display:flex;align-items:center;gap:14px;padding:18px 22px 10px}
.page-hd h1{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:0}
.page-hd .muted{color:var(--ink-2);font-size:13.5px}
.page-hd .spacer{flex:1}

/* segmented */
.seg{display:inline-flex;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);border-radius:6px;cursor:pointer}
.seg button.on{background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-1)}
html[data-theme="dark"] .seg button.on{background:var(--border)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .1s}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.danger{color:var(--danger);border-color:var(--border)}
.kbd{font-family:var(--mono);font-size:10.5px;padding:1px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;color:var(--ink-2);background:var(--surface-2)}

/* toolbar */
.toolbar{display:flex;align-items:center;gap:10px;padding:10px 22px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:3;flex-wrap:wrap}
.search{flex:1;min-width:220px;max-width:460px;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}
.search input{flex:1;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);outline:none}
.search .kbd{margin-left:auto}
.search svg{color:var(--ink-3)}

/* presets row */
.presets{display:flex;gap:6px;align-items:center;padding:10px 22px;overflow-x:auto;border-bottom:1px solid var(--border);background:var(--surface);transition:padding .15s}
.preset{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.preset:hover{background:var(--surface-2);color:var(--ink)}
.preset.on{background:var(--accent);color:#fff;border-color:var(--accent)}
html[data-theme="dark"] .preset.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.preset .dot{width:6px;height:6px;border-radius:999px;background:var(--accent)}
.preset .count{font-family:var(--mono);font-size:11px;opacity:.7}
.preset-del,.preset-side-del{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:2px;padding:0;border:none;border-radius:999px;background:transparent;color:inherit;font-size:12px;line-height:1;cursor:pointer;opacity:.55;flex-shrink:0}
.preset-del:hover,.preset-side-del:hover{opacity:1;background:rgba(0,0,0,.08)}
.preset.on .preset-del:hover{background:rgba(255,255,255,.2)}
.preset-side-del{margin-left:auto}
.side .item{position:relative}
.preset.add{border-style:dashed;color:var(--ink-3)}
.presets-divider{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0}
/* collapsed state */
.presets-toggle{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px dashed var(--border);background:transparent;color:var(--ink-3);border-radius:var(--r-md);font:inherit;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap}
.presets-toggle:hover{color:var(--ink);border-color:var(--border-strong);background:var(--surface-2)}
.presets-toggle svg{transition:transform .15s}
.presets.collapsed .presets-toggle svg{transform:rotate(180deg)}
.presets-collapsed-label{display:none;align-items:center;gap:8px;color:var(--ink-2);font-size:12.5px;font-weight:500}
.presets-collapsed-label b{color:var(--ink);font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums}
.presets-collapsed-label .on-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;font-size:11.5px}
.presets-collapsed-label .on-tag .dot{width:6px;height:6px;border-radius:999px;background:#fff;opacity:.85}
.presets.collapsed{padding:6px 22px}
.presets.collapsed > .preset,
.presets.collapsed > .presets-divider{display:none}
.presets.collapsed .presets-collapsed-label{display:inline-flex}

/* filter row */
.filter-row{display:flex;gap:8px;padding:10px 22px;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap;align-items:center}
.flt{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);font-size:12.5px;color:var(--ink);cursor:pointer;min-height:32px}
.flt:hover{border-color:var(--border-strong)}
.flt .l{color:var(--ink-2);font-weight:500}
.flt .v{font-weight:600}
.flt .v[hidden]{display:none}
.filter-row .flt[hidden]{display:none !important}
.flt.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.flt .caret{color:var(--ink-3)}
.flt.clear{color:var(--ink-2)}

/* active chips */
.chips{display:flex;gap:6px;padding:8px 22px;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:11.5px;font-weight:600;border:1px solid transparent}
.chip .x{opacity:.7;cursor:pointer}
.chip.count{background:var(--surface-2);color:var(--ink-2)}
.chips .muted{color:var(--ink-3);font-size:12px}

/* table */
.table-wrap{flex:1;overflow:auto;background:var(--bg)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tbl thead th{position:sticky;top:0;background:var(--surface);color:var(--ink-2);font-weight:600;font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;z-index:2}
.tbl thead th.c{text-align:center}
.tbl thead th.sortable{cursor:pointer;user-select:none}
.tbl thead th.sortable::after{content:"↕";margin-left:6px;color:var(--ink-3);font-size:10px;opacity:.45}
.tbl thead th.sort-active{color:var(--ink)}
.tbl thead th.sort-active[data-sort-dir="asc"]::after{content:"↑";opacity:1;color:var(--accent)}
.tbl thead th.sort-active[data-sort-dir="desc"]::after{content:"↓";opacity:1;color:var(--accent)}
.tbl tbody td{padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface);vertical-align:middle;white-space:nowrap}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl tbody tr.sel td{background:var(--accent-soft)}
.tbl tbody tr.sel td:first-child{box-shadow: inset 3px 0 0 var(--accent)}
.tbl .c{text-align:center}
.tbl td.num{font-family:var(--mono);font-variant-numeric: tabular-nums; font-size:12.5px}
.tbl .muted{color:var(--ink-3)}
.tbl .strong{font-weight:600}
.tbl .wagon-id{font-family:var(--mono);font-weight:600;letter-spacing:.02em}
/* #2: жирные вертикальные границы между столбцами */
.tbl thead th{border-right:2px solid var(--border)}
.tbl tbody td{border-right:2px solid var(--border)}
.tbl thead th:last-child,
.tbl tbody td:last-child{border-right:0}
/* #8: визуальная обратная связь при перетаскивании заголовков колонок */
.tbl thead th.col-dragging{opacity:.45}
.tbl thead th.col-drop-target{box-shadow:inset 2px 0 0 var(--accent)}
.tbl.tbl--activity thead th,
.tbl.tbl--activity tbody td{white-space:normal}
.tbl.tbl--activity thead th:last-child,
.tbl.tbl--activity tbody td:last-child{min-width:120px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid transparent;line-height:1.5}
.badge .d{width:6px;height:6px;border-radius:999px}
.badge.g{background:var(--success-soft);color:var(--success)}
.badge.g .d{background:var(--success)}
.badge.y{background:var(--warn-soft);color:var(--warn)}
.badge.y .d{background:var(--warn)}
.badge.r{background:var(--danger-soft);color:var(--danger)}
.badge.r .d{background:var(--danger)}
.badge.b{background:var(--accent-soft);color:var(--accent-ink)}
.badge.b .d{background:var(--accent)}
.badge.n{background:var(--surface-2);color:var(--ink-2);border-color:var(--border)}
.badge.n .d{background:var(--ink-3)}

/* days cell */
.days{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.days .pip{width:6px;height:6px;border-radius:999px}
.days.ok .pip{background:var(--success)}
.days.warn .pip{background:var(--warn)}
.days.bad .pip{background:var(--danger)}
.days.bad{color:var(--danger)}

/* checkboxes */
.cbx{width:16px;height:16px;border:1.5px solid var(--border-strong);border-radius:4px;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.cbx.ck{background:var(--accent);border-color:var(--accent)}
.cbx.ck::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.cbx.ix{background:var(--accent);border-color:var(--accent)}
.cbx.ix::after{content:"";width:8px;height:2px;background:#fff}

/* selection dock */
.dock{position:sticky;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:10px 22px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-2);flex-wrap:wrap}
.dock.hidden{display:none}
.dock .title{font-weight:700;font-size:14px}
.dock .meta{color:var(--ink-2);font-size:12.5px}
.dock .pulse{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 0 rgba(11,95,255,.4);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(11,95,255,.35)}70%{box-shadow:0 0 0 10px rgba(11,95,255,0)}100%{box-shadow:0 0 0 0 rgba(11,95,255,0)}}

/* popovers / dropdowns */
.pop{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:6px;min-width:240px;max-width:calc(100vw - 16px);box-sizing:border-box;z-index:30;display:none}
.pop.open{display:block}
.pop .pop-title{padding:8px 10px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.pop .opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);font-size:13px;cursor:pointer}
.pop .opt:hover{background:var(--surface-2)}
.pop .opt.is-added{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.pop .opt.is-added:hover{background:var(--accent-soft);filter:brightness(.97)}
html[data-theme="dark"] .pop .opt.is-added:hover{filter:brightness(1.08)}
.pop .opt .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.pop .sep{height:1px;background:var(--border);margin:4px 0}
.pop .search-inline{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--border);margin:-6px -6px 6px}
.pop .search-inline input{flex:1;border:0;background:transparent;outline:none;font:inherit;font-size:13px;color:var(--ink)}
.pop .pop-opts{max-height:min(320px,50vh);overflow-y:auto;overscroll-behavior:contain}
.pop .pop-empty{padding:12px 10px;font-size:13px;color:var(--ink-3);text-align:center}
.pop .pop-loading{padding:12px 10px;font-size:13px;color:var(--ink-3);text-align:center}
.pop .opt.hidden{display:none}
.hidden-col{display:none}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(15,19,34,.48);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:40}
.scrim.open{display:flex}
.modal{width:560px;max-width:calc(100% - 32px);background:var(--surface);border-radius:var(--r-xl);border:1px solid var(--border);box-shadow:var(--shadow-pop);padding:22px}
.modal h3{margin:0 0 4px;font-size:18px;font-weight:700}
.modal .sub{color:var(--ink-2);font-size:13.5px;margin-bottom:14px}
.modal .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.modal label{font-size:12px;font-weight:600;color:var(--ink-2)}
.modal input[type="text"]{font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);outline:none}
.modal input[type="text"]:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.modal .field{position:relative}
.modal .assign-suggest{position:absolute;left:0;right:0;top:66px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-pop);z-index:60;max-height:220px;overflow:auto;display:none}
.modal .assign-suggest.open{display:block}
.modal .assign-suggest .opt{padding:8px 10px;font-size:13px;cursor:pointer}
.modal .assign-suggest .opt:hover{background:var(--surface-2)}
.modal .assign-suggest .empty{padding:8px 10px;font-size:12px;color:var(--ink-3)}
.modal .ckrow{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13px;padding:6px 0}
.modal .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--border)}
.modal .hint{color:var(--ink-3);font-size:12px;margin-top:-6px;margin-bottom:6px}

/* theme toggle */
.theme-sw{display:inline-flex;border:1px solid var(--border);border-radius:999px;background:var(--surface);padding:2px}
.theme-sw button{border:0;background:transparent;font:inherit;font-size:12px;color:var(--ink-2);padding:5px 10px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.theme-sw button.on{background:var(--surface-2);color:var(--ink);font-weight:600}

/* tweaks panel */
.tw{position:fixed;right:16px;bottom:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:14px 16px;width:260px;font-size:13px;display:none;z-index:90}
.tw.on{display:block}
.tw h5{margin:0 0 8px;font-size:14px;font-weight:700}
.tw label{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
.tw label:last-of-type{border-bottom:0}

/* step nav for prototype flow */
.flow-switcher{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px;box-shadow:var(--shadow-2);z-index:60}
.flow-switcher button{border:0;background:transparent;padding:6px 12px;font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.flow-switcher button.on{background:var(--ink);color:var(--surface)}
html[data-theme="dark"] .flow-switcher button.on{background:var(--ink);color:var(--surface)}
.flow-switcher .num{font-family:var(--mono);opacity:.6;font-size:10.5px}

/* toast */
.toast{position:fixed;top:70px;right:20px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--success);border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--shadow-2);font-size:13px;z-index:70;min-width:280px;display:none}
.toast.open{display:block}
.toast .t{font-weight:700;margin-bottom:2px}
.toast .m{color:var(--ink-2)}
.toast.err{border-left-color:var(--danger)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:padding-box;border:2px solid transparent}
*::-webkit-scrollbar-track{background:transparent}

/* owner avatar pills */
.owner{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.owner .av{width:18px;height:18px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border:1px solid var(--border)}

/* tiny icon */
.i{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:12px;height:12px}
.i-lg{width:18px;height:18px;stroke-width:1.6}

/* ====== DRAWER: wagon card ====== */
.drawer-scrim{position:fixed;inset:0;background:rgba(15,19,34,.38);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s;z-index:50}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(860px,92vw);background:var(--bg);border-left:1px solid var(--border);box-shadow:var(--shadow-pop);transform:translateX(100%);transition:transform .22s cubic-bezier(.2,.8,.2,1);z-index:55;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.dr-hd{display:flex;align-items:flex-start;gap:14px;padding:18px 22px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.dr-hd .close{margin-left:auto}
.dr-hd .wagon-num{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.dr-hd .wagon-sub{color:var(--ink-2);font-size:13px;margin-top:2px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dr-hd .wagon-sub .dotsep{width:3px;height:3px;border-radius:999px;background:var(--ink-3)}
.dr-hd .wagon-icon{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center}
.dr-hd .wagon-icon svg{width:24px;height:24px;stroke-width:1.6}
.dr-hd h2{margin:0;font-size:22px;line-height:1.15}
.dr-hd .actions{display:flex;gap:6px}
.dr-body{flex:1;overflow:auto;padding:18px 22px 40px;display:grid;grid-template-columns:1fr 340px;gap:18px;align-content:start}
.dr-body .col-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.dr-body .col-side{display:flex;flex-direction:column;gap:16px;min-width:0}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px}
.card h4{margin:0 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700;display:flex;align-items:center;gap:8px}
.card h4 .actions-inline{margin-left:auto;display:flex;gap:4px}
.card .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.card .kv dt{color:var(--ink-2);font-weight:500;white-space:nowrap}
.card .kv dd{margin:0;color:var(--ink);font-weight:600}
.card .kv dd.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
.card .kv dd.muted{color:var(--ink-3);font-weight:400}
.card .kv dd.acc{color:var(--accent-ink)}

.assignment-card{background:linear-gradient(180deg,var(--accent-soft) 0%,var(--surface) 68%);border-color:var(--accent);}
html[data-theme="dark"] .assignment-card{background:linear-gradient(180deg,var(--accent-soft) 0%,var(--surface) 70%);border-color:var(--border-strong)}
.assign-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.assign-grid .slot{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px}
.assign-grid .slot .l{color:var(--ink-3);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.assign-grid .slot .v{font-size:15px;font-weight:700;color:var(--ink);margin-top:4px;display:flex;align-items:center;gap:8px}
.assign-grid .slot .v .edit{opacity:.5;cursor:pointer}
.assign-grid .slot .v .edit:hover{opacity:1;color:var(--accent)}
.assign-grid .slot .hint{margin-top:2px;font-size:11.5px;color:var(--ink-3)}
.assign-meta{display:flex;gap:16px;flex-wrap:wrap;padding-top:10px;margin-top:10px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--ink-2)}
.assign-meta b{color:var(--ink);font-weight:600}

/* timeline for route */
.timeline{padding:4px 0 0;display:flex;gap:14px;overflow-x:auto}
.tl-step{flex:1;min-width:120px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:relative}
.tl-step .dot{width:12px;height:12px;border-radius:999px;background:var(--surface);border:2.5px solid var(--border-strong);position:relative;z-index:1}
.tl-step.done .dot{background:var(--success);border-color:var(--success)}
.tl-step.active .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.tl-step.future .dot{background:var(--surface);border-color:var(--border-strong)}
.tl-step::after{content:"";position:absolute;top:5px;left:12px;right:-14px;height:2.5px;background:var(--border);z-index:0}
.tl-step.done::after{background:var(--success)}
.tl-step.active::after{background:linear-gradient(90deg,var(--accent) 50%,var(--border) 50%)}
.tl-step:last-child::after{display:none}
.tl-step .name{font-weight:600;font-size:13px;color:var(--ink)}
.tl-step .meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tl-step.future .name{color:var(--ink-3);font-weight:500}

/* history list */
.hist{display:flex;flex-direction:column}
.hist-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--border);font-size:12.5px}
.hist-item:first-child{border-top:0}
.hist-item .hicon{width:20px;height:20px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center}
.hist-item .hicon.acc{background:var(--accent-soft);color:var(--accent-ink)}
.hist-item .hicon.g{background:var(--success-soft);color:var(--success)}
.hist-item .hicon.r{background:var(--danger-soft);color:var(--danger)}
.hist-item .hicon svg{width:11px;height:11px}
.hist-item .body .title{font-weight:600;color:var(--ink)}
.hist-item .body .meta{color:var(--ink-2);font-size:11.5px;margin-top:2px}
.hist-item .body .meta b{color:var(--ink);font-weight:600}
.hist-item .when{color:var(--ink-3);font-family:var(--mono);font-size:11px;white-space:nowrap}

/* finance card */
.fin-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:6px 0;border-top:1px dashed var(--border);font-size:13px}
.fin-row:first-of-type{border-top:0}
.fin-row .n{color:var(--ink-2)}
.fin-row .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.fin-row.big .v{font-size:15px}
.fin-row .v.up{color:var(--danger)}

/* files */
.file-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--border);font-size:13px}
.file-row:first-of-type{border-top:0}
.file-row .fi{width:28px;height:34px;border:1px solid var(--border);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;color:var(--ink-2);background:var(--surface-2)}
.file-row .name{font-weight:600}
.file-row .meta{color:var(--ink-3);font-size:11.5px;margin-top:2px}
.file-row .sp{flex:1}

/* bill excerpt */
.bill-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px}
.bill-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bill-num{font-family:var(--mono);font-weight:700;font-size:14px}
.bill-items{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.bill-items .r{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:6px 0;border-top:1px dashed var(--border)}
.bill-items .r:first-child{border-top:0}
.bill-items .r .n{font-family:var(--sans)}

/* pagination */
.pagination{display:flex;align-items:center;gap:18px;padding:10px 22px;border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.pagination .page-size{display:flex;align-items:center;gap:8px}
.pagination .page-info{margin-left:auto;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px}
.pagination .page-info .muted{color:var(--ink-2)}
.page-nav{display:flex;align-items:center;gap:2px}
.page-btn{width:30px;height:30px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;padding:0}
.page-btn:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.page-btn:disabled{opacity:.35;cursor:default}
.page-list{display:flex;gap:2px;margin:0 6px}
.page-list .page-num{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.page-list .page-num:hover{background:var(--surface-2);color:var(--ink)}
.page-list .page-num.on{background:var(--accent);border-color:var(--accent);color:#fff}
.page-list .page-ellipsis{min-width:24px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);font-weight:600}

/* row hover clickable */
tr.clickable{cursor:pointer}

/* ============ AUTH (login screen) ============ */
.auth-shell{position:fixed;inset:0;background:var(--bg);display:none;align-items:stretch;justify-content:stretch;z-index:200;overflow:auto}
.auth-shell.on{display:flex}
.app.locked{display:none!important}
.auth-art{flex:1;background:
  radial-gradient(800px 400px at 80% 20%, rgba(11,95,255,.16), transparent 60%),
  radial-gradient(600px 600px at 10% 90%, rgba(105,56,239,.12), transparent 60%),
  var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:space-between;padding:48px;min-height:100vh}
html[data-theme="dark"] .auth-art{background:
  radial-gradient(800px 400px at 80% 20%, rgba(76,134,255,.22), transparent 60%),
  radial-gradient(600px 600px at 10% 90%, rgba(105,56,239,.18), transparent 60%),
  var(--surface)}
.auth-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px}
.auth-brand .mark{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg, var(--accent) 0%, #7BA8FF 100%);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px}
.auth-hero{max-width:520px}
.auth-hero h1{margin:0 0 14px;font-size:36px;line-height:1.12;letter-spacing:-.02em;font-weight:800}
.auth-hero h1 .accent{color:var(--accent)}
.auth-hero p{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0 0 22px;text-wrap:pretty}
.auth-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.auth-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);background:var(--surface);border-radius:999px;font-size:12px;color:var(--ink-2);font-weight:500}
.auth-pill .d{width:6px;height:6px;border-radius:999px;background:var(--success)}
.auth-meta{display:flex;gap:14px;color:var(--ink-3);font-size:12px;align-items:center;flex-wrap:wrap}
.auth-meta a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

.auth-form-wrap{width:480px;max-width:100%;display:flex;align-items:center;justify-content:center;padding:48px;background:var(--bg)}
.auth-form{width:100%;max-width:360px}
.auth-form h2{margin:0 0 6px;font-size:24px;letter-spacing:-.01em;font-weight:800}
.auth-form .ah-sub{color:var(--ink-2);font-size:14px;margin:0 0 22px}
.auth-form .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.auth-form label{font-size:12px;font-weight:600;color:var(--ink-2)}
.auth-form input{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);outline:none;width:100%}
.auth-form input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.auth-form .row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-2);margin:-4px 0 14px}
.auth-form .row a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.auth-form .row .cbx-row{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.auth-form .submit{width:100%;justify-content:center;font-size:14px;padding:11px 14px}
.auth-form .or{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:11.5px;margin:18px 0;text-transform:uppercase;letter-spacing:.08em}
.auth-form .or::before,.auth-form .or::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-form .sso{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--r-md);font:inherit;font-weight:600;font-size:13.5px;color:var(--ink);cursor:pointer}
.auth-form .sso:hover{background:var(--surface-2)}
.auth-form .sso .rzd{width:18px;height:18px;border-radius:4px;background:#C8102E;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800}
.auth-form .ah-bottom{margin-top:22px;font-size:12.5px;color:var(--ink-3);text-align:center}
.auth-form .ah-bottom a{color:var(--accent-ink);text-decoration:underline;font-weight:600}
.auth-error{margin:0 0 14px;padding:10px 12px;border-radius:var(--r-md);background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);color:#b91c1c;font-size:13px;line-height:1.4}
html[data-theme="dark"] .auth-error{color:#fca5a5}
.auth-success{margin:0 0 14px;padding:10px 12px;border-radius:var(--r-md);background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.25);color:#15803d;font-size:13px;line-height:1.4}
html[data-theme="dark"] .auth-success{color:#86efac}
.auth-form .submit.loading{opacity:.7;pointer-events:none}
.page-auth .bx-panel-folded{display:none}
.app-main{flex:1;min-height:0;display:flex;flex-direction:column}

@media (max-width: 900px){
  .auth-shell{flex-direction:column}
  .auth-art{padding:32px;min-height:auto}
  .auth-form-wrap{padding:32px;width:100%}
}

/* ============ USER MENU (avatar dropdown) ============ */
.user-anchor{position:relative}
.avatar.btn-style{cursor:pointer;outline-offset:2px}
.avatar.btn-style:hover{box-shadow:0 0 0 3px var(--accent-soft)}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);min-width:260px;padding:8px;display:none;z-index:60}
.user-menu.open{display:block}
.um-head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.um-head .av{width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg,#C3D6FF,#7BA8FF);color:#0b2f75;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-strong)}
.um-head .info{min-width:0;flex:1}
.um-head .name{font-weight:700;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-head .role{font-size:12px;color:var(--ink-2);margin-top:1px}
.um-head .email{font-size:11.5px;color:var(--ink-3);margin-top:1px;font-family:var(--mono)}
.um-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);font-size:13px;color:var(--ink-2);font-weight:500;cursor:pointer}
.um-item:hover{background:var(--surface-2);color:var(--ink)}
.um-item .ic{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3)}
.um-item:hover .ic{color:var(--ink-2)}
.um-item .kbd{margin-left:auto;font-size:10.5px}
.um-item.danger{color:var(--danger)}
.um-item.danger .ic{color:var(--danger)}
.um-item.danger:hover{background:var(--danger-soft);color:var(--danger)}
.um-sep{height:1px;background:var(--border);margin:4px 0}
.um-mini{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;font-size:12px;color:var(--ink-2)}
.um-mini .theme-sw{padding:2px}
.um-mini .theme-sw button{padding:4px 8px;font-size:11.5px}

/* ============ FILTER ROW COLLAPSE ============ */
.filter-row #resetFilters{margin-left:auto}
.filter-row #resetFilters[hidden]{display:none !important}
.filter-row #filtersCollapseToggle:not([hidden]){margin-left:auto}
.filter-row #filtersCollapseToggle:not([hidden]) ~ #resetFilters{margin-left:0}
.filter-row .flt.collapse-toggle{border-style:dashed}
.filter-row .flt.collapse-toggle[hidden]{display:none !important}
.filter-row .flt.collapse-toggle svg{transition:transform .15s}
.filter-row.collapsed .flt.collapse-toggle svg{transform:rotate(180deg)}
.filter-row.collapsed .flt[data-collapsible]{display:none}
.filter-row .flt.collapsed-pill{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent;font-weight:600;display:none}
.filter-row.collapsed .flt.collapsed-pill{display:inline-flex}
tr.clickable:hover td{background:var(--surface-2)}

/* ============ VIEW SWITCHER ============ */
.view{display:none;min-height:0;flex-direction:column}
/* Макет: .app > .view (verstka) или .app > .app-main > .view (Bitrix) */
.app > .view.on,
.app-main > .view.on{display:flex;flex:1;min-height:0}
.view-wagons{height:100%}
.view-dashboard{background:var(--bg);height:100%}

/* dashboard toolbar */
.dash-toolbar{display:flex;align-items:center;gap:14px;padding:12px 22px;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap}
.dash-range{display:flex;align-items:center;gap:14px}
.dash-compare{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none}
.dash-compare:hover{color:var(--ink)}
.dash-alerts{display:flex;align-items:center;gap:10px}
.alrt{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--warn);background:var(--warn-soft);border-radius:999px;color:var(--warn);font-size:12.5px}
.alrt .d{width:7px;height:7px;border-radius:999px;background:var(--warn);box-shadow:0 0 0 0 rgba(178,107,0,.35);animation:pulse 1.8s infinite}
.alrt b{color:var(--warn);font-weight:700}
.alrt a{color:var(--warn);text-decoration:underline;text-underline-offset:2px;font-weight:600}
html[data-theme="dark"] .alrt{background:var(--warn-soft);color:var(--warn);border-color:transparent}

/* scroll container */
.dash-scroll{flex:1;min-height:0;overflow:auto;padding:18px 22px 8px;display:flex;flex-direction:column;gap:18px}

/* hero */
.dash-hero{display:flex;align-items:flex-end;gap:24px;background:linear-gradient(180deg, var(--surface) 0%, var(--surface) 60%, transparent 100%);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px 24px;box-shadow:var(--shadow-1)}
.dash-hero .hero-title{flex:1;min-width:0}
.dash-hero .eyebrow{color:var(--ink-3);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.dash-hero h2{margin:0;font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--ink);max-width:820px}
.dash-hero h2 .accent{color:var(--warn)}
.dash-hero .hero-sub{margin:10px 0 0;color:var(--ink-2);font-size:14px;max-width:760px;line-height:1.55;text-wrap:pretty}
.dash-hero .hero-actions{display:flex;gap:8px;flex-shrink:0}

/* KPI row */
.kpi-row{display:grid;grid-template-columns:repeat(5, minmax(0,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px 12px;text-decoration:none;color:inherit;display:block;cursor:pointer;position:relative;transition:border-color .1s, transform .1s, box-shadow .1s}
.kpi:hover{border-color:var(--border-strong);box-shadow:var(--shadow-1)}
.kpi.warn{border-color:color-mix(in oklch, var(--warn) 35%, var(--border))}
html[data-theme="dark"] .kpi.warn{border-color:var(--warn)}
.kpi .k-l{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.kpi .k-v{display:flex;align-items:baseline;gap:6px;margin-top:8px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);font-size:28px;letter-spacing:-.02em;line-height:1}
.kpi .k-v .pct{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink-3)}
.kpi .k-v .pct.muted{color:var(--ink-3)}
.kpi .k-delta{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:12px;font-weight:600;font-family:var(--mono)}
.kpi .k-delta .muted{color:var(--ink-3);font-weight:500}
.kpi .k-delta.ok{color:var(--success)}
.kpi .k-delta.bad{color:var(--danger)}
.kpi .k-delta.flat{color:var(--ink-3)}
.kpi .k-bar{height:4px;background:var(--surface-2);border-radius:2px;margin-top:10px;overflow:hidden}
.kpi .k-bar span{display:block;height:100%;border-radius:2px}
.kpi .k-spark{margin-top:4px;color:var(--danger);opacity:.7}
.kpi .k-spark svg{width:100%;height:28px;display:block}

/* cards */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-2:has(.card.lg + .card){grid-template-columns:1.5fr 1fr}
.grid-1{display:grid;grid-template-columns:1fr;gap:14px}
.grid-2 > .card{min-width:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 16px 14px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;min-height:0}
.card .card-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.card .card-title{font-size:14px;font-weight:700;letter-spacing:-.005em}
.card .card-sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.card .card-ft{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .card-ft a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.legend{display:flex;gap:10px;font-size:11.5px;color:var(--ink-2);align-items:center;flex-wrap:wrap}
.lg-item{display:inline-flex;align-items:center;gap:6px}
.lg-d{width:10px;height:10px;border-radius:3px;display:inline-block}
.lg-d.dash{background:transparent!important;border-bottom:2px dashed var(--success);height:0;width:14px;border-radius:0}
.legend-inline{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:12px}
.link-btn{color:var(--accent-ink);font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.seg.sm{padding:2px}
.seg.sm button{padding:4px 10px;font-size:12px}

/* util chart */
.util-head{display:flex;gap:28px;margin-bottom:10px;flex-wrap:wrap}
.util-head.compact{margin-bottom:8px;gap:24px}
.util-head .k-v{font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:-.01em;line-height:1.1}
.util-head .k-v.tight{font-size:15px;font-weight:700}
.util-head .k-v.ok{color:var(--success)}
.util-head .k-v.bad{color:var(--danger)}
.util-head .k-v.muted{color:var(--ink-2)}
.util-chart{width:100%;height:260px;display:block}
.util-chart .axis{fill:var(--ink-3);font-size:10.5px;font-family:var(--mono)}
.util-chart .axis-strong{fill:var(--accent-ink);font-weight:700;font-size:10.5px;font-family:var(--mono)}
.bar-chart{width:100%;height:180px;display:block}
.bar-chart .axis{fill:var(--ink-3);font-size:10.5px;font-family:var(--mono)}

/* cost split */
.cost-big{display:flex;align-items:baseline;flex-wrap:wrap;margin-bottom:14px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--danger)}
.cost-big small{font-size:14px;font-weight:700;margin-left:4px;color:var(--danger);opacity:.7}
.cost-split{display:flex;flex-direction:column;gap:10px}
.split-row{display:grid;grid-template-columns:100px 1fr 90px;gap:10px;align-items:center;font-size:12.5px}
.split-l{color:var(--ink-2)}
.split-track{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.split-track span{display:block;height:100%;border-radius:4px}
.split-v{color:var(--ink);font-weight:700;text-align:right}

/* mini bars in tables */
.bar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;min-width:60px}
.bar span{display:block;height:100%;border-radius:3px}
.bar.mini{height:4px}

/* dash tables */
.dash-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.dash-tbl thead th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:6px 8px;border-bottom:1px solid var(--border)}
.dash-tbl thead th.c{text-align:center}
.dash-tbl tbody td{padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.dash-tbl tbody tr:last-child td{border-bottom:0}
.dash-tbl tbody tr[data-filter]{cursor:pointer}
.dash-tbl tbody tr[data-filter]:hover td{background:var(--surface-2)}
.dash-tbl.team tbody td{padding:8px 8px}
.dot-sq{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:middle}
.mini-spark{width:100px;height:20px;display:block}
.num.ok{color:var(--success)}
.num.bad{color:var(--danger)}
.num.warn{color:var(--warn)}

/* clients */
.clients{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.clients li{display:grid;grid-template-columns:22px 160px 1fr 50px 42px;gap:10px;align-items:center;padding:7px 4px;border-radius:var(--r-sm);cursor:pointer;font-size:13px}
.clients li:hover{background:var(--surface-2)}
.cl-rank{font-family:var(--mono);color:var(--ink-3);font-weight:700;font-size:12px;text-align:right}
.cl-name{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-v{text-align:right;font-weight:700}
.cl-d{text-align:right;font-size:11.5px;font-weight:600}
.cl-d.ok{color:var(--success)}
.cl-d.bad{color:var(--danger)}
.cl-d.muted{color:var(--ink-3)}

/* long list */
.long-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.long-list li{display:grid;grid-template-columns:130px 1fr 60px;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--border);font-size:12.5px}
.long-list li:last-child{border-bottom:0}
.long-list .wagon-id{font-family:var(--mono);font-weight:700;color:var(--ink)}
.long-list .muted{color:var(--ink-2)}
.long-list .days{justify-self:end}

/* journal empty */
.view-journal{height:100%;justify-content:center;align-items:center;display:none}
.app > .view-journal.on,
.app-main > .view-journal.on{display:flex;align-items:center;justify-content:center}
.empty-view{text-align:center;max-width:380px;padding:40px}
.empty-view h3{margin:18px 0 6px;font-size:20px;font-weight:700}
.empty-view p{color:var(--ink-2);font-size:14px;margin:0 0 18px}

/* large screens */
@media (max-width: 1400px){
  .kpi-row{grid-template-columns:repeat(5,1fr);gap:10px}
  .kpi .k-v{font-size:24px}
  .dash-hero h2{font-size:24px}
}
@media (max-width: 1200px){
  .grid-2{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:repeat(3,1fr)}
  .dash-hero{flex-direction:column;align-items:flex-start}
  .dash-hero .hero-actions{width:100%;justify-content:flex-end}
}

/* ====== WAGONS: статус функций (MVP) ====== */
.ws-feature-legend{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  margin:0 22px 10px;padding:8px 12px;
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface-2);font-size:12px;color:var(--ink-2);
}
.ws-fl-label{font-weight:700;color:var(--ink);margin-right:4px}
.ws-fl-item{display:inline-flex;align-items:center;gap:6px}
.ws-fl-dot{width:8px;height:8px;border-radius:999px;flex:0 0 8px}
.ws-fl-live{background:var(--success)}
.ws-fl-client{background:var(--accent)}
.ws-fl-stub{background:var(--warn)}

.ws-f{position:relative}
.ws-f--stub{
  outline:1px dashed color-mix(in srgb, var(--warn) 55%, transparent);
  outline-offset:2px;
}
.ws-f--client{
  outline:1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset:2px;
}
.ws-f--stub::after,
.ws-f--client::after{
  position:absolute;top:-7px;right:6px;z-index:2;
  padding:1px 5px;border-radius:4px;
  font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.3;pointer-events:none;white-space:nowrap;
}
.ws-f--stub::after{content:"скоро";background:var(--warn-soft);color:var(--warn)}
.ws-f--client::after{content:"демо";background:var(--accent-soft);color:var(--accent-ink)}
.ws-f--stub.btn::after,
.ws-f--client.btn::after,
.ws-f--stub.flt::after,
.ws-f--client.flt::after{right:auto;left:6px}

.view-wagons.ws-drawer-off tr.clickable{cursor:default}
.view-wagons.ws-drawer-off .drawer,
.view-wagons.ws-drawer-off .drawer-scrim{display:none!important}

/* ===== Журнал аудита (/journal) ===== */
.view-journal{display:flex;flex-direction:column;min-height:0;flex:1}
.journal-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;width:100%}
.journal-filters .jf-item{display:flex;flex-direction:column;gap:4px}
.journal-filters .jf-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.journal-filters input[type="date"],
.journal-filters select{padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;min-width:140px}
.journal-total{font-size:13px;color:var(--ink-2);font-weight:600;align-self:center}
.journal-tbl-wrap{overflow:auto}
.journal-tbl td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
.journal-tbl tbody tr:last-child td{border-bottom:0}
.journal-pager{display:flex;align-items:center;gap:12px;padding:4px 0 14px}
.journal-page-info{font-size:13px;color:var(--ink-2)}

/* ===== Цветовые метки ремонта (из RWL; visual-spec) ===== */
.badge.rm-orange{background:rgba(234,140,8,.12);color:#c46a00;border-color:rgba(234,140,8,.35)}
.badge.rm-orange .d{background:#ea8c08}
.badge.rm-red{background:rgba(220,56,44,.12);color:#c22a1e;border-color:rgba(220,56,44,.35)}
.badge.rm-red .d{background:#dc382c}
.badge.rm-yellow{background:rgba(212,180,0,.14);color:#8a7400;border-color:rgba(212,180,0,.4)}
.badge.rm-yellow .d{background:#d4b400}
.tbl tbody tr.rm-row-planned_repair td{background:rgba(234,140,8,.05)}
.tbl tbody tr.rm-row-depot_repair td{background:rgba(220,56,44,.06)}
.tbl tbody tr.rm-row-innovative_wagon td{background:rgba(212,180,0,.06)}
.tbl tbody tr.rm-row-depot_repair td:first-child{box-shadow:inset 3px 0 0 #dc382c}
.tbl tbody tr.rm-row-planned_repair td:first-child{box-shadow:inset 3px 0 0 #ea8c08}
.tbl tbody tr.rm-row-innovative_wagon td:first-child{box-shadow:inset 3px 0 0 #d4b400}
.modal textarea{font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);outline:none;resize:vertical;min-height:44px}
.modal textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.tbl td.info-cell{width:40px;text-align:center}
.info-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--ink-2);cursor:pointer}
.info-btn:hover{background:var(--surface-2);color:var(--accent-ink)}

/* ===== Режим «Назначение»: инлайн-редактирование ===== */
.tbl td.editable{cursor:text}
.tbl td.editable:hover{background:var(--accent-soft)}
.inline-edit{font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--accent);border-radius:var(--r-md);background:var(--surface);color:var(--ink);outline:none;width:100%;min-width:110px;box-sizing:border-box}
#assignViewBtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.scroll-sentinel{min-height:36px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:12.5px;padding:8px}