/* ==========================================================================
   Datakings Citadel — Court UI (design system v2026)
   ========================================================================== */

@font-face {
  font-family: "Poppins"; src: url("fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins"; src: url("fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins"; src: url("fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter"; src: url("fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter"; src: url("fonts/Inter-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
    /* Native widgets (select-popup, scrollbars, date-picker) volgen color-scheme,
       niet onze tokens — zonder deze property blijft de dropdown-popup wit in
       donker thema. Staat net als de tokens in alle drie de blokken. */
    color-scheme: light;
    --dk-geel: #F9BC29;
    --dk-oranje: #FF9800;
    --dk-creme: #FFF5ED;
    --dk-lichtgrijs: #EEF0F4;
    --dk-geel-50: #FFF8E6;
    --dk-geel-100: #FEEDBF;
    --dk-geel-200: #FCDF8C;
    --dk-geel-300: #FBD15E;
    --dk-geel-400: #F9BC29;
    --dk-geel-500: #E8A914;
    --dk-geel-600: #C68C09;
    --dk-geel-700: #8C6203;
    --dk-oranje-50: #FFF1DD;
    --dk-oranje-100: #FFDFB0;
    --dk-oranje-200: #FFC477;
    --dk-oranje-300: #FFAA3D;
    --dk-oranje-400: #FF9800;
    --dk-oranje-500: #E08200;
    --dk-oranje-600: #B86700;
    --dk-oranje-700: #804600;
    --dk-ink-900: #14181F;
    --dk-ink-800: #1F2530;
    --dk-ink-700: #353C49;
    --dk-ink-600: #525A68;
    --dk-ink-500: #747C8B;
    --dk-ink-400: #9AA1AE;
    --dk-ink-300: #C2C7D0;
    --dk-ink-200: #DFE2E8;
    --dk-ink-100: #EEF0F4;
    --dk-ink-50: #F6F7F9;
    --dk-white: #FFFFFF;
    --dk-success: #1F8A4C;
    --dk-success-bg: #E3F4EA;
    --dk-warning: #C68C09;
    --dk-warning-bg: #FFF1C2;
    --dk-danger: #C0312B;
    --dk-danger-bg: #FBE3E1;
    /* Donkerder goud voor links op licht oppervlak (contrast); in dark mode
       helderder (zie dark-blokken). Gebruikt in court-help. */
    --dk-accent-dark: #B8881E;
    --dk-info: #2C6BCF;
    --dk-info-bg: #E2ECFA;
    --fg-1: var(--dk-ink-900);
    --fg-2: var(--dk-ink-700);
    --fg-3: var(--dk-ink-600);
    --fg-4: var(--dk-ink-500);
    --surface-1: var(--dk-white);
    --surface-2: var(--dk-ink-50);
    /* Een trap onder het oppervlak, voor rijen die andere rijen dragen
       (de klantregel boven zijn omgevingen). Los van --surface-2, dat de
       hover-tint van knoppen en menu-items is. */
    --surface-sunken: var(--dk-ink-50);
    --bg-page: var(--dk-creme);
    --border-subtle: var(--dk-ink-100);
    --border-default: var(--dk-ink-200);
    --border-strong: var(--dk-ink-300);
    --accent: var(--dk-geel-400);
    --accent-hover: var(--dk-geel-500);
    /* Alias: her en der wordt var(--dk-accent, #f9bc29) gebruikt; zonder deze
       definitie leunde dat op de fallback. Nieuwe code gebruikt --accent. */
    --dk-accent: var(--accent);
    --font-display: "Poppins", "Inter",Helvetica,Arial,Lucida,sans-serif;
    --font-sans: 'Inter',Helvetica,Arial,Lucida,sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
    --type-h2: 700 22px/1.2 var(--font-display);
    --type-h3: 600 16px/1.3 var(--font-display);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(20,24,31,0.04);
    --shadow-sm: 0 1px 3px rgba(20,24,31,0.06), 0 1px 2px rgba(20,24,31,0.04);
    --shadow-md: 0 4px 12px rgba(20,24,31,0.08);
    --shadow-focus: 0 0 0 3px rgba(249,188,41,0.4);
    /* Paars voor template-event-pills — als var zodat het donkere thema 'm
       kan oplichten. */
    --dk-purple: #8A35B0;
    /* Gedeelde tooltip en het vlak achter de menulade (court-nav.js). De tooltip is in licht een
       inktvlak; in donker zou dat wegvallen tegen de pagina, daar wordt hij een opgelicht vlak. */
    --tip-bg: #14181F;
    --tip-fg: #EEF0F4;
    --scrim: rgba(20,24,31,0.44);
}

/* ==========================================================================
   Donker thema — "De Kanselarij bij nacht"
   Inkt en papier wisselen van rol: de ink-ramp keert om (900 = lichtste
   tekst), het werkvlak wordt diep inkt. Zegelgoud blijft ongewijzigd — goud
   op inkt is het sterkste merkmoment. Semantische tokens (fg/surface/border)
   verwijzen naar de ramp en volgen automatisch.
   Drie standen: expliciete keuze zet data-theme op <html> (App.razor-script,
   vóór first paint); "Systeem" = géén attribuut, dan beslist
   prefers-color-scheme. De set staat er daarom twee keer — CSS kent geen
   mixins; wijzig ALTIJD beide blokken.
   ========================================================================== */
:root[data-theme="dark"] {
    color-scheme: dark;
    /* Achtergrond en oppervlak moeten uit elkaar liggen: stonden ze te dicht
       bij elkaar (#0F1216 vs #171B21), dan viel een kaart weg tegen de pagina
       en moest de rand de scheiding in zijn eentje dragen. Nu doet het
       tintverschil dat werk en mogen de randen zachter — zie --border-*. */
    --dk-creme: #05070A;
    --dk-lichtgrijs: #232932;
    --dk-ink-900: #EEF0F4;
    --dk-ink-800: #E0E3E9;
    --dk-ink-700: #CDD2DA;
    --dk-ink-600: #B4BAC6;
    --dk-ink-500: #9AA3B2;
    --dk-ink-400: #8891A0;
    --dk-ink-300: #3E4650;
    --dk-ink-200: #2B323C;
    --dk-ink-100: #232932;
    --dk-ink-50: #232932;
    --dk-white: #1A1F26;
    --dk-oranje-500: #FFA733;
    --dk-oranje-700: #FFB75E;
    --dk-success: #3FB374;
    --dk-success-bg: #1C2E24;
    --dk-warning: #E8A914;
    --dk-warning-bg: #33290F;
    --dk-danger: #E06C63;
    --dk-danger-bg: #3A2321;
    --dk-accent-dark: #E8B54A;
    --dk-info: #6FA0E8;
    --dk-info-bg: #1D2A3E;
    --dk-purple: #C77FE0;
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    /* In dark gaat de trap omláág: de klantregel zakt richting de
       pagina-achtergrond terwijl zijn omgevingen op het oppervlak blijven
       liggen. In licht doet --surface-2 het omgekeerde. */
    --surface-sunken: #12161C;
    --tip-bg: #2B323C;
    --tip-fg: #EEF0F4;
    --scrim: rgba(0,0,0,0.6);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        /* Identiek aan het [data-theme="dark"]-blok hierboven — CSS kent geen
           manier om één set onder twee selectors te hangen. */
        --dk-creme: #05070A;
        --dk-lichtgrijs: #232932;
        --dk-ink-900: #EEF0F4;
        --dk-ink-800: #E0E3E9;
        --dk-ink-700: #CDD2DA;
        --dk-ink-600: #B4BAC6;
        --dk-ink-500: #9AA3B2;
        --dk-ink-400: #8891A0;
        --dk-ink-300: #3E4650;
        --dk-ink-200: #2B323C;
        --dk-ink-100: #232932;
        --dk-ink-50: #232932;
        --dk-white: #1A1F26;
        --dk-oranje-500: #FFA733;
        --dk-oranje-700: #FFB75E;
        --dk-success: #3FB374;
        --dk-success-bg: #1C2E24;
        --dk-warning: #E8A914;
        --dk-warning-bg: #33290F;
        --dk-danger: #E06C63;
        --dk-danger-bg: #3A2321;
        --dk-accent-dark: #E8B54A;
        --dk-info: #6FA0E8;
        --dk-info-bg: #1D2A3E;
        --dk-purple: #C77FE0;
        --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
        --surface-sunken: #12161C;
        --tip-bg: #2B323C;
        --tip-fg: #EEF0F4;
        --scrim: rgba(0,0,0,0.6);
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45;
  /* De pagina is de achtergrond, niet het oppervlak. Stond dit op
     --surface-1, dan hadden pagina en kaart dezelfde kleur en moest elke
     rand de scheiding maken. Nu draagt het tintverschil dat. */
  color: var(--fg-1); background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--dk-oranje-500); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
code { font-family: var(--font-mono); font-size: 0.92em; }
/* Het icoon-svg staat ín de <i data-lucide> (zie App.razor); de <i> zelf doet
   niet mee in de opmaak, zodat flex, gap en uitlijning het svg zien zoals eerst. */
i[data-lucide] { display: contents; }
::selection { background: var(--dk-geel-200); color: #14181F; } /* vaste inkt: geel blijft licht in beide thema's */

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg-1); margin: 0; letter-spacing: -0.01em; }
/* FocusOnNavigate (Routes.razor) zet na elke navigatie de focus op de <h1> zodat
   screenreaders de nieuwe pagina aankondigen. Blazor geeft de kop daarvoor tijdelijk
   tabindex="-1", en omdat een verse pagina-load als keyboard-interactie geldt tekent
   Chrome er zijn focus-ring om — een kader om de titel bij het laden. De focus zelf
   (en dus de aankondiging) blijft; alleen de ring op deze niet-interactieve kop gaat
   weg. Echte focusbare elementen raken we niet: dit vereist tabindex="-1". */
:is(h1, h2)[tabindex="-1"]:focus { outline: none; }

/* ===== App shell ============================================ */
.court-shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; transition: grid-template-columns .18s ease; }

/* z-index: het accountmenu en de wisselaar klappen in de rail naar rechts uit, over de pagina. */
.court-sidebar {
  display: flex; flex-direction: column;
  background: var(--surface-1); border-right: 1px solid var(--border-default);
  position: sticky; top: 0; height: 100vh; z-index: 20; min-width: 0;
}
.court-sidebar__brand {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 18px 16px; border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.court-brand-logo { height: 28px; width: auto; }
/* De D alleen in de rail (zie "Inklapbaar menu"), per thema zoals het logo. */
.court-brand-mono { display: none; width: 28px; height: 28px; }
/* Logo per thema: het donkere merk-logo verdwijnt op inkt; de witte variant
   neemt het over. Beide mechanismen gedekt (expliciete keuze + systeem). */
.court-brand-logo--dark { display: none; }
:root[data-theme="dark"] .court-brand-logo--light { display: none; }
:root[data-theme="dark"] .court-brand-logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .court-brand-logo--light { display: none; }
  :root:not([data-theme="light"]) .court-brand-logo--dark { display: block; }
}
.court-brand-product { line-height: 1.2; }
.court-brand-product__name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--fg-1); }
.court-brand-product__env { font-size: 11px; color: var(--fg-4); font-family: var(--font-mono); margin-top: 3px; }
/* Alleen in de rail (zie daar): de omgeving als stip onder de D, voor het team. */
.court-brand-env-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: -4px; }

.court-sidebar__nav { flex: 1; padding: 14px 10px; overflow-y: auto; display: flex; flex-direction: column; }
/* Sectie-koppen zijn labels, geen paden: lichter, kleiner en met duidelijke
   afstand boven de groep — items eronder zijn de klikbare menupaden. */
.court-nav-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dk-ink-400); padding: 16px 10px 4px; }
.court-nav-section:first-child { padding-top: 4px; }
/* De eerste tenantkop staat onder het wisselaar-eiland (prerender:false). Zodra dat hydrateert is
   hij geen :first-child meer en zou hij 12px zakken; daarom een eigen klasse, zoals in de mockup. */
.court-nav-section--first { padding-top: 4px; }
.court-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 0; background: transparent; border-radius: var(--radius-sm);
  color: var(--fg-2); text-align: left; font-size: 13px; font-weight: 500;
  text-decoration: none; position: relative; margin-bottom: 2px;
}
.court-nav-item:hover { background: var(--surface-2); color: var(--fg-1); text-decoration: none; }
.court-nav-item.active { background: var(--dk-ink-50); color: var(--fg-1); font-weight: 600; }
.court-nav-item.active::before {
  content: ""; position: absolute; left: -1px; top: 8px; width: 3px; height: 16px;
  background: var(--accent); border-radius: 2px;
}

.court-sidebar__foot { border-top: 1px solid var(--border-subtle); padding: 12px; display: flex; align-items: center; gap: 10px; position: relative; }
.court-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--dk-ink-700); color: var(--dk-white); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
/* De avatar is een knop (in de rail de accountknop); uitgeklapt doet de kebab dat werk. */
button.court-avatar { border: 0; padding: 0; font-family: var(--font-display); cursor: default; }
.court-user__name { font-size: 12.5px; font-weight: 600; color: var(--fg-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kebab-menu in the sidebar foot — Logout (+ future items) live in the popup. */
.court-user-menu { position: relative; margin-left: auto; }
.court-user-menu__btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--fg-3); cursor: pointer;
}
.court-user-menu__btn:hover { background: var(--surface-2); color: var(--fg-1); }
.court-user-menu__pop {
  position: absolute; bottom: calc(100% + 4px); right: 0; min-width: 160px;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 4px; z-index: 50;
}
.court-user-menu__pop[hidden] { display: none; }
.court-user-menu__item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: none; color: var(--fg-1);
  font-size: 13px; text-align: left; border-radius: var(--radius-sm);
  cursor: pointer;
}
.court-user-menu__item:hover { background: var(--surface-2); }

/* Themaschakelaar in het gebruikersmenu: segmented control op één pill-track
   (zoals tabs/filters: het vlak groepeert, geen border per knop). Actieve
   stand = gouden pill met vaste inkt (court-theme.js zet
   .court-theme-pick--on client-side). Micro-label erboven volgt de
   menu-conventie: labels zijn klein en licht, paden/knoppen niet. */
.court-theme { padding: 4px 6px 10px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.court-theme__label {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--dk-ink-400); padding: 2px 4px 6px;
}
.court-theme-picker {
  display: flex; padding: 3px;
  background: var(--surface-2); border-radius: var(--radius-pill);
}
.court-theme-picker button {
  flex: 1; border: 0; background: transparent;
  color: var(--fg-3); font-size: 11.5px; font-weight: 500;
  padding: 5px 10px; border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap; transition: 80ms ease;
}
.court-theme-picker button:hover { color: var(--fg-1); }
.court-theme-picker button.court-theme-pick--on {
  background: var(--accent); color: #14181F; font-weight: 600;
}

/* Tiny destructive action button — used in lists where a row-level icon
   action (revoke seal, delete row) needs to live in a column. */
.btn-icon-only {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--fg-4); cursor: pointer;
}
.btn-icon-only:hover { background: var(--surface-2); color: var(--dk-danger, #d04646); }

/* Het contentgebied is de pagina-achtergrond, niet het oppervlak: daarop
   liggen de tabellen en kaarten als lichtere vlakken. Sidebar en topbar
   houden --surface-1 en springen er zo juist uit. Stond dit op --surface-1,
   dan viel alles samen en moest elke rand de scheiding maken. */
.court-main { display: flex; flex-direction: column; min-width: 0; background: var(--bg-page); }
.court-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 28px 12px 16px; background: var(--surface-1); border-bottom: 1px solid var(--border-default);
  position: sticky; top: 0; z-index: 10; min-height: 56px;
}
.court-breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-3); min-width: 0; flex: 1; }
.court-topbar__right { display: flex; align-items: center; gap: 14px; flex: none; font-size: 12.5px; color: var(--fg-3); }
.court-host { display: flex; align-items: center; gap: 6px; }
.court-breadcrumbs span:last-child { color: var(--fg-1); font-weight: 600; }
.court-page { padding: 24px 28px 60px; max-width: 1500px; }

.court-empty-shell {
  min-height: 100vh; background: var(--bg-page);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}

/* ===== Page header ========================================== */
.court-page-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border-subtle);
}
.court-page-header h1 { font: var(--type-h2); margin: 0 0 4px; }
.court-page-header p { margin: 0; color: var(--fg-3); font-size: 13.5px; max-width: 720px; }
.court-page-header__actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.court-back-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
  margin-bottom: 12px; border: 0; background: transparent; color: var(--fg-2);
  font-size: 13px; border-radius: var(--radius-sm); text-decoration: none;
}
.court-back-link:hover { background: var(--surface-2); color: var(--fg-1); text-decoration: none; }

/* ===== Buttons ============================================== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; border: 1px solid transparent;
  transition: 80ms ease; text-decoration: none;
}
.btn a:hover { text-decoration: none; }
/* Een uitgeschakelde knop moet er ook zo uitzien: anders is het een knop die
   niets doet zonder dat je ziet waarom (NewConnectionDialog vóór het circuit). */
button.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--dk-ink-900); color: var(--dk-white); border-color: var(--dk-ink-900); }
.btn-primary:hover { background: var(--dk-ink-700); color: var(--dk-white); }
.btn-secondary { background: var(--surface-1); color: var(--fg-1); border-color: var(--border-default); }
.btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--fg-1); }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--fg-1); }
.btn-danger { background: var(--dk-danger); color: white; border-color: var(--dk-danger); }
.btn-danger:hover { filter: brightness(0.92); color: white; }
/* Outline-variant voor destructieve acties die naast een primaire actie staan:
   herkenbaar rood gewicht zonder de vlakke danger-vulling te claimen. */
.btn-danger-outline { background: transparent; color: var(--dk-danger); border-color: rgba(192,49,43,0.45); }
.btn-danger-outline:hover { background: var(--dk-danger-bg); border-color: var(--dk-danger); color: var(--dk-danger); }
/* Accent button — applies whether the class sits on an <a>/<button> directly,
   OR on a wrapper <div> with a nested <a> (legacy "Nieuwe tenant" pattern on
   /admin). Both render the same yellow pill with dark ink text. */
a.btn-accent, button.btn-accent, .btn-accent a {
    background: var(--accent);
    color: #14181F !important; /* vaste inkt: tekst op Zegelgoud blijft donker in beide thema's */
    border: solid 2px var(--accent);
    border-radius: var(--radius-pill);
    padding: 9px 18px;
    font-weight: 600;
    transition: 0.3s;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
a.btn-accent:hover, button.btn-accent:hover, .btn-with-crown a:hover {
    border-radius: var(--radius-pill);
    border: solid 2px var(--accent) !important;
    color: var(--dk-ink-400) !important;
    background-color: transparent;
}

/* Crown easter-egg from stijlboek — small kroon hovers above primary CTA.
   The wrapper-div pattern needs no padding (the nested <a> draws the pill);
   the direct-element pattern (a.btn-with-crown / button.btn-with-crown) does
   have its own padding, which is fine — the crown is positioned relative to
   whichever element carries the class. */
.btn-with-crown { position: relative; overflow: visible; }
/* Crown easter-egg — gespiegeld van datakings.nl's "Maak een afspraak"-knop:
   bovenaan-rechts, met de kroon grotendeels boven de knop hangend en de
   onderkant minimaal de knop binnen. Eerder probeerden we centreren maar
   het stijlboek bedoelt expliciet een vlag-in-de-corner-look. */
.btn-with-crown::before {
  content: "";
  position: absolute;
  top: -17px; right: 21px;
  width: 29px; height: 16px;
  background: url(/court/assets/kroon.svg) center no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* ===== Stats =============================================== */
.court-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.court-stat { background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; }
.court-stat .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-4); }
.court-stat .value { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1; margin-top: 4px; letter-spacing: -0.02em; color: var(--fg-1); }
.court-stat .delta { font-size: 11.5px; color: var(--fg-3); margin-top: 4px; font-family: var(--font-mono); }

/* ===== Toolbar ============================================ */
.court-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.court-toolbar .search { flex: 1; max-width: 360px; display: flex; align-items: center; gap: 8px; background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--fg-3); }
.court-toolbar .search input { border: 0; background: transparent; outline: none; flex: 1; font-size: 13px; color: var(--fg-1); }
.court-filter {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); color: var(--fg-2); font-size: 12.5px; text-decoration: none;
}
.court-filter:hover { border-color: var(--border-strong); text-decoration: none; }
.court-filter.is-on { background: var(--dk-ink-900); color: var(--dk-white); border-color: var(--dk-ink-900); }
.court-filter select { border: 0; background: transparent; outline: none; font-size: 12.5px; color: inherit; }

/* ===== Tables ============================================== */
.court-table-wrap { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
/* Een wrap genest in een .card hoort de border niet nogmaals te tekenen — de
   card is al de omkadering (Categorieën-tabel op /admin/platform gaf een
   dubbele rand). overflow:hidden blijft staan voor de border-radius-clip. */
.card .court-table-wrap { border: 0; border-radius: 0; }

/* Drag-to-reorder (Categorieën-tabel) — sleep-handle-gated via .sk-grip. */
.sk-grip { cursor: grab; color: var(--fg-3); display: inline-flex; align-items: center; }
.sk-grip:active { cursor: grabbing; }
tr.sk-dragging { opacity: .5; }
tr.sk-dragover { outline: 1px dashed var(--accent); }
.court-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.court-table thead th {
  text-align: left; padding: 10px 14px; background: var(--dk-ink-50);
  border-bottom: 1px solid var(--border-default);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-4);
}
.court-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.court-table tbody tr:last-child td { border-bottom: 0; }
.court-table tbody tr:hover { background: var(--dk-ink-50); }
/* Klikbare tabelrijen (rij = het pad): het naam-anker is de echte link
   (toetsenbord/middenklik); de rij-onclick is comfort. */
.court-rowlink { cursor: pointer; }
.court-rowlink .cap__chev { color: var(--dk-ink-300); }
.court-rowlink:hover .cap__chev { color: var(--fg-2); }
.court-rowlink__a { color: inherit !important; text-decoration: none; display: block; }
.court-rowlink__a:hover { text-decoration: none; }
.court-table .primary { font-weight: 600; color: var(--fg-1); }
.court-table .num { font-family: var(--font-mono); font-size: 12.5px; }
.court-table .tcall { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.court-table .succ { color: var(--dk-success); font-weight: 600; font-size: 12px; }
.court-table .err { color: var(--dk-danger); font-weight: 600; font-size: 12px; }
.court-table a { color: var(--dk-oranje-500); }

/* ===== Pills ============================================== */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 500;
  border: 1px solid var(--border-default); background: var(--surface-1); color: var(--fg-2);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill--ok { background: rgba(31,138,76,0.10); color: var(--dk-success); border-color: rgba(31,138,76,0.30); }
.pill--warn { background: rgba(198,140,9,0.10); color: var(--dk-warning); border-color: rgba(198,140,9,0.30); }
.pill--err { background: rgba(192,49,43,0.10); color: var(--dk-danger); border-color: rgba(192,49,43,0.30); }
.pill--info { background: rgba(44,107,207,0.10); color: var(--dk-info); border-color: rgba(44,107,207,0.30); }
.pill--off { color: var(--fg-3); }

.event-pill { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 6px; border-radius: 3px; font-weight: 500; }
.ep-q { background: rgba(44,107,207,0.10); color: var(--dk-info); }
.ep-x { background: rgba(216,103,55,0.10); color: var(--dk-oranje-700); }
.ep-c { background: var(--dk-ink-50); color: var(--fg-2); }

/* ===== Cards ============================================== */
.card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 14px; }
.card h3 { font: var(--type-h3); margin: 0 0 12px; }
.card-grid { display: grid; grid-template-columns: 1fr 380px; gap: 18px; }

dl.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
dl.kv dt { color: var(--fg-4); }
dl.kv dd { margin: 0; color: var(--fg-1); font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; }
/* Een zin in plaats van een waarde (klantmockup E4): gewone letter, en afbreken op woorden in plaats van midden
   in een woord. De modifier geeft het label de ruimte die het nodig heeft ("Inloggen (adres met code)"). */
dl.kv dd .sans { font-family: var(--font-sans); font-size: 12.5px; color: var(--fg-4); word-break: normal; }
dl.kv.kv--prose { grid-template-columns: minmax(150px, max-content) 1fr; }

.code, pre.code {
  /* Vaste-donkere code-paneel: #14181F blijft donker in BEIDE thema's (zoals
     .chronicle-detail__pre). var(--dk-ink-900) zou in dark mode omklappen naar
     licht → licht-op-licht, onleesbaar. */
  background: #14181f; color: #e3e6eb;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  padding: 14px 16px; border-radius: var(--radius-sm); margin: 0; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}

/* ===== Tabs ============================================== */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-default); margin-bottom: 22px; }
.tab { background: transparent; border: 0; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--fg-3); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.tab:hover { color: var(--fg-1); text-decoration: none; }
.tab.is-active { color: var(--fg-1); border-bottom-color: var(--accent); font-weight: 600; }

/* ===== Rustige afkadering: groepen binnen tab-panes ========= */
/* Kaders alleen om echte objecten (tabellen, install-keys, Danger zone).
   Binnen een pane scheiden micro-labels + deellijnen de groepen; capability-
   instances zijn lijstrijen. Goedgekeurd via de mockup-toggle (2026-08-11). */
.court-group { padding: 16px 2px 14px; }
.court-group + .court-group { border-top: 1px solid var(--border-subtle); }
.court-group__title {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-4); margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.court-group--collapsible > summary { list-style: none; cursor: pointer; }
.court-group--collapsible > summary::-webkit-details-marker { display: none; }
.court-group--collapsible > summary .court-group__title { margin: 0; }
.court-group--collapsible[open] > summary { margin-bottom: 10px; }
/* Dubbele klasse-selectors: deze regels staan vóór de basis-.cap/.cap-list
   verderop in dit bestand — bij gelijke specificiteit zou de basis winnen
   (cascade-volgorde) en blijven de kaders staan. */
.cap-list.cap-list--flat { gap: 0; }
.cap.cap--line { border: 0; border-radius: 0; margin-bottom: 0; padding: 10px 2px; background: transparent; border-bottom: 1px solid var(--border-subtle); }
.cap-list.cap-list--flat .cap--line:last-child { border-bottom: 0; }
/* Rij = het pad: de hele rij linkt naar de configuratie (chevron als
   affordance); knop-per-rij vervalt. Status in een vaste kolom zodat
   pillen over rijen heen verticaal uitlijnen. */
.cap--link { color: inherit; text-decoration: none; cursor: pointer; }
.cap--link:hover { background: var(--dk-ink-50); color: inherit; text-decoration: none; }
.cap__status { display: flex; align-items: center; width: 118px; flex-shrink: 0; }
.cap__chev { color: var(--dk-ink-300); }
.cap--link:hover .cap__chev { color: var(--fg-2); }
/* Machinewaarden in rijen (verbindingsnamen, OIDs) — Mono-voor-data-regel;
   .mono werd al gebruikt in markup maar was nooit gedefinieerd. */
.mono { font-family: var(--font-mono); font-size: 12.5px; }

/* ===== Capability list ===================================== */
.cap-list { display: flex; flex-direction: column; gap: 10px; }
.cap {
  display: grid; grid-template-columns: 44px 1fr auto auto; gap: 14px; align-items: center;
  padding: 14px 16px; background: var(--surface-1);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.cap--off { background: var(--surface-2); }
.cap--off .cap__title { color: var(--fg-3); }
.cap__icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--dk-ink-50); color: var(--dk-ink-700); display: flex; align-items: center; justify-content: center; }
.cap__title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; color: var(--fg-1); }
.cap__meta { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }

/* ===== Install keys panel =================================== */
.install-keys {
  background: var(--dk-success-bg); border: 1px solid rgba(31,138,76,0.25);
  border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 18px;
}
.install-keys--compact { background: var(--surface-2); border-color: var(--border-subtle); padding: 10px 14px; }
.install-keys__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.install-keys--compact .install-keys__head { margin-bottom: 0; }
.install-keys__title { font-weight: 600; color: var(--fg-1); font-size: 14px; }
.install-keys__sub { font-size: 12.5px; color: var(--fg-3); }
.install-keys__row {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(31,138,76,0.15);
}
.install-keys__row:last-of-type { border-bottom: 0; }
.install-keys__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-4); }
.install-keys__value {
  background: #14181f; color: #d1fae5;
  padding: 6px 10px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12.5px;
  word-break: break-all; line-height: 1.4;
}
.install-keys__value--seal { font-size: 11.5px; }
.install-keys__copy {
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 6px 8px; cursor: pointer;
  color: var(--fg-2); display: inline-flex; align-items: center; transition: 100ms;
}
.install-keys__copy:hover { color: var(--fg-1); border-color: var(--border-strong); background: var(--surface-2); }
.install-keys__copy--inline { padding: 2px 4px; vertical-align: middle; }
.install-keys__copy--ok { background: var(--dk-success); color: white; border-color: var(--dk-success); }
.install-keys__copy-all {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(31,138,76,0.20);
}
.install-keys__hint { font-size: 12px; color: var(--fg-3); flex: 1; min-width: 200px; }

/* ===== Forms ============================================== */
.field { display: flex; flex-direction: column; margin-bottom: 14px; }
.field label { font-size: 12px; font-weight: 600; color: var(--fg-2); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  padding: 8px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--fg-1); font-size: 13px; outline: none;
  font-family: inherit;
}
.field textarea { font-family: var(--font-mono); font-size: 12.5px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.field .help { font-size: 11.5px; color: var(--fg-4); margin-top: 4px; }
.field .check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); cursor: pointer; }

.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* ===== Alerts ============================================ */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--radius-md);
  font-size: 13px; margin-bottom: 18px;
}
.alert--err { background: rgba(192,49,43,0.06); border: 1px solid rgba(192,49,43,0.30); color: var(--dk-danger); }
.alert--warn { background: rgba(198,140,9,0.06); border: 1px solid rgba(198,140,9,0.30); color: var(--dk-warning); }
.alert--info { background: rgba(44,107,207,0.06); border: 1px solid rgba(44,107,207,0.30); color: var(--dk-info); }
.alert--ok { background: var(--dk-success-bg); border: 1px solid rgba(31,138,76,0.30); color: var(--dk-success); }
.alert__title { font-weight: 600; color: var(--fg-1); margin-bottom: 4px; }
/* Een melding met uitleg en stappen (Overzicht offline): de lopende tekst in fg-2, zodat lange
   zinnen leesbaar blijven; alleen de rand en het icoon dragen de kleur. */
.alert__body { flex: 1; min-width: 0; color: var(--fg-2); }
.alert__body p { margin: 0 0 8px; }
.alert__body ol { margin: 4px 0 10px; padding-left: 20px; }
.alert__body ol li { margin-bottom: 4px; }
.alert__label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-4); margin: 10px 0 2px;
}
/* Een link of knop die in lopende tekst staat (mailto, help openen). */
.court-linkbtn {
  background: none; border: 0; padding: 0; color: var(--dk-oranje-500); font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.court-linkbtn:hover { text-decoration: underline; text-underline-offset: 2px; }
.alert__seal {
  background: #14181f; color: #d1fae5;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12px;
  word-break: break-all; white-space: pre-wrap; margin: 8px 0; line-height: 1.4;
}

/* ===== Login ============================================== */
.court-login,
.court-error {
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 32px 32px 28px; width: 380px;
  box-shadow: var(--shadow-md);
}
.court-login__brand {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border-subtle);
}
.court-login__brand img { height: 24px; }
.court-login__brand-name { font-weight: 700; font-size: 16px; color: var(--fg-1); }
.court-login__brand-sub { font-size: 11px; color: var(--fg-4); font-family: var(--font-mono); }
.court-login form { display: flex; flex-direction: column; gap: 14px; }
/* "Aanmelden met Microsoft" volgens Microsofts merkrichtlijnen voor de aanmeldknop: vaste
   kleuren (licht #fff/#8c8c8c/#5e5e5e, donker #2f2f2f/#fff), Segoe UI 600 15px, 41px hoog,
   logo 21px — daarom hier geen Court-tokens. */
.court-login__microsoft {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 41px; padding: 0 12px; margin-top: 4px;
  background: #ffffff; border: 1px solid #8c8c8c; color: #5e5e5e;
  font-family: "Segoe UI", system-ui, sans-serif; font-weight: 600; font-size: 15px;
  text-decoration: none;
}
.court-login__microsoft:hover { background: #f3f3f3; color: #5e5e5e; text-decoration: none; }
.court-login__microsoft:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-theme="dark"] .court-login__microsoft { background: #2f2f2f; border-color: #2f2f2f; color: #ffffff; }
:root[data-theme="dark"] .court-login__microsoft:hover { background: #3b3b3b; color: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .court-login__microsoft { background: #2f2f2f; border-color: #2f2f2f; color: #ffffff; }
  :root:not([data-theme="light"]) .court-login__microsoft:hover { background: #3b3b3b; color: #ffffff; }
}
.court-login__hint { margin: 12px 0 0; font-size: 12px; color: var(--fg-3); text-align: center; }
.court-login button[type=submit] {
  margin-top: 6px; padding: 10px;
  background: var(--accent); color: #14181F; border: none; /* vaste inkt op goud */
  border-radius: var(--radius-pill); cursor: pointer; font-weight: 600;
  font-size: 14px; letter-spacing: -0.01em;
}
.court-login button[type=submit]:hover { background: var(--accent-hover); }

/* Foutpagina (CourtError.razor): dezelfde kaart als de login, met gewone knoppen. */
.court-error h1 { font-size: 18px; margin: 0 0 8px; color: var(--fg-1); }
.court-error p { margin: 0 0 10px; color: var(--fg-2); font-size: 13.5px; line-height: 1.5; }
.court-error p.muted { color: var(--fg-3); font-size: 13px; }
.court-error__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.court-error__actions form { margin: 0; }
.court-error__code {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-4);
}

.muted { color: var(--fg-3); }
.text-mono { font-family: var(--font-mono); font-size: 12.5px; }

/* Chronicle: clickable row + collapsible detail. Row alternates between
   clicked (detail shown) and idle. Detail row uses colspan=7 to stretch full
   width with a 2-column grid of metadata + params/result pre-blocks. */
.chronicle-row { cursor: pointer; }
.chronicle-pager {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 14px;
}
.chronicle-pager .btn { display: inline-flex; align-items: center; gap: 4px; }
.chronicle-detail > td { padding: 0 !important; background: var(--surface-2); }
.chronicle-detail__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    padding: 14px 18px; border-top: 2px solid var(--dk-accent, #f9bc29);
}
.chronicle-detail__label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--fg-4); margin-bottom: 3px;
}
.chronicle-detail__code {
    font-family: var(--font-mono); font-size: 11.5px;
    background: var(--surface-1); padding: 2px 6px; border-radius: 3px;
}
.chronicle-detail__pre {
    background: #14181f; color: #e1e6eb;
    padding: 10px 12px; border-radius: 6px;
    font-size: 11.5px; max-height: 320px; overflow: auto;
    white-space: pre-wrap; word-break: break-word; margin: 0;
}
.chronicle-detail__pre--err { color: #ff9d8a; background: rgba(192,49,43,.12); }

/* Extra event-pill tone for template calls (purple) */
.event-pill.ep-t { background: rgba(177,69,214,.12); color: var(--dk-purple); }

/* Tab strip — for tenant-detail and other long pages. JS-toggles
   data-tab-pane sections; sessionStorage remembers last active tab. */
.court-tabs {
    display: flex; gap: 2px;
    margin: 14px 0 18px;
    border-bottom: 1px solid var(--border-default, #dfe2e8);
    flex-wrap: wrap;
}
.court-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border: 0; background: transparent;
    color: var(--fg-3, #6c7383);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.court-tab:hover { color: var(--fg-1); }
.court-tab--active {
    color: var(--fg-1, #14181f);
    border-bottom-color: var(--dk-accent, #f9bc29);
    font-weight: 600;
}

/* Het aantal achter een tab-label. Stond al in de markup van Verbruik en
   Klanten maar nog niet hier, dus het getal kreeg de gewone labelstijl en viel
   niet te onderscheiden van de tabnaam zelf. */
.court-tab__n {
    margin-left: 5px;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--fg-3, #6b7480);
}

.court-tab--active .court-tab__n {
    color: var(--fg-2, #414a56);
}

/* ===== Historie-tab (F5c) — zelf-getekende inline SVG-sparklines + tabel.
   Geen chart-lib (CSP); court-fleet-history.js bouwt de SVG/tabel-markup. */
.fleet-hist__range { display: flex; gap: 6px; margin-left: auto; }
.fleet-hist__range-btn {
  font: inherit; font-size: 12px; padding: 4px 10px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--surface-1); color: var(--fg-2); cursor: pointer;
}
.fleet-hist__range-btn:hover { background: var(--surface-2); }
.fleet-hist__range-btn--active { background: var(--dk-ink-900); color: var(--dk-white); border-color: var(--dk-ink-900); }
.fleet-hist__empty { color: var(--fg-4); font-size: 12.5px; padding: 20px; text-align: center; }
.fleet-hist__error { color: var(--dk-danger); font-size: 12.5px; padding: 12px 0; }
.fleet-hist__capped { color: var(--dk-warning); font-size: 12px; margin: 0 0 10px; }
.fleet-hist__legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; font-size: 12px; color: var(--fg-3); }
.fleet-hist__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.fleet-hist__legend-item i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.fleet-hist__charts { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.fleet-hist__chart-title { font-size: 11px; font-weight: 600; color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.fleet-hist__svg { width: 100%; height: 72px; display: block; overflow: visible; }
.fleet-hist__grid { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.fleet-hist__line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fleet-hist__line--total { stroke-width: 2.25; }
.fleet-hist__axis-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--fg-4); margin-top: 3px; }
.fleet-hist__table-wrap { margin-top: 4px; }

/* Collapsible cards: <details class="card card--collapsible"> + chevron rotation.
   Uses native <details>/<summary> for free keyboard a11y; we just hide the default
   marker and rotate our own lucide chevron. */
.card.card--collapsible > summary,
details > summary { list-style: none; cursor: pointer; }
.card.card--collapsible > summary::-webkit-details-marker,
details > summary::-webkit-details-marker { display: none; }
.card-collapse__chevron { transition: transform 0.15s ease; flex-shrink: 0; }
details[open] > summary .card-collapse__chevron { transform: rotate(90deg); }

/* ===== Versie-strip (tenant-detail) ========================= */
/* Eén permanente regel boven de tab-strip: geïnstalleerde versie, update-pill
   en push-actie — vervangt de Versie-kaart die te veel scherm nam. */
.court-vstrip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; margin-bottom: 4px;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); font-size: 12.5px;
}

/* --- Live tool-call activity feed (E2) --- */
.court-card {
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 14px 16px; margin: 16px 0;
}
.activity-feed__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.activity-feed .dot--live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--dk-success);
  display: inline-block; animation: dk-pulse 1.8s infinite;
}
@keyframes dk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,150,80,.45); }
  70%  { box-shadow: 0 0 0 6px rgba(0,150,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,150,80,0); }
}
.activity-row--live { background: rgba(198,140,9,0.06); }
.activity-row--live td:first-child { box-shadow: inset 2px 0 0 var(--dk-warning); }

/* --- Live (klant-UI PR 13): Activiteit › Live en de strook op Overzicht ---
   De Live-stip staat stil; hij pulseert één keer als er een opdracht binnenkomt (hooguit eens per
   minuut, ToolCallActivityFeed zet .is-pulse op een nieuw element) en is grijs als er niets vanzelf
   bijwerkt (gepauzeerd of Live bijwerken uit). */
.dot--live { width: 8px; height: 8px; border-radius: 50%; background: var(--dk-success); display: inline-block; flex: none; }
.dot--live.is-pulse { animation: dk-pulse 1.8s ease-out 1; }
.dot--live.is-still { background: var(--fg-4); }
.court-live { flex-wrap: wrap; }
.court-live__count { font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 12px; color: var(--fg-3); }
.court-live .btn, .court-live__bar .btn { text-transform: none; letter-spacing: normal; }
.court-live__btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12.5px; }
.court-live__ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.court-live__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.court-live__bar .court-toolbar { margin-bottom: 0; }
.court-live__pause { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.court-table--live { table-layout: fixed; min-width: 820px; }
.court-table--live td { overflow: hidden; text-overflow: ellipsis; }
.court-table--live td.num { font-variant-numeric: tabular-nums; }
.court-table--live .sub { display: block; font-size: 11.5px; color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.court-now__list { list-style: none; margin: 0; padding: 0; min-height: 205px; }
.court-now__item { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 41px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.court-now__item:last-child { border-bottom: 0; }
.court-now__t { font-family: var(--font-mono); font-size: 12px; color: var(--fg-4); }
.court-now__w { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-1); }
.court-now__w .sub { color: var(--fg-4); font-size: 11.5px; margin-left: 8px; }
.court-now__empty { font-size: 12.5px; color: var(--fg-4); padding: 12px 0; }
.court-now__more { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 12px; }
@media (max-width: 480px) {
  .court-now__list { min-height: 260px; }
  .court-now__item { height: 52px; }
  .court-now__w { display: flex; flex-direction: column; justify-content: center; }
  .court-now__w > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .court-now__w .sub { margin-left: 0; }
}
.live-new { animation: court-row-in 320ms ease-out; }
@keyframes court-row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.court-status-dot.is-ping { animation: court-ping 900ms ease-out 1; }
@keyframes court-ping {
  from { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 2px rgba(31,138,76,.55); }
  to   { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 8px rgba(31,138,76,0); }
}
@media (prefers-reduced-motion: reduce) {
  .dot--live.is-pulse, .live-new, .court-status-dot.is-ping { animation: none; }
}
/* Alleen voor schermlezers (de live-samenvatting). */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Live rate-chart (hartslag-timeline van tool-call-volume) */
.rate-chart__head { display: flex; align-items: flex-end; justify-content: space-between; margin: 4px 2px 8px; }
.rate-chart__big { font-size: 26px; font-weight: 700; line-height: 1; color: var(--fg-1); }
.rate-chart__sub { font-size: 12px; color: var(--fg-2); }
.rate-chart__plot { display: flex; gap: 8px; align-items: stretch; }
.rate-chart__yaxis {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 30px; height: 90px; text-align: right;
  font-size: 10px; color: var(--fg-4); font-variant-numeric: tabular-nums;
}
.rate-chart__graph { flex: 1; min-width: 0; }
.rate-chart__svg { width: 100%; height: 90px; display: block; overflow: visible; }
.rate-line { fill: none; stroke: var(--dk-success); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rate-area { fill: var(--dk-success); opacity: 0.10; }
.rate-grid { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.rate-axis { stroke: var(--border-default); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rate-chart__axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--fg-4); margin-top: 3px; }

/* --- Fleet-view host-belasting (F5a) — Workers-tab belasting-balk + Live-details-popup.
   Kleur volgt hostCpu%/ram%: <70 groen (rustig), 70-89 amber (druk), >=90 rood (zwaar).
   In de CPU-balk is het donkere/volle segment de worker zelf (ProcessCpuPercent);
   het gedimde segment ("other") is de rest van de machine. Zie docs/mockups/fleet-view-v1.html. */
.fleet-load { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
/* 64px: de labels zijn sinds klant-UI PR 10 woorden (Processor, Geheugen), geen CPU/RAM meer. */
.fleet-load__row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; }
.fleet-load__lbl { font-size: 11px; color: var(--fg-3); }
.fleet-load__val { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fleet-load__pct { font-size: 11.5px; color: var(--fg-2); white-space: nowrap; }
.fleet-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--border-subtle); overflow: hidden; display: flex; min-width: 40px; }
.fleet-bar i { display: block; height: 100%; background: var(--dk-success);
  transition: width .45s ease-out, background-color .45s ease-out; }
@media (prefers-reduced-motion: reduce) { .fleet-bar i { transition: none; } }
.fleet-bar--warn i { background: var(--dk-warning); }
.fleet-bar--crit i { background: var(--dk-danger); }
.fleet-bar i.fleet-bar__other { opacity: .38; }
.fleet-bar i:first-child { border-radius: 5px 0 0 5px; }
.fleet-bar i:last-child { border-radius: 0 5px 5px 0; }
.fleet-load__nums { font-size: 11px; color: var(--fg-4); }
.fleet-load__foot { display: flex; align-items: center; gap: 8px; margin-top: 1px; flex-wrap: wrap; }
.fleet-state { font-size: 11.5px; font-weight: 650; }
.fleet-state--ok { color: var(--dk-success); }
.fleet-state--warn { color: var(--dk-warning); }
.fleet-state--crit { color: var(--dk-danger); }
.fleet-load__beat { font-size: 11px; color: var(--fg-4); }
/* Een oude meting (agent niet verbonden, of > 2 min stil) zegt niets over nu: grijs, geen drukte-kleur. */
.fleet-load--stale .fleet-bar i { background: var(--fg-4); }
.fleet-load--stale .fleet-load__pct { color: var(--fg-4); }
.fleet-detbtn {
  font: inherit; font-size: 11.5px; color: var(--dk-info); background: none; border: none;
  padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* Live-details-popup: native <dialog> (focus-trap/ESC/backdrop gratis van de browser). */
.fleet-live {
  border: none; border-radius: var(--radius-lg); padding: 0; width: min(440px, 92vw);
  background: var(--surface-1); color: var(--fg-1); box-shadow: var(--shadow-md);
}
.fleet-live::backdrop { background: rgba(20,24,31,.45); }
.fleet-live__h { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); }
.fleet-live__nm { font-weight: 650; font-size: 15px; }
.fleet-live__dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dk-success); margin-left: auto; }
.fleet-live__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dk-success); animation: dk-pulse 1.8s infinite; }
.fleet-live__x { background: none; border: none; color: var(--fg-3); font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 4px; }
.fleet-live__b { padding: 16px 18px; display: grid; gap: 15px; }
.fleet-metric__top { display: flex; justify-content: space-between; font-size: 13px; }
.fleet-metric__top b { font-weight: 600; }
.fleet-metric__top .val { font-weight: 650; }
.fleet-metric .fleet-bar { margin: 6px 0 3px; }
.fleet-metric__note { font-size: 12px; color: var(--fg-4); }
.fleet-metric__note--err { color: var(--dk-warning); }

/* ===== Playground (Court Playground page) =================== */
.pg-hidden { display: none; }
.pg-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: flex-start; }
/* Grid-kinderen mogen krimpen onder hun content-breedte (default is min-width:auto),
   zodat een brede resultaat-tabel binnen z'n eigen paneel scrollt (.pg-result-table-wrap
   heeft overflow:auto) i.p.v. de kolom/de hele layout op te rekken. */
.pg-grid > * { min-width: 0; }
@media (max-width: 900px) { .pg-grid { grid-template-columns: 1fr; } }

.pg-check-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pg-check-sm { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--fg-4); cursor: pointer; }
.pg-check-sm input { accent-color: var(--accent); }
.pg-form-fields { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; background: var(--surface-1); min-height: 120px; }

.pg-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pg-card-head__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-resp-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Run-state chip — pulsing while busy, OK/Fout with rows+ms once settled.
   Idle (nothing run yet / info messages from Import-Export) stays a plain
   muted label so only real run-outcomes get the pill treatment. */
.pg-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill); }
.pg-state .pg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pg-state--idle { color: var(--fg-3); background: transparent; padding: 5px 2px; font-weight: 400; }
.pg-state--ok { color: var(--dk-success); background: var(--dk-success-bg); }
.pg-state--ok .pg-dot { background: var(--dk-success); }
.pg-state--err { color: var(--dk-danger); background: var(--dk-danger-bg); }
.pg-state--err .pg-dot { background: var(--dk-danger); }
.pg-state--busy { color: var(--dk-info); background: var(--dk-info-bg); }
.pg-state--busy .pg-dot { background: var(--dk-info); animation: pg-pulse 1s infinite; }
.pg-state .pg-meta { font-weight: 400; color: var(--fg-3); margin-left: 2px; }
@keyframes pg-pulse { 50% { opacity: .35; } }

/* "Kopiëren als ▾" dropdown — groups the export actions; Import stays a
   separate button since it's input, not export. */
.pg-menu { position: relative; }
.pg-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 5px;
  min-width: 190px; z-index: 5;
}
.pg-menu-pop button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--fg-2); font-family: var(--font-sans);
  font-size: 12.5px; padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer;
}
.pg-menu-pop button:hover:not(:disabled) { background: var(--surface-2); color: var(--fg-1); }
.pg-menu-pop button:disabled { opacity: .45; cursor: default; }
.pg-menu-pop small { color: var(--fg-4); margin-left: auto; font-size: 10.5px; }
.pg-menu-sep { height: 1px; background: var(--border-subtle); margin: 4px 2px; }

/* Result panel — table view for tabular payloads (sql.query/entity queries),
   JSON always available via the toggle. Theme-aware throughout: no hardcoded
   colours, unlike the old fixed-dark <pre> this replaces. */
.pg-result-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; flex-wrap: wrap; }
.pg-viewtoggle { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }
.pg-viewtoggle button {
  background: var(--surface-1); border: 0; color: var(--fg-3); font-family: var(--font-sans);
  font-size: 12px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
/* Fixed dark ink on the accent fill, same convention as .btn-accent above:
   Zegelgoud stays bright in both themes, so the token --fg-1 (which flips
   light in dark mode) would go unreadable here. */
.pg-viewtoggle button.is-active { background: var(--accent); color: #14181F; font-weight: 600; }

.pg-result { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-1); }
.pg-result-table-wrap { max-height: 460px; overflow: auto; }
.pg-result table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pg-result thead th {
  position: sticky; top: 0; background: var(--surface-2); color: var(--fg-3); text-align: left; font-weight: 600;
  padding: 8px 12px; border-bottom: 1px solid var(--border-default); font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
}
.pg-result tbody td { padding: 7px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--fg-1); vertical-align: top; }
.pg-result tbody td.pg-rownum { color: var(--fg-4); width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 11px; }
.pg-result tbody tr:hover td { background: var(--surface-2); }
.pg-result-foot { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border-top: 1px solid var(--border-subtle); font-size: 11.5px; color: var(--fg-4); background: var(--surface-2); flex-wrap: wrap; gap: 6px; }
.pg-result-json {
  margin: 0; padding: 12px; background: var(--surface-2); color: var(--fg-1);
  font-size: 11.5px; white-space: pre-wrap; word-break: break-word;
  max-height: 460px; overflow: auto;
}
.pg-hint { font-size: 11.5px; color: var(--fg-4); margin-top: 8px; }

/* Fullscreen response — native <dialog>, same conventions as .fleet-live
   (see court-fleet-metrics.js): showModal()/close(), backdrop-click-to-close. */
.pg-fsdlg {
  border: 0; padding: 0; background: var(--surface-1); color: var(--fg-1);
  border-radius: var(--radius-lg); width: min(1120px, 94vw); height: 88vh;
  max-width: none; max-height: none; box-shadow: var(--shadow-md);
}
.pg-fsdlg::backdrop { background: rgba(20,24,31,.55); }
.pg-fsdlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.pg-fsdlg-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pg-fsdlg-body { padding: 0; overflow: auto; height: calc(88vh - 58px); }
.pg-fsx { border: 1px solid var(--border-default); background: var(--surface-1); color: var(--fg-2); border-radius: var(--radius-sm); width: 32px; height: 32px; cursor: pointer; display: grid; place-items: center; font-size: 15px; }
.pg-fsx:hover { background: var(--surface-2); }

/* ==========================================================================
   Gebruiker-identiteitsscherm (Court/Pages/TenantUserEdit.razor)
   --------------------------------------------------------------------------
   Twee dingen die dit blok anders doet dan de rest van Court, allebei bewust:

   1) Randen zijn hier signaal, geen omhulsel. De kaart kadert af; binnen de
      kaart groeperen micro-labels, witruimte en toonvlakken. Alleen de status
      die aandacht verdient (geweigerd) draagt een rand — juist omdat verder
      niets in de lijst er een heeft.
   2) Invoervelden zijn stil: een toonvlak in plaats van een rand, en bij
      focus lichter dan hun omgeving. Tien velden onder elkaar lezen zo als
      een lijst en niet als een raster. Gescoped op .ident-form, dus de rest
      van Court houdt de omrande .field-inputs; promoveren naar de basis is
      een aparte, bewuste stap.
   ========================================================================== */

.ident-form .field input,
.ident-form .ident-row__ctrl input[type=text],
.ident-form .ident-row__ctrl input[type=password] {
  border: 1px solid transparent; background: var(--surface-2);
  border-radius: var(--radius-sm); padding: 8px 10px;
  color: var(--fg-1); font-size: 13px; outline: none;
  transition: background 80ms ease, border-color 80ms ease;
}
.ident-form .field input:hover,
.ident-form .ident-row__ctrl input:hover { border-color: var(--border-default); }
.ident-form .field input:focus,
.ident-form .ident-row__ctrl input:focus {
  background: var(--surface-1); border-color: var(--accent); box-shadow: var(--shadow-focus);
}
.ident-form .field input::placeholder,
.ident-form .ident-row__ctrl input::placeholder { color: var(--fg-4); }

.ident-cardhead { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; }
.ident-cardhead h3 { margin: 0; }
.ident-cardhead__count { font-size: 12px; color: var(--fg-4); }
/* Twee formulieren met elk een eigen endpoint blijven twee knoppen; wat de
   knop wel kan doen is zeggen hoe ver hij reikt. */
.ident-scope { font-size: 11.5px; color: var(--fg-4); }

/* De enige deellijn binnen een kaart: wie is dit, en namens wie handelt hij,
   zijn twee dingen — zonder lijn lopen ze in elkaar over. */
.ident-split { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }

.ident-intro { font-size: 12.5px; color: var(--fg-3); margin: 4px 0 0; max-width: 66ch; }
.ident-intro b { color: var(--fg-1); font-weight: 600; }
.ident-rule { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; color: var(--fg-4); margin: 6px 0 0; max-width: 66ch; }
.ident-rule svg { flex: none; margin-top: 1px; }
.ident-quiet { font-size: 11.5px; color: var(--fg-4); margin: 0 0 16px; max-width: 66ch; line-height: 1.5; }

/* Groep per capability: micro-label plus lucht, geen deellijn. */
.ident-group { margin-top: 26px; }
.ident-group:first-of-type { margin-top: 18px; }
.ident-group__head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.ident-group__title {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--fg-3); display: inline-flex; align-items: center; gap: 7px; margin: 0;
}
.ident-group__count { font-size: 11px; color: var(--fg-4); font-weight: 500; letter-spacing: 0; text-transform: none; }
/* Rechts in de kop staat de regel die voor deze groep geldt — de reden dat de
   rijen eronder wel of geen eigen waarde nodig hebben. */
.ident-group__note { margin-left: auto; font-size: 11.5px; color: var(--fg-4); display: inline-flex; align-items: center; gap: 5px; }
.ident-group__note--strict { color: var(--dk-warning); }

/* Een omgeving is een rij. Geen rand, geen deellijn, geen hover-vlak: de rij
   is geen knop. Het getinte veld is het anker, de naamkolom maakt de kolom.
   De verhouding doet het werk van een deellijn: 8px binnen een rij, 22px
   ertussen — bij Sql-rijen met twee subvelden is dat het verschil tussen twee
   blokken en een lange kolom. */
.ident-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 168px; gap: 6px 14px; align-items: start; }
.ident-row + .ident-row { margin-top: 22px; }
.ident-row__env { padding-top: 8px; min-width: 0; }
.ident-row__inst {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--fg-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.ident-row__ctrl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ident-row__ctrl input[type=text], .ident-row__ctrl input[type=password] { width: 100%; }
.ident-row__state { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-4); padding-top: 9px; line-height: 1.35; }
.ident-row__state svg { flex: none; }
.ident-row__state b { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); font-weight: 500; }
.ident-row__why { grid-column: 2 / -1; font-size: 11.5px; color: var(--fg-4); margin-top: -3px; }
.ident-row__why--warn { color: var(--dk-warning); }

/* De status die wel een rand verdient. */
.ident-flag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.ident-flag--warn { background: rgba(198,140,9,0.10); color: var(--dk-warning); border: 1px solid rgba(198,140,9,0.45); }

.ident-sub { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ident-sub__label { font-size: 11.5px; font-weight: 600; color: var(--fg-3); }

/* Het geheim. Staat er al een wachtwoord, dan is er geen veldvorm: dat de
   invoervorm ontbreekt is precies de boodschap — hier valt niets te typen, en
   niets aanraken laat het ongemoeid. Native details/summary zodat toetsenbord
   en screenreader het gratis krijgen (de marker wordt al globaal verborgen);
   de input blijft in de DOM, dus de POST-body is identiek aan die van een
   gewoon veld: leeg = ongewijzigd, zoals SaveUserCredentialsAsync het leest. */
.ident-secret > summary { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-3); padding: 4px 0; }
.ident-secret > summary svg { color: var(--fg-4); flex: none; }
.ident-secret > summary b { color: var(--fg-1); font-weight: 600; }
.ident-secret__edit { margin-left: auto; color: var(--dk-oranje-500); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.ident-secret[open] .ident-secret__edit { color: var(--fg-4); }
.ident-secret__lbl--open { display: none; }
.ident-secret[open] .ident-secret__lbl--shut { display: none; }
.ident-secret[open] .ident-secret__lbl--open { display: inline; }
.ident-secret__hint { font-size: 11px; color: var(--fg-4); margin-top: 5px; }

/* Getinte mededelingen in plaats van omkaderde. */
.ident-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 13px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5; }
.ident-note svg { flex: none; margin-top: 2px; }
.ident-note b { font-weight: 600; }
.ident-note--quiet { background: var(--surface-2); color: var(--fg-3); }
.ident-note--quiet svg { color: var(--fg-4); }
.ident-note--quiet b { color: var(--fg-1); }
/* Voor iets dat gelezen moet worden maar geen storing is (Sql: wordt bewaard,
   nog niet gebruikt). Blauw komt in dit scherm nergens anders voor, dus het
   valt op zonder alarm te zijn — en het is een vlak, geen rand. */
.ident-note--info { background: var(--dk-info-bg); color: var(--dk-info); }
.ident-note--info b { color: var(--dk-info); }
.ident-group .ident-note { margin: 0 0 10px; }

.ident-effect { display: flex; gap: 7px; align-items: flex-start; margin-top: 7px; font-size: 11.5px; color: var(--fg-4); line-height: 1.5; max-width: 70ch; }
.ident-effect svg { flex: none; margin-top: 2px; }
.ident-effect b { color: var(--fg-2); font-weight: 600; }
.ident-effect--warn { color: var(--dk-warning); }
.ident-effect--warn b { color: var(--dk-warning); }
.ident-resolve { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.ident-resolve > div { flex: 1; }

/* Gebruikerskiezer (DirectoryPicker): treffers uit Microsoft 365 als rijen die naar het
   ingevulde nieuw-formulier linken. Wie al toegang heeft linkt naar zijn bestaande rij. */
.dir-picker__list { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.dir-picker__item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--border-subtle); color: inherit; text-decoration: none;
}
.dir-picker__item:last-child { border-bottom: 0; }
.dir-picker__item:hover { background: var(--dk-ink-50); }
.dir-picker__name { font-weight: 600; color: var(--fg-1); font-size: 13px; }
.dir-picker__sub { font-size: 12px; color: var(--fg-4); }
.dir-picker__pick { font-size: 12.5px; color: var(--accent); white-space: nowrap; }

/* Vooruitblik bij een nieuwe gebruiker: geen formulier, alleen de omgevingen
   die deze klant draait. Draagt geen name-attributen en post dus niets. */
.ident-preview { opacity: 0.55; pointer-events: none; }

@media (max-width: 760px) {
  .ident-row { grid-template-columns: 1fr; gap: 6px; }
  .ident-row__env, .ident-row__state { padding-top: 0; }
  .ident-row__why { grid-column: 1 / -1; }
  .ident-group__note { margin-left: 0; width: 100%; }
  .ident-row + .ident-row { margin-top: 20px; }
}

/* Auth-vangnet: banner wanneer een /admin/api-fetch op 401/403 stuit
   (court-session-guard.js). Rustig afgekaderd, onderaan buiten de flow —
   het onderbreekt de pagina niet, maar de fout is niet langer stil. */
.court-session-banner {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 60; max-width: min(680px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; font-size: 13px; line-height: 1.45;
  color: var(--fg-1); background: var(--surface-1);
  border: 1px solid var(--border-strong); border-left: 3px solid var(--dk-danger, #d04646);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.court-session-banner .btn { flex: none; }
.court-session-banner__close {
  flex: none; background: none; border: 0; cursor: pointer;
  color: var(--fg-3); font-size: 16px; line-height: 1; padding: 2px 4px;
}
.court-session-banner__close:hover { color: var(--fg-1); }

/* ==========================================================================
   Court IA v2 — tenant als scope
   De tenant is een eigen niveau: switcher in de sidebar, elk onderdeel een
   eigen route. Zie docs/mockups/court-ia-v2.html.
   ========================================================================== */

/* ----- Tenant-switcher (sidebar) ----- */
.court-switch { position: relative; margin: 2px 0 6px; }
.court-switch__btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  color: inherit; font: inherit; transition: border-color 80ms;
}
.court-switch__btn:hover { border-color: var(--border-strong); }
/* Identiteitsblok (klantmockup A3): één omgeving = statisch blok, geen knop en geen kader —
   het is geen object. Het team krijgt op die plek de wisselknop hierboven, met dezelfde tekst. */
.court-ident { display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin: 0 0 10px; }
.court-ident__txt { min-width: 0; flex: 1; }
/* Avatar met de 8px-statusstip rechtsonder; de ring in de vlakkleur maakt hem los van de avatar. */
.court-av { position: relative; flex: none; display: inline-flex; }
.court-status-dot {
  position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface-1);
}
/* Nieuw is geen storing: een lege ring, geen kleur. */
.court-status-dot--nieuw { background: var(--surface-1); border: 1.5px solid var(--fg-4); }
.court-status-dot--offline { background: var(--dk-danger); }
.court-status-dot--actief { background: var(--dk-success); }
.court-status-dot--warn { background: var(--dk-warning); }
.court-switch__av {
  width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--accent);
  flex: none; display: grid; place-items: center;
  /* Vaste inkt op goud: goud blijft licht in beide thema's. */
  font: 700 10px/1 var(--font-display); color: #14181f;
}
.court-switch__nm {
  display: block; font-weight: 600; font-size: 13px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.court-switch__sub {
  display: block; font-size: 11px; color: var(--fg-4); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Zwevende laag → shadow-md is hier juist (Zweef-regel). */
.court-switch__pop {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 30;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 6px;
  max-height: 340px; overflow-y: auto;
}
.court-switch__search {
  width: 100%; padding: 7px 9px; margin-bottom: 5px; font-size: 12.5px;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); color: inherit;
}
.court-switch__search:focus { outline: 0; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.court-switch__opt {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500;
  color: var(--fg-2); text-decoration: none; cursor: pointer;
}
.court-switch__opt:hover { background: var(--surface-2); color: var(--fg-1); }
.court-switch__opt--on { background: var(--surface-2); color: var(--fg-1); font-weight: 600; }
.court-switch__mini {
  width: 19px; height: 19px; border-radius: 4px; flex: none; display: grid;
  place-items: center; font: 700 8.5px/1 var(--font-display);
  background: var(--dk-ink-200); color: var(--fg-2);
}
.court-switch__opt--on .court-switch__mini { background: var(--accent); color: #14181f; }
.court-switch__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--dk-success); flex: none;
}
.court-switch__all { border-top: 1px solid var(--border-subtle); margin-top: 5px; padding-top: 6px; }
.court-switch__empty { padding: 10px 9px; font-size: 12px; color: var(--fg-4); }

/* ----- Kruimelpad: elke kruimel behalve de laatste is een link ----- */
.court-breadcrumbs a { color: var(--fg-3); text-decoration: none; border-radius: 3px; }
.court-breadcrumbs a:hover { color: var(--fg-1); text-decoration: underline; }
.court-breadcrumbs__cur { color: var(--fg-1); font-weight: 500; }

/* ----- Sidebar-teller naast een nav-item ----- */
.court-nav-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--fg-4); font-variant-numeric: tabular-nums;
}
.court-nav-item.active .court-nav-count { color: var(--fg-3); }
/* "1/2" bij Agents: een deel van de agents is niet verbonden. */
.court-nav-count--warn, .court-nav-item.active .court-nav-count--warn { color: var(--dk-warning); }
/* Rode stip bij Agents: er is geen agent verbonden (klantmockup). Een teller zou
   hier niets zeggen; wat telt is of er iets draait. */
.court-nav-attn { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--dk-danger); flex: none; }
/* Lijn zonder kop: Instellingen staat los van de gebruiks- en inzichtsecties. */
.court-nav-divider { height: 1px; background: var(--border-subtle); margin: 10px 10px 8px; }
/* Onder een tenant begint het platform met een lijn: een ander niveau, geen vervolg. */
.court-nav-section--platform { margin-top: 16px; border-top: 1px solid var(--border-default); padding-top: 18px; }

/* ----- Paginakop van een tenant-pagina (TenantScopeHeader, klantmockup A10) ----- */
.court-page-header__main { min-width: 0; }
/* Team-metaregel: de omgevings-id in mono met een kopieerknop. */
.court-page-meta {
  margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-4);
  display: flex; align-items: center; gap: 6px;
}
.court-helplink {
  background: none; border: 0; padding: 0; color: var(--dk-oranje-500); font: inherit;
  font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.court-helplink:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ----- Stat-tegel: een getal dat je kunt openen ----- */
.court-stat__unit { font-size: 14px; font-weight: 400; color: var(--fg-4); }
.court-stat--link { text-decoration: none; color: inherit; display: block; transition: background 80ms; }
.court-stat--link:hover { background: var(--surface-2); }

/* ----- Host-belasting (CPU/RAM) -----
   Drempels: <70 groen, 70-89 amber, >=90 rood. De klasse komt uit
   LoadBar.razor zodat balk en kleur niet uiteen kunnen lopen. Het gedimde
   segment is de rest van de machine, het volle deel dit proces. */
.court-load { display: flex; flex-direction: column; gap: 6px; min-width: 196px; flex: none; }
.court-load__row { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; }
.court-load__lbl { font-size: 11px; color: var(--fg-3); }
.court-load__val { display: flex; align-items: center; gap: 8px; min-width: 0; }
.court-load__pct {
  font-size: 11.5px; color: var(--fg-2); white-space: nowrap;
  font-variant-numeric: tabular-nums; min-width: 32px; text-align: right;
}
.court-bar {
  flex: 1; height: 8px; border-radius: 5px; background: var(--border-subtle);
  overflow: hidden; display: flex; min-width: 44px;
}
.court-bar i { display: block; height: 100%; background: var(--dk-success); }
.court-bar--warn i { background: var(--dk-warning); }
.court-bar--crit i { background: var(--dk-danger); }
.court-bar i.court-bar__other { opacity: 0.38; }
.court-bar i:first-child { border-radius: 5px 0 0 5px; }
.court-bar i:last-child { border-radius: 0 5px 5px 0; }
.court-load__foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 1px; }
.court-load-legend {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 11.5px; color: var(--fg-4); margin: 0 0 12px;
}
.court-load-legend__k { display: inline-flex; align-items: center; gap: 7px; }
.court-state { font-size: 11.5px; font-weight: 600; }
.court-state--ok { color: var(--dk-success); }
.court-state--warn { color: var(--dk-warning); }
.court-state--crit { color: var(--dk-danger); }

/* ----- Lijstrijen met deellijnen (één kader om de lijst, niet per rij) ----- */
.court-rows {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  overflow: hidden; background: var(--surface-1);
}
.court-row {
  display: flex; align-items: center; gap: 13px; padding: 12px 15px;
  border-bottom: 1px solid var(--border-subtle); text-decoration: none;
  color: inherit; transition: background 80ms;
}
.court-row:last-child { border-bottom: 0; }
.court-row:hover { background: var(--surface-2); }
.court-row--warn { box-shadow: inset 2px 0 0 var(--dk-warning); }
.court-row--crit { box-shadow: inset 2px 0 0 var(--dk-danger); }
.court-row__ic {
  width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-2);
  flex: none; display: grid; place-items: center; color: var(--fg-3);
  border: 1px solid var(--border-subtle);
}
.court-row__bd { min-width: 0; flex: 1; }
.court-row__t {
  font-weight: 600; font-size: 13.5px; line-height: 1.4;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.court-row__m {
  font-size: 11.5px; color: var(--fg-4); margin-top: 3px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.court-row__m .sep { color: var(--border-strong); }
.court-row__r { display: flex; align-items: center; gap: 9px; flex: none; }
.court-tag {
  font-size: 10.5px; font-weight: 500; color: var(--fg-3); background: var(--surface-2);
  border: 1px solid var(--border-subtle); padding: 1px 7px; border-radius: var(--radius-pill);
}

/* Inline code in een kv-grid: leesbaar zonder eigen kader. */
.court-inline-code {
  font-family: var(--font-mono); background: var(--surface-2);
  padding: 3px 8px; border-radius: var(--radius-sm); color: var(--fg-1);
  word-break: break-all;
}

/* ----- Gevarenzone -----
   Een echt object, dus een kader (echte-objecten-regel). Onderaan de pagina en
   geen eigen tab: een tab die je per ongeluk aanklikt hoort niet de plek te
   zijn waar "verwijderen" staat. */
.court-danger {
  border: 1px solid color-mix(in srgb, var(--dk-danger) 30%, transparent);
  border-radius: var(--radius-md); background: var(--surface-1);
  padding: 16px 18px; margin-top: 28px;
}
.court-danger__t {
  font: var(--type-h3); color: var(--dk-danger); margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.court-danger__row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 0; border-bottom: 1px solid var(--border-subtle);
}
.court-danger__row--last { border-bottom: 0; padding-bottom: 0; }
.court-danger__row strong { font-size: 13.5px; }

/* ----- Dialoog: een keuze-stap, geen pagina -----
   Toevoegen slaat niets op: het kiest onderdeel + naam en stuurt door naar het
   config-formulier. Dat is een tussenstap, dus een dialoog. */
.court-dlg-scrim {
  position: fixed; inset: 0; background: rgba(20, 24, 31, 0.44); z-index: 70;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 9vh 16px 16px; overflow-y: auto;
}
.court-dlg {
  width: min(560px, 100%); background: var(--surface-1);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.court-dlg__hd { padding: 16px 18px 13px; border-bottom: 1px solid var(--border-subtle); }
.court-dlg__t { font: 700 17px/1.25 var(--font-display); letter-spacing: -0.01em; margin: 0; }
.court-dlg__d { font-size: 12.5px; color: var(--fg-4); margin: 5px 0 0; max-width: 60ch; }
.court-dlg__bd { padding: 16px 18px 0; }
.court-dlg__ft {
  margin: 16px -18px 0; padding: 13px 18px;
  border-top: 1px solid var(--border-subtle); background: var(--surface-2);
  display: flex; align-items: center; gap: 9px;
}
.court-dlg__x { margin-left: auto; display: flex; gap: 9px; }

/* Type-keuze als raster van echte onderdelen i.p.v. een dropdown: je ziet
   meteen wat de Envoy ondersteunt en hoeveel er al van staan. */
.court-pick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px;
}
.court-pick__o {
  display: flex; align-items: center; gap: 9px; padding: 10px 11px; cursor: pointer;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-1); transition: border-color 80ms, background 80ms;
}
.court-pick__o:hover { border-color: var(--border-strong); background: var(--surface-2); }
.court-pick__o input { position: absolute; opacity: 0; pointer-events: none; }
.court-pick__o:has(input:checked) {
  border-color: var(--accent); background: var(--dk-geel-50);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.court-pick__o:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.court-pick__ic {
  width: 28px; height: 28px; border-radius: var(--radius-sm); flex: none;
  display: grid; place-items: center; background: var(--surface-2); color: var(--fg-3);
  border: 1px solid var(--border-subtle);
}
.court-pick__o:has(input:checked) .court-pick__ic { background: var(--surface-1); color: var(--fg-1); }
.court-pick__nm { display: block; font-weight: 600; font-size: 13px; line-height: 1.3; }
.court-pick__n {
  display: block; font-size: 11px; color: var(--fg-4); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.court-fld { margin-top: 16px; }
.court-fld__l { display: block; font-weight: 600; font-size: 12px; color: var(--fg-2); margin-bottom: 5px; }
.court-fld__i {
  width: 100%; padding: 8px 10px; font-family: var(--font-mono); font-size: 13px;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); color: inherit;
}
.court-fld__i:focus { outline: 0; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.court-fld__i[aria-invalid="true"] { border-color: var(--dk-danger); }
.court-fld__h { font-size: 11.5px; color: var(--fg-4); margin-top: 5px; }
.court-fld__e {
  font-size: 11.5px; color: var(--dk-danger); margin-top: 5px;
  display: flex; align-items: center; gap: 5px;
}
/* Machine-uitvoer-eiland: letterlijk #14181f, want --dk-ink-900 klapt in dark
   mode om naar licht (zelfde reden als .code en .install-keys__value). */
.court-prev {
  font-family: var(--font-mono); font-size: 12px; background: #14181f; color: #e3e6eb;
  padding: 7px 10px; border-radius: var(--radius-sm); margin-top: 9px; overflow-wrap: anywhere;
}
.court-prev b { color: #d1fae5; font-weight: 400; }

/* Zoekveld binnen een court-filter-chip. */
.court-filter__input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit;
  font-size: 12.5px; color: inherit; outline: 0;
}
.court-filter__input::placeholder { color: var(--fg-4); }
.court-filter:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }

/* Uitgeschakelde rij: gedempt, maar leesbaar. */
.court-row--off { background: var(--surface-2); }
.court-row--off .court-row__t { color: var(--fg-3); }

/* Rij die je niet kunt openen: geen hover (en geen pijltje), anders lijkt hij klikbaar. */
.court-row--static:hover { background: transparent; }
.court-row--static.court-row--off:hover { background: var(--surface-2); }
/* Rij als div met de link in de titel, die met ::after de hele rij afdekt. Zo kan er een
   eigen link in de rij staan (de supportmail bij een storing) zonder link in een link. */
.court-row--link { position: relative; }
.court-row__go { color: inherit; text-decoration: none; }
.court-row__go::after { content: ""; position: absolute; inset: 0; }
.court-row--link .court-row__m a { position: relative; z-index: 1; }

/* ----- Groep-helpers -----
   Micro-label als titel, teller en beschrijving. Geen kader: groepering gaat
   via witruimte en deellijnen (echte-objecten-regel). */
.court-group__count {
  font-weight: 400; text-transform: none; letter-spacing: normal;
  font-size: 11.5px; color: var(--fg-4); font-variant-numeric: tabular-nums;
}
.court-group__desc { font-size: 12.5px; color: var(--fg-4); margin: 0 0 12px; max-width: 74ch; }
.court-table__empty { text-align: center; color: var(--fg-4); padding: 20px; }
/* Config-diffs zijn JSON: mono, en niet de rij laten opblazen. */
.court-diff {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3);
  word-break: break-word;
}

/* ----- Rij-menu (overflow per tabelrij) -----
   Vervangt vier formulieren die naast elkaar in de rij stonden. Hergebruikt
   het popover-mechanisme van court-user-menu.js, dus buiten-klik en Escape
   werken zonder extra JS. */
.court-rowmenu { position: relative; display: inline-flex; }
.court-rowmenu__btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; background: transparent; border: 0;
  border-radius: var(--radius-sm); color: var(--fg-4); cursor: pointer;
}
.court-rowmenu__btn:hover { background: var(--surface-2); color: var(--fg-1); }
.court-rowmenu__pop {
  position: absolute; top: calc(100% + 4px); right: 0; min-width: 232px;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 6px; z-index: 60; text-align: left;
}
.court-rowmenu__pop[hidden] { display: none; }
.court-rowmenu__group { display: flex; flex-direction: column; gap: 9px; padding: 4px 5px 7px; }
.court-rowmenu__form { margin: 0; }
.court-rowmenu__lbl {
  display: block; font-size: 11px; font-weight: 600; color: var(--fg-3); margin-bottom: 4px;
}
.court-rowmenu__input {
  flex: 1; min-width: 0; font-size: 12px; padding: 5px 7px;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); color: inherit;
}
.court-rowmenu__input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.court-rowmenu__save { padding: 4px 7px; flex: none; }
.court-rowmenu__sep { height: 1px; background: var(--border-subtle); margin: 4px 0; }
.court-rowmenu__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; background: none; border: 0; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 500; color: var(--fg-2); cursor: pointer; text-align: left;
}
.court-rowmenu__item:hover { background: var(--surface-2); color: var(--fg-1); }
.court-rowmenu__item--danger { color: var(--dk-danger); }
.court-rowmenu__item--danger:hover { background: var(--dk-danger-bg); color: var(--dk-danger); }

/* Uitleg onder een lijst: waarom een actie doet wat hij doet. */
.court-hint { font-size: 12px; color: var(--fg-4); margin: 12px 0 0; max-width: 76ch; line-height: 1.55; }

/* Lopende tekst, stappen en een statusregel in een groep (klantmockup E, AI en automatisering). */
.court-text { font-size: 13px; color: var(--fg-2); margin: 0 0 12px; max-width: 74ch; }
.court-steps-plain { margin: 0 0 14px; padding-left: 20px; font-size: 13px; color: var(--fg-2); max-width: 74ch; }
.court-steps-plain li { margin-bottom: 4px; }
.court-status-line { font-size: 12.5px; color: var(--fg-3); margin: 8px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Bevestiging van een actie die iets breekt (klantmockup E7, "Nieuw adres"): native <dialog> met
   showModal, zodat inert maken, Esc en focus terug van de browser komen. */
.court-confirm {
  border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 20px;
  width: min(440px, calc(100vw - 32px)); background: var(--surface-1); color: var(--fg-1);
  box-shadow: var(--shadow-md);
}
.court-confirm::backdrop { background: rgba(20, 24, 31, 0.45); }
.court-confirm h2 { font: 700 17px/1.25 var(--font-display); margin: 0 0 8px; }
.court-confirm p { font-size: 13px; color: var(--fg-2); margin: 0 0 18px; line-height: 1.5; }
.court-confirm__act { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 0; }

/* AI-assistent toevoegen (klantmockup E8): native <dialog>, keuzelijst met micro-labels links, stappen rechts.
   Geen logo's of monogrammen. Geen padding op de dialoog zelf: court-dialog.js leest een klik met de dialoog
   als doel als een klik op de achtergrond. */
.aic {
  padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  width: min(900px, calc(100vw - 32px)); height: min(640px, calc(100vh - 48px));
  max-width: none; max-height: none; background: var(--surface-1); color: var(--fg-1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
}
.aic::backdrop { background: rgba(5, 7, 10, .6); }
.aic__in { display: flex; flex-direction: column; height: 100%; }
.aic__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.aic__head h2 { font: var(--type-h3); color: var(--fg-1); margin: 0; letter-spacing: -0.01em; }
.aic__lead { font-size: 12.5px; color: var(--fg-3); margin: 4px 0 0; max-width: 72ch; }
.aic__close { flex: none; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 4px; color: var(--fg-3); cursor: pointer; display: inline-flex; }
.aic__close:hover { background: var(--surface-2); color: var(--fg-1); }
.aic__in > .court-tabs { margin: 12px 20px 0; }
.aic__body { display: grid; grid-template-columns: 190px 1fr; min-height: 0; flex: 1; }
.aic__pick { border-right: 1px solid var(--border-subtle); padding: 10px 10px 16px; overflow-y: auto; }
.aic__grp { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-4); margin: 12px 8px 4px; }
.aic__grp:first-child { margin-top: 4px; }
.aic__opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.aic__opt:hover { background: var(--surface-2); color: var(--fg-1); }
.aic__opt.court-tab--active { background: var(--surface-2); color: var(--fg-1); font-weight: 600; }
.aic__panes { padding: 16px 20px 20px; overflow-y: auto; min-width: 0; }
.aic__panes .ident-note { margin-bottom: 14px; }
.aic__t { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--fg-1); margin: 4px 0 8px; }
.aic__oneclick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.aic__oneclick .btn { display: inline-flex; align-items: center; gap: 6px; }
.aic__oneclick .court-hint { margin: 0; }
.aic__none { font-size: 12px; color: var(--fg-4); margin: 0 0 10px; }
.aic__lbl { font-size: 12.5px; color: var(--fg-3); margin: 14px 0 6px; }
.aic-code { position: relative; margin: 6px 0 12px; }
.aic-code pre.code { margin: 0; padding-right: 46px; }
.aic-code .install-keys__copy { position: absolute; top: 8px; right: 8px; }
.aic .install-keys { margin-bottom: 10px; }
@media (max-width: 700px) {
  /* dvh: 100vh is op een telefoon de hoogte zonder werkbalk, dan valt de sluitknop of de onderkant weg. */
  .aic { width: calc(100vw - 16px); height: calc(100vh - 16px); height: calc(100dvh - 16px); }
  .aic__head { padding: 14px 14px 0; }
  .aic__in > .court-tabs { margin: 10px 14px 0; }
  .aic__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .aic__pick { border-right: 0; border-bottom: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 14px; overflow: visible; }
  .aic__grp { display: none; }
  .aic__opt { width: auto; padding: 6px 10px; }
  .aic__close { min-width: 40px; min-height: 40px; justify-content: center; align-items: center; }
  .aic__panes { padding: 14px 14px 18px; overflow: visible; }
  .aic .install-keys__row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .aic .install-keys__label { grid-column: 1 / -1; }
}

/* ----- Lege staat ----- */
.court-empty {
  text-align: center; padding: 52px 24px; border: 1px dashed var(--border-default);
  border-radius: var(--radius-md); color: var(--fg-4); background: var(--surface-1);
}
.court-empty__t {
  font: var(--type-h3); color: var(--fg-1); margin-bottom: 6px; letter-spacing: -0.01em;
}
.court-empty__d { font-size: 13px; max-width: 46ch; margin: 0 auto 16px; line-height: 1.55; }

/* ----- Filter-melding: wat een filter verbergt, moet het zeggen -----
   Iets niet zien en concluderen dat het niet bestaat is de fout die dit
   voorkomt. */
.court-filterhint {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2);
  background: var(--dk-info-bg);
  border: 1px solid color-mix(in srgb, var(--dk-info) 30%, transparent);
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 12px;
}
.court-filterhint a { color: var(--dk-info); font-weight: 600; margin-left: auto; white-space: nowrap; }

@media (max-width: 900px) {
  .court-page-header { flex-wrap: wrap; }
  .court-page-header__actions { width: 100%; flex-wrap: wrap; }
  .court-load { min-width: 0; flex: 1 1 100%; order: 3; }
}


/* ============================================================
   Verbruik-scherm: sparkline, bron-pillen, uitklap-detailrij.
   Uit docs/mockups/court-billing-v1.html. De stat-tegels en tabs
   hergebruiken de bestaande court-stats/court-tabs en StatTile.
   ============================================================ */

/* Waar een call vandaan kwam. Kleur per kanaal, zodat een rij in één
   oogopslag laat zien of het verkeer via n8n liep of rechtstreeks. */
.court-src {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-default);
  color: var(--fg-3);
  background: var(--surface-2);
}
.court-src--n8n {
  color: var(--dk-oranje-500);
  border-color: color-mix(in srgb, var(--dk-oranje-500) 30%, transparent);
  background: color-mix(in srgb, var(--dk-oranje-500) 10%, transparent);
}
.court-src--mcp {
  color: var(--dk-info);
  border-color: color-mix(in srgb, var(--dk-info) 30%, transparent);
  background: var(--dk-info-bg);
}
.court-src--court {
  color: var(--dk-purple);
  border-color: color-mix(in srgb, var(--dk-purple) 30%, transparent);
  background: color-mix(in srgb, var(--dk-purple) 10%, transparent);
}

/* De uitgeklapte rij hoort zichtbaar bij de rij erboven: gouden bovenrand
   plus een inspringing die de moederrij echoot. */
.court-table tbody tr.court-det td {
  background: var(--surface-2);
  border-top: 2px solid var(--accent);
  padding: 14px 14px 14px 26px;
  box-shadow: inset 3px 0 0 var(--accent);
}
/* De hover-highlight van gewone rijen hoort hier niet: dit is geen regel
   die je aanklikt maar de uitleg bij de regel erboven. */
.court-table tbody tr.court-det:hover td { background: var(--surface-2); }
.court-det__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
/* Een rij die uitklapbaar is, moet dat laten zien. */
.court-table tbody tr.court-row--open td { background: var(--dk-ink-50); }
.court-row--click { cursor: pointer; }

/* Mini staafgrafiek: het verloop over de maand. Geen bibliotheek — het
   zijn dertig staafjes met een hoogtepercentage. */
.court-spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.court-spark i {
  flex: 1;
  background: var(--dk-ink-300);
  border-radius: 1px 1px 0 0;
  min-height: 2px;
}
.court-spark i.hi { background: var(--accent); }
.court-spark__ax {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
}

/* Sleutel-waardelijst in de detailrij. */
.court-kv { display: grid; gap: 3px 10px; margin: 0; font-size: 12.5px; }
.court-kv dt { font-family: var(--font-mono); color: var(--fg-4); }
.court-kv dt.sans { font-family: var(--font-sans); }
.court-kv dd { margin: 0; font-variant-numeric: tabular-nums; }


/* ============================================================
   Klanten/Marge: groepsrijen met ingesprongen omgevingen, en de
   kosten-vs-winst-balk. Uit docs/mockups/court-billing-v1.html.
   ============================================================ */

/* De klantregel draagt de subregels eronder: iets donkerder, en hij licht
   niet op bij hover — het is een kop, geen rij die je aanklikt.

   Eigen token en niet --surface-2: die is ook de hover-tint van knoppen en
   menu-items, en de klantregel moet los daarvan een trap kunnen zetten ten
   opzichte van het tabeloppervlak. */
.court-table tbody tr.court-grp td { background: var(--surface-sunken); }
.court-table tbody tr.court-grp:hover td { background: var(--surface-sunken); }

/* De omgeving hoort zichtbaar onder de klant te hangen; het streepje maakt
   van inspringing een verband. */
.court-table tbody tr.court-child td:first-child {
  padding-left: 34px;
  position: relative;
}
.court-table tbody tr.court-child td:first-child::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--border-default);
}

/* Kosten versus winst in één balk: grijs is wat het ons kost, groen wat we
   eraan overhouden. Rood als de kosten de omzet overtreffen. */
.court-mbar {
  display: flex;
  height: 7px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-2);
  width: 100%;
  min-width: 96px;
  border: 1px solid var(--border-subtle);
}
.court-mbar i { display: block; height: 100%; }
.court-mbar .c { background: var(--dk-ink-400); }
.court-mbar .m { background: var(--dk-success); }
.court-mbar .neg { background: var(--dk-danger); }

/* Legenda onder een tabel met die balken. Zichtbaar in het vlak, niet in een
   tooltip: wie de balk voor het eerst ziet weet niet dat er iets te hoveren
   valt. */
.court-barleg {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 9px 2px 0;
  font-size: 12px;
  color: var(--fg-3);
}
.court-barleg span { display: inline-flex; align-items: center; gap: 6px; }
.court-barleg i {
  display: block;
  width: 22px;
  height: 7px;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
  flex: none;
}
.court-barleg .c { background: var(--dk-ink-400); }
.court-barleg .m { background: var(--dk-success); }
.court-barleg .n { background: var(--dk-danger); }

/* Bedrag met een kleine duiding eronder (bv. "1.204 mislukt"). */
.court-sub {
  display: block;
  font-size: 11px;
  color: var(--fg-4);
  font-weight: 400;
  margin-top: 2px;
}

/* ============================================================
   Totaalregel onder een tabel. Uit docs/mockups/court-billing-v1.html:
   de som hoort onderaan te staan en niet alleen in een losse zin
   ernaast — wie een kolom optelt moet zijn uitkomst kunnen vinden.
   ============================================================ */
.court-table tfoot td {
  padding: 11px 14px;
  border-top: 1px solid var(--border-default);
  background: var(--surface-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.court-table tfoot td.num { font-family: var(--font-mono); font-size: 12.5px; }

/* Bedragen en aantallen breken niet af. Zonder dit zet een smalle kolom het
   euroteken op een eigen regel — "€" boven "2.049,44" leest als twee cellen. */
.court-table .num,
.court-table tfoot td.num { white-space: nowrap; }

/* Een alert is een flexrij (icoon + tekst). Losse <b> erin wordt daardoor een
   eigen flex-item dat samengeperst wordt; de lopende tekst hoort één blok te
   zijn dat normaal afbreekt. */
.alert > span,
.alert > div { min-width: 0; }
.alert b { white-space: normal; }

/* ==========================================================================
   Inklapbaar menu (klantmockup A8, court-nav.js)
   De menuknop in de topbar klapt het menu breed in tot een iconenrail van
   64px (html[data-nav="rail"], uit de cookie court-nav) en op de telefoon
   (max. 900px) opent hij een lade. De railregels staan alleen boven 900px:
   de lade toont altijd volledige labels, zo hoeft er niets terug te worden
   gezet. Railregels hangen aan .court-sidebar, zodat de klonen in de
   uitklapper hun gewone menustijl houden.
   ========================================================================== */
.court-menu-btn {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; padding: 0; background: transparent; border: 0;
  border-radius: var(--radius-sm); color: var(--fg-3);
}
.court-menu-btn:hover { background: var(--surface-2); color: var(--fg-1); }
/* Alle vier iconen staan in de knop; welke je ziet hangt af van de stand. */
.court-menu-btn__ic { display: none; }
.court-menu-btn__ic--close { display: flex; }
:root[data-nav="rail"] .court-menu-btn__ic--close { display: none; }
:root[data-nav="rail"] .court-menu-btn__ic--open { display: flex; }

@media (min-width: 901px) {
  :root[data-nav="rail"] .court-shell { grid-template-columns: 64px 1fr; }
  :root[data-nav="rail"] .court-sidebar__brand { padding: 16px 0 14px; }
  :root[data-nav="rail"] .court-sidebar .court-brand-logo,
  :root[data-nav="rail"] .court-sidebar .court-brand-product { display: none !important; }
  :root[data-nav="rail"] .court-brand-env-dot { display: block; }
  :root[data-nav="rail"] .court-brand-mono--light { display: block; }
  :root[data-nav="rail"][data-theme="dark"] .court-brand-mono--light { display: none; }
  :root[data-nav="rail"][data-theme="dark"] .court-brand-mono--dark { display: block; }
  /* Dunne balk, niet verbergen: het teammenu is hoger dan het scherm, de balk zegt dat er meer is. */
  :root[data-nav="rail"] .court-sidebar__nav { padding: 12px 8px; scrollbar-width: thin; }

  /* Labels blijven voorleesbaar (nooit display:none): een link houdt zo zijn naam. */
  :root[data-nav="rail"] .court-sidebar .court-nav-section > span,
  :root[data-nav="rail"] .court-sidebar .court-nav-label,
  :root[data-nav="rail"] .court-sidebar .court-nav-count,
  :root[data-nav="rail"] .court-sidebar .court-ident__txt {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* Een sectiekop wordt een lijn; de eerste valt weg, de lijn naar het platform is sterker. */
  :root[data-nav="rail"] .court-sidebar .court-nav-section {
    position: relative; padding: 0; margin: 10px 6px 8px; height: 1px; background: var(--border-subtle);
  }
  :root[data-nav="rail"] .court-sidebar .court-nav-section--first,
  :root[data-nav="rail"] .court-sidebar .court-nav-section:first-child { display: none; }
  :root[data-nav="rail"] .court-sidebar .court-nav-section--platform {
    margin-top: 18px; border-top: 0; background: var(--border-default);
  }
  :root[data-nav="rail"] .court-sidebar .court-nav-divider { margin: 10px 6px 8px; }
  :root[data-nav="rail"] .court-sidebar .court-nav-item { justify-content: center; padding: 9px 0; }
  :root[data-nav="rail"] .court-sidebar .court-nav-item.active::before { left: -8px; }
  :root[data-nav="rail"] .court-sidebar .court-nav-attn { position: absolute; left: calc(50% + 5px); top: 6px; margin: 0; }

  :root[data-nav="rail"] .court-sidebar .court-ident { justify-content: center; padding: 6px 0; }
  :root[data-nav="rail"] .court-sidebar .court-switch__btn {
    justify-content: center; padding: 6px 0; border-color: transparent; background: transparent;
  }
  :root[data-nav="rail"] .court-sidebar .court-switch__btn > i { display: none; }
  /* De wisselaar klapt naast de rail uit; zonder top valt hij op zijn plek in de stroom (onder de knop). */
  :root[data-nav="rail"] .court-sidebar .court-switch__pop { position: fixed; left: 72px; right: auto; top: auto; width: 260px; }

  /* Voet: alleen de avatar, als accountknop; het menu opent naar rechts. */
  :root[data-nav="rail"] .court-sidebar__foot { flex-direction: column; gap: 0; padding: 10px 0; }
  :root[data-nav="rail"] .court-user__name,
  :root[data-nav="rail"] .court-user-menu__btn { display: none; }
  :root[data-nav="rail"] button.court-avatar { cursor: pointer; }
  :root[data-nav="rail"] .court-user-menu { position: static; margin: 0; }
  :root[data-nav="rail"] .court-user-menu__pop { left: calc(100% + 8px); right: auto; bottom: 8px; min-width: 200px; }
}
@media (min-width: 901px) and (prefers-color-scheme: dark) {
  :root[data-nav="rail"]:not([data-theme="light"]) .court-brand-mono--light { display: none; }
  :root[data-nav="rail"]:not([data-theme="light"]) .court-brand-mono--dark { display: block; }
}

/* Eén gedeelde tooltip (geen title, geen ::after): bij toetsenbordfocus, en voor de menuknop en
   de railavatar ook bij hover. */
.court-tip {
  position: fixed; z-index: 3000; max-width: 300px; padding: 5px 8px; border-radius: 6px;
  background: var(--tip-bg); color: var(--tip-fg); font-size: 12px; line-height: 1.35;
  box-shadow: var(--shadow-md); pointer-events: none; white-space: normal;
}
.court-tip[hidden] { display: none; }

/* Rail-uitklapper: bij hover alleen de groep van het aangewezen item. De ::before-brug vult de
   ruimte tussen rail en uitklapper, zodat de muis er zonder sluiten naartoe kan. */
.court-flyout {
  position: fixed; z-index: 60; min-width: 208px; max-width: 280px; padding: 4px 8px 6px;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.court-flyout[hidden] { display: none; }
.court-flyout::before { content: ""; position: absolute; left: -9px; top: 0; bottom: 0; width: 9px; }
.court-flyout__label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--dk-ink-400); padding: 8px 10px 4px;
}
.court-flyout .court-nav-item:last-child { margin-bottom: 0; }
.court-flyout .court-nav-item.is-hover { background: var(--surface-2); color: var(--fg-1); }
.court-flyout .court-nav-item.active.is-hover { background: var(--dk-ink-50); }

.court-scrim {
  position: fixed; inset: 0; z-index: 40; background: var(--scrim);
  opacity: 0; pointer-events: none; transition: opacity .18s ease-out;
}

/* ----- Telefoon (max. 900px): lade, en de generieke regels voor smalle schermen ----- */
@media (max-width: 900px) {
  .court-shell { grid-template-columns: minmax(0, 1fr); }
  /* Dicht: buiten beeld en onzichtbaar (geen tabstops); visibility pas na het wegschuiven. */
  .court-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 280px; max-width: 86vw; height: auto; z-index: 41;
    box-shadow: var(--shadow-md); transform: translateX(-100%); visibility: hidden;
    transition: transform .22s cubic-bezier(.22,.8,.3,1), visibility 0s linear .22s;
  }
  body[data-drawer] .court-sidebar { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.22,.8,.3,1); }
  body[data-drawer] .court-scrim { opacity: 1; pointer-events: auto; }
  body[data-drawer] { overflow: hidden; }
  .court-menu-btn__ic--close,
  :root[data-nav="rail"] .court-menu-btn__ic--open { display: none; }
  .court-menu-btn__ic--menu { display: flex; }
  body[data-drawer] .court-menu-btn__ic--menu { display: none; }
  body[data-drawer] .court-menu-btn__ic--x { display: flex; }

  .court-topbar { padding: 0 12px; min-height: 52px; height: 52px; gap: 8px; }
  /* Kruimel: alleen het laatste deel. */
  .court-breadcrumbs > *:not(:last-child) { display: none; }
  .court-breadcrumbs__cur { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* .court-topbar ervoor: court-help.css laadt na dit bestand. */
  .court-topbar .court-help-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .court-help-btn__txt { display: none; }
  .court-host { display: none; }

  .court-page { padding: 18px 16px 44px; }
  .court-page-header { flex-wrap: wrap; gap: 12px; }
  .court-page-header h1 { font-size: 19px; }
  .court-page-header__actions { width: 100%; justify-content: flex-start; }
  .court-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .court-stat .value { font-size: 25px; }
  /* Een tabel scrolt binnen zijn kader, niet de pagina. Alleen brede tabellen (vijf kolommen of
     meer) krijgen een minimumbreedte; een smalle tabel past op een telefoon en hoort dan niet
     opzij te scrollen. */
  .court-table-wrap { overflow-x: auto; }
  .court-table--wide { min-width: 640px; }
  .court-row { flex-wrap: wrap; gap: 10px; }
  .court-row__ic { order: 1; }
  .court-row__r { order: 1; margin-left: auto; }
  .court-row__bd { flex: 1 1 100%; order: 2; }
  dl.kv, dl.kv.kv--prose { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  dl.kv dd { margin-bottom: 8px; }
  /* Kopieerdoelen groot genoeg voor een vinger. */
  .install-keys__copy, .install-keys__copy--inline { min-width: 32px; min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .court-shell, .court-sidebar, .court-scrim { transition: none !important; }
}

/* ----- Aan de slag (Overzicht, klantmockup B) -----
   Rijen met deellijnen, geen kader per stap (echte-objecten-regel). Een afgeronde
   stap staat op één regel; de eigenaar-tag rechts zegt wie aan zet is. */
.court-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.court-step {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 4px 12px;
  padding: 14px 2px; border-bottom: 1px solid var(--border-subtle); align-items: start;
}
.court-step__ic { color: var(--fg-4); margin-top: 1px; display: inline-flex; }
.court-step__ic--done { color: var(--dk-success); }
.court-step__t { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.court-step__d { font-size: 12.5px; color: var(--fg-3); max-width: 70ch; margin: 3px 0 0; }
.court-step__subs { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; color: var(--fg-3); }
.court-step__subs li { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.court-step__act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.court-step__owner { justify-self: end; margin-top: 2px; white-space: nowrap; }
.court-step--done .court-step__line { font-size: 13px; color: var(--fg-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.court-step--done .court-step__t { color: var(--fg-3); }
/* Telefoon: de tag onder de tekst, zodat lange stapnamen niet worden platgedrukt. */
@media (max-width: 640px) {
  .court-step { grid-template-columns: 20px 1fr; }
  .court-step__owner { grid-column: 2; justify-self: start; }
}

/* ----- Verbruik: maandkiezer en trend van 12 maanden (klant-UI PR 14) -----
   Geen knop per maand: die lijst groeit elke maand en viel na twaalf af. Vorige/
   volgende plus een lijst per jaar houdt elke maand bereikbaar; de trend laat de
   laatste twaalf zien, de lopende maand gearceerd omdat hij nog niet af is. */
.court-period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.court-period form { display: contents; }
.court-period__step {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--fg-2);
}
a.court-period__step:hover { background: var(--surface-2); color: var(--fg-1); text-decoration: none; }
button.court-period__step { padding: 0; font: inherit; }
.court-period__step:disabled { opacity: .35; cursor: default; }
.court-period select {
  height: 32px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--fg-1); font: 600 13px/1 var(--font-sans); cursor: pointer;
}
.court-period__note { font-size: 12.5px; color: var(--fg-3); margin-left: 6px; }
.court-trend { margin: 0 0 18px; }
.court-trend__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.court-trend__h .court-group__title, .court-trend__h .court-group__desc { margin: 0; }
.court-trend__bars {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 96px;
}
.court-trend__bar {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--fg-4);
  font: 500 11px/1 var(--font-sans); gap: 5px; min-width: 0;
}
.court-trend__bar:disabled { cursor: default; }
.court-trend__fill {
  display: block; border-radius: 3px 3px 0 0; background: var(--dk-ink-300); opacity: .55; min-height: 2px;
  transition: opacity .12s;
}
.court-trend__bar:hover:not(:disabled) .court-trend__fill { opacity: .85; }
.court-trend__bar.is-on .court-trend__fill { background: var(--accent); opacity: 1; }
.court-trend__bar.is-now .court-trend__fill {
  background: repeating-linear-gradient(135deg, var(--dk-ink-300) 0 3px, transparent 3px 6px); opacity: .8;
}
.court-trend__bar.is-on.is-now .court-trend__fill {
  background: repeating-linear-gradient(135deg, var(--accent) 0 3px, transparent 3px 6px);
}
.court-trend__bar.is-on { color: var(--fg-1); font-weight: 600; }
.court-trend__lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.court-trend__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) {
  .court-period__note { flex-basis: 100%; margin: 2px 0 0; }
  .court-trend__bars { gap: 4px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) { .court-trend__fill { transition: none; } }

/* Goedkeuringsscherm MCP-tools: regel-diff tussen de goedgekeurde en de gemelde definitie. Op het vaste
   donkere .code-paneel, dus vaste lichte tinten voor weg en erbij. */
.mcp-diff span { display: block; }
.mcp-diff__del { color: #f2a7a7; background: rgba(220, 70, 70, .18); }
.mcp-diff__add { color: #a9e2b8; background: rgba(60, 170, 100, .18); }
.mcp-diff__same { color: #9aa3ae; }