/* AQ Storage huisstijl voor AQ Assets, afgeleid van aq-storage.nl:
   geel van het logo, AQ-blauw voor actie en de eerste reeks, navy voor tekst; Bricolage Grotesque voor koppen
   en kerncijfers, Poppins voor tekst, IBM Plex Mono voor labels (zoals "AQ IN CIJFERS" op de site).
   Dit bestand bevat de tokens voor de login-, account- en beheerschermen en legt dezelfde stijl over de
   dashboardpagina's (die hun eigen tokens hebben; hier worden ze overschreven). Donker = diep navy, niet zwart. */
@import url("/static/fonts/fonts.css");

:root{
  color-scheme: light;
  --aq-geel:#FFE139; --aq-geel-diep:#F5CF00; --aq-navy:#324A6D; --aq-inkt:#1C2D45;
  --page:#F4F7FB; --surface-1:#FFFFFF; --surface-2:#EDF2F8;
  --text-primary:#1C2D45; --text-secondary:#4C5D75; --muted:#7A889D;
  --grid:#E2E8F0; --baseline:#C6D0DD; --border:rgba(28,45,69,.11); --line:#E2E8F0;
  --accent:#0197F6; --accent-fg:#FFFFFF; --accent-zacht:#E3F2FE;
  --series-kerkdijk:#0197F6; --series-t1:#EB6834; --series-t2:#1BAF7A;
  --series-rainbow:#6A4FC2; --series-ecl:#C2457A; --series-ehd:#2B9BB3;
  --s1:#0197F6; --s2:#EB6834; --s3:#B4BFCD; --s4:#1BAF7A;
  --fin-market:#0197F6; --fin-sde:#1BAF7A; --fin-other:#B4BFCD; --fin-budget:#1C2D45;
  --good-bg:#E2F5EA; --warn-bg:#FFF6CC; --bad-bg:#FCE5E3;
  --good-fg:#0D7A43; --warn-fg:#7A5B00; --bad-fg:#B3261E; --delta-good:#0D7A43;
  --status-good:#14A35A; --status-warning:#F5B800; --status-serious:#EC835A; --status-critical:#D03B3B;
  --radius:14px;
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-kop:"Bricolage Grotesque","Poppins",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --schaduw:0 1px 2px rgba(28,45,69,.04),0 6px 24px -12px rgba(28,45,69,.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --page:#08111F; --surface-1:#0F1B2E; --surface-2:#15253C;
    --text-primary:#EDF3FB; --text-secondary:#B2C0D4; --muted:#7D8DA6;
    --grid:#1C2C44; --baseline:#2A3D59; --border:rgba(237,243,251,.09); --line:#1C2C44;
    --accent:#33AEFF; --accent-fg:#06121F; --accent-zacht:#0E2A45;
    --series-kerkdijk:#33AEFF; --series-t1:#F07A4A; --series-t2:#2BC48D;
    --series-rainbow:#A28BF0; --series-ecl:#E46FA0; --series-ehd:#4CC3DB;
    --s1:#33AEFF; --s2:#F07A4A; --s3:#3A4D69; --s4:#2BC48D;
    --fin-market:#33AEFF; --fin-sde:#2BC48D; --fin-other:#3A4D69; --fin-budget:#EDF3FB;
    --good-bg:#0F2E22; --warn-bg:#352B06; --bad-bg:#3A1717;
    --good-fg:#5FD69A; --warn-fg:#FFD84D; --bad-fg:#FF8A80; --delta-good:#5FD69A;
    --schaduw:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#08111F; --surface-1:#0F1B2E; --surface-2:#15253C;
  --text-primary:#EDF3FB; --text-secondary:#B2C0D4; --muted:#7D8DA6;
  --grid:#1C2C44; --baseline:#2A3D59; --border:rgba(237,243,251,.09); --line:#1C2C44;
  --accent:#33AEFF; --accent-fg:#06121F; --accent-zacht:#0E2A45;
  --series-kerkdijk:#33AEFF; --series-t1:#F07A4A; --series-t2:#2BC48D;
  --series-rainbow:#A28BF0; --series-ecl:#E46FA0; --series-ehd:#4CC3DB;
  --s1:#33AEFF; --s2:#F07A4A; --s3:#3A4D69; --s4:#2BC48D;
  --fin-market:#33AEFF; --fin-sde:#2BC48D; --fin-other:#3A4D69; --fin-budget:#EDF3FB;
  --good-bg:#0F2E22; --warn-bg:#352B06; --bad-bg:#3A1717;
  --good-fg:#5FD69A; --warn-fg:#FFD84D; --bad-fg:#FF8A80; --delta-good:#5FD69A;
  --schaduw:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.8);
}

/* ---------- logo en navigatie (gedeeld) ---------- */
/* periode verschuiven: ‹ › Nu naast de periodekeuze, met het getoonde venster ernaast */
.aq-stap button{min-width:32px;font-size:14px;line-height:1}
.aq-stap button[data-s="0"]{font-size:12.5px}
.aq-stap button:disabled{opacity:.35;cursor:default}
.aq-stap button[hidden]{display:none}
.aq-staplab{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;color:var(--muted);white-space:nowrap}
/* menubalk overal als op de app-schermen: de algemene .tabs-regel van de dashboards (knoppengroep met rand) geldt hier niet */
.aqnav .tabs{display:flex;flex-wrap:wrap;gap:4px;border:0;border-radius:0;background:none;overflow:visible}
.aqnav .tabs a{padding:6px 12px;font-size:12.5px}
/* menubalk blijft bovenaan staan bij scrollen (dashboards en app-schermen) */
/* scheidingslijn als achtergrond: de balk zelf loopt tot de rand (dekt bij scrollen), de lijn blijft binnen de kolom */
.aqnav{position:sticky;top:0;z-index:30;background:linear-gradient(var(--grid),var(--grid)) center bottom/calc(100% - 40px) 1px no-repeat,var(--page);border-bottom:0;margin-left:-20px;margin-right:-20px;padding:14px 20px;min-width:0}
.aqnav.aq-vast{box-shadow:0 6px 18px -12px rgba(0,0,0,.45)}
html{scroll-padding-top:var(--aq-navhoogte,72px)}
body.aq-dash .viz-root{overflow-x:clip}   /* Someren: overflow hidden zou de meescrollende balk blokkeren */
/* smal scherm: logo en knoppen op een regel, de assets eronder op een eigen, horizontaal schuifbare regel */
@media (max-width:640px){.aqnav{margin-left:-16px;margin-right:-16px;padding:8px 16px;row-gap:8px;background-size:calc(100% - 32px) 1px}
  .aqnav .tabs{order:3;flex:1 1 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .aqnav .tabs::-webkit-scrollbar{display:none}
  .aqnav .tabs a{white-space:nowrap;flex:none}}
.aq-logo{width:30px;height:30px;flex:none;display:block;border-radius:4px}
.aqnav .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-kop);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--text-primary);text-decoration:none}
.aqnav .brand span{font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.aqnav .tabs a{border-radius:999px;font-weight:500}
.aqnav .tabs a[aria-current="page"]{background:var(--aq-inkt);color:#FFFFFF}
:root[data-theme="dark"] .aqnav .tabs a[aria-current="page"]{background:var(--aq-geel);color:var(--aq-inkt)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .aqnav .tabs a[aria-current="page"]{background:var(--aq-geel);color:var(--aq-inkt)}}
.aq-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);padding:5px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface-1);white-space:nowrap}
.aq-live i{width:7px;height:7px;border-radius:50%;background:var(--status-good);box-shadow:0 0 0 0 rgba(20,163,90,.5);animation:aqpols 2.4s ease-out infinite}
.aq-live.oud i{background:var(--status-warning);animation:none}
@keyframes aqpols{0%{box-shadow:0 0 0 0 rgba(20,163,90,.45)}70%{box-shadow:0 0 0 7px rgba(20,163,90,0)}100%{box-shadow:0 0 0 0 rgba(20,163,90,0)}}
@media (prefers-reduced-motion: reduce){.aq-live i{animation:none}}

/* ---------- huisstijl over de dashboardpagina's ---------- */
/* Kop gelijk aan de app-schermen (Beheer): onder de menubalk een regel met de themaknop rechts, dan label, titel en
   ondertitel; chips, bedragkeuze en Live-pil op een regel daaronder (aq-shell.js zet de themarij en het label) */
body.aq-dash .aqnav{margin-bottom:0}
body.aq-dash header.top.aq-kop{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:12px 8px}
body.aq-dash header.top.aq-kop>*{flex:1 1 100%;justify-content:flex-start}
body.aq-dash header.top.aq-kop>.themarij{margin:0 0 -6px;justify-content:flex-end}
body.aq-dash header.top.aq-kop h1{font-size:28px;line-height:1.15;margin:0 0 6px;text-wrap:balance}
body.aq-dash header.top.aq-kop .sub{font-size:14px;line-height:1.55;margin:0;color:var(--text-secondary)}
.aq-label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.themarij{display:flex;justify-content:flex-end;margin:0 0 6px}
body.aq-dash{font-family:var(--font);background:var(--page);color:var(--text-primary)}
body.aq-dash h1{font-family:var(--font-kop);font-weight:700;font-size:26px;letter-spacing:-.02em}
body.aq-dash h2,body.aq-dash h3{font-family:var(--font-kop);letter-spacing:-.01em}
body.aq-dash .card,body.aq-dash .panel{border-radius:var(--radius);box-shadow:var(--schaduw);border-color:var(--border);background:var(--surface-1)}
body.aq-dash .card h2,body.aq-dash .panel h2,body.aq-dash .lbl,body.aq-dash th,body.aq-dash .eyebrow,body.aq-dash .sec{font-family:var(--font-mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:var(--muted)}
body.aq-dash .v,body.aq-dash .st .v,body.aq-dash .kpi .v{font-family:var(--font-kop);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
body.aq-dash .themebtn,body.aq-dash .seg{border-radius:999px}
body.aq-dash .seg button[aria-pressed="true"]{background:var(--aq-inkt);color:#FFFFFF}
:root[data-theme="dark"] body.aq-dash .seg button[aria-pressed="true"]{background:var(--aq-geel);color:var(--aq-inkt)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.aq-dash .seg button[aria-pressed="true"]{background:var(--aq-geel);color:var(--aq-inkt)}}
body.aq-dash svg text{font-family:var(--font-mono)}
body.aq-dash #refreshbtn{display:none!important}

/* Someren gebruikt eigen klassen (tile, chip, #tip); zelfde huisstijl als de andere pagina's */
body.aq-dash .tile .label,body.aq-dash .filters .grouplabel{font-family:var(--font-mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:var(--muted)}
body.aq-dash .tile .value{font-family:var(--font-kop);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
body.aq-dash .chip,body.aq-dash .spec,body.aq-dash .statuschip,body.aq-dash .typechip,body.aq-dash .tablebtn{border-radius:999px}
body.aq-dash .filters input[type="date"],body.aq-dash .daynav .navbtn,body.aq-dash .daynav select{border-radius:999px;background:var(--surface-1);color:var(--text-primary)}
body.aq-dash #tip,body.aq-dash .hovtip{border-radius:10px;box-shadow:var(--schaduw)}
body.aq-dash .hovtip .t,body.aq-dash #tip .tdate{font-family:var(--font-mono);letter-spacing:.04em}

/* beschikbaar vermogen (web/dashboards/beschikbaar.js) */
.bv-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 2px}
.bv-ev{display:grid;margin-top:14px}
.bv-ev .lbl{color:var(--muted);font-size:12px;margin-bottom:4px}
.bv-e{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--grid)}
.bv-e b{display:block;font-weight:600;font-variant-numeric:tabular-nums}
.bv-e span{color:var(--muted);font-size:11.5px}
.bv-e>span{font-variant-numeric:tabular-nums;color:var(--text-secondary);font-size:12.5px}
.bv-pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid var(--border)}
.bv-pill.bad{color:var(--status-critical,#e5484d)}.bv-pill.warn{color:var(--status-warning,#f5a524)}.bv-pill.ok{color:var(--status-good,#2bb673)}