/* MACC dashboard — layered on top of style.css */

/* ---------------------------------------------------- header: logos right */
.topbar{gap:16px}
.logos{display:flex;align-items:center;gap:8px;flex:none}
.logo-chip{display:flex;align-items:center;justify-content:center;height:40px;padding:5px 9px;
  background:#fff;border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow)}
.logo-chip img{display:block;height:22px;width:auto}
.logo-chip:nth-child(3) img{height:27px}
.logo-chip:nth-child(4) img{height:26px}
.logo-name{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#0b1119;margin-left:5px}

.actionbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}

/* ---------------------------------------------------------- hero cards v3 */
.hero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.hero .card{padding:15px 16px;display:flex;flex-direction:column}
.lbl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ring-wrap{display:flex;align-items:center;gap:14px;margin-top:6px;flex:1}
.ring{position:relative;width:112px;height:112px;flex:none}
.ring svg{display:block;width:100%;height:100%}
.ring .ctr{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:0}
.ring .ctr b{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.ring .ctr span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.ring-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.big{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.sm{font-size:11.5px;color:var(--muted);line-height:1.45}
.sm b{color:var(--ink-2);font-weight:600;font-family:var(--mono);font-size:11px}

/* performance indices: the two gauges fill the card */
.pi-card{display:flex;flex-direction:column}
.hero .card > .chart-svg{margin-top:auto}
.pi{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;align-items:end;margin:10px 0 6px}
.pi-g{min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.pi-svg{width:100%}
.pi-svg svg{display:block;width:100%;height:auto}
.pi-val{font-family:var(--mono);font-size:clamp(16px,1.35vw,21px);font-weight:600;letter-spacing:-.03em;line-height:1;text-align:center;margin-top:2px}
.pi-lbl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:3px}
.pi-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);text-align:center}
.pi-foot b{color:var(--ink-2);font-family:var(--mono);font-size:11px;font-weight:600}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.mini{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.mini .v{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.02em}
.mini .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}

.sec{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:24px 0 10px;padding:0 2px;scroll-margin-top:90px}
.sec-l{display:flex;align-items:center;gap:10px;min-width:0}
.sec .num{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--faint);border:1px solid var(--border-strong);border-radius:7px;padding:2px 7px}
.sec h2{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.sec p{font-size:11.5px;color:var(--muted);margin-top:1px}

.chart-svg{width:100%;height:auto;display:block}
.tick{font-size:9.5px;fill:var(--faint);font-family:var(--font)}
.tick.m{font-family:var(--mono)}
.grid-l{stroke:var(--grid);stroke-width:1}
.axis-l{stroke:var(--border-strong);stroke-width:1}
.vlabel{font-size:9.5px;font-weight:700;fill:var(--ink-2)}

/* gantt */
.gantt{display:grid;grid-template-columns:190px 1fr;gap:0}
.gantt .gl{font-size:11.5px;color:var(--ink-2);padding:6px 10px 6px 0;border-bottom:1px solid var(--grid);display:flex;flex-direction:column;justify-content:center}
.gantt .gl b{font-weight:600;font-size:11.5px;color:var(--ink)}
.gantt .gl span{font-size:9.5px;color:var(--muted);font-family:var(--mono)}
.gantt .gt{border-bottom:1px solid var(--grid);padding:0}

/* ------------------------------------------------------------- look-ahead */
.la{padding:6px 18px 14px}
.la-sec{padding:12px 0 4px}
.la-sec + .la-sec{border-top:1px solid var(--border);margin-top:6px;padding-top:16px}
.la-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.la-head h3{font-size:13px;font-weight:700;letter-spacing:-.005em}
.la-range{font-family:var(--mono);font-size:11px;color:var(--muted)}
.la-stats{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.la-k{display:inline-flex;align-items:baseline;gap:5px;font-size:10.5px;color:var(--muted);
  background:var(--sunken);border-radius:999px;padding:4px 10px;white-space:nowrap}
.la-k b{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink)}
.la-tbl td,.la-tbl th{vertical-align:middle}
.la-tbl .la-cell{width:150px;min-width:120px;padding-right:14px}
.la-bar{position:relative;height:8px;border-radius:999px;background:var(--sunken);overflow:hidden}
.la-bar span{position:absolute;top:0;bottom:0;border-radius:999px}
.la-bar .plan{background:color-mix(in srgb,var(--plan) 55%,transparent);border:1px solid var(--plan)}
.la-bar .run{background:var(--warn)}

/* ------------------------------------------------------------- photo grid */
.pgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.pcard{margin:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface);cursor:zoom-in;box-shadow:var(--shadow)}
.pcard img{display:block;width:100%;height:116px;object-fit:cover;background:var(--sunken)}
.pcard figcaption{padding:6px 8px;font-size:10px;color:var(--muted);line-height:1.3}
.pcard figcaption b{display:block;color:var(--ink);font-weight:600;font-size:10.5px}
.area-head{display:flex;align-items:center;gap:10px;margin:16px 0 8px;flex-wrap:wrap}
.area-head .badge{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--sunken);color:var(--ink-2)}
.area-head .cnt{font-size:11px;color:var(--muted)}

/* --------------------------------------------------------------- lightbox */
#lb{position:fixed;inset:0;background:rgba(8,12,18,.94);display:none;z-index:90;padding:20px;
  grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:10px}
#lb.on{display:grid}
#lb .lb-body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:8px}
#lb img{max-width:100%;max-height:78vh;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
#lb .cap{color:#eef2f7;font-size:12.5px;display:flex;align-items:center;gap:12px;text-align:center;flex-wrap:wrap;justify-content:center}
#lb .lbn{font-family:var(--mono);font-size:11px;color:rgba(238,242,247,.65)}
#lb .x{position:absolute;top:14px;right:18px;color:#fff;font-size:22px;cursor:pointer;background:none;border:0;z-index:2}
.lb-nav{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background .15s ease,transform .15s ease}
.lb-nav:hover{background:rgba(255,255,255,.24);transform:scale(1.05)}
.lb-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-nav.prev{justify-self:end}
.lb-nav.next{justify-self:start}

@media(max-width:1180px){
  .hero{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gantt{grid-template-columns:130px 1fr}
  .la-tbl .la-cell{width:110px}
}
@media(max-width:900px){
  .la-tbl .la-cell{display:none}
  .la-th{display:none}
}
@media(max-width:720px){
  .hero{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gantt{grid-template-columns:1fr}
  .gantt .gl{display:none}
  .sec{flex-wrap:wrap}
  .topbar{flex-wrap:wrap}
  .logos{flex:1 1 100%;justify-content:flex-start;gap:6px;flex-wrap:wrap}
  .brand h1{white-space:normal;overflow:visible;text-overflow:clip;font-size:15px;line-height:1.25}
  .logo-chip{height:34px;padding:4px 7px}
  .logo-chip img{height:18px}
  .logo-chip:nth-child(3) img{height:22px}
  .logo-chip:nth-child(4) img{height:21px}
  .la-stats{margin-left:0}
  .card{overflow-x:auto}
  .bar-row{grid-template-columns:minmax(0,1fr) 88px}
  .bar-name,.bar-sub{min-width:0}
  #lb{padding:10px;grid-template-columns:44px minmax(0,1fr) 44px}
  .lb-nav{width:42px;height:42px}
  #lb img{max-height:68vh}
}

/* ------------------------------------------------------------------ print */
.print-only{display:none}
@media print{
  @page{size:A3 landscape;margin:8mm}

  /* The download is the page itself, sheet by sheet: nothing is resized and
     nothing is re-laid-out. The palette is pinned to the light one, the
     buttons that do nothing on paper are dropped, and the desktop layout is
     forced so the sheet never falls back to the narrow-screen design. */
  html, :root[data-theme="dark"]{
    color-scheme: light;
    --plane:#f5f6f8; --surface:#ffffff; --surface-2:#fafbfc; --sunken:#eef1f5;
    --ink:#0d1522; --ink-2:#3d4a5c; --muted:#6b7787; --faint:#98a2b3;
    --border:#e3e8ef; --border-strong:#cfd7e3; --grid:#eef1f5;
    --plan:#2a78d6; --plan-soft:#cfdff5; --act:#128f7f; --act-soft:#cdeae4;
    --cost:#d9662b; --pv:#9aa9bd; --ev:#128f7f; --ac:#d9662b;
    --good:#12855a; --good-bg:#e3f4ec; --warn:#a86a00; --warn-bg:#fdf0d7;
    --serious:#b4541d; --serious-bg:#fde8dc; --crit:#b3261e; --crit-bg:#fbe3e1;
    --neutral:#5b6675; --neutral-bg:#eceff4; --accent:#1d4ed8;
  }
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:var(--plane);color:var(--ink)}

  .topbar{position:static;flex-wrap:nowrap;padding:14px 34px;backdrop-filter:none}
  .brand{flex:0 1 auto;min-width:0}
  .brand h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px}
  .sub{font-size:12px}
  .logos{flex:0 0 auto;flex-wrap:nowrap;gap:8px}
  .logo-chip{height:40px;padding:5px 9px;box-shadow:none}
  .logo-chip img{height:22px}
  .logo-chip:nth-child(3) img{height:27px}
  .logo-chip:nth-child(4) img{height:26px}
  .controls,.toolbar,.search,#lb,.lb-nav{display:none!important}

  .wrap{max-width:1440px;margin:0 auto;padding:16px 34px 6px}
  .actionbar{flex-wrap:nowrap}

  /* desktop rows stay as they are on screen */
  .hero{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
  .grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
  .span-4{grid-column:span 4}
  .span-5{grid-column:span 5}
  .span-6{grid-column:span 6}
  .span-7{grid-column:span 7}
  .span-8{grid-column:span 8}
  .pgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  .gantt{grid-template-columns:190px 1fr}
  .gantt .gl{display:flex}
  .bar-row{grid-template-columns:minmax(120px,1.5fr) minmax(120px,2.4fr) 104px}
  .donut-wrap{flex-direction:row;align-items:center}
  .la-tbl .la-cell{display:table-cell;width:150px}
  .la-th{display:table-cell}
  .la-stats{margin-left:auto}
  .card{overflow:visible;box-shadow:none}
  .foot{flex-direction:row}
  .foot .stamp{text-align:right;white-space:nowrap}
  .meta-strip{gap:8px 26px;padding:11px 16px}

  /* dense, page by page: cards keep their design, and only the rows that
     must be whole (a KPI, a photo, a table row) are kept from splitting */
  .sec{display:block;break-after:avoid}
  .keep{break-inside:avoid}
  .card-head{break-after:avoid}
  .card,.kpi,.pcard,.mini,.rank li,.la-sec,.meta-strip{break-inside:avoid}
  .table-wrap,.register .table-wrap{max-height:none;overflow:visible}
  .tbl thead{display:table-header-group}
  .tbl{break-inside:auto}
  .tbl tr{break-inside:avoid}
  .tbl th{position:static}
  .nslist{max-height:none;overflow:visible}
  a{text-decoration:none}
}

.actionbar.end{justify-content:flex-end}

/* ---- sheet 1: the executive summary, health card included, on one sheet --- */
@media print{
  .topbar{padding:7px 34px}
  .brand h1{font-size:16px}
  .sub{font-size:11px}
  .logo-chip{height:30px;padding:4px 7px}
  .logo-chip img{height:17px}
  .logo-chip:nth-child(3) img{height:21px}
  .logo-chip:nth-child(4) img{height:20px}
  .wrap{padding-top:6px}
  .actionbar{margin-bottom:6px}
  .actionbar .health{padding:4px 10px;font-size:11px}
  .meta-strip{padding:6px 14px;margin-bottom:10px;gap:5px 22px}
  .ml{font-size:9px}
  .mv{font-size:11.5px}
  #tabs{margin-bottom:2px!important}
  #tabs .chip{padding:4px 9px;font-size:10.5px}
  #s01{margin:8px 0 7px}
  #s01 h2{font-size:14px}
  #s01 p{font-size:10.5px}
  .hero{gap:9px;margin-bottom:9px}
  .hero .card{padding:9px 11px}
  .ring{width:92px;height:92px}
  .hero .big{font-size:21px}
  .hero .lbl{font-size:9px}
  .hero .sm,.hero .pi-foot{font-size:10.5px}
  .kpis{gap:9px;margin-bottom:9px}
  .kpi{padding:8px 11px 7px;gap:4px}
  .kpi-label{font-size:9.5px}
  .kpi-value{font-size:20px}
  .kpi-meta{font-size:10.5px}
  .kpis + .card{padding:9px 11px 11px}
  .kpis + .card .card-head{margin-bottom:7px}
  .kpis + .card .tbl{font-size:10.8px}
  .kpis + .card .tbl td{padding:4px 7px}
}

/* ---- sheet: the photo gallery, the three areas on one sheet --------------- */
@media print{
  #s14{break-before:page;margin:6px 0 6px}
  .pgrid-wrap{padding:8px 11px 10px;break-inside:auto}
  .pgrid-wrap .area-head{margin:6px 0 3px}
  .pgrid-wrap .area-head h2{font-size:11px!important}
  .pgrid-wrap .area-head .badge{font-size:9.5px;padding:2px 7px}
  .pgrid-wrap .area-head .cnt{font-size:9.5px}
  .pgrid-wrap .pgrid{gap:6px}
  .pgrid-wrap .pcard img{height:72px}
  .pgrid-wrap .pcard figcaption{padding:2px 5px;font-size:8px;line-height:1.2}
  .pgrid-wrap .pcard figcaption b{font-size:9px}
}