/* 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}
}