/* Colours taken from the Power BI theme VijayProcurementVibrant + Procure page (dark).
   Light theme = same accents on a light canvas. */
:root, [data-theme="dark"] {
  --canvas: #060D1A;
  --side: #0A1628;
  --panel: #0F2540;
  --panel-2: #132D4D;
  --border: #1B3A5C;
  --text: #F2F6FC;
  --text-2: #E8F0FF;
  --muted: #8FA3BF;
  --grid: #1B3A5C;
  --accent: #29E5E5;
  --c1: #29E5E5; --c2: #3B82F6; --c3: #22C55E; --c4: #7C4DFF;
  --c5: #FFA726; --c6: #FF5252; --c7: #14B8A6; --c8: #EC4899;
  --good: #22C55E; --bad: #FF5252;
  --shadow: 0 6px 20px rgba(0,0,0,.35);
}
[data-theme="light"] {
  --canvas: #EEF3FA;
  --side: #0F2540;
  --panel: #FFFFFF;
  --panel-2: #F2F6FC;
  --border: #D5E0EE;
  --text: #0F2540;
  --text-2: #1B3A5C;
  --muted: #5B6F8C;
  --grid: #E1E8F2;
  --accent: #0E9FB0;
  --c1: #0E9FB0; --c2: #2563EB; --c3: #16A34A; --c4: #6D28D9;
  --c5: #EA8A00; --c6: #DC2626; --c7: #0F766E; --c8: #DB2777;
  --good: #16A34A; --bad: #DC2626;
  --shadow: 0 4px 14px rgba(15,37,64,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--canvas); color: var(--text); font: 13px/1.35 "Segoe UI", system-ui, sans-serif; }
#app { display: flex; min-height: 100vh; }

/* sidebar 200px (project token) */
.sidebar { width: 200px; flex: 0 0 200px; background: var(--side); color: #E8F0FF; display: flex; flex-direction: column; padding: 18px 12px; gap: 6px; position: sticky; top: 0; height: 100vh; }
.brand { font-size: 18px; font-weight: 700; color: #29E5E5; margin-bottom: 18px; }
.brand span { display: block; font-size: 12px; font-weight: 400; color: #8FA3BF; }
.nav { display: block; padding: 10px 12px; border-radius: 8px; color: #E8F0FF; text-decoration: none; font-weight: 600; border: 1px solid transparent; }
.nav small { display: block; font-weight: 400; color: #8FA3BF; font-size: 11px; }
.nav:hover { background: #132D4D; }
.nav.active { background: #0F2540; border-color: #29E5E5; box-shadow: inset 3px 0 0 #29E5E5; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.note { font-size: 11px; color: #8FA3BF; }
.userbox { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px; border: 1px solid #1B3A5C; border-radius: 8px; }
.userbox .uname { font-weight: 600; color: #E8F0FF; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.userbox .uname small { display: block; font-weight: 400; color: #8FA3BF; font-size: 10px; }
.userbox .logout { background: transparent; color: #29E5E5; border: 1px solid #29E5E5; border-radius: 6px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
.userbox .logout:hover { background: #29E5E5; color: #06202A; }

/* theme switch */
.switch { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #E8F0FF; user-select: none; }
.switch input { display: none; }
.track { width: 42px; height: 22px; border-radius: 11px; background: #1B3A5C; position: relative; transition: background .2s; }
.knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #29E5E5; transition: left .2s; }
.switch input:checked + .track { background: #8FA3BF; }
.switch input:checked + .track .knob { left: 23px; background: #FFFFFF; }

main { flex: 1; padding: 12px 16px 20px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 10px; }
h1 { margin: 0; font-size: 20px; color: var(--text); }
.caption { color: var(--muted); font-size: 11px; }
.slicers { display: flex; gap: 10px; }
.slicers label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); }
select { margin-top: 2px; min-width: 120px; padding: 5px 8px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.status { color: var(--c5); min-height: 16px; font-size: 12px; }

.page { display: none; }
.page.active { display: block; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); min-width: 0; }
.panel h3 { margin: 0 0 6px; font-size: 13px; color: var(--text-2); }
.sub { margin: -4px 0 8px; color: var(--muted); font-size: 11px; }

/* page 1 */
.cards { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 10px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; box-shadow: var(--shadow); }
.card .v { font-size: 22px; font-weight: 700; color: var(--accent); }
.card .l { color: var(--muted); font-size: 11px; margin-top: 4px; }
.grid-procure { display: grid; grid-template-columns: 1.45fr 1.05fr 1fr; grid-template-rows: auto auto auto; gap: 10px; }
.p-gl { grid-column: 1; grid-row: 1 / span 2; }
.p-ts { grid-column: 2; grid-row: 1; }
.p-vol { grid-column: 2; grid-row: 2; }
.p-cc { grid-column: 3; grid-row: 1 / span 2; }
.p-cap { grid-column: 1 / span 3; grid-row: 3; }
.chart { width: 100%; }

/* tables */
.tbl { overflow: auto; max-height: 420px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { position: sticky; top: 0; background: var(--panel-2); color: var(--muted); font-weight: 600; text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border); }
th:first-child, td:first-child { text-align: left; }
td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--grid); white-space: nowrap; }
tr.total td { font-weight: 700; color: var(--accent); border-top: 1px solid var(--border); }
tr.grp td { font-weight: 600; cursor: pointer; }
tr.grp td:first-child::before { content: "▸ "; color: var(--accent); }
tr.grp.open td:first-child::before { content: "▾ "; }
tr.child td:first-child { padding-left: 26px; color: var(--muted); }
tr.child { display: none; }
tr.child.show { display: table-row; }
td.pos { color: var(--bad); } td.neg { color: var(--good); }

/* svg */
svg text { fill: var(--muted); font-size: 11px; }
svg .val { fill: var(--text); font-weight: 600; }
svg .gridline { stroke: var(--grid); }

/* page 2 */
.hero { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.kpi { background: linear-gradient(135deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); }
.kpi .l { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.kpi .v { font-size: 26px; font-weight: 700; margin: 4px 0; }
.kpi .d { font-size: 12px; }
.up-bad { color: var(--bad); } .down-good { color: var(--good); } .up-good { color: var(--good); } .down-bad { color: var(--bad); } .flat { color: var(--muted); }
.grid-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.i-rupee { grid-column: 1 / span 2; grid-row: 1; }
.i-mix { grid-column: 3; grid-row: 1; }
.i-util { grid-column: 1; grid-row: 2; }
.i-scatter { grid-column: 2; grid-row: 2; }
.i-gl { grid-column: 3; grid-row: 2 / span 2; }
.i-routes { grid-column: 1 / span 2; grid-row: 3; }
.i-gl .tbl { max-height: 640px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ubar { display: grid; grid-template-columns: 70px 1fr 54px; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; }
.ubar .bg { background: var(--panel-2); border-radius: 6px; height: 14px; position: relative; overflow: hidden; }
.ubar .fg { height: 100%; border-radius: 6px; }
.routes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.routes2 h4 { margin: 0 0 4px; font-size: 12px; }

@media (max-width: 1200px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
  .hero { grid-template-columns: repeat(2, 1fr); }
  .grid-procure, .grid-insights { grid-template-columns: 1fr; }
  .grid-procure > *, .grid-insights > * { grid-column: auto !important; grid-row: auto !important; }
}

/* cross-filter (Power BI style) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; margin-bottom: 4px; align-items: center; }
.chip { background: var(--panel-2); border: 1px solid var(--accent); color: var(--text); border-radius: 14px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.chip b { color: var(--accent); }
.chip.clear { border-color: var(--c6); color: var(--c6); }
.hint { color: var(--muted); font-size: 11px; }
.clk, tr[data-f] { cursor: pointer; }
tr[data-f]:hover td { background: var(--panel-2); }
.dimmed { opacity: .28; }
tr.sel td { background: var(--panel-2); color: var(--accent); font-weight: 700; }
rect.sel, .ubar.sel .fg { stroke: var(--text); stroke-width: 2; }
.tog { display: inline-block; width: 16px; margin-left: -4px; color: var(--accent); cursor: pointer; }
.tog::before { content: "▸"; }
tr.open .tog::before { content: "▾"; }
tr.grp td:first-child::before, tr.grp.open td:first-child::before { content: none; }
/* ---------- Builder (edit mode) ---------- */
.btoolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.btoolbar button, .filebtn { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; font-size: 12px; cursor: pointer; }
.btoolbar button:hover, .filebtn:hover { border-color: var(--accent); }
.btoolbar .danger { color: var(--c6); }
#bAddBar { display: flex; gap: 6px; flex-wrap: wrap; }
.spacer { flex: 1; }
.viewpick { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.viewpick select { margin: 0; min-width: 170px; }
.canedit, .canpublish { display: none !important; }
body.can-edit .canedit, body.can-publish .canpublish { display: inline-flex !important; align-items: center; }
.btoolbar .canpublish { color: var(--c5); }
.dirty { font-size: 11px; color: var(--c5); }
.edit-switch { color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 4px 10px; }
.eonly { display: none !important; }
body.editing .eonly { display: flex !important; }
body.editing .bside.eonly { display: block !important; }
.bwrap { display: flex; gap: 10px; align-items: flex-start; }
.grid-stack { flex: 1; min-width: 0; }
body.editing .grid-stack { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: calc(100% / 12) 62px; border-radius: 8px; }
.bside { width: 260px; flex: 0 0 260px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; position: sticky; top: 8px; max-height: calc(100vh - 120px); overflow: auto; }
.bside h3 { margin: 6px 0; font-size: 13px; color: var(--text-2); }
.bside small { color: var(--muted); font-weight: 400; }
.grid-stack-item-content { overflow: hidden !important; }
.vbox { height: 100%; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 10px; }
.vhead { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.vtitle { font-weight: 600; font-size: 13px; color: var(--text-2); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vtools { display: none; gap: 3px; }
body.editing .vtools { display: flex; }
body.editing .vhead { cursor: move; }
.vtools button { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 4px; font-size: 11px; padding: 1px 6px; cursor: pointer; }
.vbody { flex: 1; min-height: 0; position: relative; }
.vempty { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); border: 2px dashed var(--border); border-radius: 8px; font-size: 12px; }
.vcard { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.vcard .v { font-size: 26px; font-weight: 700; color: var(--accent); }
.vcard .l { color: var(--muted); font-size: 11px; }
.vtbl { max-height: none; height: 100%; }
.gs-item.vsel .vbox { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.gs-item.drop .vbox, .well.drop { outline: 2px dashed var(--c3); outline-offset: 2px; }
.field { padding: 5px 8px; margin: 3px 0; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); cursor: grab; font-size: 12px; user-select: none; }
.field.dim { border-left: 3px solid var(--c2); }
.field.mea { border-left: 3px solid var(--c3); }
.fgroup { color: var(--muted); font-size: 11px; text-transform: uppercase; margin: 8px 0 2px; }
.plabel { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.plabel input, .plabel select { margin-top: 2px; padding: 5px 7px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.well { min-height: 40px; border: 1px dashed var(--border); border-radius: 8px; padding: 6px; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.well .wl { width: 100%; font-size: 11px; color: var(--muted); }
.wh { color: var(--muted); font-size: 11px; font-style: italic; }
.fchip { background: var(--panel-2); border: 1px solid var(--accent); border-radius: 12px; padding: 2px 8px; font-size: 11px; }
.fchip b { cursor: pointer; color: var(--c6); margin-left: 3px; }
.gs-item .ui-resizable-handle { opacity: 0; }
body.editing .gs-item .ui-resizable-handle { opacity: .8; }
/* ---------- Proc Comp page ---------- */
.cmponly { display: none !important; }
body.on-compare .cmponly { display: flex !important; }
.cmp-banner { background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.grid-compare { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 10px; }
.c-kpi { grid-column: 1; grid-row: 1; }
.c-type { grid-column: 1; grid-row: 2; }
.c-type .chart { height: 240px; }
.c-cc { grid-column: 2; grid-row: 1 / span 2; }
.c-gl { grid-column: 1 / span 2; grid-row: 3; }
.c-route { grid-column: 1 / span 2; grid-row: 4; }
.c-cc .tbl { max-height: 560px; }
.grid-compare table td, .grid-compare table th { padding: 5px 6px; }
.c-gl .tbl, .c-route .tbl { max-height: 460px; }
tr.lvl2 td:first-child { padding-left: 22px; }
tr.lvl3 td:first-child { padding-left: 44px; color: var(--muted); }
@media (max-width: 1200px) { .grid-compare { grid-template-columns: 1fr; } .grid-compare > * { grid-column: auto !important; grid-row: auto !important; } }
/* ---------- frozen header (title, slicers, filter chips, compare banner) ---------- */
main { padding-top: 0; }
.sticky-top { position: sticky; top: 0; z-index: 50; background: var(--canvas); padding: 10px 0 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border); box-shadow: 0 6px 10px -8px rgba(0,0,0,.45); }
.sticky-top .topbar { margin-bottom: 4px; }
.sticky-top .chips { margin-bottom: 0; }
.sticky-top .status:empty { display: none; }
.cmponly-block { display: none; }
body.on-compare .cmponly-block { display: block; margin: 6px 0 0; }
/* the "Clear all" chip should stand out when scrolled */
.chip.clear { background: var(--c6); color: #fff; border-color: var(--c6); font-weight: 600; }
/* ---------- Proc Comp layout v2 (KPI | chart, then full-width tables and charts) ---------- */
.grid-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.c-kpi { grid-column: 1; grid-row: 1; }
.c-type { grid-column: 2; grid-row: 1; }
.c-type .chart { height: 300px; }
.c-gl { grid-column: 1 / span 2; grid-row: 2; }
.c-cc { grid-column: 1 / span 2; grid-row: 3; }
.c-ccamt { grid-column: 1 / span 2; grid-row: 4; }
.c-ccts { grid-column: 1 / span 2; grid-row: 5; }
.c-ccamt .chart, .c-ccts .chart { height: 300px; }
.c-gl .tbl, .c-cc .tbl { max-height: 520px; }
.fnote { color: var(--accent); font-weight: 600; }
.fnote:empty { display: none; }
.tog-none { display: inline-block; width: 16px; margin-left: -4px; }

/* editable columns (Proc Comp CC -> Route) */
.phead { display: flex; align-items: center; gap: 10px; }
.phead h3 { flex: 1; }
.colpick { position: relative; }
.colpick summary { list-style: none; cursor: pointer; font-size: 12px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); }
.colpick summary::-webkit-details-marker { display: none; }
.colpick[open] summary { border-color: var(--accent); }
#cmpCcCols { position: absolute; right: 0; top: 30px; z-index: 30; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 170px; font-size: 13px; }
#cmpCcCols label { display: flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }
#cmpCcCols button { margin-top: 4px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
table.tbl2h th.ctr { text-align: center; }
table.tbl2h th.cgrp, table.tbl2h td.cgrp { border-left: 1px solid var(--border); }
table.tbl2h thead tr:first-child th { position: sticky; top: 0; }
table.tbl2h thead tr:nth-child(2) th { position: sticky; top: 27px; }

/* ======================================================================
   Mobile + tablet layout (step 5, 2026-10-18). Laptop (>= 1201 px) unchanged.
   ====================================================================== */
.menu-btn { display: none; }
.side-backdrop { display: none; }

/* tablet: 768–1200 px */
@media (max-width: 1200px) {
  .slicers { flex-wrap: wrap; }
  .topbar { flex-wrap: wrap; align-items: flex-start; }
}

/* phone + small tablet: <= 900 px -> sidebar becomes a slide-in menu */
@media (max-width: 900px) {
  #app { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 200; height: 100%; width: 240px;
             transform: translateX(-105%); transition: transform .2s ease; box-shadow: 4px 0 18px rgba(0,0,0,.4);
             overflow-y: auto; }
  body.menu-open .sidebar { transform: translateX(0); }
  body.menu-open .side-backdrop { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.45); }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
              flex: 0 0 40px; margin-right: 8px; font-size: 22px; line-height: 1; cursor: pointer;
              background: var(--panel); color: var(--accent); border: 1px solid var(--border); border-radius: 8px; }
  .nav { padding: 12px; }
  main { padding: 0 10px 24px; }
  .topbar > div:first-child { display: flex; align-items: center; min-width: 0; flex: 1 1 100%; }
  .topbar > div:first-child > div { min-width: 0; }
  h1 { font-size: 17px; }
  .caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slicers { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .slicers label { min-width: 0; }
  select { min-width: 0; width: 100%; padding: 9px 8px; font-size: 14px; }   /* 14px+ stops iPhone zoom */
  .chip { padding: 6px 12px; font-size: 13px; }
  .hint { display: none; }
  .sticky-top { padding-top: 8px; }

  /* cards: 2 per row, bigger numbers */
  .cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card { padding: 10px 8px; }
  .card .v { font-size: 20px; }
  .hero { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi .v { font-size: 21px; }

  /* every panel full width, one under the other */
  .grid-procure, .grid-insights, .grid-compare { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  .grid-procure > *, .grid-insights > *, .grid-compare > * { grid-column: auto !important; grid-row: auto !important; }
  .routes2 { grid-template-columns: 1fr; }
  .panel { padding: 8px 10px; }

  /* tables: swipe sideways, first column stays */
  .tbl { max-height: 60vh; -webkit-overflow-scrolling: touch; }
  table { font-size: 12.5px; }
  td, th { padding: 7px 8px; }
  td:first-child, th:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); }
  th:first-child { z-index: 3; background: var(--panel-2); }
  tr.sel td:first-child, tr[data-f]:hover td:first-child { background: var(--panel-2); }
  /* long names wrap so the number columns fit on the screen */
  td:first-child { white-space: normal; min-width: 120px; max-width: 46vw; line-height: 1.25; }
  .chips { min-height: 0; }

  /* Proc Comp column picker fits the screen */
  .phead { flex-wrap: wrap; }
  #cmpCcCols { right: auto; left: 0; }

  /* Builder on a phone = view only (drag & drop needs a mouse) */
  .edit-switch, #bAddBar, #bExport, .filebtn, #bReset, #bSaveAs, #bSave, #bDelView, #bPublish, .bside { display: none !important; }
  .viewpick { width: 100%; }
  .viewpick select { flex: 1; }
}

/* small phones: <= 420 px */
@media (max-width: 420px) {
  .card .v { font-size: 18px; }
  .card .l { font-size: 10.5px; }
  .kpi { padding: 10px; }
  .kpi .v { font-size: 19px; }
  .slicers label { font-size: 10.5px; }
}