/* OKLogic · the "green" look (v121). The instance accent fills the sidebar, the page stays white, every box is flat with a thin line
   and no shadow, the dashboard fits one screen with each box scrolling inside itself, and Marshal is a flat disc with a thin arc.
   Scoped to html.green.light, so every other instance and the dark and blue palettes keep their own look.
   Switched on per instance with look: "green" in the preset (netlify/functions/config.mjs); the pages add the html class from the config. */

html.green.light{--line:#d3dbe3;--bg:#f3f5f7}
html.green.light body{background:var(--bg)}

/* sidebar: the accent as a solid block, white text, the white logo (logoNav) */
html.green.light #sidebar{background:var(--em);border-right:0;box-shadow:none;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
html.green.light #sidebar .sblogo{border-bottom-color:rgba(255,255,255,.22)}
html.green.light #sidebar .sblogo .wm,html.green.light #sidebar .sblogo .wm b,html.green.light #sidebar .sbco{color:#fff}
html.green.light #sidebar a.sbi{color:rgba(255,255,255,.86)}
html.green.light #sidebar a.sbi:hover{background:rgba(255,255,255,.1);color:#fff}
html.green.light #sidebar a.sbi.on{background:rgba(255,255,255,.17);color:#fff}
html.green.light #sidebar .sbi.locked{color:rgba(255,255,255,.45);opacity:1}
html.green.light #sidebar .sbi.locked:hover{background:none;color:rgba(255,255,255,.45)}
html.green.light #sidebar .sbfoot{border-top-color:rgba(255,255,255,.22)}
html.green.light #sidebar .sbpow,html.green.light #sidebar .sbpow b{color:rgba(255,255,255,.8)!important}
html.green.light #sidebar .sbinst,html.green.light #sidebar .sbset{color:#fff}
html.green.light #sidebar .langsw{border-color:rgba(255,255,255,.35)}
html.green.light #sidebar .langsw b{color:rgba(255,255,255,.75)}
html.green.light #sidebar .langsw b.on{background:#fff;color:var(--em)}
html.green.light #sidebar .accsw .mut,html.green.light #sidebar .accsw b{color:rgba(255,255,255,.8)}
html.green.light #sbBtn{box-shadow:none}
html.green.light #sidebar .modesw{display:none}   /* the green look is the light palette; the Dark and Blue switch stays off here (it shows again if the palette was switched before) */

/* boxes: flat, a thin line, a tighter corner */
html.green.light .card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:none}
html.green.light .tile{border:1px solid var(--line);border-radius:10px;box-shadow:none}
html.green.light .kpi{border-radius:10px;box-shadow:none}
html.green.light .kpi.warn .n{color:#b86a00}
html.green.light .kpi.bad .n{color:#c8231a}
html.green.light .gsvg.warn .g1{stroke:#b86a00}
html.green.light .gsvg.bad .g1{stroke:#c8231a}
html.green.light .gmsg.warn{color:#b86a00}html.green.light .gmsg.bad{color:#c8231a}
html.green.light .bcard h2 .xpb{border-color:var(--line)}
html.green.light .pcard,html.green.light .pchips b,html.green.light .pdstrip b{border-color:var(--line);box-shadow:none}
html.green.light .mcard,html.green.light .mlist,html.green.light .msc{border-color:var(--line);box-shadow:none}
html.green.light #aipanel{box-shadow:0 12px 32px rgba(20,35,50,.16)}

/* Marshal (v122): a dark green coin that slowly turns in real 3D, the assistant's initial on the front, the company's on the back. Matte shading, no glow, no gloss. Faster while it thinks. */
html.green.light #aiorb{perspective:260px}
html.green.light #aiorb .core{inset:7px;background:transparent;box-shadow:none;transform-style:preserve-3d;animation:okcoin 8s linear infinite;display:block}
html.green.light #aiorb .core::before,html.green.light #aiorb .core::after{content:var(--mi,"M");position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 21px/1 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--em) 78%,#fff) 0%,var(--em) 45%,color-mix(in srgb,var(--em) 72%,#000) 100%)}
html.green.light #aiorb .core::before{transform:translateZ(3px)}
html.green.light #aiorb .core::after{content:var(--mi2,"");transform:rotateY(180deg) translateZ(3px)}
html.green.light #aiorb.thinking .core{animation-duration:1.6s}
html.green.light #aiorb .swirl,html.green.light #aiorb .ring{display:none}
@keyframes okcoin{to{transform:rotateY(360deg)}}
html.green.light #aiorb .olabel{color:var(--em)}
html.green.light #okTab{box-shadow:none}
html.green.light #okTab .oslot{background:var(--em);box-shadow:0 0 0 4px #fff}
html.green.light #aipanel{border-radius:10px}

/* the dashboard on one screen (wide screens with enough height): numbers on top, then two rows of boxes that scroll inside themselves */
@media(min-width:1100px) and (min-height:600px){
  html.green.light.board1 body{height:100vh;overflow:hidden;padding-bottom:10px}
  html.green.light .top,html.green.light.board1 #board,html.green.light #issues{max-width:1480px}
  html.green.light.board1 #board{display:grid!important;flex:1 1 auto;min-height:0;grid-template-rows:auto auto minmax(0,1fr) minmax(0,1fr);gap:0;margin-top:14px}
  html.green.light.board1 #board .kpis{grid-row:1;margin-top:0}
  html.green.light.board1 #board #issues{grid-row:2;margin-top:14px;max-height:34vh;overflow:auto}
  html.green.light.board1 #board .bgrid{grid-row:3;margin-top:14px;min-height:0;align-items:stretch}
  html.green.light.board1 #board .bbot{grid-row:4;margin-top:14px;min-height:0;align-items:stretch}
  html.green.light.board1 #board .bgrid>.bcard,html.green.light.board1 #board .bbot>.bcard{min-height:0;overflow:auto;scrollbar-width:thin}
  html.green.light.board1 #board .bcol{min-height:0;overflow:hidden}
  html.green.light.board1 #board .bcol .bcard{min-height:0;overflow:auto;scrollbar-width:thin}
  html.green.light.board1 #board .bcol .bcard.grow{flex:1 1 0}
  html.green.light.board1 #board .bcol #nextCard,html.green.light.board1 #board .bcol #payCard{flex:0 1 auto;max-height:42%}
  html.green.light.board1 #board .bcard{padding:0 18px 14px}
  html.green.light.board1 #board .bcard>h2{position:sticky;top:0;z-index:2;background:#fff;margin:0 -18px 8px;padding:14px 18px 8px;border-bottom:1px solid var(--line)}
  html.green.light.board1 #board .bbot .bcard{display:flex;flex-direction:column}
  html.green.light.board1 #board .wkcard .wk{flex:1;min-height:90px;height:auto;margin-bottom:4px}
  /* the footer row holds the version and Marshal, so the disc never sits on a box */
  html.green.light.board1 .ver{padding-top:8px;min-height:64px;display:flex;align-items:center;justify-content:center}
  /* the scheduler's week view on one screen: toolbar fixed, each day column scrolls inside under its own day heading */
  html.green.light.vweek body{height:100vh;overflow:hidden;display:flex;flex-direction:column;padding-bottom:8px}
  html.green.light.vweek .layout{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  html.green.light.vweek .layout>div:last-child{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  html.green.light.vweek #week.grid{flex:1 1 auto;min-height:0;align-items:stretch}
  html.green.light.vweek #week.grid .daycol{min-height:0;overflow:auto;scrollbar-width:thin;padding-top:0}
  html.green.light.vweek #week.grid .dayhead{position:sticky;top:0;z-index:2;background:#fff;margin:0 -10px;padding:10px 14px 8px}
  html.green.light #aiorb{width:56px;height:56px;right:18px;bottom:8px}
  html.green.light #aiorb .core::before,html.green.light #aiorb .core::after{font-size:19px}
  html.green.light #aiorb .olabel{left:auto;right:100%;top:50%;transform:translateY(-50%);margin:0 10px 0 0;font-size:11.5px}
  html.green.light #aipanel{bottom:76px}
}

/* v123: the board figures (no rings, no dial): label, figure, a seven day line, the change against last week */
html.green.light .kpi.gt{display:grid;grid-template-columns:1fr;gap:2px;align-items:start;padding:14px 16px 12px}
html.green.light .kpi.gt .gl{font-size:12px;font-weight:600;color:var(--ghost);letter-spacing:.01em}
html.green.light .kpi.gt .gr{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:4px}
html.green.light .kpi.gt .n{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
html.green.light .kpi.gt .n small{font-size:14px;font-weight:500;color:var(--ghost)}
html.green.light .kpi.gt.warn .n{color:#b86a00}html.green.light .kpi.gt.bad .n{color:#c8231a}
html.green.light .kpi.gt .n .clr{font-size:18px;font-weight:600;color:var(--ghost)}
html.green.light .kpi.gt .gsp{width:96px;height:30px;flex:none;overflow:visible}
html.green.light .kpi.gt .gsp polyline{fill:none;stroke:var(--em);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
html.green.light .kpi.gt .gsp circle{fill:var(--em)}
html.green.light .kpi.gt .gs{font-size:12px;color:var(--ghost);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.green.light .kpi.gt .gdl{font-size:11.5px;margin-top:2px}
html.green.light .kpi.gt .gd{color:var(--ghost)}html.green.light .kpi.gt .gd.up{color:#1f7a4d}html.green.light .kpi.gt .gd.dn{color:#c8231a}
html.green.light .kpi.gt.live2 .n{animation:okblink2 1.6s ease-in-out infinite}
@keyframes okblink2{0%,100%{opacity:1}50%{opacity:.35}}
html.green.light #wkGauge{display:none}
/* the day line */
html.green.light .dl{position:relative;padding-bottom:4px}
html.green.light .dlh,html.green.light .dlr{display:grid;grid-template-columns:150px 1fr 78px;gap:10px;align-items:center}
html.green.light .dlh{position:sticky;top:41px;background:#fff;z-index:1;padding:2px 0 6px;border-bottom:1px solid var(--line)}
html.green.light .dlx{position:relative;height:14px;font-size:10.5px;color:var(--ghost);font-variant-numeric:tabular-nums}
html.green.light .dlx span{position:absolute;transform:translateX(-50%)}
html.green.light .dlr{padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
html.green.light .dls{font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.green.light .dlt{position:relative;height:14px;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),color-mix(in srgb,var(--line) 70%,transparent) calc(12.5% - 1px) 12.5%)}
html.green.light .dlb{position:absolute;top:2px;height:10px;border-radius:3px}
html.green.light .dlb.dn,html.green.light .dlk.dn{background:var(--em)}
html.green.light .dlb.on,html.green.light .dlk.on{background:#3b78c9}
html.green.light .dlb.lt,html.green.light .dlk.lt{background:#c8231a}
html.green.light .dlb.up,html.green.light .dlk.up{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 35%,transparent)}
html.green.light .dlg{font-size:11px;color:var(--ghost);text-align:right;white-space:nowrap}
html.green.light .dlg.on{color:#3b78c9;font-weight:600}html.green.light .dlg.lt{color:#c8231a;font-weight:600}
html.green.light .dlk{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 4px 0 10px;vertical-align:-1px}
html.green.light .dlnow{position:absolute;top:0;bottom:0;width:0;border-left:1.5px solid #c8231a;left:calc(160px + (100% - 248px) * var(--x) / 100);pointer-events:none}
html.green.light .dlnow::before{content:"";position:absolute;top:-1px;left:-4.5px;width:8px;height:8px;border-radius:50%;background:#c8231a}
@media(max-width:700px){html.green.light .dlh,html.green.light .dlr{grid-template-columns:96px 1fr 0}html.green.light .dlg{display:none}html.green.light .dlnow{left:calc(106px + (100% - 116px) * var(--x) / 100)}}
html.green.light #sidebar .sbk{border-left-color:rgba(255,255,255,.25)}
html.green.light #sidebar a.sbki{color:rgba(255,255,255,.72)}html.green.light #sidebar a.sbki:hover{color:#fff}html.green.light #sidebar a.sbki.on{color:#fff;background:rgba(255,255,255,.12)}
/* v124: the week bars stay on short screens (the dial is gone in this look, so the box would be empty) */
html.green.light .wkcard .wk{display:flex!important}html.green.light .wkcard .wklegend{display:block!important}
html.green.light.board1 #board .wkcard .wk{min-height:60px}

/* v125: tiles with a donut each, own colour per tile */
html.green.light .kpi.gt .gr{align-items:center}
html.green.light .kpi.gt .gtx{min-width:0;flex:1}
html.green.light .kpi.gt .gdo{width:58px;height:58px;flex:none}
html.green.light .kpi.gt .gdo text{font-family:inherit}
html.green.light .kpi.gt .gl{color:var(--tc)}