/* ============================================================
   Allbattery Admin — внутрішня система закупівель / логістики
   ============================================================ */

:root {
  --green: #4CAF50;
  --green-h: #388E3C;
  --green-d: #2E7D32;
  --green-50: #E8F5E9;
  --green-100: #C8E6C9;

  --ink: #111827;
  --navy: #0F172A;
  --navy-2: #1E293B;
  --navy-3: #334155;
  --ink-2: #374151;
  --muted: #4B5563;
  --muted-2: #94A3B8;
  --muted-3: #CBD5E1;

  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --line: #E5E7EB;
  --line-2: #EEF1F5;

  --blue: #2A6FDB;
  --blue-50: #EAF2FE;
  --amber: #F59E0B;
  --amber-50: #FEF3C7;
  --red: #EF4444;
  --red-50: #FEE2E2;
  --violet: #7C3AED;

  --r: 10px;
  --r-sm: 7px;
  --r-lg: 14px;
  --r-xl: 18px;
  --sh-1: 0 1px 2px rgba(16,24,40,.04);
  --sh-2: 0 4px 16px rgba(16,24,40,.06);
  --sh-3: 0 12px 32px rgba(16,24,40,.1);

  --sidebar-w: 248px;
  --topbar-h: 64px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-h: 'Manrope', 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--navy); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--green-100); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── App shell ──────────────────────────────────────────── */
.admin { display: flex; min-height: 100dvh; background: var(--bg); }

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--navy); color: #cbd5e1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; }
.sidebar__brand { display: flex; align-items: center; gap: 11px; padding: 20px 20px 18px; }
.sidebar__logo { width: 38px; height: 38px; border-radius: 10px; background: var(--green); display: grid; place-items: center; color: #fff; flex: 0 0 38px; box-shadow: 0 4px 12px rgba(76,175,80,.35); }
.sidebar__brand b { font-family: var(--font-h); font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; }
.sidebar__brand span { font-size: 11px; color: var(--muted-2); letter-spacing: .03em; }
.sidebar__sep { height: 1px; background: rgba(255,255,255,.07); margin: 4px 16px 12px; }
.sidebar__label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; padding: 0 22px; margin: 14px 0 6px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.navitem { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: var(--r); font-size: 14px; font-weight: 550; color: #cbd5e1; transition: background .14s, color .14s; position: relative; }
.navitem:hover { background: rgba(255,255,255,.06); color: #fff; }
.navitem.on { background: var(--green); color: #fff; box-shadow: 0 4px 14px rgba(76,175,80,.32); }
.navitem.on .navitem__ic { color: #fff; }
.navitem__ic { color: #94a3b8; display: grid; place-items: center; transition: color .14s; }
.navitem:hover .navitem__ic { color: #fff; }
.navitem__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.navitem.on .navitem__badge { background: rgba(255,255,255,.25); }
.sidebar__foot { margin-top: auto; padding: 14px; }
.sidebar__user { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: var(--r); background: rgba(255,255,255,.05); }
.sidebar__avatar { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex: 0 0 34px; }
.sidebar__user b { font-size: 13px; color: #fff; font-weight: 600; line-height: 1.2; }
.sidebar__user span { font-size: 11px; color: var(--muted-2); }
.sidebar__logout { margin-left: auto; color: var(--muted-2); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; }
.sidebar__logout:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ── Main ───────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.topbar__title { font-family: var(--font-h); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.topbar__sub { font-size: 12.5px; color: var(--muted-2); margin-top: 1px; }
.topbar__search { margin-left: 12px; flex: 0 1 340px; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; background: var(--bg); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted-2); }
.topbar__search input { flex: 1; background: none; border: none; outline: none; font-size: 13.5px; color: var(--ink); }
.topbar__spacer { flex: 1; }
.topbar__btn { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); position: relative; transition: background .14s, color .14s; }
.topbar__btn:hover { background: var(--bg); color: var(--ink); }
.topbar__btn .dot-ind { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; }
.topbar__cta { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r); background: var(--green); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 3px 10px rgba(76,175,80,.3); transition: background .14s; }
.topbar__cta:hover { background: var(--green-h); }

.content { padding: 26px 28px 48px; max-width: 1340px; width: 100%; }

/* ── Section heads ──────────────────────────────────────── */
.sec { margin-top: 28px; }
.sec:first-child { margin-top: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 16px; }
.sec-head h2 { font-family: var(--font-h); font-size: 16px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.sec-head h2 .ic { color: var(--muted-2); }
.sec-link { font-size: 13px; font-weight: 600; color: var(--green-d); display: inline-flex; align-items: center; gap: 4px; }
.sec-link:hover { color: var(--green-h); }

/* ── Cards ──────────────────────────────────────────────── */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.card--pad { padding: 20px; }

/* ── KPI tiles ──────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); padding: 18px 18px 16px; position: relative; overflow: hidden; }
.kpi__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
.kpi__ic.g { background: var(--green-50); color: var(--green-d); }
.kpi__ic.b { background: var(--blue-50); color: var(--blue); }
.kpi__ic.v { background: #F3EEFE; color: var(--violet); }
.kpi__ic.a { background: var(--amber-50); color: #B45309; }
.kpi__delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill, 99px); }
.kpi__delta.up { background: var(--green-50); color: var(--green-d); }
.kpi__delta.down { background: var(--red-50); color: var(--red); }
.kpi__val { font-family: var(--font-h); font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.kpi__label { font-size: 13px; color: var(--muted); margin-top: 6px; }
.kpi__spark { position: absolute; right: 0; bottom: 0; left: 0; height: 30px; opacity: .5; }

/* ── Layout grids ───────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }
.grid-2b { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

/* ── Tables ─────────────────────────────────────────────── */
.tbl-wrap { overflow: hidden; border-radius: var(--r-lg); }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); text-align: left; padding: 12px 16px; background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }
.tbl thead th.r, .tbl td.r { text-align: right; }
.tbl tbody td { padding: 13px 16px; font-size: 13.5px; box-shadow: inset 0 -1px 0 var(--line-2); }
.tbl tbody tr { transition: background .12s; cursor: pointer; }
.tbl tbody tr:hover { background: var(--bg); }
.tbl tbody tr:last-child td { box-shadow: none; }
.tbl .po { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.tbl .sup { font-weight: 600; }
.tbl .muted { color: var(--muted); }
.tbl .sum { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Status chips ───────────────────────────────────────── */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 3px 9px 3px 8px; border-radius: 99px; white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st--green { background: var(--green-50); color: var(--green-d); }
.st--blue { background: var(--blue-50); color: var(--blue); }
.st--amber { background: var(--amber-50); color: #B45309; }
.st--gray { background: #F1F5F9; color: var(--muted); }
.st--red { background: var(--red-50); color: var(--red); }

.margin-pill { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px; background: var(--green-50); color: var(--green-d); font-variant-numeric: tabular-nums; }
.margin-pill.mid { background: var(--amber-50); color: #B45309; }
.margin-pill.low { background: var(--red-50); color: var(--red); }

/* ── Error feed ─────────────────────────────────────────── */
.errfeed { display: flex; flex-direction: column; }
.erritem { display: flex; gap: 13px; padding: 14px 16px; box-shadow: inset 0 -1px 0 var(--line-2); transition: background .12s; }
.erritem:last-child { box-shadow: none; }
.erritem:hover { background: var(--bg); }
.erritem__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 36px; }
.erritem__ic.high { background: var(--red-50); color: var(--red); }
.erritem__ic.med { background: var(--amber-50); color: #B45309; }
.erritem__ic.low { background: var(--blue-50); color: var(--blue); }
.erritem__main { flex: 1; min-width: 0; }
.erritem__top { display: flex; align-items: center; gap: 8px; }
.erritem__title { font-size: 13.5px; font-weight: 650; }
.erritem__time { font-size: 11.5px; color: var(--muted-2); margin-left: auto; white-space: nowrap; }
.erritem__desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.erritem__act { font-size: 12.5px; font-weight: 650; color: var(--green-d); margin-top: 7px; display: inline-flex; align-items: center; gap: 4px; }
.erritem__act:hover { color: var(--green-h); }

/* ── Activity timeline ──────────────────────────────────── */
.activity { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.actrow { display: flex; gap: 12px; padding: 9px 10px; border-radius: var(--r); transition: background .12s; }
.actrow:hover { background: var(--bg); }
.actrow__ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 30px; }
.actrow__ic.green { background: var(--green-50); color: var(--green-d); }
.actrow__ic.blue { background: var(--blue-50); color: var(--blue); }
.actrow__ic.red { background: var(--red-50); color: var(--red); }
.actrow__ic.amber { background: var(--amber-50); color: #B45309; }
.actrow__tx { font-size: 13px; line-height: 1.4; color: var(--ink-2); flex: 1; }
.actrow__time { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }

/* ── Charts ─────────────────────────────────────────────── */
.chart-card { padding: 20px; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.chart-head h3 { font-family: var(--font-h); font-size: 15px; font-weight: 800; }
.chart-head .big { font-family: var(--font-h); font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px; background: var(--green-100); transition: background .14s, height .3s; min-height: 4px; }
.bar-col:hover .bar { background: var(--green); }
.bar.on { background: var(--green); }
.bar-x { font-size: 10.5px; color: var(--muted-2); font-weight: 600; }

.hbars { display: flex; flex-direction: column; gap: 13px; }
.hbar { }
.hbar__top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.hbar__top b { font-weight: 650; }
.hbar__top .v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--green-d); }
.hbar__track { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.hbar__fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--green) 0%, var(--green-d) 100%); }

/* mini sparkline svg fill helper */
.spark-fill { fill: var(--green); opacity: .12; }
.spark-line { fill: none; stroke: var(--green); stroke-width: 2; }

/* ── Suppliers list ─────────────────────────────────────── */
.sup-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface); border-radius: var(--r); padding: 3px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { height: 32px; padding: 0 14px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--green); color: #fff; }
.sup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.supcard { background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); padding: 18px; transition: box-shadow .16s, transform .16s; cursor: pointer; }
.supcard:hover { box-shadow: inset 0 0 0 1px var(--green-100), var(--sh-2); transform: translateY(-2px); }
.supcard__top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.supcard__logo { width: 46px; height: 46px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; color: var(--navy); flex: 0 0 46px; font-family: var(--font-h); font-weight: 800; font-size: 16px; }
.supcard__name { font-family: var(--font-h); font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.supcard__loc { font-size: 12px; color: var(--muted); margin-top: 3px; }
.supcard__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.supcard__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--line-2); }
.supstat b { font-family: var(--font-h); font-size: 16px; font-weight: 800; letter-spacing: -.02em; display: block; }
.supstat span { font-size: 11px; color: var(--muted-2); }
.supcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.rel { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.rel__bar { width: 54px; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.rel__fill { height: 100%; border-radius: 3px; }

/* status dot label */
.sdl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; }
.sdl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.sdl.active { color: var(--green-d); } .sdl.active::before { background: var(--green); }
.sdl.warning { color: #B45309; } .sdl.warning::before { background: var(--amber); }
.sdl.paused { color: var(--muted); } .sdl.paused::before { background: var(--muted-2); }

/* ── Supplier detail ────────────────────────────────────── */
.back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 16px; height: 34px; padding: 0 12px 0 8px; border-radius: var(--r); }
.back-btn:hover { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.sup-hero { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); padding: 22px; margin-bottom: 18px; }
.sup-hero__logo { width: 66px; height: 66px; border-radius: 16px; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-h); font-weight: 800; font-size: 22px; flex: 0 0 66px; }
.sup-hero__main { flex: 1; min-width: 220px; }
.sup-hero__name { font-family: var(--font-h); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.sup-hero__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 7px; font-size: 13px; color: var(--muted); }
.sup-hero__meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-3); }
.sup-hero__actions { display: flex; gap: 9px; flex-shrink: 0; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: var(--r); font-size: 13.5px; font-weight: 600; transition: background .14s, box-shadow .14s; white-space: nowrap; }
.btn--primary { background: var(--green); color: #fff; box-shadow: 0 3px 10px rgba(76,175,80,.28); }
.btn--primary:hover { background: var(--green-h); }
.btn--ghost { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.btn--ghost:hover { background: var(--bg); }
.btn--tg { background: #229ED9; color: #fff; }
.btn--tg:hover { background: #1c8ec4; }
.btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn--block { width: 100%; }

.detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.minikpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.minikpi { background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); padding: 15px 16px; }
.minikpi b { font-family: var(--font-h); font-size: 21px; font-weight: 800; letter-spacing: -.02em; display: block; }
.minikpi span { font-size: 12px; color: var(--muted); }

/* ── Settings ───────────────────────────────────────────── */
.settings-layout { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: calc(var(--topbar-h) + 26px); }
.snav { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 13px; border-radius: var(--r); font-size: 13.5px; font-weight: 550; color: var(--muted); }
.snav:hover { background: var(--surface); color: var(--ink); }
.snav.on { background: var(--surface); color: var(--green-d); font-weight: 650; box-shadow: inset 0 0 0 1px var(--line); }
.snav.on .ic { color: var(--green-d); }
.snav .ic { color: var(--muted-2); }
.setcard { background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); padding: 24px; margin-bottom: 18px; }
.setcard h3 { font-family: var(--font-h); font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.setcard__sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > label { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.field > .hint { font-size: 12px; color: var(--muted-2); }
.input { height: 44px; border-radius: var(--r); padding: 0 14px; font-size: 14px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); outline: none; transition: box-shadow .14s; }
.input:focus { box-shadow: inset 0 0 0 2px var(--green); }
textarea.input { height: auto; padding: 12px 14px; resize: vertical; min-height: 80px; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.input-prefix { display: flex; align-items: center; height: 44px; border-radius: var(--r); box-shadow: inset 0 0 0 1.5px var(--line); overflow: hidden; }
.input-prefix__p { padding: 0 13px; background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 600; align-self: stretch; display: flex; align-items: center; box-shadow: inset -1px 0 0 var(--line); }
.input-prefix input { flex: 1; border: none; outline: none; background: none; padding: 0 14px; font-size: 14px; }

.toggle-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; box-shadow: inset 0 -1px 0 var(--line-2); }
.toggle-row:last-child { box-shadow: none; }
.toggle-row__main { flex: 1; }
.toggle-row__main b { font-size: 13.5px; font-weight: 600; display: block; }
.toggle-row__main span { font-size: 12.5px; color: var(--muted); }
.switch { width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; transition: background .18s; flex: 0 0 44px; }
.switch.on { background: var(--green); }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.switch.on .switch__knob { transform: translateX(18px); }

.routerow { display: grid; grid-template-columns: 1fr auto 1.3fr; align-items: center; gap: 12px; padding: 13px 0; box-shadow: inset 0 -1px 0 var(--line-2); }
.routerow:last-child { box-shadow: none; }
.routerow__evt { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.routerow__evt .ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--bg); color: var(--muted); }
.tg-chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: var(--r); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tg-chip .ic { color: #229ED9; }

.setfoot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.saved-note { font-size: 12.5px; color: var(--green-d); display: inline-flex; align-items: center; gap: 5px; margin-right: auto; }

/* ── Toast ──────────────────────────────────────────────── */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--r); font-size: 14px; font-weight: 550; display: flex; align-items: center; gap: 9px; box-shadow: var(--sh-3); z-index: 90; animation: toastUp .3s cubic-bezier(.2,.8,.2,1); }
.toast i { color: var(--green); display: grid; place-items: center; }
@keyframes toastUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-2b, .detail-grid { grid-template-columns: 1fr; }
  .sup-grid { grid-template-columns: repeat(2, 1fr); }
  .minikpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .sidebar { display: none; }
  .sup-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { flex-direction: row; overflow-x: auto; position: static; }
  .content { padding: 18px; }
}