:root{
    --navy:#0f2f52;
    --navy-2:#153b66;
    --accent:#e2a63c;
    --teal:#2c8c82;
    --bg:#f3f5f8;
    --card:#ffffff;
    --line:#dde3ea;
    --text:#1c2733;
    --muted:#6b7686;
    --red:#c0392b;
    --green:#1e8f5f;
    --amber:#c8860d;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Segoe UI","Tahoma",Arial,sans-serif;
    font-size:14px;
  }
  header.app-header{
    background:linear-gradient(90deg,var(--navy),var(--navy-2));
    color:#fff; padding:18px 28px; display:flex; align-items:center; justify-content:space-between;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
  }
  header.app-header h1{ font-size:19px; margin:0; font-weight:700; letter-spacing:.3px;}
  header.app-header .sub{ font-size:12px; color:#cdd8e6; margin-top:3px;}
  header.app-header .badge{
    background:var(--accent); color:#3a2a06; font-weight:700; font-size:12px;
    padding:5px 12px; border-radius:20px;
  }
  nav.tabs{
    display:flex; gap:4px; background:#fff; padding:0 24px; border-bottom:1px solid var(--line);
    position:-webkit-sticky; position:sticky; top:0; z-index:100;
  }
  nav.tabs button{
    border:none; background:none; padding:14px 18px; font-size:14px; font-weight:600;
    color:var(--muted); cursor:pointer; border-bottom:3px solid transparent;
  }
  nav.tabs button.active{ color:var(--navy); border-bottom-color:var(--accent);}
  main{ padding:20px 24px 60px; max-width:1500px; margin:0 auto;}
  .panel{ display:none;}
  .panel.active{ display:block;}

  .filters{
    background:var(--card); border:1px solid var(--line); border-radius:10px;
    padding:14px 18px; display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:16px;
  }
  .filters .field{ display:flex; flex-direction:column; gap:5px; min-width:160px;}
  .filters label{ font-size:11px; color:var(--muted); font-weight:700;}
  .filters select, .filters input[type=text]{
    padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:13px; background:#fbfcfd;
  }
  .quarter-switch{ display:flex; gap:6px; }
  .quarter-switch button{
    border:1px solid var(--line); background:#fff; padding:8px 16px; border-radius:7px;
    font-weight:700; cursor:pointer; color:var(--navy-2);
  }
  .quarter-switch button.active{ background:var(--navy); color:#fff; border-color:var(--navy);}
  .reset-btn{ margin-inline-start:auto; background:#fff; border:1px solid var(--line); border-radius:7px;
    padding:8px 14px; cursor:pointer; color:var(--red); font-weight:700; font-size:12px;}

  .legend{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; font-size:12px;}
  .legend .chip{ padding:4px 10px; border-radius:20px; color:#fff; font-weight:700;}
  .legend .note{ color:var(--muted); align-self:center;}

  .table-wrap{ background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:auto; }
  table.kpi{ border-collapse:collapse; width:100%; min-width:1100px; font-size:12.5px;}
  table.kpi th, table.kpi td{ padding:7px 8px; border-bottom:1px solid var(--line); text-align:center; white-space:nowrap;}
  table.kpi thead th{
    background:var(--navy); color:#fff; position:sticky; top:0; z-index:5; font-size:11.5px;
  }
  table.kpi thead tr.month-row th{ background:var(--navy-2); }
  table.kpi td.ind{ text-align:left; white-space:normal; min-width:230px; font-weight:600;}
  table.kpi td.dept{ font-weight:700; color:var(--navy-2); background:#eef2f7;}
  table.kpi tbody tr:hover{ background:#f7fafc;}

  select.class-select{
    border:none; border-radius:14px; padding:3px 8px; font-size:11px; font-weight:700; color:#fff;
    appearance:none; text-align:center; cursor:pointer;
  }
  .cls-none{ background:#b7c0cc; }
  .cls-severe{ background:var(--red); }
  .cls-watch{ background:var(--amber); }
  .cls-gaining{ background:#3a7bd5; }
  .cls-crush{ background:var(--green); }
  .cls-break{ background:#7d3fc9; }

  .score-cell{ font-weight:700; }
  .forecast-tag{ font-size:9px; color:#9a6b12; display:block;}

  .kpi-summary{
    display:flex; gap:14px; margin-bottom:16px; flex-wrap:wrap;
  }
  .kpi-summary .card{
    background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px; min-width:170px;
  }
  .kpi-summary .card .big{ font-size:22px; font-weight:800; color:var(--navy);}
  .kpi-summary .card .lbl{ font-size:11px; color:var(--muted); font-weight:700; margin-top:2px;}

  h2.section-title{ font-size:16px; color:var(--navy); margin:26px 0 10px; border-inline-start:5px solid var(--accent); padding-inline-start:10px;}
  p.hint{ color:var(--muted); font-size:12.5px; margin:0 0 14px;}

  .warn-banner{
    background:#fff6e6; border:1px solid #f0cf8f; color:#7a5300; padding:12px 16px; border-radius:8px;
    font-size:12.5px; margin-bottom:16px; line-height:1.7;
  }
  .appendix-section{ margin-bottom:26px; }
  .appendix-section h3{ font-size:13.5px; color:var(--navy-2); margin-bottom:6px;}
  table.simple{ border-collapse:collapse; width:100%; font-size:12px; background:#fff;}
  table.simple th, table.simple td{ border:1px solid var(--line); padding:6px 8px; text-align:center;}
  table.simple th{ background:#eef2f7;}
  footer{ text-align:center; color:var(--muted); font-size:11.5px; padding:20px 0 40px;}
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; margin-bottom:10px;}
.city-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.city-card h4{ margin:0 0 12px; font-size:15px; color:var(--navy); display:flex; align-items:center; justify-content:space-between;}
.city-card .growth{ font-size:11px; font-weight:800; padding:3px 9px; border-radius:12px; }
.growth.up{ background:#e2f6ec; color:var(--green); }
.growth.down{ background:#fbe9e7; color:var(--red); }
.growth.flat{ background:#eef1f5; color:var(--muted); }
.stat-row{ display:flex; gap:10px; margin-bottom:14px; }
.stat-box{ flex:1; background:#f5f8fb; border-radius:8px; padding:8px 6px; text-align:center; }
.stat-box .v{ font-size:15px; font-weight:800; color:var(--navy-2); }
.stat-box .l{ font-size:9.5px; color:var(--muted); font-weight:700; margin-top:2px; text-transform:uppercase; letter-spacing:.3px;}
.bars{ display:flex; align-items:flex-end; gap:4px; height:64px; }
.bars .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bars .bar{ width:100%; border-radius:3px 3px 0 0; background:var(--teal); position:relative; min-height:3px;}
.bars .bar.forecast{ background:var(--accent); }
.bars .bar-lbl{ font-size:8.5px; color:var(--muted); margin-top:4px; }
.bars .bar[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  background:var(--navy); color:#fff; font-size:10px; padding:3px 7px; border-radius:5px; white-space:nowrap; margin-bottom:4px;
}
.mini-legend{ display:flex; gap:14px; font-size:11px; color:var(--muted); margin:4px 0 18px; align-items:center;}
.mini-legend .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-inline-end:5px;}
.dot.teal{ background:var(--teal); } .dot.gold{ background:var(--accent); }
.section-block{ margin-bottom:34px; }

  :root{
    --navy:#1a1a2e;
    --grad1:#ff6a3d; --grad1b:#ffb199;
    --grad2:#00b09b; --grad2b:#96c93d;
    --grad3:#8e2de2; --grad3b:#4a00e0;
    --grad4:#f7971e; --grad4b:#ffd200;
    --grad5:#0091ff; --grad5b:#00c6ff;
    --bg:#f6f7fb;
    --card:#ffffff;
    --line:#e7e9f2;
    --text:#20222b;
    --muted:#767b8a;
    --red:#e53e5e;
    --green:#12b886;
    --amber:#f5a623;
  }
  body{ background:var(--bg); }
  header.app-header{
    background:linear-gradient(120deg,#ff6a3d 0%, #ee0979 35%, #8e2de2 68%, #0091ff 100%);
    box-shadow:0 4px 20px rgba(120,20,120,.25);
  }
  header.app-header .badge{
    background:rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(4px);
  }
  nav.tabs{ box-shadow:0 2px 8px rgba(0,0,0,.04); }
  nav.tabs button.active{ color:#8e2de2; border-bottom-color:#ff6a3d; }
  .quarter-switch button.active{ background:linear-gradient(120deg,#8e2de2,#4a00e0); border-color:transparent; }
  .reset-btn{ color:var(--red); }

  h2.section-title{ border-inline-start-color:transparent; position:relative; padding-inline-start:14px;}
  h2.section-title::before{
    content:""; position:absolute; inset-inline-start:0; top:2px; bottom:2px; width:5px; border-radius:4px;
    background:linear-gradient(180deg,#8e2de2,#ff6a3d);
  }

  .card-grid{ gap:18px; }
  .city-card{
    border:none; border-radius:16px; box-shadow:0 3px 14px rgba(30,20,60,.08);
    transition:transform .15s ease, box-shadow .15s ease; position:relative; overflow:hidden;
  }
  .city-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(30,20,60,.14); }
  .city-card::before{
    content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:5px;
  }
  .city-card h4{ font-size:15.5px; font-weight:800; }

  /* accent variants per section, applied via extra class on container */
  #trips-cards .city-card::before{ background:linear-gradient(180deg,var(--grad1),var(--grad1b)); }
  #trips-cards .stat-box{ background:linear-gradient(120deg,#fff4ee,#ffe9df); }
  #trips-cards .stat-box .v{ color:#e2521f; }
  #trips-cards .bars .bar{ background:var(--grad1); }
  #trips-cards .bars .bar.forecast{ background:var(--grad4); }

  #au-cards .city-card::before{ background:linear-gradient(180deg,var(--grad2),var(--grad2b)); }
  #au-cards .stat-box{ background:linear-gradient(120deg,#e9fbf6,#eefbe3); }
  #au-cards .stat-box .v{ color:#0d8f7a; }
  #au-cards .bars .bar{ background:var(--grad2); }
  #au-cards .bars .bar.forecast{ background:var(--grad4); }

  #srr-cards .city-card::before, #urr-cards .city-card::before{ background:linear-gradient(180deg,var(--grad3),var(--grad3b)); }
  #srr-cards .stat-box, #urr-cards .stat-box{ background:linear-gradient(120deg,#f6efff,#efe6ff); }
  #srr-cards .stat-box .v, #urr-cards .stat-box .v{ color:#6a1cc9; }
  #srr-cards .bars .bar, #urr-cards .bars .bar{ background:var(--grad3); }
  #srr-cards .bars .bar.forecast, #urr-cards .bars .bar.forecast{ background:var(--grad4); }

  #nu-cards .city-card::before, #ns-cards .city-card::before{ background:linear-gradient(180deg,var(--grad5),var(--grad5b)); }
  #nu-cards .stat-box, #ns-cards .stat-box{ background:linear-gradient(120deg,#eaf6ff,#e3f7ff); }
  #nu-cards .stat-box .v, #ns-cards .stat-box .v{ color:#0077c2; }
  #nu-cards .bars .bar, #ns-cards .bars .bar{ background:var(--grad5); }
  #nu-cards .bars .bar.forecast, #ns-cards .bars .bar.forecast{ background:var(--grad4); }

  #lrt-cards .city-card::before, #trs-cards .city-card::before{ background:linear-gradient(180deg,#ff4d6d,#ffa36c); }
  #lrt-cards .stat-box, #trs-cards .stat-box{ background:linear-gradient(120deg,#fff0f0,#fff6ea); }
  #lrt-cards .stat-box .v, #trs-cards .stat-box .v{ color:#d6336c; }
  #lrt-cards .bars .bar, #trs-cards .bars .bar{ background:#ff8fa3; }
  #lrt-cards .bars .bar.forecast, #trs-cards .bars .bar.forecast{ background:var(--grad4); }

  .tab-icon{ margin-inline-end:6px; }
  .kpi-summary .card{ border:none; box-shadow:0 3px 12px rgba(30,20,60,.07); border-radius:14px;}
  .kpi-summary .card:nth-child(1){ background:linear-gradient(120deg,#eef2ff,#e6f0ff); }
  .kpi-summary .card:nth-child(2){ background:linear-gradient(120deg,#e9fff3,#e6f8ff); }
  .kpi-summary .card:nth-child(3){ background:linear-gradient(120deg,#fff4e6,#ffe9f0); }
  .kpi-summary .card .big{ background:linear-gradient(120deg,#8e2de2,#ff6a3d); -webkit-background-clip:text; background-clip:text; color:transparent; }

  table.kpi thead th{ background:linear-gradient(120deg,#1a1a2e,#3d1a5e); }
  table.kpi thead tr.month-row th{ background:linear-gradient(120deg,#2b1652,#5b1aa3); }
  .forecast-tag{ color:#e2521f; font-weight:800;}

  .warn-banner{ background:linear-gradient(120deg,#fff6e6,#ffeef0); border:none; box-shadow:0 3px 10px rgba(200,80,20,.08);}


  #trips-table thead th{ background:linear-gradient(120deg,#1f6fd6,#4fa3ff); color:#fff; }
  .cluster-card.c1{ background:linear-gradient(135deg,#a8d4ff,#6fb3ff) !important; color:#0a3d75 !important; }
  #panel-trips .month-cell{ background:linear-gradient(120deg,#eaf4ff,#dcecff); color:#0a3d75; }
  #panel-trips td.total-col{ background:#eaf1ff; }
  #panel-trips th.total-hdr{ background:linear-gradient(120deg,#0a3d75,#123a63) !important; }

  .panel-toolbar{ text-align:right; margin-bottom:10px; }
  .back-home-btn{
    background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 14px;
    font-weight:700; font-size:12.5px; color:var(--navy-2); cursor:pointer;
  }
  .back-home-btn:hover{ background:linear-gradient(120deg,#8e2de2,#ff6a3d); color:#fff; border-color:transparent; }
  .orient-switch{ margin-bottom:12px; }
  .orient-btn{
    background:#eef2f8; border:1px solid var(--line); border-radius:20px; padding:7px 16px;
    font-weight:700; font-size:12px; color:var(--navy-2); cursor:pointer;
  }
  .orient-btn:hover{ background:linear-gradient(120deg,#1f6fd6,#4fa3ff); color:#fff; border-color:transparent; }
  #au-table thead th{ background:linear-gradient(120deg,#00b09b,#96c93d); color:#fff; }
  #nu-table thead th, #ns-table thead th{ background:linear-gradient(120deg,#0091ff,#00c6ff); color:#fff; }
  #srr-table thead th, #urr-table thead th{ background:linear-gradient(120deg,#8e2de2,#4a00e0); color:#fff; }
  #lrt-table thead th, #trs-table thead th{ background:linear-gradient(120deg,#ff4d6d,#ffa36c); color:#fff; }

  table.simple{ border-radius:10px; overflow:hidden; }
  table.simple thead th{ font-weight:800; font-size:11.5px; padding:9px 10px; position:sticky; top:0; }
  table.simple td{ font-weight:600; }
  table.simple td.month-cell{ text-align:start; font-weight:800; color:var(--navy); background:#f7f8fc; }
  table.simple td.q3-cell{ background:#fff6e0; }
  table.simple td.q3-cell .src-tag{ display:block; font-size:8.5px; font-weight:800; margin-top:1px; }
  table.simple td.q3-cell.official .src-tag{ color:#0d8f3f; }
  table.simple td.q3-cell.auto .src-tag{ color:#e2521f; }
  table.simple tr:hover td{ filter:brightness(0.98); }
  #trips-table, #trips-table th, #trips-table td{ border:1.5px solid #c7cfdc !important; }
  #trips-table{ border-collapse:collapse; }
  #trips-table tbody tr:nth-child(even) td:not(.month-cell):not(.q-band-1):not(.q-band-2):not(.q-band-3){ background:#f7f9fc; }

  /* ---------- Trips table: clearer, consistently-sized columns ---------- */
  /* Every numeric column (Target / Actual / Achievement) gets the same width
     so the wide table reads as an even grid instead of ragged columns. */
  #trips-table th, #trips-table td{ padding:8px 10px; font-size:12.5px; white-space:nowrap; }
  #trips-table thead tr:last-child th,
  #trips-table tbody td:not(.month-cell){ width:104px; min-width:104px; }
  /* Keep the Month column pinned while scrolling the table horizontally. */
  #trips-table thead th:first-child,
  #trips-table td.month-cell{
    position:-webkit-sticky; position:sticky; left:0; z-index:20;
    width:130px; min-width:130px;
    box-shadow:2px 0 5px rgba(15,47,82,.08);
  }
  #trips-table thead th:first-child{ z-index:30; }


  /* ---------- Cluster / Home cards ---------- */
  .cluster-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:22px; margin-bottom:10px; }
  .cluster-card{
    border-radius:16px; padding:22px 20px; color:#fff; cursor:pointer; position:relative; overflow:hidden;
    min-height:150px; display:flex; flex-direction:column; justify-content:space-between; padding:26px 24px;
    box-shadow:0 4px 16px rgba(20,10,50,.15); transition:transform .15s ease, box-shadow .15s ease;
  }
  .cluster-card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(20,10,50,.22); }
  .cluster-card .icon{ font-size:26px; }
  .cluster-card .name{ font-size:16px; font-weight:800; margin-top:8px; }
  .cluster-card .desc{ font-size:11.5px; opacity:.85; margin-top:4px; }
  .cluster-card.disabled{ cursor:not-allowed; filter:grayscale(0.55); opacity:.65; }
  .cluster-card.disabled .badge-soon{
    position:absolute; top:10px; inset-inline-end:10px; background:rgba(255,255,255,.25);
    font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:10px;
  }
  .cluster-card.c1{ background:linear-gradient(135deg,#ffb199,#ff8a65); color:#5a2d16; }
  .cluster-card.c2{ background:linear-gradient(135deg,#8fd3ff,#5fb8f5); color:#0d3c66; }
  .cluster-card.c3{ background:linear-gradient(135deg,#8fe3d4,#63c2a8); color:#0d4a3d; }
  .cluster-card.c4{ background:linear-gradient(135deg,#c9a6f0,#a97ee0); color:#3c1d63; }
  .cluster-card.c5{ background:linear-gradient(135deg,#ffd98f,#ffc866); color:#5a4108; }
  .cluster-card.c6{ background:linear-gradient(135deg,#aab4bd,#8b96a1); color:#20262b; }
  .cluster-card.c7{ background:linear-gradient(135deg,#f2a3ad,#e8818e); color:#5c1620; }
  .cluster-card .name, .cluster-card .desc{ color:inherit; }
  .cluster-card .desc{ opacity:.8; }

  .city-drill{ margin-top:16px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px; }
  .city-drill .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .city-drill .chip-btn{
    background:#f0f2f8; border:1px solid var(--line); border-radius:20px; padding:6px 14px;
    font-size:12.5px; font-weight:700; cursor:pointer; color:var(--navy-2);
  }
  .city-drill .chip-btn:hover{ background:linear-gradient(120deg,#8e2de2,#ff6a3d); color:#fff; border-color:transparent; }

  /* ---------- better-tag ---------- */
  .better-tag{ font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:10px; margin-inline-start:6px; vertical-align:middle; }
  .better-tag[data-better="up"]{ background:#e2f6ec; color:var(--green); }
  .better-tag[data-better="down"]{ background:#e6f3ff; color:#0077c2; }
  .better-tag[data-better="up"]::before{ content:"Better: Higher ▲"; }
  .better-tag[data-better="down"]::before{ content:"Better: Lower ▼"; }

  /* ---------- Achievement % pill ---------- */
  .ach-pill{ font-weight:800; padding:2px 8px; border-radius:10px; font-size:11px; }
  .ach-good{ background:#e2f6ec; color:var(--green); }
  .ach-mid{ background:#fff3d6; color:#b36b00; }
  .ach-bad{ background:#fbe9e7; color:var(--red); }

  /* ---------- quarter color bands on table headers ---------- */
  th.q-band-1, td.q-band-1{ background:linear-gradient(120deg,#ff9a76,#ff6a3d) !important; color:#fff !important; }
  th.q-band-2, td.q-band-2{ background:linear-gradient(120deg,#4fd3c4,#00b09b) !important; color:#fff !important; }
  th.q-band-3, td.q-band-3{ background:linear-gradient(120deg,#ffd76a,#f7971e) !important; color:#3a2a06 !important; }
  td.q-band-1 .q-label, td.q-band-2 .q-label{ color:#fff; }
  td.q-band-3 .q-label{ color:#3a2a06; }
  .proposed-note{ font-size:10px; font-weight:700; color:#b36b00; background:#fff3d6; padding:2px 8px; border-radius:8px; margin-inline-start:6px; }
  .month-breakdown{ font-size:10px; color:var(--muted); margin-top:6px; font-weight:600; }
  th.city-hdr{ font-size:12px; }
  th.sub-hdr{ font-size:9.5px; font-weight:700; }
  th.total-hdr{ background:linear-gradient(120deg,#3a3f55,#1a1a2e) !important; }
  td.total-col{ background:#f3f1fb; font-weight:800; }
  .q-label{ display:block; font-size:8.5px; font-weight:900; opacity:.9; }


  /* ---------------- Multi-select dropdown ---------------- */
  .ms-dropdown{ position:relative; display:inline-block; min-width:160px; }
  .ms-btn{
    width:100%; text-align:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:7px;
    font-size:13px; background:#fbfcfd; cursor:pointer; color:var(--text); font-family:inherit;
    display:flex; align-items:center; justify-content:space-between; gap:6px;
  }
  .ms-btn::after{ content:"▾"; font-size:10px; color:var(--muted); }
  .ms-btn:hover{ border-color:#c7cfdc; }
  .ms-panel{
    position:absolute; top:calc(100% + 4px); inset-inline-start:0; z-index:200; min-width:180px; max-width:280px;
    max-height:240px; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:9px;
    box-shadow:0 8px 24px rgba(20,10,50,.15); padding:6px;
  }
  .ms-option{
    display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; font-size:12.5px; cursor:pointer;
  }
  .ms-option:hover{ background:#f3f5fa; }
  .ms-option input{ cursor:pointer; }
  .ms-option.ms-all{ font-weight:800; border-bottom:1px solid var(--line); margin-bottom:4px; padding-bottom:8px; }