/* ============================================================================
   Program Statement Executive Dashboard
   ---------------------------------------------------------------------------
   SECTION 1  Design tokens + desktop design  (>= 1200px)
              Preserved from the approved master:
              Program_Statement_Dashboard_Jul26.html  — do not redesign.
   SECTION 2  Additive components (status bar, refresh, BU card view, banners)
   SECTION 3  Responsive layers: tablet landscape / portrait / mobile
   SECTION 4  Print
   ========================================================================== */

/* ============================ SECTION 1 — MASTER DESIGN =================== */
:root {
  --navy:#061d55;
  --navy2:#00143f;
  --blue:#0a7897;
  --green:#16830f;
  --lime:#88d61c;
  --red:#ff1717;
  --orange:#ffb300;
  --ink:#07143d;
  --muted:#65708c;
  --line:#dfe5ef;
  --soft:#f5f7fb;
  --soft2:#edf1f8;
  --up:#64dc28;
  --down:#ff2a2a;
  --page-bg:#eef1f6;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page-bg);color:var(--ink);font-family:Arial,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:rgba(6,29,85,.10);overflow-x:hidden}
.filter select{touch-action:manipulation}
.shell{max-width:1560px;margin:0 auto;background:#fff;min-height:100vh;padding:20px 24px 18px}
.topbar{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-bottom:12px}
.title h1{margin:0;font-size:42px;line-height:.98;letter-spacing:.6px;font-weight:900;color:#071b4b}
.title .sub{margin-top:8px;font-size:19px;color:#0b1d4d}
.title .sub strong{font-size:22px}
.filters{display:flex;gap:10px;align-items:end;justify-content:flex-end;flex-wrap:wrap}
.filter{min-width:155px}
.filter label{display:block;font-size:11px;font-weight:800;letter-spacing:.7px;color:#59647e;margin:0 0 5px 2px;text-transform:uppercase}
.filter select{width:100%;border:1px solid #cfd6e4;background:#fff;border-radius:9px;padding:10px 34px 10px 11px;font-weight:700;color:#0a1b49;outline:none}
.filter select:focus-visible{border-color:var(--navy);box-shadow:0 0 0 3px rgba(6,29,85,.16)}
.summary-head{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:start;margin-bottom:14px}
.hero{background:linear-gradient(100deg,#061a4d 0%,#062b68 100%);border-radius:16px;padding:20px 24px;color:#fff;display:grid;grid-template-columns:180px repeat(3,1fr);align-items:stretch;box-shadow:0 3px 10px rgba(6,29,85,.16)}
.hero-name{font-size:22px;font-weight:900;line-height:1.2;display:flex;align-items:center;border-right:1px solid rgba(255,255,255,.75);padding-right:18px}
.hero-kpi{padding:0 22px;border-right:1px solid rgba(255,255,255,.42);display:flex;gap:12px;align-items:center}
.hero-kpi:last-child{border-right:0}
.hero-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:32px;opacity:.98}
.kpi-label{font-size:15px;font-weight:900;letter-spacing:.2px}
.kpi-value{font-size:26px;font-weight:900;margin-top:3px;white-space:nowrap}
.delta{margin-top:6px;font-size:14px;font-weight:900}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:#d4d9e5}
.callout{padding:2px 4px 0}
.callout .headline{color:#147913;font-size:24px;font-weight:900;text-transform:uppercase;line-height:1.05}
.callout .desc{margin-top:8px;color:#0b1d4b;font-size:15px;font-weight:700;letter-spacing:.2px}
.callout .source{margin-top:12px;font-size:11px;color:#707991}
.grid{display:grid;grid-template-columns:.92fr 1.12fr;gap:14px;margin-bottom:14px}
.card{border:1px solid #dfe4ee;border-radius:15px;background:#fff;overflow:hidden;box-shadow:0 1px 3px rgba(5,24,69,.04)}
.card-title{margin:0;background:linear-gradient(90deg,#061b52,#041541);color:#fff;padding:9px 16px;font-size:17px;font-weight:900;letter-spacing:.2px}
.comp-wrap{padding:15px 18px 12px}
.comp-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.comp-item{padding:4px 17px 7px;border-right:1px solid var(--line)}
.comp-item:first-child{padding-left:2px}
.comp-item:last-child{border-right:0;padding-right:2px}
.comp-label{font-size:15px;font-weight:900}
.comp-main{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px}
.comp-main .actual{font-size:22px;font-weight:900}
.comp-main .pct{font-size:16px;font-weight:900;white-space:nowrap}
.comp-sub{font-size:12px;margin-top:7px;color:#182753}
.comp-var{font-weight:800;margin-left:6px}
.progress{height:20px;background:#e4e7ec;border-radius:4px;overflow:hidden;margin-top:25px;display:flex;align-items:center}
.progress > span{height:100%;display:block;border-radius:3px}
.progress-label{font-size:16px;font-weight:900;margin-top:4px;text-align:right}
.revbar{background:linear-gradient(90deg,#051849,#0b2767)} .ebitbar{background:linear-gradient(90deg,#137f11,#3c9917)} .profitbar{background:linear-gradient(90deg,#00758f,#0a99a9)}
.table-wrap{padding:8px 12px 10px;overflow:auto}
table{border-collapse:collapse;width:100%;min-width:760px}
th,td{border-right:1px solid #e0e5ef;border-bottom:1px solid #e0e5ef;padding:8px 9px;text-align:left;vertical-align:middle}
th:last-child,td:last-child{border-right:0}
thead th{font-size:12px;text-align:center;color:#061747}
thead tr:first-child th{font-size:15px;padding-top:9px;padding-bottom:3px;border-bottom:0}
thead tr:nth-child(2) th{font-size:10px;padding-top:3px}
.unit{font-weight:900;font-size:13px;white-space:nowrap}
.badge{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;color:#fff;margin-right:7px;font-size:14px;flex:0 0 auto}
.b-hotel{background:#061d55} .b-office{background:#0a879f} .b-commercial{background:#248112} .b-residence{background:#f6b000} .b-fb{background:#f17100} .b-others{background:#777}
.val{font-size:14px;font-weight:900;white-space:nowrap}
.cell-delta{font-weight:900;font-size:13px;white-space:nowrap}
.mini-track{height:7px;background:#eceef2;border-radius:2px;margin-top:5px;width:100%}
.mini-bar{height:100%;border-radius:2px;min-width:2px}
.negbar{background:#ff1515!important}
.total-row td{background:#e6ebf5;font-weight:900;border-bottom:0}
.selected-row td{background:#fff9e7}
.margin-card{margin-bottom:0}
.margin-wrap{padding:12px 16px;display:grid;grid-template-columns:repeat(var(--margin-cols,3),1fr);gap:0}
.margin-unit{display:flex;align-items:center;gap:13px;padding:5px 20px;border-right:1px solid var(--line);min-height:102px}
.margin-unit:last-child{border-right:0}
.margin-name{font-size:13px;font-weight:900;min-width:90px;text-align:center}
.margin-name .badge{margin:0 auto 5px;width:38px;height:38px;font-size:18px}
.donut-block{display:flex;align-items:center;gap:10px;flex:1}
.donut-label{font-size:11px;font-weight:800;line-height:1.35}
.donut{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto}
.donut:after{content:"";position:absolute;width:54px;height:54px;background:#fff;border-radius:50%}
.donut span{position:relative;z-index:2;font-weight:900;font-size:17px}
.footer{font-size:11px;color:#63708d;margin-top:9px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.empty{padding:28px;text-align:center;color:#6e7892}

/* ====================== SECTION 2 — ADDITIVE COMPONENTS ================== */

/* Refresh / snapshot / export controls. On desktop they sit in the footer so the
   approved topbar geometry is untouched; from 1199px down dashboard.js moves the
   same element into the filter cluster, where it is easy to reach on a touch
   screen. Wrapping matters here - the cluster can hold four controls now. */
.filter-actions{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end}
.footer .filter-actions .btn{min-height:30px;padding:6px 11px;font-size:12px;border-radius:8px}
.filter-actions .btn{text-decoration:none}

/* Archived-month picker. Borrows the topbar select's look so the cluster reads
   as one control group, at the smaller size the footer buttons already use. */
.archive-sel{
  border:1px solid #cfd6e4;background:#fff;border-radius:9px;padding:10px 11px;
  font-family:inherit;font-weight:700;color:#0a1b49;outline:none;max-width:280px;
  touch-action:manipulation
}
.archive-sel:focus-visible{border-color:var(--navy);box-shadow:0 0 0 3px rgba(6,29,85,.16)}
.footer .archive-sel{min-height:30px;padding:5px 8px;font-size:12px;border-radius:8px;max-width:240px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:41px;padding:10px 14px;border-radius:9px;cursor:pointer;
  border:1px solid #cfd6e4;background:#fff;color:#0a1b49;
  font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.2px;
  -webkit-tap-highlight-color:rgba(6,29,85,.12);
  touch-action:manipulation;white-space:nowrap
}
.btn:hover{background:var(--soft)}
.btn:active{background:var(--soft2)}
.btn:focus-visible{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(6,29,85,.16)}
.btn[disabled]{opacity:.55;cursor:default}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:#0a2a6b}
.btn .spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(10,27,73,.25);border-top-color:#0a1b49;border-radius:50%}
.is-busy .spin{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.is-busy .spin{animation:none}}

/* Status banner (stale cache / load error) */
.banner{display:none;border-radius:11px;padding:10px 14px;margin-bottom:12px;font-size:13px;font-weight:700;line-height:1.45;border:1px solid transparent}
.banner.show{display:block}
.banner-warn{background:#fff6e2;border-color:#f2d391;color:#6a4a00}
.banner-error{background:#ffeceb;border-color:#f5b6b2;color:#8c1a13}
.banner b{font-weight:900}

/* Loading / empty states */
.skeleton{padding:40px 24px;text-align:center;color:var(--muted);font-weight:700}

/* Business Unit card view (mobile). Fed by the same data layer as the table. */
.bu-cards{display:none;padding:10px 12px 12px;gap:10px}
.bu-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.bu-card-head{display:flex;align-items:center;gap:2px;padding:9px 12px;background:var(--soft2);font-size:14px;font-weight:900;letter-spacing:.3px;color:#071b4b}
.bu-card.is-total{border-color:#c9d3e8}
.bu-card.is-total .bu-card-head{background:#e6ebf5}
.bu-card.is-selected{border-color:#e8cf85}
.bu-card.is-selected .bu-card-head{background:#fff9e7}
.bu-metric{display:grid;grid-template-columns:1fr auto auto;gap:2px 10px;align-items:baseline;padding:9px 12px;border-top:1px solid #eceff5}
.bu-metric-label{font-size:12px;font-weight:800;letter-spacing:.4px;color:#4a5877;text-transform:uppercase}
.bu-metric .val{font-size:17px;text-align:right}
.bu-metric .cell-delta{font-size:13px;text-align:right;min-width:56px}
.bu-metric .mini-track{grid-column:1/-1;margin-top:6px}

/* Footer meta line + data freshness */
.footer .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.footer .dot{opacity:.5}
.stale-tag{color:#8a5b00;font-weight:800}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ========================= SECTION 3 — RESPONSIVE ======================== */

/* ---- Narrow desktop (1200–1329px): the three margin columns need less
       internal padding at this width, otherwise the third donut is clipped. -- */
@media (min-width:1200px) and (max-width:1349px){
  .comp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .comp-item{padding:4px 11px 7px}
  .comp-main{flex-wrap:wrap;gap:2px 8px}
  .comp-sub{font-size:11px}
  .margin-wrap{grid-template-columns:repeat(var(--margin-cols,3),minmax(0,1fr))}
  .margin-unit{gap:9px;padding:5px 10px}
  .margin-name{min-width:70px}
  .donut{width:64px;height:64px}
  .donut:after{width:48px;height:48px}
  .donut span{font-size:15px}
}

/* ---- Tablet landscape (768–1199px): desktop feel, one full-width column --- */
@media (max-width:1199px){
  .shell{padding:18px 20px 16px}
  .topbar{grid-template-columns:1fr;gap:14px}
  .title h1{font-size:34px}
  .title .sub{font-size:17px}
  .title .sub strong{font-size:19px}
  .filters{justify-content:flex-start}
  .filter{flex:1 1 190px;min-width:170px}
  .filter-actions{flex:0 0 auto}
  .summary-head{grid-template-columns:1fr;gap:14px}
  .hero{grid-template-columns:150px repeat(3,1fr);padding:18px 20px}
  .hero-kpi{padding:0 16px}
  .kpi-value{font-size:24px}
  .grid{grid-template-columns:1fr}
  .callout .headline{font-size:21px}
  .margin-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .margin-unit:nth-child(2n){border-right:0}
  .margin-unit:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .margin-unit:last-child:nth-child(odd){grid-column:1/-1;border-bottom:0}
  .filter select,.btn{min-height:44px}
  .filter select{font-size:15px;font-family:inherit;
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230a1b49' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px}
  table{min-width:700px}
}

/* ---- Tablet portrait / small landscape (768–1023px) --------------------- */
@media (max-width:1023px){
  .title h1{font-size:30px}
  .hero{grid-template-columns:130px repeat(3,1fr)}
  .hero-name{font-size:19px;padding-right:14px}
  .hero-icon{width:36px;height:36px;font-size:26px}
  .kpi-label{font-size:14px}
  .kpi-value{font-size:22px}
  .delta{font-size:13px}
  table{min-width:620px}
  th,td{padding:7px 6px}
  thead tr:first-child th{font-size:14px}
  .unit{font-size:12px}
  .badge{width:26px;height:26px;font-size:13px;margin-right:5px}
  .margin-wrap{grid-template-columns:1fr}
  .margin-unit{border-right:0;border-bottom:1px solid var(--line);min-height:96px}
  .margin-unit:last-child{border-bottom:0}
  .donut{width:78px;height:78px}
  .donut:after{width:58px;height:58px}
}

/* ---- Mobile (<= 767px) — reflowed presentation, same design language ---- */
@media (max-width:767px){
  body{background:#fff}
  .shell{
    padding:calc(14px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right))
            calc(16px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  }
  .title h1{font-size:24px;letter-spacing:.3px}
  .title .sub{margin-top:6px;font-size:14px}
  .title .sub strong{font-size:15px}
  .topbar{gap:12px;margin-bottom:12px}

  /* Filters: full width, 44px touch targets, one clear row each */
  .filters{display:grid;grid-template-columns:1fr;gap:10px}
  .filter{min-width:0;flex:none}
  .filter label{font-size:11px;margin-bottom:4px}
  .filter select{min-height:46px;font-size:15px;padding:11px 36px 11px 12px}
  .filter-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .filter-actions .btn{min-height:46px;width:100%;font-size:14px}
  /* The month picker is one of the stacked rows here, so it takes the full width
     the buttons take - a narrower control in the column reads as misaligned. */
  .archive-sel{min-height:46px;width:100%;max-width:none;font-size:14px;padding:10px 12px}

  /* Hero KPI: vertical stack, navy background + variance colours preserved */
  .hero{grid-template-columns:1fr;padding:16px 16px 6px;border-radius:14px;gap:0}
  .hero-name{font-size:17px;letter-spacing:.4px;border-right:0;border-bottom:1px solid rgba(255,255,255,.5);padding:0 0 11px;margin-bottom:4px}
  .hero-kpi{border-right:0;border-bottom:1px solid rgba(255,255,255,.22);padding:12px 0;gap:14px;align-items:center}
  .hero-kpi:last-child{border-bottom:0}
  .hero-icon{width:34px;height:34px;font-size:26px}
  .kpi-label{font-size:13px;letter-spacing:.6px}
  .kpi-value{font-size:27px;margin-top:2px}
  .delta{font-size:13px;margin-top:4px}

  .summary-head{gap:12px;margin-bottom:12px}
  .callout{padding:0}
  .callout .headline{font-size:17px;line-height:1.15}
  .callout .desc{font-size:13px;margin-top:6px}
  .callout .source{font-size:10px;margin-top:8px}

  .grid{gap:12px;margin-bottom:12px}
  .card-title{font-size:14px;padding:9px 13px}

  /* Actual vs Comparison: stacked blocks */
  .comp-wrap{padding:4px 13px 10px}
  .comp-grid{grid-template-columns:1fr}
  .comp-item{border-right:0;border-bottom:1px solid var(--line);padding:12px 0 13px}
  .comp-item:last-child{border-bottom:0;padding-bottom:4px}
  .comp-label{font-size:13px;letter-spacing:.4px}
  .comp-main{margin-top:6px}
  .comp-main .actual{font-size:23px}
  .comp-main .pct{font-size:15px}
  .comp-sub{font-size:12px;margin-top:6px}
  .progress{margin-top:10px;height:16px}
  .progress-label{font-size:14px}

  /* Business Unit Performance: card view instead of a wide table */
  .table-wrap{display:none}
  .bu-cards{display:grid}

  /* Margin Performance: stacked, larger donuts */
  .margin-wrap{grid-template-columns:1fr;padding:10px 13px}
  .margin-unit{flex-wrap:wrap;gap:10px;padding:12px 2px;min-height:0}
  .margin-name{display:flex;align-items:center;gap:9px;min-width:100%;text-align:left;font-size:13px}
  .margin-name .badge{margin:0;width:30px;height:30px;font-size:15px}
  .donut-block{flex:1 1 45%;min-width:132px;gap:11px}
  .donut-label{font-size:11px}
  .donut{width:84px;height:84px}
  .donut:after{width:62px;height:62px}
  .donut span{font-size:18px}

  .footer{font-size:10px;margin-top:12px;flex-direction:column;gap:5px}
}

/* Very narrow phones (<= 360px) */
@media (max-width:360px){
  .title h1{font-size:21px}
  .kpi-value{font-size:24px}
  .comp-main .actual{font-size:21px}
  .bu-metric .val{font-size:16px}
  .donut{width:76px;height:76px}
  .donut:after{width:56px;height:56px}
  .donut-block{min-width:120px}
}

/* Mobile landscape: keep the phone reflow but use the extra width */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .hero{grid-template-columns:1fr 1fr}
  .hero-name{grid-column:1/-1}
  .hero-kpi:nth-last-child(2){border-bottom:0}
  .table-wrap{display:none}
  .bu-cards{display:grid;grid-template-columns:1fr 1fr}
  .margin-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .margin-unit{border-bottom:0;border-right:1px solid var(--line);gap:9px;padding:8px 10px}
  .margin-unit:nth-child(2n){border-right:0}
  .margin-unit:last-child:nth-child(odd){grid-column:1/-1}
  .margin-name{min-width:64px}
}

/* Installed PWA: no browser chrome, so respect the system safe areas */
@media (display-mode:standalone){
  body{background:#fff}
  .shell{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* ============================ SECTION 4 — PRINT ========================== */
@media print{
  @page{size:A4 landscape;margin:10mm}
  html,body{background:#fff}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .shell{max-width:none;padding:0;min-height:0;box-shadow:none}
  .filter-actions,.banner,#refreshBtn{display:none!important}
  .filters{justify-content:flex-start}
  .filter select{border:0;padding:0;background:none;font-size:12px}
  .topbar{grid-template-columns:1fr auto}
  .card,.hero,.bu-card{break-inside:avoid;page-break-inside:avoid;box-shadow:none}
  .grid{grid-template-columns:.92fr 1.12fr}
  .summary-head{grid-template-columns:1.2fr .8fr}
  /* always print the executive (desktop) presentation, even from a phone */
  .hero{grid-template-columns:180px repeat(3,1fr)}
  .hero-name{border-right:1px solid rgba(255,255,255,.75);border-bottom:0;padding:0 18px 0 0;margin:0}
  .hero-kpi{border-bottom:0;border-right:1px solid rgba(255,255,255,.42);padding:0 16px}
  .hero-kpi:last-child{border-right:0}
  .comp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .comp-item{border-right:1px solid var(--line);border-bottom:0;padding:4px 12px 7px}
  .comp-item:last-child{border-right:0}
  .table-wrap{display:block;overflow:visible}
  .bu-cards{display:none!important}
  table{min-width:0}
  thead{display:table-header-group}
  tr{break-inside:avoid;page-break-inside:avoid}
  .margin-wrap{grid-template-columns:repeat(var(--margin-cols,3),minmax(0,1fr))}
  .margin-unit{grid-column:auto;border-right:1px solid var(--line);border-bottom:0;min-height:0}
  .margin-unit:last-child{border-right:0}
  .footer{margin-top:8px;flex-direction:row}
}

/* ============ SECTION 5 — PHP edition: data warnings panel ================ */
/* The old build script wrote its warnings to a log file nobody opened. Here
   they stay with the report, collapsed, so an unexplained figure can always be
   traced back to the workbook without leaving the page. */
.warn-panel{border:1px solid #f2d391;background:#fffaf0;border-radius:12px;padding:0 14px;margin:14px 0 0;font-size:13px;color:#6a4a00}
.warn-panel summary{cursor:pointer;padding:11px 0;font-weight:800;list-style:none}
.warn-panel summary::-webkit-details-marker{display:none}
.warn-panel summary:before{content:"\25B8";display:inline-block;margin-right:8px;transition:transform .15s}
.warn-panel[open] summary:before{transform:rotate(90deg)}
.warn-panel summary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(242,211,145,.6);border-radius:6px}
.warn-panel ul{margin:0 0 10px;padding-left:26px}
.warn-panel li{margin:4px 0;line-height:1.5;word-break:break-word}
.warn-panel .warn-note{margin:0 0 12px;padding-top:8px;border-top:1px solid #f2d391;font-weight:400;color:#7d6432}
@media (max-width:767px){
  .warn-panel{font-size:12px;padding:0 12px}
  .warn-panel ul{padding-left:20px}
}
@media print{
  .warn-panel{display:none}
}