/* КПИ логистики — вариант A «Спокойный синий» */
:root {
  --bg:#f3f5f9; --card:#ffffff; --primary:#4a6fa5; --primary-dark:#3d5d8c; --primary-soft:#e3ebf6;
  --ink:#2c3648; --muted:#7a8699; --good:#5aa67c; --good-soft:#e4f2ea; --bad:#c97070; --bad-soft:#f8e9e9;
  --warn:#d9a441; --warn-soft:#faf1de; --side:#33415c; --side-ink:#c7d2e4; --line:#e5e9f0;
  --input:#fbfcfe; --hover:#f8fafd; --stnone:#fffdf5;
  --c-took:#4a6fa5; --c-ref:#c97070; --c-saved:#5aa67c;
  --city1:#4a6fa5; --city2:#7fb0d9; --city3:#a8c6e8; --city4:#c9d9ef; --city5:#8ea9cc;
  --val:#2c3648; --glow-val:none; --glow-g:none; --glow-b:none; --glow-w:none; --glow-p:none;
  --radius:12px; --shadow:0 1px 3px rgba(44,54,72,.06);
}
/* Тёмная тема — неоновые акценты на приглушённом фоне */
:root[data-theme="dark"] {
  --bg:#10151f; --card:#1a2130; --primary:#60a5fa; --primary-dark:#93c5fd; --primary-soft:#1e3252;
  --ink:#e6eefc; --muted:#94a3bd; --good:#34d399; --good-soft:#14332a; --bad:#ff6b7a; --bad-soft:#3d2228;
  --warn:#fbbf24; --warn-soft:#3a2f14; --side:#161d2c; --side-ink:#9fb0c9; --line:#2b3648;
  --input:#20293a; --hover:#242f44; --stnone:#33331f;
  --c-took:#4da3ff; --c-ref:#ff6b7a; --c-saved:#2fe0a8;
  --city1:#38bdf8; --city2:#818cf8; --city3:#22d3ee; --city4:#a78bfa; --city5:#60a5fa;
  --val:#f2f7ff;
  --glow-val:0 0 22px rgba(96,165,250,.45);
  --glow-g:0 0 12px rgba(52,211,153,.75); --glow-b:0 0 12px rgba(255,107,122,.75);
  --glow-w:0 0 12px rgba(251,191,36,.7); --glow-p:0 0 12px rgba(96,165,250,.7);
  --shadow:0 1px 3px rgba(0,0,0,.4);
}
/* Системная: следуем настройке устройства */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg:#10151f; --card:#1a2130; --primary:#60a5fa; --primary-dark:#93c5fd; --primary-soft:#1e3252;
    --ink:#e6eefc; --muted:#94a3bd; --good:#34d399; --good-soft:#14332a; --bad:#ff6b7a; --bad-soft:#3d2228;
    --warn:#fbbf24; --warn-soft:#3a2f14; --side:#161d2c; --side-ink:#9fb0c9; --line:#2b3648;
    --input:#20293a; --hover:#242f44; --stnone:#33331f;
    --c-took:#4da3ff; --c-ref:#ff6b7a; --c-saved:#2fe0a8;
    --city1:#38bdf8; --city2:#818cf8; --city3:#22d3ee; --city4:#a78bfa; --city5:#60a5fa;
    --val:#f2f7ff;
    --glow-val:0 0 22px rgba(96,165,250,.45);
    --glow-g:0 0 12px rgba(52,211,153,.75); --glow-b:0 0 12px rgba(255,107,122,.75);
    --glow-w:0 0 12px rgba(251,191,36,.7); --glow-p:0 0 12px rgba(96,165,250,.7);
    --shadow:0 1px 3px rgba(0,0,0,.4);
  }
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--ink); }
button { font:inherit; cursor:pointer; }
input, select { font:inherit; }

/* ---------- вход ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--bg) 0%, var(--primary-soft) 100%); }
.login-card { background:var(--card); border-radius:16px; box-shadow:0 8px 30px rgba(51,65,92,.12);
  padding:40px 36px; width:360px; animation:rise .4s ease; }
.login-card h1 { font-size:22px; margin-bottom:4px; }
.login-card .sub { color:var(--muted); font-size:13px; margin-bottom:24px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.field input, .field select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  outline:none; transition:border-color .15s; background:var(--input); color:var(--ink); }
.field input:focus { border-color:var(--primary); }
.btn { background:var(--primary); color:#fff; border:none; padding:10px 18px; border-radius:8px;
  font-weight:600; transition:background .15s, transform .1s; }
.btn:hover { background:var(--primary-dark); }
.btn:active { transform:scale(.98); }
.btn.block { width:100%; }
.btn.ghost { background:var(--card); color:var(--primary); border:1px solid var(--primary); }
.btn.ghost:hover { background:var(--primary-soft); }
.btn.danger { background:var(--bad); }
.err { background:var(--bad-soft); color:var(--bad); font-size:13px; padding:8px 12px; border-radius:8px; margin-bottom:12px; }

/* ---------- каркас ---------- */
.layout { display:flex; min-height:100vh; }
.side { width:210px; background:var(--side); color:var(--side-ink); padding:26px 18px;
  display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh; flex:none; }
.logo-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:26px; }
.side .logo { font-size:19px; font-weight:700; color:#fff; line-height:1.3; }
.side .logo small { display:block; font-weight:400; font-size:11px; opacity:.7; }
#sideHide { background:rgba(255,255,255,.1); color:var(--side-ink); border:none; width:26px; height:26px;
  border-radius:8px; font-size:16px; line-height:1; flex:none; transition:background .15s; }
#sideHide:hover { background:rgba(255,255,255,.2); color:#fff; }
#sideOpen { display:none; position:fixed; top:12px; left:12px; z-index:70; width:38px; height:38px;
  border-radius:10px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  color:var(--ink); font-size:17px; }
#sideBackdrop { display:none; position:fixed; inset:0; background:rgba(20,26,38,.45); z-index:74; }
/* скрытая панель на компьютере */
.layout.side-hidden .side { display:none; }
.layout.side-hidden #sideOpen { display:block; }
.layout.side-hidden .main { max-width:100vw; padding-left:64px; }
.nav { padding:10px 13px; border-radius:9px; font-size:13.5px; display:flex; align-items:center; gap:9px;
  cursor:pointer; transition:background .15s, color .15s; user-select:none; }
.nav:hover { background:rgba(255,255,255,.07); }
.nav.active { background:rgba(255,255,255,.13); color:#fff; font-weight:600; }
.nav .dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55; }
.nav.disabled { opacity:.45; cursor:default; }
.side .foot { margin-top:auto; font-size:11px; opacity:.65; line-height:1.6; }
.side .foot .ok { color:#7fc79e; }

.main { flex:1; padding:22px 26px 40px; max-width:calc(100vw - 210px); }
.topbar { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.topbar h1 { font-size:22px; }
.topbar .sub { font-size:12.5px; color:var(--muted); margin-top:3px; }
.periods { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chip { font-size:12.5px; padding:7px 14px; border-radius:20px; background:var(--card); color:var(--muted);
  border:1px solid var(--line); transition:all .15s; }
.chip:hover { border-color:var(--primary); color:var(--primary); }
.chip.on { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
.chip input { border:none; outline:none; width:82px; font-size:12px; color:var(--ink); background:transparent; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:700; cursor:pointer; position:relative; flex:none; }
.topbar > div { min-width:0; }
.menu { position:absolute; top:42px; right:0; background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 6px 24px rgba(44,54,72,.14); padding:6px; min-width:190px; z-index:50; animation:rise .18s ease; color:var(--ink); }
.menu .mi { padding:8px 12px; font-size:13px; border-radius:7px; cursor:pointer; }
.menu .mi:hover { background:var(--bg); }

.filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.filters .lbl { font-size:12px; color:var(--muted); }
.filters select { font-size:12.5px; background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:7px 10px; color:var(--ink); outline:none; max-width:190px; }

/* ---------- КПИ ---------- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:16px; }
.kpi { background:var(--card); border-radius:var(--radius); padding:16px 16px 14px; border:1px solid var(--line);
  box-shadow:var(--shadow); position:relative; animation:rise .35s ease backwards; }
.kpi:nth-child(2){animation-delay:.04s} .kpi:nth-child(3){animation-delay:.08s}
.kpi:nth-child(4){animation-delay:.12s} .kpi:nth-child(5){animation-delay:.16s}
.kpi .name { font-size:12.5px; color:var(--muted); margin-bottom:7px; padding-right:88px; min-height:30px; line-height:15px; }
.kpi .val { font-size:30px; font-weight:750; line-height:1; color:var(--val); text-shadow:var(--glow-val); }
.kpi .plan { font-size:11.5px; color:var(--muted); margin-top:7px; }
.badge { position:absolute; top:14px; right:14px; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:12px; }
.badge.g { background:var(--good-soft); color:var(--good); }
.badge.b { background:var(--bad-soft); color:var(--bad); }
.badge.w { background:var(--warn-soft); color:var(--warn); }
.badge.p { background:var(--primary-soft); color:var(--primary); }
.bar { height:6px; border-radius:4px; background:var(--line); margin-top:10px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:4px; transition:width .8s cubic-bezier(.22,1,.36,1); }
.bar.g i { background:var(--good); box-shadow:var(--glow-g); } .bar.b i { background:var(--bad); box-shadow:var(--glow-b); }
.bar.w i { background:var(--warn); box-shadow:var(--glow-w); } .bar.p i { background:var(--primary); box-shadow:var(--glow-p); }
.chip.on { box-shadow:var(--glow-p); }

.row { display:grid; grid-template-columns:1.6fr 1fr; gap:14px; margin-bottom:16px; }
.row3 { grid-template-columns:1.4fr 1fr 1fr; }
@media (max-width:1400px){ .row3 { grid-template-columns:1fr 1fr; } .row3 .panel:first-child { grid-column:1/-1; } }
@media (max-width:1100px){ .row { grid-template-columns:1fr; } .row3 .panel:first-child { grid-column:auto; } }
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); animation:rise .4s ease backwards; min-width:0; }
.row > *, .set-grid > *, .kpis > * { min-width:0; }
.panel h3 { font-size:14.5px; font-weight:650; margin-bottom:3px; }
.panel .hint { font-size:11.5px; color:var(--muted); margin-bottom:12px; }
.legend { display:flex; gap:14px; font-size:11.5px; color:var(--muted); margin-top:8px; }
.legend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; }

/* ---------- таблицы ---------- */
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--muted); font-weight:600; font-size:11.5px; padding:8px 10px;
  border-bottom:1px solid var(--line); }
th[data-col] { cursor:pointer; user-select:none; white-space:nowrap; transition:color .12s; }
th[data-col]:hover { color:var(--primary); }
th .arr { font-size:9px; margin-left:3px; color:var(--primary); }
td { padding:9px 10px; border-bottom:1px solid var(--line); }
td:first-child { white-space:nowrap; }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:var(--hover); }
.pill { font-size:11px; padding:3px 9px; border-radius:12px; font-weight:600; white-space:nowrap; }
.pill.g { background:var(--good-soft); color:var(--good); }
.pill.b { background:var(--bad-soft); color:var(--bad); }
.pill.p { background:var(--primary-soft); color:var(--primary); }
.pill.w { background:var(--warn-soft); color:var(--warn); }

/* ---------- настройки ---------- */
.set-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:14px; align-items:start; }
@media (max-width:1100px){ .set-grid { grid-template-columns:1fr; } }
.st { display:flex; align-items:center; gap:9px; padding:8px 10px; border-bottom:1px solid var(--line); font-size:13px; }
.st .sdot { width:10px; height:10px; border-radius:50%; flex:none; }
.st select { margin-left:auto; font-size:12px; border:1px solid var(--line); border-radius:8px;
  padding:5px 8px; background:var(--input); color:var(--ink); max-width:210px; }
.st.none { background:var(--stnone); }
.grphead { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.5px; padding:12px 10px 5px; }
.grphead.warn { color:var(--warn); }
.sync-line { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.sync-line i { width:8px; height:8px; border-radius:50%; background:var(--good); display:inline-block; }
.sync-line i.err { background:var(--bad); }

.hidden { display:none !important; }
/* неоновое свечение диаграмм в тёмной теме */
:root[data-theme="dark"] .panel svg { filter:drop-shadow(0 0 5px rgba(96,165,250,.18)); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .panel svg { filter:drop-shadow(0 0 5px rgba(96,165,250,.18)); }
}
#refreshBtn { padding:8px 14px; font-size:12.5px; align-self:center; flex:none; }
#refreshBtn:disabled { opacity:.6; cursor:default; }

/* ---------- мобильная версия ---------- */
@media (max-width: 820px) {
  /* боковая панель — выдвижная шторка */
  .side { position:fixed; left:0; top:0; width:250px; height:100vh; z-index:75; padding:20px 16px;
    transform:translateX(-105%); transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.25); }
  .layout.side-open .side { transform:none; }
  .layout.side-open #sideBackdrop { display:block; }
  #sideOpen { display:block; }
  .logo-row { margin-bottom:18px; }
  .nav { padding:10px 13px; font-size:13.5px; }
  .main { padding:60px 14px 30px; max-width:100%; overflow-x:hidden; }
  .topbar { gap:10px; }
  .topbar h1 { font-size:18px; }
  .topbar .sub { font-size:11.5px; }
  .periods { margin-left:0; width:100%; min-width:0; }
  .chip { padding:6px 11px; font-size:12px; white-space:nowrap; }
  .chip input { width:100px; }
  .kpis { grid-template-columns:1fr 1fr; gap:10px; }
  .kpi { padding:12px; }
  .kpi .name { font-size:11.5px; padding-right:0; }
  .kpi .val { font-size:22px; }
  .kpi .plan { font-size:10.5px; }
  .badge { position:static; display:inline-block; margin-bottom:6px; font-size:10.5px; padding:3px 8px; }
  .row, .set-grid { grid-template-columns:1fr; }
  .panel { padding:14px; }
  .panel > div[style*="overflow"], .panel { overflow-x:auto; }
  table { min-width:600px; }
  .filters select { max-width:100%; flex:1 1 45%; }
  .filters .lbl { width:100%; }
  #page-statuses .topbar > div:last-child { margin-left:0 !important; width:100%; }
  #page-statuses .topbar .btn { flex:1 1 auto; }
  .login-card { width:min(360px, 92vw); padding:32px 24px; }
  .st select { max-width:150px; }
  .sync-line { display:none; }
}
@media (max-width: 420px) {
  .kpis { grid-template-columns:1fr; }
}
.loading { padding:60px; text-align:center; color:var(--muted); font-size:14px; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.spin { display:inline-block; width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--primary);
  border-radius:50%; animation:sp 1s linear infinite; vertical-align:-3px; }
@keyframes sp { to { transform:rotate(360deg); } }