:root{
  --teal:#00A3AD; --teal-d:#007A82; --teal-l:#e5f6f7;
  --ink:#1b2733; --muted:#67757f; --line:#e2e8ec; --bg:#f4f7f8; --card:#fff;
  --green:#16a34a; --green-bg:#e7f6ec; --red:#dc2626; --red-bg:#fbe9e9;
  --grey:#9aa7b0; --grey-bg:#eef1f3;
  /* 4 strategic pillar colours (from the Excel colour-coding) */
  --p-growth:#2f8f4e;   --p-growth-bg:#e9f5ee;
  --p-cost:#b8860b;     --p-cost-bg:#faf1d3;
  --p-ops:#145F82;      --p-ops-bg:#e3eef4;
  --p-customer:#d9662a; --p-customer-bg:#fbeee2;
  --shadow:0 1px 3px rgba(16,40,50,.08),0 4px 16px rgba(16,40,50,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45}

/* Auth gate — covers the page until sign-in resolves */
.authgate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100}
body.authed .authgate{display:none}
.authgate-card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:34px 40px;text-align:center;max-width:360px}
.authgate-card .logobox{margin:0 auto}

header{background:linear-gradient(100deg,var(--teal-d),var(--teal));color:#fff;padding:14px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:var(--shadow);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:14px}
.logobox{background:#fff;border-radius:10px;padding:6px 9px;display:flex;align-items:center}
.wlogo{height:42px;display:block}
.wslogan{height:46px;background:#fff;border-radius:8px;padding:6px 12px;display:block}
header .logo{font-weight:800;font-size:20px;letter-spacing:.5px}
header .sub{opacity:.9;font-size:13px}
header .spacer{flex:1}
.tabs{display:flex;gap:6px;background:rgba(255,255,255,.15);padding:4px;border-radius:10px}
.tabs button{border:0;background:transparent;color:#fff;padding:8px 18px;border-radius:7px;font-weight:600;cursor:pointer;font-size:14px}
.tabs button.active{background:#fff;color:var(--teal-d)}
.btn{border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600}
.btn:hover{background:rgba(255,255,255,.25)}
main{padding:22px 26px 60px}
.view{display:none}
.view.active{display:block}
.note{color:var(--muted);font-size:12.5px}
.loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;padding:30px}
.loading .spinner{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--p-growth);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:8px}
.kpi{background:var(--card);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);border-left:4px solid var(--teal)}
.kpi .n{font-size:28px;font-weight:800;line-height:1}
.kpi .l{color:var(--muted);font-size:12px;margin-top:6px}
.kpi.g{border-color:var(--green)} .kpi.r{border-color:var(--red)} .kpi.m{border-color:var(--grey)}

/* filters */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 6px}
.filters input,.filters select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 13px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted)}
.chip.active{background:var(--teal);color:#fff;border-color:var(--teal)}

/* Executive summary */
.exec{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:6px}
.exec h3{margin:0 0 4px;font-size:15px}
.exec .sublabel{color:var(--muted);font-size:12px;margin-bottom:12px}
table.execT{width:100%;border-collapse:collapse;font-size:12.5px}
table.execT th{text-align:left;color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-bottom:2px solid var(--line)}
table.execT th.c,table.execT td.c{text-align:center;width:130px}
table.execT td{padding:6px 8px;border-bottom:1px solid var(--line)}
table.execT tr.secrow td{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-left:5px solid var(--pill,#ccc)}
table.execT tr.clickable:hover td{background:#f7fdfd;cursor:pointer}
table.execT tr.childrow td:first-child{color:var(--muted)}
.sdot{display:inline-block;width:13px;height:13px;border-radius:50%;vertical-align:middle}
.sdot.g{background:var(--green)} .sdot.r{background:var(--red)}
.sdot.m,.sdot.nd{background:var(--grey);opacity:.45}
.exec-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px;align-items:center}

/* Excel import: deviation review modal */
.modal-overlay{position:fixed;inset:0;background:rgba(16,40,50,.45);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{background:#fff;border-radius:12px;box-shadow:var(--shadow);max-width:880px;width:100%;max-height:82vh;display:flex;flex-direction:column;padding:18px 20px}
.modal-card h3{margin:0}
.modal-list{overflow:auto;border:1px solid var(--line);border-radius:8px}
table.devT{width:100%;border-collapse:collapse;font-size:12.5px}
table.devT th{position:sticky;top:0;background:#f7fafb;text-align:left;padding:6px 8px;border-bottom:2px solid var(--line);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
table.devT td{padding:5px 8px;border-bottom:1px solid var(--line)}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.mbtn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 16px;font-weight:600;cursor:pointer;font-size:13px}
.mbtn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.mbtn:hover{filter:brightness(.96)}

/* Sections (collapsible) */
details.section{margin:20px 0 0}
summary.section-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink);padding:9px 14px;border-radius:9px;border-left:6px solid var(--pill,#ccc)}
summary.section-sum::-webkit-details-marker{display:none}
summary.section-sum::before{content:'▸';font-size:12px;color:var(--muted);transition:transform .15s;display:inline-block}
details.section[open] > summary.section-sum::before{transform:rotate(90deg)}
.sec-desc{color:var(--muted);font-size:12.5px;margin:8px 4px 14px}

/* TTI cards */
.grid{display:grid;grid-template-columns:1fr;gap:16px}
.tti-group{display:flex;flex-direction:column;gap:8px}
.tti{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:15px 16px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-left:5px solid var(--pill,var(--teal));transition:box-shadow .2s,border-color .2s}
.tti.flash{box-shadow:0 0 0 3px var(--teal-l),var(--shadow)}
.tti .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.tti .name{font-weight:700;font-size:14.5px}
.tti .meta{color:var(--muted);font-size:11.5px;margin-top:3px}
.badge{font-size:11px;font-weight:800;padding:4px 9px;border-radius:20px;white-space:nowrap}
.badge.g{background:var(--green-bg);color:var(--green)}
.badge.r{background:var(--red-bg);color:var(--red)} .badge.m{background:var(--grey-bg);color:var(--muted)}
.stat{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.stat .big{font-size:22px;font-weight:800}
.stat .unit{font-size:12px;color:var(--muted);font-weight:600}
.stat .vs{font-size:12px;color:var(--muted)}
.spark{width:100%;height:64px;display:block}
.mtable td.trendcell{padding:12px 0 10px;background:#fcfdfe}
.mtable tr.trendrow td.rowlabel{background:#fcfdfe;color:var(--muted)}
.trendctl{display:flex;align-items:center;gap:14px;margin-top:2px;flex-wrap:wrap}
.trendtoggle{cursor:pointer;font-size:12px;color:var(--teal-d);font-weight:600}
.legend-mini{display:flex;gap:14px;font-size:11px;color:var(--muted);flex-wrap:wrap;margin-top:4px}
.legend-mini i{display:inline-block;width:12px;height:3px;border-radius:2px;vertical-align:middle;margin-right:4px}
.def{font-size:11.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px;white-space:pre-line}

/* regional sub-group */
details.subgroup{border:1px dashed var(--line);border-radius:10px;background:#fafcfc;padding:2px 12px 2px}
summary.sub-sum{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--teal-d);padding:9px 2px;list-style:none;display:flex;align-items:center;gap:8px}
summary.sub-sum::-webkit-details-marker{display:none}
summary.sub-sum::before{content:'▸';color:var(--muted);transition:transform .15s;display:inline-block}
details.subgroup[open] > summary.sub-sum::before{transform:rotate(90deg)}
.subcards{display:flex;flex-direction:column;gap:12px;margin:6px 0 12px}

/* Monthly value table */
.mtable{width:100%;min-width:980px;border-collapse:collapse;font-size:11.5px;margin-top:2px;table-layout:fixed}
.mtable th,.mtable td{border:1px solid var(--line);padding:4px 5px;text-align:right;white-space:nowrap}
.mtable th{background:#f7fafb;color:var(--muted);font-weight:700;text-align:center}
.mtable td.rowlabel,.mtable th.rowlabel{text-align:left;font-weight:700;color:var(--ink);background:#f7fafb;position:sticky;left:0;width:88px}
.mtable td.total{font-weight:800;background:#eef4f5}
.mtable td.cur{outline:2px solid var(--teal);outline-offset:-2px}
.mtable td.pos{background:var(--green-bg);color:#0f7a37;font-weight:700}
.mtable td.neg{background:var(--red-bg);color:#b21f1f;font-weight:700}
.mtable-wrap{overflow-x:auto}

/* X-Matrix */
.xwrap{overflow:auto;background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:18px}
table.xm{border-collapse:collapse;margin:0 auto}
table.xm td{border:1px solid var(--line);text-align:center;vertical-align:middle;padding:0;overflow:hidden}
.cell-dotzone{width:40px;height:40px}
.dot{font-size:14px;color:var(--teal)}
.dot.weak{opacity:.5}
.txt-priority,.txt-longterm{max-width:300px;min-width:250px;text-align:left;padding:0 !important;overflow:visible !important}
.objlist{margin:6px 0 0;padding:0;list-style:none}
.objlist li{font-size:12px;font-weight:600;margin:0 0 6px;padding:2px 0 2px 8px;border-left:3px solid var(--line);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:default}
/* in-table priorities/longterm list: one li per dot row, so it must be exactly as tall as a
   dot cell (40px) and never grow on hover — same truncated-label + hover-popup pattern as the
   axis cells below (.rotinner/.full), just anchored to each li instead of the whole td */
.txt-priority .objlist,.txt-longterm .objlist{margin:0}
.txt-priority .objlist li,.txt-longterm .objlist li{box-sizing:border-box;position:relative;display:block;height:40px;line-height:36px;margin:0;padding:2px 8px 2px 10px;overflow:visible}
.txt-priority .objlist li .li-txt,.txt-longterm .objlist li .li-txt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txt-priority .objlist li .full,.txt-longterm .objlist li .full{display:none}
.txt-priority .objlist li:hover .full,.txt-longterm .objlist li:hover .full{display:block;position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:6px;z-index:30;background:var(--card);border:1.5px solid rgba(0,0,0,.18);border-radius:9px;box-shadow:var(--shadow);padding:10px 12px;width:240px;font-size:12px;font-weight:600;text-align:left;white-space:normal;line-height:1.45}
.rot{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:11px;font-weight:700;padding:8px 3px !important;max-height:200px;overflow:hidden}
/* axis cells: truncated vertical label + hover box-extension showing full text */
td.axis{position:relative;min-width:34px;overflow:visible !important}
td.axis .rotinner{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:11px;font-weight:700;padding:8px 3px;max-height:200px;overflow:hidden;display:inline-block}
td.axis .full{display:none}
td.axis:hover .full{display:block;position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:30;background:inherit;border:1.5px solid rgba(0,0,0,.18);border-radius:9px;box-shadow:var(--shadow);padding:10px 12px;width:240px;font-size:12px;font-weight:600;text-align:left;white-space:normal;line-height:1.45}
.objlist li:hover{-webkit-line-clamp:unset}
.hdr-tti{cursor:pointer}
.hdr-owner{background:#f3f0fa;min-width:26px;font-size:10.5px;font-weight:600}
.center-x{background:radial-gradient(circle at 50% 50%,#fff,#eaf6f7);position:relative;min-width:60px}
.center-x::before,.center-x::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 48%,var(--teal) 49%,var(--teal) 51%,transparent 52%);opacity:.3}
.center-x::after{background:linear-gradient(to bottom right,transparent 48%,var(--teal) 49%,var(--teal) 51%,transparent 52%)}
.center-x span{position:relative;font-weight:800;color:var(--teal-d);font-size:13px}
.axislabel{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:4px}
.xlegend{display:flex;gap:18px;flex-wrap:wrap;margin:16px 2px 0;font-size:12px;color:var(--muted);align-items:center}
.xlegend b{color:var(--ink)}
.pill-key{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:5px}
.xcols{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px}
.xcols .objlist li{-webkit-line-clamp:3;cursor:pointer;color:var(--ink)}
footer{color:var(--muted);font-size:11.5px;text-align:center;padding:20px}