/* Stijl overgenomen van het ESP32-dashboard (src/webserver.h) zodat het
   lokale dashboard en het webportaal dezelfde uitstraling hebben. */
/* Kleuren staan alleen hier; verderop wordt niets meer met een vaste hexcode
   ingekleurd. Zo is het lichte schema puur een tweede waardenlijst en hoeft er
   voor een themawissel geen enkele regel opmaak verdubbeld te worden.
   --nadruk is de nadrukkleur voor koppen en de actieve tab: in het lichte schema
   is dat juist bijna-zwart. De naam beschrijft dus de ROL en niet de kleur.
   Hij heette ooit --white, en werd op het apparaatdashboard prompt gebruikt
   waar iemand letterlijk wit bedoelde (het knopje van een schakelaar) — in
   lichte modus leverde dat donkergrijs op. Vandaar de hernoeming, hier ook
   doorgevoerd zodat beide kanten dezelfde taal spreken. */
:root {
  --bg:#0d1117; --surface:#161b22; --border:#30363d;
  --text:#e6edf3; --muted:#7d8590;
  --green:#2ea043; --red:#da3633; --orange:#d29922;
  --blue:#388bfd; --nadruk:#f0f6fc;
  --sunken:#0d1117;      /* verdiepte vlakken: invoervelden, tegels, logvenster */
  --topbar:#010409;      /* top- en tabbalk */
  --track:#30363d;       /* schuifschakelaar uit, grijze knoppen, neutrale chip */
  --chip-green:#1a3a1a; --chip-red:#3a1a1a; --chip-blue:#1a2a3a;
  --chip-amber:#3a3a1a; --chip-prealarm:#3a2a1a; --amber:#f5a623;
  --chip-rust:#1a2a1a;   /* sensor in rust */
  --serie-a:#fb923c; --serie-a-band:rgba(251,146,60,0.22); --serie-a-fill:rgba(251,146,60,0.06);
  --serie-b:#38bdf8; --serie-b-band:rgba(56,189,248,0.22); --serie-b-fill:rgba(56,189,248,0.06);
  color-scheme:dark;
  --ok:#4ade80; --alarm:#ef4444;
  --merk:#D3751D;        /* oranje van de banner: schakelaars, maan/zon */
  --logo-groen:#2D5544;  /* groen uit logo.svg; staat altijd op oranje, dus themavast */
  /* Demo-banner: eigen donkere strip onder de logobalk, in beide schema's
     gelijk — dus ook deze drie zijn themavast. */
  --demo-bg:#241708; --demo-tekst:#efe3d5; --demo-accent:#f0a44f;
  --waarsch-bg:#42290a; --waarsch-tekst:#ffd89a; --waarsch-rand:var(--orange);
  --offline-bg:#1c2431; --offline-tekst:#c9d4e2; --offline-rand:#3d4a5c;
}

/* Licht schema. De accentkleuren zijn donkerder gekozen: dezelfde tinten als
   hierboven zijn op wit niet te lezen. */
:root[data-thema="licht"] {
  --bg:#f6f8fa; --surface:#ffffff; --border:#d0d7de;
  --text:#1f2328; --muted:#59636e;
  --green:#1a7f37; --red:#cf222e; --orange:#9a6700;
  --blue:#0969da; --nadruk:#1f2328;
  --sunken:#f6f8fa;
  --topbar:#eaeef2;
  --track:#c4ccd4;
  --chip-green:#dafbe1; --chip-red:#ffebe9; --chip-blue:#ddf4ff;
  --chip-amber:#fff8c5; --chip-prealarm:#ffe7c2; --amber:#9a6700;
  --chip-rust:#dafbe1;
  --serie-a:#bc4c00; --serie-a-band:rgba(188,76,0,0.20); --serie-a-fill:rgba(188,76,0,0.06);
  --serie-b:#0969da; --serie-b-band:rgba(9,105,218,0.20); --serie-b-fill:rgba(9,105,218,0.06);
  color-scheme:light;
  --ok:#1a7f37; --alarm:#cf222e;
  /* Licht: een zacht ambervlak met donkere tekst. Hetzelfde mosterdbruin
     als in het donkere schema zou hier pal onder de oranje logobalk komen
     — twee verzadigde bruintinten op elkaar, en dat oogt vies. */
  --waarsch-bg:#fff4d1; --waarsch-tekst:#7a4a00; --waarsch-rand:#e0a13a;
  --offline-bg:#eef1f5; --offline-tekst:#3d4654; --offline-rand:#c3cbd6;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',sans-serif;min-height:100vh}

/* ── Logo header ── */
/* Oranje banner. Drie kolommen zodat het logo gecentreerd blijft ongeacht hoe
   breed de accountnaam rechts wordt. De banner is in beide schema's oranje, dus
   alles erin gebruikt --logo-groen (de kleur uit logo.svg) en niet de
   themavariabelen — die zouden in het lichte schema wegvallen tegen het oranje. */
/* De middenkolom heeft een definitieve maat (minmax(0,200px)), niet "auto".
   Met een auto-kolom lost width:100% op het logo naar niets op — de kolom wordt
   dan uit de inhoud berekend en de inhoud uit de kolom. */
.logo-bar{background:var(--merk);padding:8px 14px;display:grid;
          grid-template-columns:1fr minmax(0,200px) 1fr;align-items:center;gap:10px}
.logo-bar img{width:100%;display:block}
.logo-bar .thema{justify-self:start}
.logo-bar .thema svg{color:var(--logo-groen)}
.logo-bar .thema input[type=checkbox]{background:rgba(45,85,68,.30);border-color:var(--logo-groen)}
.logo-bar .thema input[type=checkbox]::after{background:var(--logo-groen)}
.logo-bar .thema input[type=checkbox]:checked{background:var(--logo-groen);border-color:var(--logo-groen)}
.logo-bar .thema input[type=checkbox]:checked::after{background:#fff}

/* Account: poppetje met de naam eronder, of "Login" als er niemand ingelogd is */
.account{justify-self:end;display:flex;flex-direction:column;align-items:center;gap:1px;
         width:auto;padding:2px 4px;background:none;border:none;font:inherit;
         color:var(--logo-groen);cursor:pointer;opacity:1}
.account:hover{opacity:.75}
.account svg{width:25px;height:25px;flex:none}
.account .naam{font-size:0.7rem;font-weight:600;line-height:1.1;
               max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account:focus-visible{outline:2px solid var(--logo-groen);outline-offset:2px;border-radius:6px}

/* Smal scherm: het logo krimpt mee en de naam verdwijnt, het poppetje blijft */
@media (max-width:480px){
  .logo-bar{padding:6px 10px;gap:6px;grid-template-columns:1fr minmax(0,150px) 1fr}
  .account .naam{display:none}
}

/* ── Topbalk: bootkeuze + gebruiker ── */
.top-bar{display:flex;align-items:center;gap:12px;background:var(--topbar);
         border-bottom:1px solid var(--border);padding:10px 20px;flex-wrap:wrap}
.top-bar .spacer{flex:1}
.top-bar .user{font-size:0.83rem;color:var(--muted)}
.online-dot{display:inline-block;padding:3px 10px;border-radius:12px;font-size:0.78rem;font-weight:600}
.online-dot.on {background:var(--chip-green);color:var(--green)}
.online-dot.off{background:var(--chip-red);color:var(--red)}

/* ── Tabbalk (zoals het ESP32-dashboard) ── */
.tab-bar{display:flex;background:var(--topbar);border-bottom:1px solid var(--border);padding:0 20px}
.tab-btn{padding:12px 20px;background:none;border:none;border-bottom:2px solid transparent;
         color:var(--muted);font-size:0.9rem;font-weight:600;cursor:pointer;width:auto}
.tab-btn:hover{color:var(--text);opacity:1}
.tab-btn.active{color:var(--nadruk);border-bottom-color:var(--blue)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* ── Paginatitel ── */
.page-title{font-size:1.4rem;color:var(--nadruk);margin-bottom:18px;
            border-bottom:1px solid var(--border);padding-bottom:10px;
            display:flex;align-items:center;justify-content:space-between}
.page-title span{font-size:0.78rem;color:var(--muted);font-weight:400}
.content{padding:20px;max-width:1200px;margin:0 auto}

/* ── Kaarten ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px}
.card h2{font-size:0.82rem;text-transform:uppercase;letter-spacing:.08em;
         color:var(--muted);margin-bottom:12px}
.card-wide{grid-column:1 / -1}

/* ── Alarmstatus ── */
.status-badge{display:inline-block;padding:6px 14px;border-radius:20px;
              font-weight:700;font-size:1.1rem;margin-bottom:8px}
.STANDBY {background:var(--chip-green);color:var(--green)}
.ARMING  {background:var(--chip-amber);color:var(--orange)}
.ARMED   {background:var(--chip-red);color:var(--red)}
.PREALARM{background:var(--chip-prealarm);color:var(--amber)}
.ALARM   {background:var(--red);color:#fff;animation:pulse .5s infinite alternate}
.UNKNOWN {background:var(--track);color:var(--muted)}
@keyframes pulse{from{opacity:1}to{opacity:.6}}
.sensors{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.sensor-dot{padding:4px 11px;border-radius:12px;font-size:0.83rem;font-weight:600}
.sensor-on {background:var(--chip-red);color:var(--red)}
.sensor-off{background:var(--chip-rust);color:var(--green)}
/* Nog niets van deze boot gehoord: niet groen tonen, dat zou "alles rustig"
   beweren terwijl we het niet weten. */
.sensor-onbekend{background:var(--track);color:var(--muted)}

/* ── Knoppen ── */
.btn-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
           gap:8px;margin-top:8px}
button{padding:12px 10px;border:none;border-radius:8px;cursor:pointer;
       font-size:0.95rem;font-weight:600;transition:opacity .15s;
       width:100%;text-align:center;font-family:inherit}
button:hover{opacity:.8}
button:active{transform:scale(.97)}
.btn-arm   {background:var(--red);   color:#fff}
.btn-stdby {background:var(--green); color:#fff}
.btn-blue  {background:var(--blue);  color:#fff}
.btn-gray  {background:var(--track);      color:var(--text)}
.btn-orange{background:var(--orange);color:#000}
:root[data-thema="licht"] .btn-orange{background:var(--merk);color:#fff}
.btn-forest{background:#228B22;color:#fff}
.btn-label{font-size:.75rem;color:var(--muted);margin-bottom:5px}
/* De drie statusknoppen schakelen samen van "bolletje naast tekst" naar
   "bolletje boven tekst". Zonder deze afspraak beslist elke knop dat zelf op
   basis van zijn eigen tekst, en dan staat "Stand By" al op twee regels
   terwijl "Status" er nog één gebruikt. De omslag hangt af van de breedte van
   de kaart en niet van het scherm: op een breed scherm kan een kaart in de
   kolomindeling nog steeds smal zijn. */
.knop-rij{container-type:inline-size}
.knop-rij button{display:flex;align-items:center;justify-content:center;
                 gap:6px;white-space:nowrap;min-width:0}
@container (max-width:350px){
  .knop-rij button{flex-direction:column;gap:2px;line-height:1.25}
}


/* ── Formulierelementen ── */
input[type=text],input[type=password],select{
  background:var(--sunken);border:1px solid var(--border);color:var(--text);
  padding:8px 10px;border-radius:6px;font-size:0.9rem;font-family:inherit}
/* Browser-autofill (Chrome zet zelf een witte/gele achtergrond): donker houden */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--sunken) inset;
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text)}
.row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
label{font-size:0.82rem;color:var(--muted)}

/* Schuifschakelaar in plaats van een vinkje — zoals de instellingen op een
   telefoon. Het is nog steeds een gewone checkbox: alleen het uiterlijk is
   vervangen (appearance:none + ::after als knopje), dus label-klik, tabben,
   spatiebalk en formulierafhandeling werken onveranderd. */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;position:relative;flex:none;
  width:38px;height:21px;border-radius:11px;vertical-align:middle;
  background:var(--track);border:1px solid var(--border);cursor:pointer;
  transition:background .15s,border-color .15s}
input[type=checkbox]::after{
  content:'';position:absolute;left:2px;top:2px;width:15px;height:15px;
  border-radius:50%;background:var(--muted);
  transition:transform .15s,background .15s}
input[type=checkbox]:checked{background:var(--merk);border-color:var(--merk)}
input[type=checkbox]:checked::after{transform:translateX(17px);background:#fff}
input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}

/* Themaschakelaar: maantje links, zonnetje rechts. Het icoon van het actieve
   schema licht op, zodat je zonder tekst ziet welke kant aan staat. */
.thema{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.thema svg{width:15px;height:15px;flex:none;color:var(--merk)}

/* ── Temperatuur/spanning tiles ── */
.temp-tiles{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.temp-tile{flex:1;min-width:130px;background:var(--sunken);border:1px solid var(--border);
           border-radius:8px;padding:12px}
.tile-label{font-size:0.72rem;color:var(--muted);letter-spacing:.06em;margin-bottom:4px}
.tile-val  {font-size:1.8rem;font-weight:700}
.tile-alarm{font-size:0.78rem;min-height:16px;margin-top:3px;color:var(--red)}

/* ── Grafiek ── */
.chart-wrap{position:relative;height:220px;margin-bottom:8px}
.chart-note{font-size:0.75rem;color:var(--muted)}

/* ── Event log ── */
.log{background:var(--sunken);border:1px solid var(--border);border-radius:6px;
     padding:10px;font-family:monospace;font-size:0.78rem;
     max-height:220px;overflow-y:auto;color:var(--muted);white-space:pre-wrap}

/* ── Verbinding ── */
.net-table{width:100%;border-collapse:collapse;font-size:0.85rem}
/* vertical-align:top — de GPS-regel loopt over twee regels; met de standaard
   middenuitlijning zweeft het label er dan tussenin. */
.net-table td{padding:5px 4px;border-bottom:1px solid var(--border);vertical-align:top}
.net-table td:first-child{color:var(--muted);width:45%}
.net-table td.mono{font-family:monospace}
/* Tweede regel in een cel: positie/nauwkeurigheid onder de GPS-constellaties */
.net-table .sub{color:var(--muted);font-size:0.78rem}

/* ── Info-knopjes ──
   Een rondje met een "i" achter een label of waarde; klikken opent één gedeelde
   overlay met de uitleg. Bewust klik-gestuurd en niet hover: op een telefoon
   bestaat hover niet, en dit portaal wordt vooral op een telefoon gebruikt. */
.info-btn{display:inline-flex;align-items:center;justify-content:center;
          width:15px;height:15px;margin-left:5px;padding:0;flex:none;
          border:1px solid var(--muted);border-radius:50%;background:none;
          color:var(--muted);font-size:10px;font-weight:700;font-style:italic;
          line-height:1;cursor:pointer;vertical-align:middle}
.info-btn:hover{border-color:var(--blue);color:var(--blue)}
.info-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

/* Flexkolom met een maximumhoogte: bij een lange uitlei op een klein scherm
   schuift alleen de tekst, terwijl titel, kruisje en knoppen staan blijven. */
/* z-index 3100/3099: de uitleg hangt aan document.body en moet boven álles
   liggen wat er onder kan schuiven — ook boven een kaart in fullscreen (3000)
   en de knop rechtsboven daarin (1100). */
.info-pop{position:absolute;z-index:3100;max-width:290px;
          display:flex;flex-direction:column;max-height:min(78vh,520px);
          background:var(--surface);border:1px solid var(--border);border-radius:8px;
          box-shadow:0 6px 20px rgba(0,0,0,0.35);padding:12px 32px 12px 13px;
          font-size:0.8rem;line-height:1.45;color:var(--text)}
.info-pop p{overflow-y:auto;overscroll-behavior:contain}
/* In een flexkolom rekken kinderen standaard over de volle breedte; knoppen
   horen op hun eigen maat te blijven. Het kruisje staat absoluut en valt
   buiten de flexstroom. */
.info-pop .btn-login,.info-pop button:not(.sluit){align-self:flex-start}
.info-pop h3{font-size:0.8rem;color:var(--nadruk);margin:0 0 5px}
.info-pop .sluit{position:absolute;top:4px;right:5px;width:22px;height:22px;
                 border:none;background:none;color:var(--muted);
                 font-size:15px;line-height:1;cursor:pointer;border-radius:4px}
.info-pop .sluit:hover{color:var(--text);background:var(--track)}
/* De inlogknop in de account-overlay. */
.info-pop .btn-login{background:var(--blue);color:#fff;padding:8px 18px;
                     border-radius:8px;text-decoration:none;font-weight:600;
                     font-size:0.82rem}
.info-pop .btn-login:hover{opacity:.85}
/* Vangt de klik naast de overlay op om te sluiten. Op een ruim scherm hoort een
   klein blokje uitleg niet de hele pagina te verduisteren, dus daar is dit vlak
   onzichtbaar; op een telefoon staat de overlay gecentreerd en helpt de
   verduistering juist om hem als los venster te lezen. */
.info-scherm{position:fixed;inset:0;z-index:3099;background:transparent}
@media (max-width:560px){
  .info-scherm{background:rgba(0,0,0,0.45)}
  /* Expliciete breedte, en max-width uitgezet. Een fixed element met left:50%
     en width:auto berekent zijn shrink-to-fit breedte over de ruimte réchts van
     die 50% (CSS 2.1 10.3.7: beschikbare breedte = containing block - left).
     Dat is de halve viewport, dus op een telefoon van 420px kwam de popup op
     ~210px uit en raakte de max-width van 320px nooit in beeld. Half zo breed
     is twee keer zo hoog — vandaar het eindeloze scrollen bij lange uitleg. */
  .info-pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
            width:min(460px,calc(100vw - 24px));max-width:none}
}

/* ── Feedback ── */
.feedback{font-size:0.83rem;color:var(--blue);min-height:18px;margin-top:8px}
.feedback.err{color:var(--red)}

/* ── Loginpagina ── */
.login-wrap{display:flex;flex-direction:column;align-items:center;
            justify-content:center;min-height:100vh;padding:20px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;
            padding:28px;width:100%;max-width:360px}
.login-card h1{font-size:1.1rem;color:var(--nadruk);margin-bottom:18px;text-align:center}
.login-card input{width:100%;margin-bottom:12px}
/* Tweede keuze onder het formulier: meekijken zonder in te loggen. Bewust een
   ingetogen link en geen tweede knop — inloggen blijft de hoofdhandeling. */
.demo-link{display:block;margin-top:14px;padding-top:14px;
           border-top:1px solid var(--border);text-align:center;
           font-size:0.83rem;color:var(--muted);text-decoration:none}
.demo-link:hover{color:var(--blue)}
.login-logo{background:#D3751D;border-radius:10px 10px 0 0;padding:14px 24px;
            width:100%;max-width:360px;display:flex;justify-content:center}
.login-logo img{max-width:180px;width:100%}
.login-card{border-radius:0 0 10px 10px}

/* (gasten mogen basiscommando's sturen; .needs-user blijft alleen
   verborgen in demo-modus via .demo-mode hieronder) */

/* ── Demo-modus (niet ingelogd) ── */
/* De banner heeft in beide schema's dezelfde donkerbruine achtergrond, dus ook
   een vaste lichte tekstkleur. Hij erfde die eerst van body, en die is in het
   lichte schema bijna zwart — zwart op donkerbruin, onleesbaar. */
.demo-banner{display:flex;flex-direction:column;align-items:center;
  background:var(--demo-bg);color:var(--demo-tekst);
  border-bottom:2px solid var(--merk);padding:16px 20px}
.demo-banner p{margin:0;font-size:0.95rem;line-height:1.5;max-width:820px;text-align:center}
.demo-banner strong{color:var(--demo-accent)}
body.demo-mode .auth-only{display:none!important}
/* In demo-modus houden de topbalk en de tabbalk niets zinnigs meer over: er is
   één boot (de keuzelijst is auth-only) en één tabblad. Twee balken hoogte
   winst, wat op een telefoon precies is wat de banner net had opgeleverd.
   Het "online"-chipje vervalt daarmee ook; dat de demo stilvalt blijft te zien
   doordat markeerVerouderd() de tegels grijs maakt. */
body.demo-mode .top-bar,
body.demo-mode .tab-bar{display:none}

/* ── Melding nieuwe firmware (alleen eigenaren) ── */
.update-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--chip-blue);border-bottom:1px solid var(--blue);padding:10px 20px;
  font-size:0.9rem}
.update-banner button{width:auto;padding:6px 14px;font-size:0.82rem}

/* ── Alarmbanner: dezelfde opzet als op het dashboard van de boot zelf ── */
.alarm-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 20px;font-size:1rem;font-weight:700;color:#fff}
.alarm-banner .banner-txt{flex:1;min-width:220px}
.alarm-banner button{width:auto;padding:7px 16px;font-size:0.85rem;font-weight:600}
.alarm-banner.lvl-alarm{background:var(--red);animation:pulse .7s infinite alternate}
.alarm-banner.lvl-waarschuwing{background:var(--waarsch-bg);
  color:var(--waarsch-tekst);border-bottom:2px solid var(--waarsch-rand)}
/* Geen verbinding: bewust neutraal, geen alarmkleur — een installatie kan ook
   gewoon uitgezet zijn. Wel over de volle breedte, want zonder deze balk lijkt
   het dashboard met zijn laatst bekende waarden gewoon te werken. */
.alarm-banner.lvl-offline{background:var(--offline-bg);color:var(--offline-tekst);
  border-bottom:2px solid var(--offline-rand);font-weight:600}
/* Toestand van vóór het wegvallen: doffer, zodat de bolletjes en de alarmstand
   niet als actuele meting gelezen worden. */
body.verouderd .status-badge,
body.verouderd .sensor-dot{opacity:.45}
/* Markering op een eigen regel onder het tegellabel: als achtervoegsel liep
   "MOTORRUIM (laatste waarde)" om en stonden de vier tegels niet meer gelijk.
   Nu krijgen ze allemaal dezelfde extra regel, dus blijven ze uitgelijnd. */
.oud-tag{display:block;font-size:0.66rem;font-weight:400;letter-spacing:0;
  color:var(--muted);opacity:.85}

/* Beheer-tab: eigenaar van de gekozen boot of SuperAdmin */
.owner-only{display:none}
body.role-owner .tab-btn.owner-only{display:inline-block}
/* SuperAdmin-kaarten in Gebruikersbeheer */
.super-only{display:none}
body.is-superadmin .super-only{display:block}
body.is-superadmin .card.super-only{display:block}

/* ── Gebruikersbeheer ── */
.users-table{width:100%;border-collapse:collapse;font-size:0.85rem;margin-bottom:12px}
.users-table th{color:var(--muted);text-align:left;padding:6px 8px;font-size:0.75rem;
                text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border)}
.users-table td{padding:6px 8px;border-bottom:1px solid var(--border)}
.role-chip{padding:2px 10px;border-radius:10px;font-size:0.78rem;font-weight:600}
.role-superadmin-chip{background:var(--chip-red);color:var(--red)}
.role-owner-chip     {background:var(--chip-blue);color:var(--blue)}
.role-guest-chip     {background:var(--track);color:var(--muted)}
.btn-del{background:none;color:var(--red);width:auto;padding:2px 8px;font-size:1rem}

/* Formulieren: kolomindeling via klassen (géén inline-styles, anders wint
   die van de mobiele media-query hieronder) */
.user-form{display:grid;gap:8px;align-items:end}
.user-form label{display:block;margin-bottom:4px}
.user-form .form-btn{width:auto;padding:8px 16px}
.form-2{grid-template-columns:1fr auto}
.form-4{grid-template-columns:1fr 1fr 1fr auto}
.form-5{grid-template-columns:1fr 1fr 1fr auto auto}
@media (max-width:700px){
  .form-2,.form-4,.form-5{grid-template-columns:1fr 1fr}
  .user-form .form-btn{grid-column:1 / -1;width:100%}
}

/* Brede tabellen scrollen binnen hun kaart i.p.v. buiten beeld te vallen */
.table-scroll{overflow-x:auto}
.table-scroll .users-table{min-width:520px}

/* Botenblokken in Gebruikersbeheer */
.boat-block{background:var(--sunken);border:1px solid var(--border);border-radius:8px;
            padding:12px;margin-bottom:12px}
.boat-block h3{font-size:0.95rem;color:var(--nadruk);margin-bottom:2px}
.boat-block .boat-sub{font-size:0.75rem;color:var(--muted);font-family:monospace;margin-bottom:8px}
/* Invoerregels in bootblokken: meegroeien/afbreken op smalle schermen */
.boat-block .row input[type=text],
.boat-block .row input[type=password],
.boat-block .row select{flex:1 1 140px;min-width:110px}
.boat-block .row button{flex:0 1 auto}

/* Eenmalig getoonde MQTT-inloggegevens */
.cred-box{background:#241708;border:1px solid #D3751D;border-radius:8px;
          padding:12px;margin-top:10px;font-size:0.9rem}
.cred-box code{font-family:monospace;font-size:1rem;color:#f0a44f;user-select:all}

/* ── GPS-kaart ── */
/* isolation:isolate sluit Leaflet op in zijn eigen stapelcontext. Leaflet geeft
   zijn panes z-index 400 en zijn besturingselementen 1000, en met alleen
   position:relative (zonder z-index) ontstaat er géén stapelcontext — die
   waarden kwamen dus rechtstreeks naast die van de pagina te staan en de kaart
   tekende dwars over de uitleg-overlay heen. Nu blijft alles wat Leaflet doet
   binnen dit ene element. */
.map-wrap{position:relative;isolation:isolate}
#map{height:280px;border-radius:8px;border:1px solid var(--border);background:var(--sunken)}
.leaflet-container{font-family:inherit}

/* Eigen locatie-pin (divIcon): geen standaard wit vakje, wel wat schaduw */
.boat-pin{background:none;border:none}
.boat-pin svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}

/* Subtiele fullscreen-knop rechtsboven in een blok, op de hoogte van de titel */
.fs-card{position:relative}
/* Achtergrond uit --surface, niet een vaste donkere kleur: die bleef in het
   lichte schema een zwart blokje, terwijl hover (die wél --surface gebruikte)
   er goed uitzag. */
.fs-btn{position:absolute;top:11px;right:12px;z-index:1100;width:30px;height:30px;
  padding:0;background:var(--surface);border:1px solid var(--border);
  color:var(--text);border-radius:6px;font-size:0.95rem;line-height:1;opacity:.75}
.fs-btn:hover{opacity:1}

/* (Bijna) volledig scherm: het hele blok — incl. titel en periodekeuze —
   zweeft boven de pagina met een smalle rand; de inhoud rekt mee uit */
.fs-card.fullscreen{position:fixed;inset:16px;z-index:3000;margin:0;
  display:flex;flex-direction:column;box-shadow:0 0 0 100vmax rgba(0,0,0,.6)}
.fs-card.fullscreen .chart-wrap{flex:1;height:auto;min-height:0}
.fs-card.fullscreen .map-wrap{flex:1;min-height:0}
.fs-card.fullscreen #map{height:100%}
.fs-card.fullscreen .log{flex:1;max-height:none;min-height:0}