/* Het hidden-attribuut hoort altijd te winnen. Elke klasse met een eigen
   `display` (.btn, .rep-uitgang, alles met flex) overschrijft het anders
   stilletjes, en dan staat er een knop die verborgen zou moeten zijn. Dat is hier
   twee keer gebeurd voordat deze regel er kwam. */
[hidden] { display: none !important; }

/* ── Plus Jakarta Sans (self-hosted, variable) — browser lazy-loads only the
   unicode-range subset a page actually needs. ── */
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/pjs-00.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/pjs-01.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/pjs-02.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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/fonts/pjs-03.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;
}

/* ── Lato (self-hosted) — same UI font as MikroNetCon, for the strak look. ── */
@font-face { font-family:'Lato'; font-style:normal; font-weight:300; font-display:swap; src:url(/static/fonts/lato-300.woff2) format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url(/static/fonts/lato-400.woff2) format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap; src:url(/static/fonts/lato-700.woff2) format('woff2'); }

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1117;
  --bg2: #1a1d27;
  --bg3: #22263a;
  --border: #2e3347;
  --text: #e2e8f0;
  --muted: #8892a4;
  --accent: #f97316;        /* Helios orange (brand accent) */
  --accent-text: #fdba74;   /* readable accent-coloured label on an accent tint */
  --on-accent: #1a1d27;     /* text on an --accent background (dark on the bright orange) */
  --offline-seg: #374151;   /* timeline offline segment fill */
  --shadow-card: 0 8px 24px rgba(0,0,0,.4);   /* hover lift on clickable cards */
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #f59e0b;
}

:root[data-theme="light"] {
  color-scheme: light;
  /* MikroNetCon-strakke look: witte panelen op een zacht grijs, subtiele randen.
     Iets meer contrast: dieper paginagrijs, sterkere randen, donkerder muted. */
  --bg: #eaeef3;     /* soft grey page — laat witte panelen 'poppen' */
  --bg2: #ffffff;    /* white panels / cards / rows */
  --bg3: #e6eaf0;    /* tint for inputs, hovers, tracks on white */
  --border: #d5dbe3;
  --text: #19212b;   /* dark slate ink */
  --muted: #61707f;
  --accent: #ea580c;        /* fresh Helios orange on light */
  --accent-text: #c2410c;   /* deeper orange for readable labels on tints */
  --on-accent: #ffffff;
  --offline-seg: #b6c1cd;
  --shadow-card: 0 8px 24px rgba(16,24,40,.11);
  --green: #15803d;   /* contrast-safe on light */
  --red: #dc2626;
  --yellow: #b45309;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text);
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.navbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand { font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--text); }

.container { max-width: 1600px; margin: 0 auto; padding: 28px 24px 44px; }

h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
h2 { font-size: 16px; font-weight: 600; margin: 28px 0 12px; }
.muted { color: var(--muted); font-size: 13px; margin-bottom: 20px; }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }

/* Cards */
.cards { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 16px 20px; min-width: 140px; }
.card-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.card-value { font-size: 20px; font-weight: 700; }

/* Table */
.table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.table th { background: var(--bg2); color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover { background: var(--bg2); }
.td-bold { font-weight: 600; }
.td-mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); }
.td-date { color: var(--muted); white-space: nowrap; font-size: 12px; }
.td-right, .th-right { text-align: right; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-green { background: rgba(34,197,94,.15); color: var(--green); }
.badge-red { background: rgba(239,68,68,.15); color: var(--red); }
.badge-gray { background: var(--bg3); color: var(--muted); }
.badge-info { background: rgba(59,130,246,.15); color: #3b82f6; }
.badge-warn { background: rgba(245,158,11,.15); color: #f59e0b; }

/* Buttons */
.btn { background: var(--accent); color: var(--on-accent); border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { opacity: .88; }
.btn-sm { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 4px 10px; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; }
.btn-sm:hover { background: var(--border); }
.btn-primary { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }

/* Pagination */
.tbl-footer { display: flex; align-items: center; gap: 6px; padding: 12px 0; }
.tbl-pg-btns { display: flex; gap: 4px; }
.tbl-pg-info { color: var(--muted); font-size: 12px; margin-left: 8px; }

/* Form */
.form-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 20px; display: flex; gap: 16px; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; }
.form-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.form-card select { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 7px 10px; font-size: 13px; min-width: 220px; }

/* ── Hamburger menu ── */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: none; padding: 4px;
}
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }
.nav-mobile-menu {
  position: fixed; inset: 52px 0 0 0; background: var(--bg2);
  z-index: var(--z-omlijsting-open); flex-direction: column; padding: 16px 20px; gap: 4px;
  border-top: 1px solid var(--border);
  display: none;
}
.nav-mobile-menu.open { display: flex !important; }
.nav-mobile-menu a, .nav-mobile-menu button {
  color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  background: none; border-left: none; border-right: none; border-top: none;
  text-align: left; cursor: pointer; width: 100%;
}
.nav-mobile-menu a:last-child, .nav-mobile-menu button:last-child { border-bottom: none; }

/* ── Scrollable tables on mobile ── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Dashboard: KPI strip + section titles (base; responsive overrides below) ── */
.kpi-strip  { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.kpi-card   { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:16px 18px; }
.kpi-value  { font-size:28px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi-label  { font-size:12.5px; color:var(--muted); margin-top:4px; }
.chart-title { font-size:15px; font-weight:600; color:var(--text); }
.chart-sub   { font-size:12.5px; font-weight:400; color:var(--muted); margin-left:8px; }

/* ── Responsive breakpoints ── */
@media (max-width: 768px) {
  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .container { padding: 16px 14px; }
  h1 { font-size: 18px; }
  .page-header { flex-direction: column; gap: 12px; }
  .page-header > div:last-child { width: 100%; }

  /* Dashboard KPI */
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: 20px; }
  .kpi-icon  { width: 36px; height: 36px; font-size: 15px; }

  /* Dashboard charts */
  .dash-grid-2     { grid-template-columns: 1fr; }
  .dash-grid-inner { grid-template-columns: 1fr; }

  /* Settings grid */
  .settings-grid { grid-template-columns: 1fr; }
  .s-add-row { flex-direction: column; }

  /* Timeline */
  .tl-loc-col, .tl-data-col,
  .tl-lte-col { display: none; }
  .tl-name-col { width: 160px; }

  /* Tables */
  .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; }
  .table td, .table th { padding: 8px 10px; font-size: 12px; }

  /* Uptime grid */
  .uptime-grid { grid-template-columns: 1fr 1fr; }

  /* Login */
  .login-card { margin: 16px; padding: 28px 20px; }
}

@media (max-width: 480px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .uptime-grid { grid-template-columns: 1fr; }
  .tl-name-col { width: 130px; }
}

/* ── Shared settings/links card + form primitives (used by settings.html and links.html) ── */
.s-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 24px; }
.s-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.s-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.s-card-sub   { font-size: 12px; color: var(--muted); }
.s-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.s-field  { display: flex; flex-direction: column; gap: 5px; }
.s-label  { font-size: 12px; font-weight: 600; color: var(--muted); }
.s-input  { background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 9px 13px; font-size: 13px; width: 100%; box-sizing: border-box; transition: border-color .15s; }
.s-input:focus { outline: none; border-color: var(--accent); }
.lnk-badge { display: inline-block; font-size: 10px; font-weight: 600; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin-right: 4px;
  color: var(--muted); vertical-align: middle; }

/* ── App shell (top bar · theme toggle · sidebar · flyout selector · dashboard modal · footer) ──
   Lives here rather than inline in base.html so all site-wide CSS is in one place. */
/* ── Lagen ──────────────────────────────────────────────────────────────────
   De app-omlijsting lag onder de pagina-inhoud. Op de plattegrond viel dat op:
   Leaflet zet zijn tegels op 400 en de pins staan op 800, terwijl de zijbalk op
   50 stond, de topbalk op 70 en de sitekiezer op 100. Die kiezer is breder dan
   de zijbalk en steekt dus de kaart in — en verdween daar prompt achter. De
   zoekresultaten hadden hetzelfde: die staan zelf op 300, maar zitten opgesloten
   in de topbalk, en een kind komt nooit boven de laag van zijn ouder uit.

   Vandaar banden in plaats van losse getallen. Wie iets nieuws stapelt kiest een
   band en niet een cijfer dat toevallig hoog genoeg leek:

     < 1000   pagina-inhoud — kaartlagen, pins, legenda's
     1000     omlijsting — topbalk en zijbalk
     1100     omlijsting die openklapt — sitekiezer, zoekresultaten
     2000+    vensters die álles mogen bedekken, inclusief de omlijsting
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --z-omlijsting:       1000;
  --z-omlijsting-open:  1100;
  --z-venster:          2000;
}

body { margin:0; }
.topbar { height:46px; display:flex; align-items:center; padding:0 18px; background:var(--bg2);
          border-bottom:1px solid var(--border); position:sticky; top:0; z-index:var(--z-omlijsting); }
.topbar-brand { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; letter-spacing:.3px; color:var(--text); text-decoration:none; }
.topbar-brand:hover { color:var(--text); }
.brand-mark { width:19px; height:19px; color:var(--accent); flex-shrink:0; }
.theme-toggle { position:relative; width:55px; height:30px; border:none; border-radius:16px;
                cursor:pointer; padding:0; flex-shrink:0; transition:background .25s; }
.theme-toggle[data-mode="light"] { background:linear-gradient(145deg,#e4e8ee,#f6f8fb);
                box-shadow: inset 2px 2px 5px #c5cad3, inset -2px -2px 5px #ffffff; }
.theme-toggle[data-mode="dark"]  { background:linear-gradient(145deg,#2b3140,#3b4252);
                box-shadow: inset 2px 2px 5px #1b1f29, inset -2px -2px 4px #474f60; }
.tt-knob { position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
           display:flex; align-items:center; justify-content:center; transition:left .25s, background .25s; }
.theme-toggle[data-mode="dark"] .tt-knob { left:28px; }
.theme-toggle[data-mode="light"] .tt-knob { background:linear-gradient(145deg,#ffffff,#e9edf2);
           box-shadow:1px 1px 3px #c5cad3, -1px -1px 2px #ffffff; }
.theme-toggle[data-mode="dark"]  .tt-knob { background:linear-gradient(145deg,#535b6c,#3a414f);
           box-shadow:1px 1px 3px #1b1f29; }
.tt-knob svg { width:14px; height:14px; }
.theme-toggle[data-mode="light"] .tt-sun  { display:block; color:#8a93a1; }
.theme-toggle[data-mode="light"] .tt-moon { display:none; }
.theme-toggle[data-mode="dark"]  .tt-moon { display:block; color:#dbe2ec; }
.theme-toggle[data-mode="dark"]  .tt-sun  { display:none; }
.topbar-dash { margin-left:10px; display:flex; align-items:center; gap:7px; background:var(--bg3); border:1px solid var(--border);
               color:var(--text); font-size:13px; font-weight:500; padding:6px 12px; border-radius: 6px; cursor:pointer; text-decoration:none; }
.topbar-dash:hover { border-color:var(--accent); }
.topbar-dash svg { width:15px; height:15px; }
/* Op een telefoon paste de topbalk niet: de knop stak er 16px uit en liet elke
   pagina zijwaarts schuiven. Alleen het woord verdwijnt — het icoon blijft, dus
   de knop blijft even goed te raken en herkenbaar. */
@media (max-width: 768px) {
  .topbar-dash { padding:6px 9px; gap:0; }
  .topbar-dash span { display:none; }
}

/* ── Global search (topbar) ── */
.topbar-search { margin-left:auto; margin-right:12px; position:relative; display:flex; align-items:center; gap:7px;
  width:270px; max-width:34vw; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:6px 10px; }
.topbar-search:focus-within { border-color:var(--accent); }
/* Geschiedenis: een klokje naast het zoekveld, met de laatste vijf pagina's. */
.tb-hist { position:relative; margin-right:10px; }
.tb-hist-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--muted);
  cursor:pointer; transition:color .15s, border-color .15s; }
.tb-hist-btn:hover { color:var(--text); border-color:var(--accent); }
.tb-hist-btn svg { width:16px; height:16px; }
.tb-hist-list { display:none; position:absolute; top:calc(100% + 6px); right:0; min-width:250px;
  max-width:330px; background:var(--bg2); border:1px solid var(--border); border-radius:9px;
  box-shadow:0 8px 26px rgba(0,0,0,.25); padding:5px; z-index:60; }
.tb-hist-list.open { display:block; }
.tb-hist-item { display:flex; align-items:baseline; gap:9px; width:100%; text-align:left;
  background:none; border:0; border-radius:6px; padding:7px 9px; cursor:pointer;
  color:var(--text); font:inherit; font-size:12.5px; }
.tb-hist-item:hover { background:var(--bg3); }
.tb-hist-titel { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:600; }
.tb-hist-site { flex:none; max-width:120px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:11px; color:var(--muted); }
.tb-hist-empty { padding:10px 9px; font-size:12.5px; color:var(--muted); }
.topbar-search .ts-ico { width:15px; height:15px; color:var(--muted); flex:none; }
.topbar-search input { flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font-size:13px; }
.topbar-search input::placeholder { color:var(--muted); }
.ts-results { position:absolute; top:calc(100% + 6px); right:0; left:0; background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 16px 42px -12px rgba(0,0,0,.55); max-height:66vh; overflow:auto; z-index:300; display:none; padding:6px; }
.ts-results.open { display:block; }
.ts-group-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:9px 10px 4px; }
.ts-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; cursor:pointer; text-decoration:none; color:var(--text); }
.ts-item:hover, .ts-item.active { background:var(--bg3); }
.ts-item-ic { width:28px; height:28px; border-radius:7px; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--muted); flex:none; }
.ts-item:hover .ts-item-ic, .ts-item.active .ts-item-ic { background:var(--bg2); }
.ts-item-ic svg { width:15px; height:15px; }
.ts-item-main { flex:1; min-width:0; }
.ts-item-label { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-item-sub { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-empty { padding:16px 12px; text-align:center; color:var(--muted); font-size:13px; }
@media (max-width:768px) { .topbar-search { width:160px; margin-right:8px; } }
/* Keep the top bar dark on the light theme too — a consistent brand header. */
/* Light theme keeps everything light (MikroNetCon-stijl): the topbar uses the
   white panel token (var(--bg2)) on the soft grey page, separated by the border
   — no dark-topbar override. Brand/dash inherit the light tokens. */
.app { display:flex; min-height:calc(100vh - 46px); }
.sb { width:222px; flex-shrink:0; background:var(--bg2); border-right:1px solid var(--border);
      display:flex; flex-direction:column; position:sticky; top:46px; height:calc(100vh - 71px); z-index:var(--z-omlijsting); }
.app-main { flex:1; min-width:0; }
/* Site switcher card (opens the flyout) */
.sb-site { display:flex; align-items:center; gap:10px; margin:10px; padding:9px 10px; border-radius: 7px;
           background:var(--bg3); border:1px solid var(--border); cursor:pointer; transition:border-color .15s; }
.sb-site:hover { border-color:var(--accent); }
.sb-ico { width:32px; height:32px; border-radius: 7px; background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent);
          display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-ico svg { width:17px; height:17px; }
.sb-site-name { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-site-meta { font-size:11px; color:var(--muted); margin-top:1px; }
.sb-grp { padding:14px 18px 6px; font-size:10px; font-weight:600; color:var(--muted); letter-spacing:.09em; text-transform:uppercase; opacity:.65; }
.sb-nav { padding:0 10px; display:flex; flex-direction:column; gap:1px; }
.sb-link { display:flex; align-items:center; gap:11px; padding:8px 11px; border-radius: 6px;
           font-size:13.5px; color:var(--muted); text-decoration:none; transition:color .12s, background .12s; }
.sb-link:hover { background:var(--bg3); color:var(--text); }
.sb-link.active { background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent-text); font-weight:600; }
.sb-link.active svg { stroke:var(--accent); opacity:1; }
.sb-link svg { width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; opacity:.8; }
.sb-spacer { flex:1; }
.sb-foot { display:block; padding:9px 14px 13px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); text-decoration:none; }
.sb-foot:hover { color:var(--text); }
/* Flyout site selector */
.fly-back { position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:var(--z-omlijsting-open); display:none; }
.fly { position:fixed; top:56px; left:10px; width:306px; background:var(--bg2); border:1px solid var(--border);
       border-radius: 8px; z-index:calc(var(--z-omlijsting-open) + 10); padding:8px; display:none; box-shadow:0 18px 50px rgba(0,0,0,.55); }
.fly-act { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:12.5px; }
.fly-act a { color:var(--accent); cursor:pointer; text-decoration:none; }
.fly-search { display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:7px; padding:5px 9px; margin-bottom:8px; }
.fly-search input { border:none; background:transparent; color:var(--text); font-size:13px; flex:1; outline:none; }
.fly-cols { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); padding:0 10px 4px; text-transform:uppercase; letter-spacing:.04em; }
/* Laat de lijst meegroeien met het scherm in plaats van hem op een vaste hoogte
   af te kappen: bij 12 organisaties paste dat niet in 340px en kreeg je een
   scrollbalk terwijl er ruimte zat. Scrollen gebeurt nu alleen nog als de lijst
   echt niet op het scherm past; de balk is dan smal en pas zichtbaar bij hover. */
.fly-list { max-height:calc(100vh - 190px); overflow-y:auto; scrollbar-width:thin;
            scrollbar-color:transparent transparent; }
.fly-list:hover { scrollbar-color:var(--border) transparent; }
.fly-list::-webkit-scrollbar { width:6px; }
.fly-list::-webkit-scrollbar-thumb { background:transparent; border-radius:3px; }
.fly-list:hover::-webkit-scrollbar-thumb { background:var(--border); }
.fly-row { display:flex; align-items:center; justify-content:space-between; padding:9px 11px; border-radius: 7px; cursor:pointer; font-size:13px; }
.fly-row:hover { background:var(--bg3); }
.fly-row.active { background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-text); }
.fly-row.active .fly-cnt { color:var(--accent-text); }
.fly-cnt { color:var(--muted); }
.fly-crit { background:rgba(239,68,68,.16); color:var(--red); font-size:11px; font-weight:600; padding:1px 8px; border-radius:20px; }
/* Online/offline per organisatie. Twee getallen naast elkaar in plaats van tekst:
   in een kolom van ~80px past "12 online, 3 offline" niet, en kleur zegt hier
   hetzelfde in één oogopslag. Een offline-telling van 0 wordt weggelaten — dan is
   het stil, en dat hoort er ook stil uit te zien. */
/* flex:1 met min-width:0 — zonder dat laatste weigert een flex-item te krimpen
   en duwt een lange sitenaam het label en de tellingen de regel uit. */
.fly-nm { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
          white-space:nowrap; padding-right:8px; }
/* Loopt er nu een showdag op deze site? Hetzelfde groen als de melding in de
   balk, maar hier als woord in een kadertje: een bolletje moet je kennen, LIVE
   niet. Het staat vlak vóór de tellingen en die hebben een vaste breedte, dus
   alle labels komen onder elkaar op dezelfde plek uit. Niet knipperend: in een
   lijst van dertien regels is drie keer pulserend groen onrustig — de melding in
   de balk gaat over de site die je open hebt en mag wél opvallen. */
.fly-live { flex:none; margin-right:8px; padding:1px 6px; border-radius:5px;
            font-size:9.5px; font-weight:800; letter-spacing:.08em; line-height:1.5;
            color:var(--green); border:1px solid color-mix(in srgb, var(--green) 45%, transparent);
            background:color-mix(in srgb, var(--green) 14%, transparent); }
/* Zelfde groen als het online-getal ernaast: een vast #16a34a hield in het
   donkere thema te weinig over naast die pillen. */
.fly-row.active .fly-live { background:color-mix(in srgb, var(--green) 22%, transparent); }
/* Twee vaste kolommen in plaats van naast elkaar zwevende badges: zo staat het
   online-getal op elke regel op dezelfde plek, ook wanneer er geen offline-getal
   is. Met flex schoof dat getal dan naar rechts en liep de kolom niet meer door. */
.fly-counts { display:grid; grid-template-columns:34px 34px; gap:5px; flex-shrink:0;
              justify-items:end; align-items:center; font-variant-numeric:tabular-nums; }
.fly-num { font-size:11px; font-weight:600; padding:1px 0; border-radius:20px;
           width:100%; text-align:center; }
.fly-num.on  { background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); }
.fly-num.off { background:rgba(239,68,68,.16); color:var(--red); }
/* Lege site en "tellingen laden nog": zelfde vorm en plek als de gekleurde
   pillen, alleen stil. Zonder dit stond het getal van een lege site net naast
   de kolom van de rest. */
.fly-num.leeg  { background:transparent; color:var(--muted); opacity:.55; }
.fly-num.wacht { background:var(--bg3); color:var(--muted); }
.fly-row.active .fly-num.on { background:color-mix(in srgb, var(--green) 24%, transparent); }
@media (max-width:760px){ .sb { width:60px; } .sb-site-name,.sb-site-meta,.sb-link span,.sb-grp,.sb-foot { display:none; } }
.app-footer-fade { position:fixed; bottom:25px; left:222px; right:0; height:30px;
                   background:linear-gradient(to bottom,transparent,var(--bg)); pointer-events:none; z-index:55; }
@media (max-width:760px){ .app-footer-fade { left:60px; } }
.app-footer { position:fixed; bottom:0; left:0; right:0; display:flex; align-items:center;
              justify-content:space-between; padding:0 14px; height:25px; font-size:10px; color:var(--muted);
              background:var(--bg2); border-top:1px solid var(--border); z-index:60; }
.app-footer-ver { color:var(--muted); text-decoration:none; }
.app-footer-ver:hover { color:var(--text); }

/* Respect the user's OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Onderdelen van een uitklappaneel die geen label/waarde-rij zijn ────────
   Wat hier stond was een compleet tweede paneeldialect (.uxp-*): eigen kop,
   eigen kaartjesstrook, eigen kolommen-in-kaarten, eigen tabel. Het UISP- en
   UniFi-paneel gebruikten dat, de andere vier het routerdialect. Die twee
   spreken nu ook het routerdialect, dus alleen wat écht eigen was blijft over:
   de tekening bovenaan en twee kleuren. ── */

/* De prent-laag van paneel(): een tekening over de volle breedte, boven de
   cijfers. Nu alleen de UISP-straalverbinding, maar de laag staat los van wie
   hem vult. */
.tl-prent { border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, #161b24 0%, #0f1218 70%);
  padding: 6px; margin-bottom: 12px; }
/* One typeface across the whole hero graphic — the app sans — so labels and the
   dBm/MHz/km readouts match. tabular-nums keeps the figures evenly spaced.
   The SVG renders at its natural pixel size (width/height attributes) and only
   shrinks below its own width, so the text stays a fixed size on desktop instead
   of scaling up with the panel. */
.tl-prent svg { display: block; max-width: 100%; height: auto; margin: 0 auto;
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums; }

/* Down/up in één cel: kleur scheidt ze, zodat er geen tweede label bij hoeft. */
.tl-dn { color: #7dd3fc; } .tl-up { color: #22c55e; }

/* Kleine pil in een tabelcel, waar een kleur op de tekst te weinig zegt. */
.tl-tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px; }
.tl-tag.g { background: rgba(34,197,94,.14);  color: #6ee7a5; }
.tl-tag.y { background: rgba(245,158,11,.14); color: #fcd34d; }
.tl-tag.r { background: rgba(239,68,68,.14);  color: #fca5a5; }

/* Gecentreerde tabelcellen. Deze twee klassen werden op vier pagina's gebruikt
   — negen keer in totaal — maar stonden nergens gedefinieerd, dus ze deden
   niets. Wie ze schreef bedoelde dit.

   Met het element ervoor, want `.table th` hierboven zet text-align:left en is
   met twee onderdelen specifieker dan een losse klasse. Zonder `th`/`td` ervoor
   verliest deze regel en centreert er alsnog niets. */
.table th.th-center, .table td.td-center { text-align:center; }

/* ── Aan/uit-schuifje ───────────────────────────────────────────────────────
   Stond woord voor woord overgeschreven in alerting.html en logs.html. Eén keer
   hier, zodat een schuifje overal hetzelfde is en een nieuwe pagina er niet
   opnieuw zes regels voor hoeft over te schrijven. Groen is aan, overal.

   settings.html heeft een eigen, grotere variant (`.conn-sw`, 40x22) die alles
   zelf definieert en de klasse `sw` niet gebruikt; die staat hier dus los van. */
.sw { position:relative; display:inline-block; width:34px; height:19px; flex-shrink:0; cursor:pointer; }
.sw input { position:absolute; opacity:0; width:0; height:0; }
.sw-track { position:absolute; inset:0; background:var(--bg3); border-radius:20px; transition:background .15s; }
.sw-track::before { content:""; position:absolute; left:2px; top:2px; width:15px; height:15px;
                    border-radius:50%; background:var(--muted); transition:transform .15s, background .15s; }
.sw input:checked + .sw-track { background:color-mix(in srgb, var(--green) 25%, transparent); }
.sw input:checked + .sw-track::before { transform:translateX(15px); background:var(--green); }

/* ── Modules tab: module cards (.mod-*) ────────────────────────────────────── */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 8px; }
.mod-card {
  position: relative; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 7px; padding: 20px 20px 18px; display: flex; flex-direction: column;
  min-height: 208px; overflow: hidden;
  transition: transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, box-shadow .18s;
}
.mod-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: var(--mod-accent, transparent); }
.mod-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 26px rgba(0,0,0,.30); }
.mod-card.is-active  { --mod-accent: #22c55e; }
.mod-card.is-trial   { --mod-accent: #f59e0b; }
.mod-card.is-expired { --mod-accent: #ef4444; }
.mod-card.is-idle    { --mod-accent: transparent; }

.mod-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mod-icon { width: 44px; height: 44px; border-radius: 7px; display: flex; align-items: center;
  justify-content: center; font-size: 22px; background: var(--bg3); border: 1px solid var(--border); flex-shrink: 0; }
.mod-card.is-active .mod-icon { background: rgba(34,197,94,.10);  border-color: rgba(34,197,94,.25); }
.mod-card.is-trial  .mod-icon { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); }
.mod-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
  flex: 1; min-width: 0; line-height: 1.25; }

.mod-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  padding: 3px 10px 3px 8px; border-radius: 20px; white-space: nowrap; border: 1px solid transparent; align-self: flex-start; }
.mod-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mod-card.is-active  .mod-status { color: #6ee7a5; background: rgba(34,197,94,.10);  border-color: rgba(34,197,94,.22); }
.mod-card.is-active  .mod-dot { background: #22c55e; animation: modPulse 2.4s infinite; }
.mod-card.is-trial   .mod-status { color: #fcd34d; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.22); }
.mod-card.is-trial   .mod-dot { background: #f59e0b; }
.mod-card.is-expired .mod-status { color: #fca5a5; background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.22); }
.mod-card.is-expired .mod-dot { background: #ef4444; }
.mod-card.is-idle    .mod-status { color: var(--muted); background: var(--bg3); border-color: var(--border); }
.mod-card.is-idle    .mod-dot { background: #6b7280; }
@keyframes modPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.mod-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mod-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 16px; display: flex;
  align-items: center; gap: 6px; min-height: 15px; }
.mod-meta.warn { color: #f59e0b; }
.mod-meta.crit { color: #ef4444; }
.mod-meta svg { flex-shrink: 0; opacity: .85; }

.mod-actions { display: flex; gap: 8px; margin-top: auto; }
.mod-actions .btn { flex: 1 1 0; text-align: center; padding: 7px 12px; font-size: 12.5px; }
/* Always rendered (empty when there's no destructive action) and a fixed height,
   so the action row above sits at the same offset from the card bottom on every
   card — the buttons line up across the whole grid. */
.mod-foot { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; height: 22px; }
.mod-danger { background: none; border: none; color: var(--muted); font-size: 11.5px; font-weight: 500;
  cursor: pointer; padding: 3px 4px; transition: color .15s; }
.mod-danger:hover { color: #ef4444; }
.mod-cfg-btn { color: var(--text) !important; }  /* neutral ghost look for ⚙ */

@media (prefers-reduced-motion: reduce) {
  .mod-card { transition: none; }
  .mod-card:hover { transform: none; }
  .mod-card.is-active .mod-dot { animation: none; }
}

/* Signaal dat een UniFi-apparaat in de controller naar een andere site is
   verhuisd terwijl het hier nog onder de oude hangt. Amber, niet rood: er is niets
   stuk, de indeling loopt alleen achter. Klikbaar wanneer de bijbehorende
   organisatie hier bestaat. */
.ap-site-moved { display:inline-block; margin-left:7px; font-size:11px; font-weight:600;
                 padding:1px 7px; border-radius:20px; vertical-align:1px;
                 background:color-mix(in srgb, var(--yellow) 15%, transparent);
                 color:var(--yellow); border:1px solid color-mix(in srgb, var(--yellow) 35%, transparent); }
.ap-site-moved.can-move { cursor:pointer; }
.ap-site-moved.can-move:hover { background:color-mix(in srgb, var(--yellow) 26%, transparent); }

/* ── LIVE in de balk ─────────────────────────────────────────────────────────
   Alleen zichtbaar als er op de geopende site een showdag loopt. Een balk die
   altijd iets meldt wordt niet meer gelezen; dit hoort juist op te vallen. */
.tb-live { display:inline-flex; align-items:center; gap:7px; margin-left:6px;
           padding:5px 11px 5px 9px; border-radius:20px; font-size:12px; font-weight:800;
           letter-spacing:.09em; color:#16a34a; background:#22c55e1f;
           border:1px solid #22c55e59; white-space:nowrap; }
.tb-live i { width:8px; height:8px; border-radius:50%; background:#22c55e; flex:none;
             animation:tb-live-puls 2s ease-in-out infinite; }
.tb-live em { font-style:normal; font-weight:600; letter-spacing:0; color:var(--muted);
              font-size:11.5px; }
@keyframes tb-live-puls {
  0%,100% { box-shadow:0 0 0 0 #22c55e66; }
  50%     { box-shadow:0 0 0 5px #22c55e00; }
}
/* Wie beweging uitzet, hoort geen knipperend bolletje te krijgen. */
@media (prefers-reduced-motion: reduce) { .tb-live i { animation:none; } }
@media (max-width:820px) { .tb-live em { display:none; } }

/* Kopjes in de sitekiezer: evenementen boven, vaste locaties eronder. */
.fly-grp { margin-top:10px; padding:9px 12px 4px; font-size:10.5px; font-weight:700;
           letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
           border-top:1px solid var(--border); }
.fly-grp:first-child { margin-top:0; padding-top:4px; border-top:0; }
/* De bijzondere site bovenaan staat los van de groepen; een streep eronder laat
   zien dat hij er niet bij hoort in plaats van dat hij de eerste van de lijst is. */
.fly-list > .fly-row:first-child { border-bottom:1px solid var(--border); }

/* ── Bulk-selectie ───────────────────────────────────────────────────────────
   Stond in templates/apparaten.html toen alleen die pagina hem had. De
   Storingen-pagina gebruikt hem nu ook; een tweede kopie is er één te veel. */
.bulk-bar { display:none; align-items:center; gap:12px; flex-wrap:wrap;
            background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--accent);
            border-radius:6px; padding:9px 14px; margin-bottom:12px; }
.bulk-bar.visible, .bulk-bar.active { display:flex; }
.bulk-count { font-size:12px; font-weight:700; color:var(--accent-text);
              background:color-mix(in srgb, var(--accent) 14%, transparent);
              padding:4px 11px; border-radius:99px; white-space:nowrap; }
.bulk-sep { align-self:stretch; width:1px; background:var(--border); }
.bulk-lbl { font-size:12px; color:var(--muted); }
.bulk-bar .s-input { margin:0; }
.bulk-bar .bulk-del { margin-left:auto; color:#ef4444; border-color:#ef444440; }
.bulk-bar .bulk-del:hover { background:#ef44441a; }
.col-check { width:34px; text-align:center; }


/* ── Gebruikerslijst (Instellingen → Gebruikers én Gebruikers per site) ───────
   Eén opmaak voor beide schermen: een kopregel met kolommen, een regel per
   gebruiker die zijn bewerkscherm opent, en daarin de handelingen op één rij.
   Stond eerst alleen in settings.html; de site-pagina hoort er niet zijn eigen
   variant naast te zetten. */
.s-user-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
/* Eén raster voor de kopregel en voor elke gebruiker, zodat de kolommen over de
   hele lijst uitlijnen. De maten zijn ruim genoeg voor een e-mailadres en een
   sitenaam; de datums krijgen precies wat ze nodig hebben. */
.s-user-head, .s-user-row {
  display: grid;
  grid-template-columns: 34px minmax(120px, 1.1fr) minmax(150px, 1.5fr) minmax(110px, 1.3fr) 92px 118px 12px;
  gap: 12px; align-items: center; padding: 10px 12px;
}
.s-user-head { padding-top: 4px; padding-bottom: 6px; font-size: 10.5px; font-weight: 700;
              letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
              border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.s-user-row  { border-radius: 6px; transition: background .1s; }
.s-user-cell { min-width: 0; font-size: 12px; color: var(--text); line-height: 1.45; }
.gb-klein { font-size: 10.5px; line-height: 1.3; }
/* Een lang e-mailadres mag de kolom niet oprekken. */
.gb-knip { overflow: hidden; text-overflow: ellipsis; }
/* Meebewegen met de kaart en niet met het venster: de lijst staat naast het
   toevoegformulier, dus hij is smaller dan het scherm. Een vensterbrede
   mediaquery klapte de kolommen dicht terwijl er ruimte zat, en liet ze staan
   waar het krap was. Browsers zonder container-queries houden gewoon alle
   kolommen — dat is de veilige kant. */
.gb-list-card { container-type: inline-size; }
@container (max-width: 760px) {
  /* De vijfde kolom gaat er als eerste af. Die plek is bij afspraak de minst
     dringende van het scherm: "Aangemaakt" in Instellingen, "Andere sites" op
     de site-pagina. Zet daar dus niets neer wat je altijd wilt zien. */
  .s-user-head > :nth-child(5), .s-user-row > :nth-child(5) { display: none; }
  .s-user-head, .s-user-row {
    grid-template-columns: 34px minmax(110px, 1.1fr) minmax(140px, 1.4fr) minmax(100px, 1.2fr) 118px 12px; }
}
@container (max-width: 600px) {
  /* Alles onder elkaar, maar dan mét het kopje ervoor. Zonder die kopjes staan
     er vier grijze regels waarvan je moet raden wat ze zijn — precies de
     rommel waar de kolommen vanaf moesten. */
  .s-user-head { display: none; }
  .s-user-row { grid-template-columns: 34px 1fr 12px; row-gap: 2px; }
  .s-user-row > :nth-child(5) { display: block; }
  .s-user-row .s-user-cell:not(:nth-child(2)) { grid-column: 2; font-size: 11.5px; }
  .s-user-row .s-user-cell[data-col-head]::before {
    content: attr(data-col-head) ": "; color: var(--muted); opacity: .8; }
}
.s-user-row:hover { background: var(--bg3); }
.s-user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.s-user-name  { font-size: 13px; font-weight: 600; color: var(--text); display: flex;
                align-items: center; gap: 8px; flex-wrap: wrap; }
.s-user-actions { flex-shrink: 0; }
/* Twee kaders naast elkaar: de lijst krijgt de ruimte, het formulier een vaste
   kolom. Onder 1100px klapt het onder elkaar, met het formulier eerst — dan is
   het nog steeds het eerste wat je ziet als je iemand komt toevoegen. */
.gb-cols { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: start; }
.gb-new-card .s-card-header { margin-bottom: 16px; }
@media (max-width: 1100px) {
  .gb-cols { grid-template-columns: 1fr; }
  .gb-new-card { order: -1; }
}
/* Wat geen etiket verdient, maar wel gezien mag worden. */
.gb-jij { font-size: 11px; font-weight: 500; color: var(--muted); }
.gb-2fa { border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; margin-bottom: 14px; }
.gb-2fa-head { font-size: 12px; font-weight: 700; margin-bottom: 9px; display: flex; gap: 8px; align-items: baseline; }
.gb-2fa-head .gb-dim { font-weight: 500; }
.gb-2fa-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.gb-2fa-row .s-input { width: 190px; }
.gb-dim { color: var(--muted); opacity: .75; }
.s-btn-delete {
  background: none; border: 1px solid rgba(239,68,68,.3); color: #ef4444;
  border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer;
  transition: background .15s;
}
.s-btn-delete:hover { background: rgba(239,68,68,.12); }

/* ── User edit ── */
.s-user-wrap { margin-bottom: 2px; }
/* De regel is zelf de knop. Het pijltje draait mee zodat je ziet wat openstaat. */
.s-user-row { cursor: pointer; }
.s-user-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.s-user-chev { flex-shrink: 0; color: var(--muted); font-size: 17px; line-height: 1;
               transition: transform .15s; }
.s-user-wrap.open .s-user-chev { transform: rotate(90deg); }
/* Alle handelingen op één regel en in hetzelfde slanke jasje. Twee dikke
   oranje knoppen boven een apart regeltje met twee dunne maakte er twee blokken
   van, terwijl het één rij keuzes is. Opslaan houdt een accentrand — het is de
   knop waar je heen wilt — en verwijderen blijft rood en gaat naar rechts, weg
   van de knop waar je per ongeluk op mikt. */
.gb-acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.gb-btn { background: none; border: 1px solid var(--border); color: var(--text);
           border-radius: 6px; padding: 5px 13px; font-size: 12.5px; line-height: 1.5;
           cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.gb-btn:hover { border-color: var(--accent); }
.gb-btn-main { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.gb-btn-main:hover { background: rgba(249,115,22,.1); }
.gb-btn-danger { margin-left: auto; color: #ef4444; border-color: rgba(239,68,68,.3); }
.gb-btn-danger:hover { background: rgba(239,68,68,.12); border-color: #ef4444; }
.s-btn-edit {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.s-btn-edit:hover { color: var(--text); border-color: var(--accent); }
.s-edit-form {
  background: var(--bg3); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 8px 8px; padding: 16px;
  margin-bottom: 4px;
}
.s-edit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 600px) { .s-edit-grid { grid-template-columns: 1fr; } }

/* Meldingsbalkjes boven een formulier. Stonden in settings.html; het profiel
   gebruikt ze ook. */
.s-alert {
  border-radius: 7px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px;
  font-weight: 500;
}
.s-alert.ok  { background:rgba(34,197,94,.1);  border:1px solid rgba(34,197,94,.25);  color:#22c55e; }
.s-alert.err { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.25);  color:#ef4444; }