/* ============================================================================
   InfraOps · de gedeelde basis van voorkant en beheer
   ============================================================================

   Eén plek waar de kleuren, de letters en de schaal staan. Het dashboard en de
   beheeromgeving zijn dezelfde website: als het groen van "healthy" hier verandert,
   verandert het daar mee. Stond het twee keer, dan gaan ze op een dag uit elkaar
   lopen en merk je dat pas als iemand het naast elkaar ziet.

   Wat hier NIET hoort: opmaak van een onderdeel. Dit bestand kent geen knoppen,
   geen tabellen en geen kaarten; die staan in sitewatch.css (de voorkant) en
   beheer.css (het beheer). Hier staat alleen wat ze samen gebruiken.

   De dag/nacht-schakelaar is `data-sw-theme` op <html>, gezet door theme.js vóór
   de eerste verf. Eén attribuut voor de hele site.
   ========================================================================== */

/* De letters staan op onze eigen server en niet bij Google.

   WAAROM DAT IS VERANDERD (18 september 2026). Ze kwamen binnen via een @import bovenaan dit
   bestand, en dat is de traagste manier die er is: de browser ontdekt het adres pas nadat hij dit
   hele bestand heeft opgehaald en gelezen, en moet dan alsnog naar twee andere servers. Gemeten op
   de voorpagina schoof daardoor de hele pagina op het moment dat de letters binnenkwamen -- een
   layout shift van 0,66, waar 0,1 de grens is. De tekst in de kop werd smaller en alles eronder
   sprong omhoog.

   Nu staan de bestanden ernaast en haalt de browser de drie die meteen in beeld staan vooraf op.
   Dat scheelt ook twee verbindingen naar buiten: geen enkele bezoeker wordt nog bij Google
   aangemeld om een pagina te kunnen lezen.

   WAAROM `optional` EN NIET `swap` OP DE NEDERLANDSE TEKENS. Met `swap` tekent de browser eerst met
   de systeemletter en wisselt daarna om. Barlow Condensed is smaller, dus op dat moment krimpt de
   kop, past de knoppenrij ineens op één regel in plaats van twee, en springt de hele pagina omhoog.
   `optional` laat die wissel vervallen: is de letter er binnen een tiende seconde (en dat is hij,
   want hij staat ernaast en wordt vooraf opgehaald), dan wordt hij meteen gebruikt; is hij er niet,
   dan blijft deze ene keer de systeemletter staan en is hij de volgende pagina gewoon in beeld.
   Geen sprong, hoe traag de verbinding ook is. De uitbreidingen (latin-ext) houden `swap`: die
   gaan over tekens die in het Nederlands nauwelijks voorkomen, dus daar valt niets te zien. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/assets/fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/barlow-condensed-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/assets/fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  /* Dezelfde namen als in het ontwerp van het beheer, zodat een sjabloon uit het
     ontwerp één op één over te nemen is. */
  --font-head: var(--font-heading);

  /* ── De schaal ───────────────────────────────────────────────────────────
     Twee uitdrukkingen van dezelfde staffel. De voorkant rekent alle maten uit
     met calc(x * --sw-zoom); het beheer zet één zoom op het casco. Ze horen
     gelijk op te lopen, anders is de kop van het dashboard een andere maat dan
     die van het beheer terwijl je tussen de twee heen en weer klikt.

     0,9 is de maat waarop het dashboard het prettigst leest: de hele kop past dan
     op één regel. Vanaf 1700 pixels loopt hij op, want dan hangt het scherm aan
     de muur en kijk je van een meter of drie. */
  /* 1 sinds 1 september 2026 (was 0.9): de tekst was op een gewoon scherm te klein om prettig
     te lezen. De staffel hieronder schaalt vanaf 1700px verder op. */
  --sw-zoom: 1;
  --zoom: 1.12;

  --space-1: calc(3.4px * var(--sw-zoom));
  --space-2: calc(6.8px * var(--sw-zoom));
  --space-3: calc(10.2px * var(--sw-zoom));
  --space-4: calc(13.6px * var(--sw-zoom));
  --space-6: calc(20.4px * var(--sw-zoom));
  --space-8: calc(27.2px * var(--sw-zoom));

  /* ── Nacht is de standaard: dit is een scherm dat dag en nacht aanstaat. ── */
  --ink: #eef1f4;
  --ground: #1d2d3d;
  --acc: #b5d9fd;
  --ok: #5fae86;
  --warn: #d7a03f;
  --crit: #d1584a;

  --t1: color-mix(in srgb, var(--ink) 90%, transparent);
  --t2: color-mix(in srgb, var(--ink) 72%, transparent);
  --t3: color-mix(in srgb, var(--ink) 64%, transparent);
  --t4: color-mix(in srgb, var(--ink) 57%, transparent);
  --t5: color-mix(in srgb, var(--ink) 56%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 9%, transparent);

  /* ── Dezelfde kleuren onder de namen die het beheerontwerp gebruikt ──────
     Geen tweede palet: dit zijn verwijzingen. Een kleur verandert op één plek. */
  --bg: var(--ground);
  --head: var(--ground);
  --panel: #253444;
  --panel2: #2c3b4b;
  --mute: var(--t2);
  --dim: var(--t4);
  --info: var(--acc);
  --sel: #31465c;
  --hov: #2c3b4b;
  --pribg: #384c60;
  --pribd: #728da9;
  --prifg: #b5d9fd;
}

html[data-sw-theme="dag"] {
  --ink: #1d1f20;
  --ground: #f2f2f3;
  --acc: #416180;
  --ok: #2f7d5b;
  --warn: #8a6212;
  --crit: #a5382a;

  --t1: color-mix(in srgb, var(--ink) 96%, transparent);
  --t2: color-mix(in srgb, var(--ink) 90%, transparent);
  --t3: color-mix(in srgb, var(--ink) 84%, transparent);
  --t4: color-mix(in srgb, var(--ink) 79%, transparent);
  --t5: color-mix(in srgb, var(--ink) 74%, transparent);

  --panel: #f8f8f9;
  --panel2: #ffffff;
  --sel: #e1e1e2;
  --hov: #e9e9ea;
  --pribg: #dde0e5;
  --pribd: #90a2b4;
  --prifg: #22415c;
}

/* De staffel voor beide schalen tegelijk, zodat ze niet uit de pas kunnen lopen. */
@media (min-width: 1700px) { :root { --sw-zoom: 1.05; --zoom: 1.3; } }
@media (min-width: 2100px) { :root { --sw-zoom: 1.25; --zoom: 1.55; } }
@media (min-width: 2600px) { :root { --sw-zoom: 1.5;  --zoom: 1.8; } }
@media (min-width: 3400px) { :root { --sw-zoom: 1.9;  --zoom: 2.2; } }
/* Het beheer schaalt met opzet 12% op: het is werk dat je van een meter afstand aan de muur
   moet kunnen lezen. Op iets wat je vasthoudt is dat precies verkeerd om — dan is alles 12%
   groter en past de indeling niet meer. De grens ligt op dezelfde breedte als waar de brede
   indeling in beheer.css ophoudt (1050), zodat schaal en indeling niet uit elkaar lopen. */
@media (max-width: 1050px) { :root { --zoom: 1; } }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
}

a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

input, select, button, textarea { font-family: inherit; font-size: inherit; }
input[type="checkbox"] { accent-color: var(--ok); width: 14px; height: 14px; }

/* Alleen voor schermlezers: tekst die er wel is maar niet te zien. */
.sw-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}