/* ============================================================================
   EcuTunerx — Operator command center (dashboard)
   ========================================================================== */
.adm-body { padding-top: 0; }

/* ---- login gate ---- */
.adm-login { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); }
.adm-login__card { width: min(420px, 92vw); padding: var(--sp-7); text-align: center; }
.adm-login__card .brand { justify-content: center; font-size: 1.3rem; margin-bottom: var(--sp-5); }
.adm-login__card h1 { font-size: 1.2rem; margin-bottom: 6px; }
.adm-login__card p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.adm-login__card .input { text-align: center; letter-spacing: 0.1em; margin-bottom: var(--sp-4); }
.adm-login__err { color: var(--danger); font-size: var(--fs-sm); min-height: 1.2em; margin-top: 10px; }

/* ---- shell ---- */
.adm-top { position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 14px var(--gutter); background: rgba(9,11,14,0.85); backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--line); }
.adm-top .brand { font-size: 1rem; }
.adm-top .brand b { color: var(--accent); }
.adm-top__tag { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.adm-top__right { display: flex; align-items: center; gap: 10px; }
.adm-main { padding: var(--sp-6) var(--gutter) var(--sp-9); max-width: 1320px; margin-inline: auto; }
.adm-tabs { display: flex; gap: 6px; margin-bottom: var(--sp-6); }
.adm-tab { padding: 9px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-dim); border: 1px solid transparent; cursor: pointer; transition: all var(--dur); }
.adm-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.adm-tab.is-active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(25,230,255,0.3); }
.adm-view { display: none; }
.adm-view.is-active { display: block; animation: ostepIn .4s var(--ease-out); }

/* ---- KPI cards ---- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-5); }
@media (max-width: 1080px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kpis { grid-template-columns: 1fr; } }
.kpi { position: relative; padding: var(--sp-5); overflow: hidden; }
.kpi__lab { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.kpi__lab svg { width: 15px; height: 15px; color: var(--accent); }
.kpi__val { font-family: var(--font-display); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem); margin-top: 12px; color: var(--text); line-height: 1; }
.kpi__sub { margin-top: 10px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.kpi__sub b { color: var(--ok); }
.kpi--accent::after, .kpi--amber::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.kpi--accent::after { background: var(--grad-accent); }
.kpi--amber::after { background: var(--grad-heat); }

/* ---- chart grid ---- */
.charts { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.charts-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
@media (max-width: 960px) { .charts, .charts-2 { grid-template-columns: 1fr; } }
.panel { padding: var(--sp-5); }
.panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.panel__title { font-size: 1.05rem; font-weight: 600; }
.panel__hint { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.06em; }
.chart-area { height: 200px; }

/* donut */
.donut-wrap { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 140px; }
.lg { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.lg__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lg__lab { color: var(--text-dim); flex: 1; min-width: 0; text-transform: capitalize; }
.lg__val { font-family: var(--font-mono); color: var(--text); }

/* horizontal bars */
.hbar { display: grid; grid-template-columns: 130px 1fr 56px; align-items: center; gap: 12px; margin-bottom: 12px; }
.hbar__lab { font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar__track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hbar__fill { height: 100%; border-radius: 999px; transition: width .8s var(--ease-out); }
.hbar__val { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); text-align: right; }
.muted-empty { color: var(--faint); font-family: var(--font-mono); font-size: var(--fs-sm); padding: var(--sp-4) 0; }

/* funnel */
.fn { margin-bottom: 14px; }
.fn__top { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 6px; }
.fn__lab { color: var(--text-dim); }
.fn__rate { font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-xs); }
.fn__track { background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; }
.fn__fill { height: 34px; background: var(--grad-thermal); display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; border-radius: var(--r-sm); transition: width .8s var(--ease-out); }
.fn__fill span { font-family: var(--font-display); font-size: 0.85rem; color: #04181c; font-weight: 700; }

/* ops queue chips */
.ops { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
@media (max-width: 860px) { .ops { grid-template-columns: repeat(2, 1fr); } }
.ops__item { padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-align: center; }
.ops__num { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); }
.ops__num.is-warn { color: var(--accent-2); }
.ops__lab { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* ---- orders table ---- */
.orders-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-4); align-items: center; }
.flt { padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-dim); border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: all var(--dur); }
.flt.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tbl-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 760px; }
.tbl th { text-align: left; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-dim); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { cursor: pointer; transition: background var(--dur); }
.tbl tbody tr:hover { background: rgba(255,255,255,0.03); }
.tbl .mono { font-family: var(--font-mono); color: var(--text); }
.tbl__veh b { color: var(--text); }

/* status pill */
.pill { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pill--new { background: rgba(43,168,255,0.14); color: #6cc6ff; }
.pill--stock_archived, .pill--waiver_signed { background: var(--accent-soft); color: var(--accent); }
.pill--tuning { background: var(--accent-2-soft); color: var(--accent-2); }
.pill--delivered { background: rgba(56,232,160,0.14); color: var(--ok); }
.pill--revising { background: rgba(255,197,61,0.14); color: var(--warn); }
.pill--closed { background: rgba(255,255,255,0.06); color: var(--muted); }
.pill--cancelled { background: var(--hot-soft); color: var(--hot); }
.gate { font-family: var(--font-mono); font-size: 0.66rem; }
.gate b { color: var(--ok); } .gate s { color: var(--faint); text-decoration: none; }

/* ---- detail drawer ---- */
.drawer-ovl { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility var(--dur); }
.drawer-ovl.is-open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-modal); width: min(520px, 96vw); background: var(--surface); border-left: 1px solid var(--line-strong);
  transform: translateX(100%); transition: transform var(--dur) var(--ease-out); overflow-y: auto; padding: var(--sp-6); }
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.drawer__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.03em; }
.drawer__id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); margin-top: 4px; }
.drawer__close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-dim); flex: none; }
.drawer__close:hover { border-color: var(--accent); color: var(--accent); }
.drawer__section { margin-top: var(--sp-5); }
.drawer__section h4 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); } .kv .v { color: var(--text); text-align: right; }
.drawer__actions { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-5); }
.drawer__row { display: flex; gap: 10px; flex-wrap: wrap; }
.drawer__row .btn { flex: 1; }
.act-out { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim); white-space: pre-wrap; max-height: 240px; overflow: auto; display: none; }
.act-out.show { display: block; }