/* =============================================================
   DULHAN — Metro Design System
   HPCL Retail Engineering · HQO Administration
   ============================================================= */

:root {
  --hpcl-navy:#002B5C; --hpcl-navy-2:#013A7A; --hpcl-gold:#C9A227;
  --m-blue:#0078D7; --m-cyan:#00BCF2; --m-teal:#008272; --m-green:#107C10;
  --m-lime:#6BA300; --m-yellow:#FFB900; --m-orange:#D83B01; --m-red:#E81123;
  --m-magenta:#B4009E; --m-purple:#5C2D91;
  --ink:#1B1B1B; --ink-2:#5C5C5C; --ink-3:#8A8A8A;
  --line:#E5E5E5; --bg:#F4F4F4; --panel:#FFFFFF;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; }
body {
  font-family:'Sora','Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.4; -webkit-font-smoothing:antialiased;
}
a { color:var(--hpcl-navy); text-decoration:none; }
.mono { font-family:'JetBrains Mono','Consolas',monospace; }

/* ─── App bar ──────────────────────────────────────────── */
.appbar { background:var(--panel); height:56px; display:flex; align-items:stretch; border-bottom:4px solid var(--hpcl-navy); padding:0 0 0 24px; position:sticky; top:0; z-index:50; }
.brand { display:flex; align-items:center; gap:12px; padding-right:28px; border-right:1px solid var(--line); text-decoration:none; }
.brand-mark { width:32px; height:32px; background:var(--hpcl-navy); color:var(--hpcl-gold); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; letter-spacing:-0.5px; }
.brand-name { font-size:16px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--ink); }
.brand-sub { font-size:9px; letter-spacing:1.5px; color:var(--ink-2); text-transform:uppercase; margin-top:1px; }
.nav { display:flex; align-items:stretch; overflow-x:auto; }
.nav a { display:flex; align-items:center; padding:0 18px; font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-2); text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-3px; white-space:nowrap; }
.nav a:hover { color:var(--ink); }
.nav a.active { color:var(--hpcl-navy); border-bottom-color:var(--hpcl-gold); font-weight:700; }
.nav a .badge { background:var(--hpcl-gold); color:var(--hpcl-navy); font-size:9px; padding:1px 6px; margin-left:6px; font-weight:700; }
.user { margin-left:auto; display:flex; align-items:center; gap:12px; padding:0 24px; background:var(--hpcl-navy); color:white; text-decoration:none; }
.user .ava { width:30px; height:30px; background:var(--hpcl-gold); color:var(--hpcl-navy); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; }
.user .name { font-size:12px; font-weight:600; color:white; }
.user .role { font-size:9px; letter-spacing:1.2px; text-transform:uppercase; opacity:0.75; margin-top:1px; }

/* ─── Crumb + Hero ─────────────────────────────────────── */
.crumb { background:var(--panel); padding:10px 40px; border-bottom:1px solid var(--line); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); }
.crumb a { color:var(--ink-3); }
.crumb b { color:var(--hpcl-navy); }

.hero { background:var(--panel); padding:30px 40px 26px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:24px; }
.hero-eyebrow { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.hero-eyebrow::before { content:''; width:28px; height:2px; background:var(--hpcl-gold); }
.hero h1 { font-size:40px; font-weight:200; line-height:1; color:var(--ink); letter-spacing:-1.5px; }
.hero h1 strong { font-weight:700; color:var(--hpcl-navy); }
.hero .sub { font-size:13px; color:var(--ink-2); font-weight:300; margin-top:10px; max-width:640px; }
.hero-cta { display:flex; gap:8px; flex-shrink:0; }

/* ─── Buttons ──────────────────────────────────────────── */
.btn { font-family:inherit; font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; padding:12px 22px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.btn-primary { background:var(--hpcl-navy); color:white; }
.btn-primary:hover { background:var(--hpcl-navy-2); color:white; }
.btn-gold { background:var(--hpcl-gold); color:var(--hpcl-navy); }
.btn-gold:hover { background:#B08E1F; }
.btn-light { background:var(--panel); color:var(--ink-2); border:1px solid var(--line); }
.btn-light:hover { background:var(--bg); color:var(--ink); }
.btn-green { background:var(--m-green); color:white; }
.btn-red { background:var(--m-red); color:white; }
.btn-sm { padding:7px 14px; font-size:10px; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ─── Content + sections ───────────────────────────────── */
.content { padding:24px 40px 48px; }
.content.narrow { max-width:1400px; }
.section-h { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--ink-2); margin:24px 0 14px; display:flex; align-items:center; gap:14px; font-weight:600; }
.section-h:first-child { margin-top:0; }
.section-h::after { content:''; flex:1; height:1px; background:var(--line); }
.section-h .h-pill { background:var(--hpcl-navy); color:white; padding:3px 10px; font-size:9px; letter-spacing:1.2px; }
.section-h .h-pill.gold { background:var(--hpcl-gold); color:var(--hpcl-navy); }
.section-h .n { background:var(--hpcl-navy); color:white; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.section-h .india { background:var(--hpcl-gold); color:var(--hpcl-navy); padding:3px 9px; font-size:9px; letter-spacing:1px; }

/* ─── Programme progress ───────────────────────────────── */
.programme { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:6px; }
.prog-card { background:var(--hpcl-navy); color:white; padding:26px 30px; }
.prog-card.gold-card { background:var(--hpcl-gold); color:var(--hpcl-navy); }
.prog-card .pc-label { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; opacity:0.85; font-weight:600; margin-bottom:14px; }
.prog-card .pc-main { display:flex; align-items:baseline; gap:14px; }
.prog-card .pc-num { font-size:54px; font-weight:200; line-height:1; letter-spacing:-2px; }
.prog-card .pc-of { font-size:18px; font-weight:300; opacity:0.8; }
.prog-card .pc-pct { margin-left:auto; font-size:32px; font-weight:700; letter-spacing:-1px; }
.prog-track { height:8px; background:rgba(255,255,255,0.2); margin-top:18px; }
.gold-card .prog-track { background:rgba(0,43,92,0.15); }
.prog-fill { height:100%; background:var(--hpcl-gold); }
.gold-card .prog-fill { background:var(--hpcl-navy); }
.prog-meta { display:flex; justify-content:space-between; margin-top:10px; font-size:10px; letter-spacing:1px; text-transform:uppercase; opacity:0.8; }

/* ─── KPI strip ────────────────────────────────────────── */
.kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:6px; }
.kpis.k4 { grid-template-columns:repeat(4,1fr); }
.kpis.k3 { grid-template-columns:repeat(3,1fr); }
.kpi { background:var(--panel); padding:16px 18px; border-top:3px solid var(--ink-3); }
.kpi.k-orange{border-top-color:var(--m-orange);} .kpi.k-blue{border-top-color:var(--m-blue);}
.kpi.k-teal{border-top-color:var(--m-teal);} .kpi.k-green{border-top-color:var(--m-green);}
.kpi.k-purple{border-top-color:var(--m-purple);} .kpi.k-red{border-top-color:var(--m-red);}
.kpi.k-gold{border-top-color:var(--hpcl-gold);} .kpi.k-navy{border-top-color:var(--hpcl-navy);}
.kpi .k-num { font-size:34px; font-weight:200; line-height:1; letter-spacing:-1.5px; color:var(--hpcl-navy); }
.kpi .k-num.sm { font-size:24px; }
.kpi .k-lbl { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-2); font-weight:600; margin-top:8px; }
.kpi .k-sub { font-size:10px; color:var(--ink-3); margin-top:3px; }

/* ─── Live tiles ───────────────────────────────────────── */
.tiles { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:130px; gap:6px; margin-bottom:6px; }
.tile { padding:18px 20px; color:white; display:flex; flex-direction:column; justify-content:space-between; position:relative; text-decoration:none; }
.tile .lbl { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600; opacity:0.95; }
.tile .num { font-size:52px; font-weight:200; line-height:1; letter-spacing:-2px; margin-top:auto; }
.tile .num.sm { font-size:34px; }
.tile .corner { position:absolute; bottom:10px; right:12px; font-size:10px; letter-spacing:1px; opacity:0.75; text-transform:uppercase; font-weight:500; }
.tile.wide { grid-column:span 2; } .tile.wide-2 { grid-column:span 3; }
.tile.t-navy{background:var(--hpcl-navy);} .tile.t-gold{background:var(--hpcl-gold);color:#2A1F00;}
.tile.t-blue{background:var(--m-blue);} .tile.t-teal{background:var(--m-teal);} .tile.t-green{background:var(--m-green);}
.tile.t-orange{background:var(--m-orange);} .tile.t-purple{background:var(--m-purple);} .tile.t-red{background:var(--m-red);} .tile.t-magenta{background:var(--m-magenta);}

/* ─── India strip ──────────────────────────────────────── */
.india-strip { background:var(--hpcl-navy); color:white; padding:16px 24px; display:flex; align-items:center; gap:24px; margin-bottom:6px; flex-wrap:wrap; }
.india-strip .india-mark { background:var(--hpcl-gold); color:var(--hpcl-navy); padding:6px 14px; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.india-strip .ii { display:flex; flex-direction:column; }
.india-strip .ii .ii-lbl { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; opacity:0.7; margin-bottom:4px; font-weight:500; }
.india-strip .ii .ii-val { font-size:16px; font-weight:300; }
.india-strip .ii .ii-val strong { color:var(--hpcl-gold); font-weight:600; }
.india-strip .ii-sep { width:1px; align-self:stretch; background:rgba(255,255,255,0.2); }

/* ─── Panels ───────────────────────────────────────────── */
.cols { display:grid; grid-template-columns:1.4fr 1fr; gap:6px; }
.cols.even { grid-template-columns:1fr 1fr; }
.panel { background:var(--panel); margin-bottom:6px; }
.panel-head { padding:16px 20px 12px; display:flex; justify-content:space-between; align-items:baseline; border-bottom:3px solid var(--hpcl-navy); }
.panel-head .ttl { font-size:17px; font-weight:600; color:var(--hpcl-navy); letter-spacing:-0.3px; }
.panel-head .stamp { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-2); font-weight:600; }
.panel-body { padding:20px; }

/* ─── Zone bars ────────────────────────────────────────── */
.zone-row { display:grid; grid-template-columns:150px 1fr 96px; align-items:center; gap:16px; padding:13px 20px; border-bottom:1px solid var(--line); }
.zone-row:last-child { border-bottom:0; }
.zone-name { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.8px; }
.zone-name span { display:block; font-size:9px; color:var(--ink-3); font-weight:400; letter-spacing:1px; margin-top:2px; }
.zone-track { height:20px; background:#F2F2F2; position:relative; }
.zone-fill { height:100%; position:absolute; left:0; top:0; display:flex; align-items:center; padding-left:8px; font-size:9px; color:white; font-weight:600; }
.zf-1{background:var(--m-blue);} .zf-2{background:var(--m-teal);} .zf-3{background:var(--m-green);} .zf-4{background:var(--hpcl-gold);color:var(--hpcl-navy);} .zf-5{background:var(--m-purple);}
.zone-val { text-align:right; }
.zone-val .zv-num { font-size:16px; font-weight:600; color:var(--hpcl-navy); font-family:'JetBrains Mono',monospace; }
.zone-val .zv-pct { font-size:10px; color:var(--ink-3); }

/* ─── Storage grid ─────────────────────────────────────── */
.sp-grid { display:grid; grid-template-columns:repeat(2,1fr); }
.sp-cell { padding:14px 18px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.sp-cell:nth-child(2n) { border-right:0; }
.sp-cell .sp-name { font-size:12px; font-weight:600; }
.sp-cell .sp-loc { font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); margin-top:2px; }
.sp-cell .sp-bar { display:flex; align-items:center; gap:8px; margin-top:10px; }
.sp-cell .sp-track { flex:1; height:6px; background:#F0F0F0; position:relative; overflow:hidden; }
.sp-cell .sp-fill { position:absolute; left:0; top:0; height:6px; background:var(--m-green); }
.sp-cell .sp-fill.low { background:var(--m-orange); }
.sp-cell .sp-fill.empty { background:var(--m-red); }
.sp-cell .sp-count { font-size:11px; font-weight:600; font-family:'JetBrains Mono',monospace; }

/* ─── Batch pipeline ───────────────────────────────────── */
.batch-row { display:grid; grid-template-columns:auto 1fr auto; gap:14px; padding:14px 20px; border-bottom:1px solid var(--line); align-items:center; text-decoration:none; color:inherit; }
.batch-row:last-child { border-bottom:0; }
.batch-row:hover { background:var(--bg); }
.batch-id { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:var(--hpcl-navy); }
.batch-id span { display:block; font-size:9px; color:var(--ink-3); font-weight:400; letter-spacing:0.5px; margin-top:2px; text-transform:uppercase; font-family:'Sora',sans-serif; }
.batch-prog { display:flex; align-items:center; gap:4px; min-width:120px; }
.batch-step { flex:1; height:5px; background:#E8E8E8; }
.batch-step.done { background:var(--m-green); }
.batch-step.active { background:var(--hpcl-gold); }
.batch-meta { text-align:right; font-size:11px; }
.batch-meta .bm-route { font-weight:600; }
.batch-meta .bm-split { font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--m-purple); font-weight:600; margin-top:2px; }
.batch-meta .bm-split.single { color:var(--ink-3); }

/* ─── Alerts ───────────────────────────────────────────── */
.alert-row { display:flex; align-items:center; gap:14px; padding:13px 20px; border-bottom:1px solid var(--line); }
.alert-row:last-child { border-bottom:0; }
.alert-tag { width:4px; align-self:stretch; min-height:34px; }
.alert-tag.warn{background:var(--m-orange);} .alert-tag.danger{background:var(--m-red);} .alert-tag.info{background:var(--m-blue);} .alert-tag.ok{background:var(--m-green);}
.alert-body { flex:1; }
.alert-body .at { font-size:12px; font-weight:600; }
.alert-body .as { font-size:11px; color:var(--ink-2); margin-top:2px; }
.alert-time { font-size:10px; color:var(--ink-3); font-family:'JetBrains Mono',monospace; }

/* ─── Tables ───────────────────────────────────────────── */
table.data { width:100%; border-collapse:collapse; background:var(--panel); }
table.data th { text-align:left; padding:12px 20px; font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--ink-2); background:#F8F8F8; border-bottom:1px solid var(--line); white-space:nowrap; }
table.data th.right { text-align:right; }
table.data td { padding:13px 20px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }
table.data tr:last-child td { border-bottom:0; }
table.data tbody tr:hover { background:var(--bg); }
table.data td.right { text-align:right; }
table.data td.mono, table.data .mono { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:-0.3px; }
.cell-stack { display:flex; flex-direction:column; gap:1px; }
.cell-stack .pri { font-weight:600; }
.cell-stack .sec { font-size:10px; color:var(--ink-3); letter-spacing:0.5px; }

/* status badges (flat rectangles - Metro) */
.status { display:inline-flex; align-items:center; padding:3px 11px; font-size:9px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:white; }
.status.s-warning{background:var(--m-orange);} .status.s-success{background:var(--m-green);}
.status.s-purple{background:var(--m-purple);} .status.s-info{background:var(--m-blue);}
.status.s-danger{background:var(--m-red);} .status.s-neutral{background:var(--ink-3);}
.status.s-gold{background:var(--hpcl-gold);color:var(--hpcl-navy);}

.gst-tag { display:inline-block; padding:2px 9px; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.gst-tag.igst { background:#E3F0FB; color:var(--m-blue); }
.gst-tag.cgst { background:#E5F3E8; color:var(--m-green); }

/* ─── Forms ────────────────────────────────────────────── */
.fg { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.field { display:flex; flex-direction:column; gap:5px; }
.c2{grid-column:span 2;} .c3{grid-column:span 3;} .c4{grid-column:span 4;} .c5{grid-column:span 5;} .c6{grid-column:span 6;} .c8{grid-column:span 8;} .c12{grid-column:span 12;}
.field label { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-2); font-weight:600; }
.field label .req { color:var(--m-red); }
.field label .opt { color:var(--ink-3); font-weight:400; }
.field input, .field select, .field textarea { padding:9px 11px; border:1px solid var(--line); background:var(--panel); font-family:inherit; font-size:13px; border-radius:0; color:var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--hpcl-navy); }
.field input[readonly] { background:#F8F8F8; color:var(--ink-2); }
.field input.mono { font-family:'JetBrains Mono',monospace; }
.field textarea { resize:vertical; min-height:64px; }
.field .hint { font-size:10px; color:var(--ink-3); }
.field-prefix { position:relative; }
.field-prefix input { padding-left:24px; }
.field-prefix .pfx { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:12px; }

/* mode toggle */
.mode-toggle { display:grid; grid-template-columns:1fr 1fr; gap:0; border:2px solid var(--hpcl-navy); margin-bottom:6px; }
.mode-opt { padding:18px 22px; cursor:pointer; display:flex; gap:14px; align-items:flex-start; background:var(--panel); }
.mode-opt:first-child { border-right:1px solid var(--line); }
.mode-opt.active { background:var(--hpcl-navy); color:white; }
.mode-opt .mo-radio { width:18px; height:18px; border:2px solid var(--ink-3); border-radius:50%; flex-shrink:0; margin-top:2px; position:relative; }
.mode-opt.active .mo-radio { border-color:var(--hpcl-gold); }
.mode-opt.active .mo-radio::after { content:''; position:absolute; inset:3px; background:var(--hpcl-gold); border-radius:50%; }
.mode-opt .mo-title { font-size:14px; font-weight:600; }
.mode-opt .mo-desc { font-size:11px; color:var(--ink-3); margin-top:3px; line-height:1.4; }
.mode-opt.active .mo-desc { color:rgba(255,255,255,0.75); }

/* allocation table */
.alloc-table { width:100%; border-collapse:collapse; }
.alloc-table th { text-align:left; padding:10px 14px; font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-2); background:#F8F8F8; border-bottom:2px solid var(--hpcl-navy); }
.alloc-table th.right, .alloc-table td.right { text-align:right; }
.alloc-table td { padding:12px 14px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }
.alloc-table .qty-input { width:64px; padding:7px 9px; border:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:13px; text-align:center; }
.alloc-table tfoot td { background:#FAFAFA; border-top:2px solid var(--hpcl-navy); border-bottom:0; font-weight:600; padding:14px; }
.alloc-table tfoot .total-num { font-family:'JetBrains Mono',monospace; font-size:16px; color:var(--hpcl-navy); }
.eway-mini { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--hpcl-navy); }
.eway-mini span { display:block; font-size:9px; color:var(--ink-3); letter-spacing:0.5px; margin-top:2px; font-family:'Sora',sans-serif; }
.row-del { color:var(--ink-3); cursor:pointer; font-size:14px; background:none; border:none; }
.btn-add { background:var(--panel); border:1px dashed var(--hpcl-navy); color:var(--hpcl-navy); padding:10px 18px; font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer; font-family:inherit; margin-top:14px; }

/* split summary */
.split-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:6px; }
.ss-card { padding:16px 18px; color:white; }
.ss-card.c-navy{background:var(--hpcl-navy);} .ss-card.c-gold{background:var(--hpcl-gold);color:var(--hpcl-navy);} .ss-card.c-teal{background:var(--m-teal);} .ss-card.c-purple{background:var(--m-purple);}
.ss-card .ss-num { font-size:30px; font-weight:200; letter-spacing:-1px; line-height:1; }
.ss-card .ss-lbl { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; margin-top:8px; opacity:0.9; }

/* stat grid (detail view) */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px 28px; }
.stat-grid.c3 { grid-template-columns:repeat(3,1fr); }
.stat-grid.c2 { grid-template-columns:repeat(2,1fr); }
.stat .s-lbl { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:4px; }
.stat .s-val { font-size:14px; font-weight:500; }
.stat .s-val.mono { font-family:'JetBrains Mono',monospace; font-size:13px; }
.stat .s-val.big { font-size:20px; font-weight:600; color:var(--hpcl-navy); }

/* ─── Sticky action bar ────────────────────────────────── */
.action-bar { position:sticky; bottom:0; left:0; right:0; background:var(--panel); border-top:1px solid var(--line); padding:16px 40px; display:flex; align-items:center; gap:16px; box-shadow:0 -2px 12px rgba(0,0,0,0.06); z-index:20; }
.action-bar .ab-note { font-size:11px; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.action-bar .ab-note b { color:var(--hpcl-navy); }
.action-bar .spacer { flex:1; }

/* ─── Banners + toast ──────────────────────────────────── */
.banner { padding:14px 18px; font-size:12px; display:flex; gap:10px; align-items:flex-start; margin-bottom:16px; }
.banner.india { background:#FFF9E8; border-left:4px solid var(--hpcl-gold); color:#6b5410; }
.banner.info { background:#E3F0FB; border-left:4px solid var(--m-blue); color:#0b4a86; }
.banner.warn { background:#FDEEE6; border-left:4px solid var(--m-orange); color:#8a3206; }
.toast-wrap { position:fixed; top:70px; right:24px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--panel); border-left:4px solid var(--m-green); padding:14px 40px 14px 16px; min-width:320px; box-shadow:0 4px 16px rgba(0,0,0,0.14); font-size:12px; position:relative; }
.toast.err { border-left-color:var(--m-red); }
.toast .x { position:absolute; top:10px; right:12px; cursor:pointer; color:var(--ink-3); background:none; border:none; font-size:14px; }

/* ─── Pipeline (equipment lifecycle on detail) ─────────── */
.pipeline { display:flex; align-items:center; gap:0; padding:16px 20px; background:var(--panel); margin-bottom:6px; overflow-x:auto; }
.pipeline .step { display:flex; align-items:center; gap:8px; flex-shrink:0; padding-right:14px; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; font-weight:600; }
.pipeline .step::after { content:''; width:20px; height:2px; background:var(--line); margin-left:6px; }
.pipeline .step:last-child::after { display:none; }
.pipeline .step .sn { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; background:#EEE; color:var(--ink-3); font-weight:700; }
.pipeline .step.done .sn { background:var(--m-green); color:white; }
.pipeline .step.done { color:var(--ink); }
.pipeline .step.current .sn { background:var(--hpcl-navy); color:var(--hpcl-gold); }
.pipeline .step.current { color:var(--hpcl-navy); }

/* ─── Empty state ──────────────────────────────────────── */
.empty { text-align:center; padding:60px 24px; color:var(--ink-3); background:var(--panel); }
.empty .e-mark { font-size:40px; margin-bottom:12px; }
.empty h3 { color:var(--ink); font-size:16px; margin-bottom:6px; }
.empty p { font-size:12px; margin-bottom:18px; }

/* ─── Filter bar ───────────────────────────────────────── */
.filter-bar { background:var(--panel); padding:12px 20px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.filter-bar .fb-lbl { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.filter-bar select, .filter-bar input { padding:7px 10px; border:1px solid var(--line); font-family:inherit; font-size:12px; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; background:var(--bg); border:1px solid var(--line); font-size:10px; letter-spacing:1px; text-transform:uppercase; font-weight:600; color:var(--ink-2); cursor:pointer; text-decoration:none; }
.chip.active { background:var(--hpcl-navy); color:white; border-color:var(--hpcl-navy); }

/* ─── DN print doc ─────────────────────────────────────── */
.dn-doc { background:var(--panel); padding:36px 40px; max-width:900px; margin:0 auto; }
.dn-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:4px solid var(--hpcl-navy); padding-bottom:18px; margin-bottom:24px; }
.dn-head .corp { font-size:20px; font-weight:800; color:var(--hpcl-navy); letter-spacing:-0.3px; }
.dn-head .corp-sub { font-size:10px; color:var(--ink-2); margin-top:4px; letter-spacing:0.5px; }
.dn-head .doc-type { font-size:13px; font-weight:700; color:var(--hpcl-navy); margin-top:10px; letter-spacing:1px; }
.dn-stamp { background:var(--hpcl-navy); color:var(--hpcl-gold); padding:5px 16px; font-weight:700; letter-spacing:3px; font-size:12px; text-align:center; }
.dn-no { font-family:'JetBrains Mono',monospace; font-weight:700; margin-top:8px; text-align:right; }
.dn-blocks { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; }
.dn-block { border:1px solid var(--line); background:#FAFAFA; padding:14px 16px; }
.dn-block .lbl { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:6px; }
.dn-block .nm { font-weight:700; margin-bottom:4px; }
.dn-block .ad { font-size:11px; color:var(--ink-2); line-height:1.5; }
.dn-sign { display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; margin-top:56px; }
.dn-sign .box { border-top:1px solid var(--ink); padding-top:8px; font-size:11px; }
.dn-sign .box strong { display:block; }
.dn-sign .box .r { color:var(--ink-2); font-size:10px; }

/* ─── Login ────────────────────────────────────────────── */
.login-wrap { display:flex; min-height:100vh; }
.login-left { flex:1.1; background:var(--hpcl-navy); color:white; padding:56px 64px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.login-left::after { content:''; position:absolute; right:-120px; bottom:-120px; width:380px; height:380px; background:var(--hpcl-gold); opacity:0.08; }
.login-brand { display:flex; align-items:center; gap:14px; }
.login-brand .lb-mark { width:48px; height:48px; background:var(--hpcl-gold); color:var(--hpcl-navy); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; }
.login-brand .lb-corp { font-size:13px; font-weight:600; }
.login-brand .lb-sub { font-size:11px; opacity:0.7; }
.login-hero h1 { font-size:60px; font-weight:200; letter-spacing:6px; text-transform:uppercase; line-height:1; margin-bottom:14px; }
.login-hero h1 b { color:var(--hpcl-gold); font-weight:700; }
.login-hero .tag { font-size:13px; color:var(--hpcl-gold); letter-spacing:1px; margin-bottom:22px; }
.login-hero .lead { font-size:14px; line-height:1.6; opacity:0.85; max-width:460px; font-weight:300; }
.login-stats { display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; margin-top:40px; max-width:480px; }
.login-stats .sn { font-size:34px; font-weight:200; color:var(--hpcl-gold); line-height:1; letter-spacing:-1px; }
.login-stats .sl { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; opacity:0.8; margin-top:5px; }
.login-foot { font-size:10px; opacity:0.5; letter-spacing:0.5px; }
.login-right { flex:0 0 460px; background:var(--panel); padding:80px 56px; display:flex; flex-direction:column; justify-content:center; }
.login-right h2 { font-size:24px; font-weight:600; color:var(--hpcl-navy); margin-bottom:6px; }
.login-right .s { font-size:13px; color:var(--ink-2); margin-bottom:28px; }
.login-right form { display:flex; flex-direction:column; gap:16px; }
.login-right .btn { justify-content:center; padding:14px; }
.creds { margin-top:28px; border:1px solid var(--line); }
.creds h4 { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-2); padding:10px 14px; border-bottom:1px solid var(--line); background:#FAFAFA; font-weight:700; }
.creds table { width:100%; border-collapse:collapse; font-size:11px; }
.creds td { padding:6px 14px; border-bottom:1px solid var(--line); }
.creds tr:last-child td { border-bottom:0; }
.creds .role { font-weight:600; }
.creds .cred { font-family:'JetBrains Mono',monospace; color:var(--ink-2); font-size:10px; }

@media print {
  .appbar, .crumb, .hero, .action-bar, .no-print { display:none !important; }
  .content { padding:0; }
  body { background:white; }
  .dn-doc { padding:0; max-width:100%; }
}

/* ============ SIDEBAR LAYOUT (left nav) ============ */
body.app { background:var(--bg); }
.layout { display:flex; min-height:100vh; align-items:stretch; }
.sidebar { width:240px; flex:0 0 240px; background:var(--hpcl-navy); color:#fff; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.side-brand { padding:18px 20px; display:flex; gap:11px; align-items:center; border-bottom:1px solid rgba(255,255,255,0.12); text-decoration:none; }
.side-brand .bm { width:36px; height:36px; background:var(--hpcl-gold); color:var(--hpcl-navy); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
.side-brand .bn { font-size:18px; font-weight:700; letter-spacing:3px; color:#fff; line-height:1; }
.side-brand .bs { font-size:8px; letter-spacing:1.5px; opacity:.7; text-transform:uppercase; margin-top:3px; }
.side-nav { flex:1; overflow-y:auto; padding:8px 0 16px; }
.side-group { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--hpcl-gold); padding:16px 20px 6px; opacity:.85; font-weight:700; }
.side-link { display:flex; align-items:center; gap:11px; padding:10px 20px; color:rgba(255,255,255,.82); font-size:12.5px; font-weight:500; text-decoration:none; border-left:3px solid transparent; }
.side-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.side-link.active { background:rgba(201,162,39,.16); border-left-color:var(--hpcl-gold); color:#fff; font-weight:600; }
.side-link .ic { width:18px; text-align:center; font-size:13px; opacity:.85; flex-shrink:0; }
.side-link .badge { margin-left:auto; background:var(--hpcl-gold); color:var(--hpcl-navy); font-size:9px; font-weight:700; padding:1px 7px; }
.side-user { border-top:1px solid rgba(255,255,255,.12); padding:13px 20px; display:flex; align-items:center; gap:11px; text-decoration:none; }
.side-user .ava { width:34px; height:34px; background:var(--hpcl-gold); color:var(--hpcl-navy); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; flex-shrink:0; }
.side-user .nm { font-size:12px; font-weight:600; color:#fff; }
.side-user .rl { font-size:9px; opacity:.7; text-transform:uppercase; letter-spacing:1px; margin-top:1px; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.main .hero, .main .content, .main .crumb { width:100%; }
a.linkish { color:var(--m-blue); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; }
a.linkish:hover { border-bottom-color:var(--m-blue); }
.src-badge { display:inline-block; padding:2px 8px; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.src-dulhan { background:var(--hpcl-navy); color:#fff; }
.src-existing { background:#EDE7D6; color:#7A6314; }

/* ============ DENSITY PASS — tighter use of space ============ */
.main .hero { padding:20px 32px 18px; }
.main .hero h1 { line-height:1.05; }
.main .hero .sub { margin-top:6px; max-width:760px; }
.main .content { padding:18px 32px 28px; }
.main .crumb { padding:9px 32px; }
.main .section-h { margin:18px 0 10px; }
.main .kpis { gap:8px; margin-bottom:8px; }
.main .panel { margin-bottom:10px; }
.main .cols { gap:14px; }
.main .cols.even { gap:14px; }
.main table.data td, .main table.data th { padding-top:9px; padding-bottom:9px; }
.main .split-summary { gap:8px; margin-bottom:14px; }
.main .programme { gap:12px; margin-bottom:14px; }
/* wider, denser forms */
.main .content.narrow { max-width:none; }
.main .fg { gap:13px; }
/* keep long pages from feeling empty: cap hero/section text width but let tables span full width */
@media (min-width:1500px){ .main .content { padding-left:40px; padding-right:40px; } }

/* ============ COMPACT NETWORK LIST ============ */
.main table.data.compact td, .main table.data.compact th { padding-top:7px; padding-bottom:7px; }
.main table.data.compact .cell-stack .sec { font-size:10px; }
.bar-mini { height:8px; background:#EEE; width:100%; max-width:160px; }
.bar-mini > span { display:block; height:100%; background:var(--hpcl-navy); }
.bar-mini > span.low { background:var(--m-orange); } .bar-mini > span.empty { background:#DADADA; }
.catgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.catcard { border:1px solid var(--line); background:var(--panel); padding:10px 12px; }
.catcard .cc-code { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; color:var(--hpcl-navy); }
.catcard .cc-n { font-size:22px; font-weight:300; }
.catcard .cc-lbl { font-size:10px; color:var(--ink-2); text-transform:uppercase; letter-spacing:1px; }