:root {
    /* ═══════════════════════════════════════════════════════════════════════
     BASE COLORS
     ═══════════════════════════════════════════════════════════════════════ */
    --linkooc-bg: #FFFFFF;
    --linkooc-bg-muted: #FEFEFE;
    --linkooc-hover-bg: #F7F7F8;
    --linkooc-second-bg: #FEFEFE;
    --linkooc-hover-second-bg: #e7f1e8;
    --linkooc-text: #000601;
    --linkooc-text-display: #000601;
    --linkooc-text-secondary: #6d6d6d;
    --linkooc-text-display-second: #22AD01;
    --linkooc-text-display-tertiary: #054810;
    --linkooc-button-primary: #08781B;
    /* Issue 314 — le survol d'un bouton PLEIN ASSOMBRIT son remplissage, il ne
       l'éclaircit pas. Les survols lisaient `--linkooc-text-display-second`
       (#22AD01), le vert vif de l'identité : blanc dessus, 2,98:1, alors que le
       bouton au repos tenait 5,66:1. Un survol change la teinte pour dire « c'est
       cliquable », il ne défait pas la décision de contraste prise au repos.
       #11671E (`--linkooc-green-var-2`, le cran plus foncé de la palette) tient
       7,04:1. Gardé par DarkThemeSurfaceTests.The_solid_button_hover_darkens. */
    --linkooc-button-primary-hover: var(--linkooc-green-var-2);
    --linkooc-button-primary-rgba: rgba(8, 120, 27, 0.5);
    --linkooc-button-secondary: #054810;
    --linkooc-border-color: #dee2e6bf;
    --bs-primary-rgb: 201, 36, 24;
    --bs-danger-rgb: 201, 36, 24;
    --bs-warning-rgb: 201, 118, 24;
    --bs-success-bg-subtle: #d1e7dd;
    --linkooc-reverse-second-bg: #162127;
    --linkooc-reverse-text: #FFFFFF;
    --linkooc-reverse-border-color: #212529;
    /* Issue 312 — l'encre d'un REMPLISSAGE PLEIN (le vert primaire, le rouge de
       confirmation). Blanche dans les DEUX thèmes, comme `--kendo-color-on-primary`
       que Telerik lit déjà : un remplissage plein reste sombre quand le thème
       s'inverse, donc son encre ne s'inverse pas avec lui. Elle n'a volontairement
       PAS de jumelle sous `main.dark-theme` — c'est tout l'intérêt du jeton.

       Elle ne peut pas venir de `--linkooc-reverse-text`, qui est l'encre de l'îlot
       INVERSÉ (`--linkooc-reverse-second-bg`, CLAIR en thème sombre : les infobulles
       `.k-card-reverse` du sélecteur d'établissement), et vaut donc #0a0a0a en
       sombre. C'est ce noir-là qui habillait « Enregistrer », le crayon des listes
       et les puces de filtre : 3,92:1 sur le vert plein #178029, sous le seuil AA.
       Gardé par DarkThemeSurfaceTests.The_solid_fill_ink_is_white_in_both_themes. */
    --linkooc-on-solid: #FFFFFF;
    /* Issue 313 — le vert quand il est de l'ENCRE : un texte, l'onglet actif, un
       lien, un picto, le souligné qui accompagne ce texte. Par opposition à
       `--linkooc-button-primary`, qui est le REMPLISSAGE d'un bouton plein.

       En thème CLAIR c'est le même vert, au pixel près : les deux rôles tiennent
       sur la même teinte quand la page est blanche. En thème sombre ils divergent,
       et c'est normal — un remplissage doit rester assez sombre pour porter du
       blanc (#288), une encre doit être assez claire pour se lire sur la page.
       Même partage que `--aia-green` / `--aia-green-solid` dans le tiroir de
       l'Assistant (#275).
       Gardé par DarkThemeSurfaceTests.The_green_ink_is_readable_in_both_themes. */
    --linkooc-primary-ink: var(--linkooc-button-primary);
    /* ═══════════════════════════════════════════════════════════════════════
     COLOR PALETTE VARIANTS
     ═══════════════════════════════════════════════════════════════════════ */
    --linkooc-green-var-1: #197C28;
    --linkooc-green-var-2: #11671E;
    --linkooc-green-var-3: #085215;
    --linkooc-green-var-4: #054411;
    --linkooc-green-var-5: #053D11;
    --linkooc-green-var-6: #063511;
    /* ═══════════════════════════════════════════════════════════════════════
     GREEN SCALE (Light Mode) - Based on #08781B
     50-400: Lighter tints | 500: Base | 600-900: Darker shades
     ═══════════════════════════════════════════════════════════════════════ */
    --linkooc-green-50: #A5B8A5;
    --linkooc-green-100: #79AB7B;
    --linkooc-green-200: #579E5C;
    --linkooc-green-300: #399142;
    --linkooc-green-400: #1E852C;
    --linkooc-green-500: #08781B;
    /* Primary base */
    --linkooc-green-600: #025212;
    --linkooc-green-700: #002B0A;
    --linkooc-green-800: #000501;
    --linkooc-green-900: #000000;
    --linkooc-blue-var-1: #197CBA;
    --linkooc-blue-var-2: #1167A1;
    --linkooc-blue-var-3: #085285;
    --linkooc-blue-var-4: #054471;
    --linkooc-blue-var-5: #053D61;
    --linkooc-blue-var-6: #063551;
    --linkooc-red-var-1: #BA1919;
    --linkooc-red-var-2: #A11111;
    --linkooc-red-var-3: #850808;
    --linkooc-red-var-4: #710505;
    --linkooc-red-var-5: #610505;
    --linkooc-red-var-6: #510505;
    --linkooc-orange-var-1: #FFA500;
    --linkooc-orange-var-2: #FF8C00;
    --linkooc-orange-var-3: #FF7F50;
    --linkooc-orange-var-4: #FF6347;
    --linkooc-orange-var-5: #FF4500;
    --linkooc-orange-var-6: #FF3300;
    /* ═══════════════════════════════════════════════════════════════════════
     BRAND GRADIENT (Green → Teal → Blue)
     Use for headers, progress bars, decorative elements
     ═══════════════════════════════════════════════════════════════════════ */
    --linkooc-gradient-1: #08781B;
    /* Primary green */
    --linkooc-gradient-2: #008251;
    /* Teal-green */
    --linkooc-gradient-3: #008A82;
    /* Teal */
    --linkooc-gradient-4: #008FAD;
    /* Teal-blue */
    --linkooc-gradient-5: #0090CB;
    /* Light blue */
    --linkooc-gradient-6: #078ED9;
    /* Blue */
    /* Ready-to-use gradient backgrounds */
    --linkooc-gradient-horizontal: linear-gradient(90deg, var(--linkooc-gradient-1), var(--linkooc-gradient-6));
    --linkooc-gradient-vertical: linear-gradient(180deg, var(--linkooc-gradient-1), var(--linkooc-gradient-6));
    --linkooc-gradient-diagonal: linear-gradient(135deg, var(--linkooc-gradient-1), var(--linkooc-gradient-6));
    --linkooc-gradient-subtle: linear-gradient(90deg, var(--linkooc-gradient-1), var(--linkooc-gradient-3));
    /* ═══════════════════════════════════════════════════════════════════════
     SEMANTIC COLORS (use these in components)
     ═══════════════════════════════════════════════════════════════════════ */
    --linkooc-primary: var(--linkooc-button-primary);
    --linkooc-primary-light: var(--linkooc-hover-second-bg);
    --linkooc-primary-subtle: rgba(8, 120, 27, 0.1);
    --linkooc-danger: var(--linkooc-red-var-1);
    --linkooc-danger-light: rgba(186, 25, 25, 0.1);
    /* Le rouge dont le role est de PORTER DU BLANC (plan 530) : fond du bouton de
       confirmation d'un LkConfirm. Distinct de --linkooc-danger, qui sert d'abord a
       du texte rouge. Blanc sur #BA1919 = 6,49:1 ; sur le survol #8E1313 = 9,32:1 —
       les deux au-dessus du seuil AA de 4,5:1 (meme discipline que warning-strong). */
    --linkooc-danger-solid: var(--linkooc-red-var-1);
    --linkooc-danger-solid-hover: #8E1313;
    --linkooc-warning: var(--linkooc-orange-var-1);
    --linkooc-warning-light: rgba(255, 165, 0, 0.1);
    --linkooc-warning-strong: #8a5c00; /* 5,25:1 sur warning-surface — 9a6700 tombait a 4,39 (gate 413) */
    --linkooc-warning-surface: #fff3cd;
    --linkooc-warning-border: #ffe69c;
    --linkooc-success: var(--linkooc-green-var-1);
    --linkooc-success-light: rgba(25, 124, 40, 0.1);
    --linkooc-info: var(--linkooc-blue-var-1);
    --linkooc-info-light: rgba(25, 124, 186, 0.1);
    /* Issue 251 — les SURFACES pâles des pastilles. `--linkooc-warning-surface`
       existait seul ; `LkBadge.razor.css` écrivait les trois autres en repli
       (`var(--linkooc-success-surface, #d1e7dd)`), donc en dur : l'encre suivait
       le thème, le fond restait clair — #4899e8 sur #cce5ff, mesuré à 2,32:1 en
       sombre. Les quatre se lisent maintenant ensemble, ici et sous
       `main.dark-theme`. Mêmes valeurs qu'avant en clair. */
    --linkooc-success-surface: #d1e7dd;
    --linkooc-danger-surface: #f8d7da;
    --linkooc-info-surface: #cce5ff;
    --linkooc-text-primary: var(--linkooc-text);
    --linkooc-text-muted: var(--linkooc-text-secondary);
    --linkooc-surface: var(--linkooc-second-bg);
    --linkooc-surface-hover: var(--linkooc-hover-bg);
    /* ═══════════════════════════════════════════════════════════════════════
     SPACING
     ═══════════════════════════════════════════════════════════════════════ */
    --linkooc-spacing-xs: 0.25rem;
    --linkooc-spacing-sm: 0.5rem;
    --linkooc-spacing-md: 1rem;
    --linkooc-spacing-lg: 1.5rem;
    --linkooc-spacing-xl: 2rem;
    --linkooc-spacing-2xl: 3rem;
    --linkooc-page-offset: calc(3.5rem + 2.05rem);
    /* top-row + content padding */
    /* ═══════════════════════════════════════════════════════════════════════
     TYPOGRAPHY - Font Sizes
     Use these instead of hardcoding rem values!
     ═══════════════════════════════════════════════════════════════════════ */
    /* Doit rester aligné sur `site.css` (html, body) — le produit tourne en Inter. */
    --linkooc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Page header hierarchy */
    --linkooc-page-title-size: 1.5rem;
    /* 24px - Main page title (h1) */
    --linkooc-page-title-weight: 600;
    --linkooc-page-count-size: 1rem;
    /* 16px - Count next to title */
    --linkooc-page-subtitle-size: 0.875rem;
    /* 14px - Gray subtitle below title */
    --linkooc-breadcrumb-size: 0.8125rem;
    /* 13px - Breadcrumb navigation */
    /* Panel headers */
    --linkooc-detail-title-size: 1.125rem;
    /* 18px - Detail panel header title */
    --linkooc-detail-title-weight: 600;
    --linkooc-section-title-size: 1rem;
    /* 16px - Section headers within content */
    --linkooc-section-title-weight: 600;
    /* List items */
    --linkooc-list-item-title-size: 0.9375rem;
    /* 15px - List item primary text */
    --linkooc-list-item-title-weight: 600;
    --linkooc-list-item-desc-size: 0.8125rem;
    /* 13px - List item secondary/muted text */
    /* Body text */
    --linkooc-body-size: 0.875rem;
    /* 14px - Default body text */
    --linkooc-small-size: 0.75rem;
    /* 12px - Small/caption text */
    --linkooc-tiny-size: 0.65rem;
    /* ~10px - Badges, micro text */
    /* Form labels */
    --linkooc-label-size: 0.875rem;
    /* 14px - Form field labels */
    --linkooc-label-weight: 500;
    --linkooc-input-size: 0.875rem;
    /* 14px - Input text */
    /* ═══════════════════════════════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════════════════════════════ */
    --linkooc-radius: 1.5rem;
    --linkooc-radius-sm: 0.5rem;
    --linkooc-radius-md: 0.75rem;
    --linkooc-radius-lg: 1rem;
    /* Dimensions des CONTRÔLES (boutons, champs, onglets) — plan 407.
       Ne sont lues QUE dans le bloc `@media (min-width: 769px)` en fin de
       fichier : sous 769px, le plancher tactile de 44px des plans 393/399
       fait autorité et ces jetons ne doivent jamais s'y substituer. */
    --linkooc-control-height: 32px;
    /* La PILULE est la direction artistique Linkooc, arbitrage opérateur du
       2026-08-08. Ce jeton lit `--linkooc-radius` (24px) au lieu du 10px de la
       cheatsheet produit : à 32px de haut le navigateur ramène 24px à 16px,
       soit une capsule parfaite — exactement le rendu d'avant le plan 407,
       qui posait r24 sur des contrôles de 37/38px.
       Ne PAS remettre un nombre en dur ici : la campagne 405-407 existe
       précisément parce que des valeurs concurrentes doublaient les jetons. */
    --linkooc-control-radius: var(--linkooc-radius);
    --linkooc-panel-header-height: 56px;
    --linkooc-sticky-bar-height: 48px;
    --linkooc-sidebar-width: 280px;
    --linkooc-detail-min-width: 400px;
    /* ═══════════════════════════════════════════════════════════════════════
     LIST SELECTION STATES
     ═══════════════════════════════════════════════════════════════════════ */
    --linkooc-list-selection-bg: var(--linkooc-primary-subtle);
    --linkooc-list-selection-border-color: var(--linkooc-primary);
    --linkooc-list-hover-bg: var(--linkooc-hover-bg);
    /* ═══════════════════════════════════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════════════════════════════════ */
    --linkooc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --linkooc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --linkooc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --linkooc-shadow-sticky: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* ═══════════════════════════════════════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════════════════════════════════════ */
    --linkooc-transition-fast: 150ms ease;
    --linkooc-transition-normal: 250ms ease;
    --linkooc-transition-slow: 350ms ease;
    /* Linkooc -> MatrixComponents tokens */
    /* Issue 329 — le pont porte le SENS, pas seulement la couleur :
       `--matrix-primary` est le REMPLISSAGE (un fond, une bordure de focus),
       `--matrix-primary-dark` son SURVOL, `--matrix-primary-ink` l'ENCRE des
       liens et libellés accentués. Sans la dernière, le fil d'Ariane d'Admin
       peignait son texte avec le vert de remplissage — 3,79:1 en sombre, le
       défaut de l'issue 313 passé à travers un alias ; sans la deuxième, son
       survol retombait sur le bleu d'origine de MatrixComponents (2,89:1). */
    --matrix-primary: var(--linkooc-button-primary);
    --matrix-primary-dark: var(--linkooc-button-primary-hover);
    --matrix-primary-ink: var(--linkooc-primary-ink);
    --matrix-secondary: var(--linkooc-text-display);
    --matrix-success: var(--linkooc-text-display-second);
    --matrix-danger: var(--linkooc-red-var-1);
    --matrix-warning: var(--linkooc-orange-var-1);
    --matrix-bg: var(--linkooc-bg);
    --matrix-bg-primary: var(--linkooc-surface);
    --matrix-surface: var(--linkooc-second-bg);
    --matrix-border: var(--linkooc-border-color);
    --matrix-text: var(--linkooc-text);
    --matrix-text-muted: var(--linkooc-text-secondary);
    /* ⚠️ Plan 454 — `--matrix-text` / `--matrix-text-muted` ci-dessus ne sont lus
       par PERSONNE dans `matrix-components.css` : ce fichier écrit son texte avec
       `--matrix-text-primary` / `-secondary` / `-tertiary` (matrix-components.css:26-28),
       qui n'étaient pas repris ici. Le fond suivait donc le thème pendant que
       l'encre restait figée en clair — titre de carte #323338 sur fond #171717
       (1,4:1) en thème sombre. Le pont ci-dessous est le correctif.
       Ne pas « corriger » page par page : c'est ici, ou nulle part.

       ⚠️ Une propriété personnalisée est substituée LÀ OÙ ELLE EST DÉCLARÉE, pas
       là où elle est lue. Déclarer `--matrix-text-primary: var(--linkooc-text)`
       au seul `:root` fige donc l'encre CLAIRE et la fait hériter jusque dans
       `main.dark-theme` — mesuré le 2026-08-12 : titre encore #000601 sur
       #171717 (1,14:1), pire qu'avant. Chaque jeton ajouté ici DOIT être repris
       dans le bloc `main.dark-theme`, exactement comme `--matrix-bg-primary`
       l'était déjà. Les deux listes se lisent ensemble. */
    --matrix-text-primary: var(--linkooc-text);
    --matrix-text-secondary: var(--linkooc-text-secondary);
    --matrix-text-tertiary: var(--linkooc-text-secondary);
    /* Les FONDS de survol/panneau de MatrixComponents doivent suivre le même
       chemin, sinon l'encre devient claire au-dessus d'un gris resté clair :
       `.matrix-record-grid tbody tr:hover`, `.matrix-btn-outline:hover`,
       `.matrix-modal-footer`, `.linkooc-refresh-btn:hover` et la pagination
       lisaient encore #f5f6f8 / #f8f9fa / #f1f3f4 en thème sombre. Valeurs
       Linkooc quasi identiques en clair (#F7F7F8 contre #f5f6f8). */
    --matrix-bg-secondary: var(--linkooc-hover-bg);
    --matrix-bg-tertiary: var(--linkooc-hover-bg);
    --matrix-bg-hover: var(--linkooc-hover-bg);
    --matrix-radius: 12px;
    /* Linkooc -> Telerik (Kendo) tokens */
    --kendo-color-primary: var(--linkooc-button-primary);
    --kendo-color-primary-hover: var(--linkooc-button-primary-hover);
    --kendo-color-primary-emphasis: var(--linkooc-button-primary-rgba);
    --kendo-color-primary-on-subtle: var(--linkooc-green-var-4);
    /* Issue 251 — `linkooc-telerik.css` lit `var(--kendo-color-primary-on-surface,
       #08781B)` et personne ne déclarait le jeton : le repli CLAIR gagnait dans les
       deux thèmes (« septembre 2026 » de l'en-tête du calendrier, 2,95:1 en sombre).
       Même valeur qu'avant en clair. */
    --kendo-color-primary-on-surface: var(--linkooc-primary-ink);
    --kendo-color-on-primary: var(--linkooc-reverse-text);
    --kendo-color-base: var(--linkooc-bg);
    --kendo-color-on-base: var(--linkooc-text-display);
    --kendo-color-app-surface: var(--linkooc-bg);
    --kendo-color-surface: var(--linkooc-second-bg);
    --kendo-color-surface-alt: var(--linkooc-hover-bg);
    --kendo-color-on-app-surface: var(--linkooc-text);
    --kendo-color-subtle: var(--linkooc-text-secondary);
    --kendo-color-border: var(--linkooc-border-color);
    --kendo-color-info: var(--linkooc-blue-var-1);
    --kendo-color-success: var(--linkooc-green-var-1);
    --kendo-color-warning: var(--linkooc-orange-var-1);
    --kendo-color-error: var(--linkooc-red-var-1);
    --kendo-border-radius-md: var(--linkooc-radius);
}

main.dark-theme {
  /* ═══════════════════════════════════════════════════════════════════════
     DARK MODE OVERHAUL
     Inspired by: Linear, Vercel, GitHub, Notion, Figma
     Key principles:
       1. Multi-level surfaces (not flat) — Linear approach
       2. Semi-transparent borders — Vercel approach
       3. Desaturated accent green — GitHub approach
       4. Opacity-based text hierarchy — Notion approach
       5. Subtle tinted selections — Figma approach
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── SURFACE LAYERING (Linear-inspired) ─────────────────────────────
     3 distinct surface levels create natural depth without shadows.
     Each layer is ~8-12% lighter than its parent.
     Old: bg #181818 / second-bg #162127 (blue-tinted, too close)
     New: true neutral grays with clear separation                    */
  --linkooc-bg: #0f0f0f;
  --linkooc-bg-muted: #141414;
  --linkooc-hover-bg: #1e1e1e;
  --linkooc-second-bg: #171717;
  --linkooc-hover-second-bg: #1a2e1e;

  /* ── TEXT HIERARCHY (Notion-inspired) ───────────────────────────────
     Using high-contrast white for primary, then stepping down opacity
     via actual hex values (more predictable than rgba in cascading vars).
     Old: #FFFFFF / #a0a0a0 (only 2 levels, muted was too dark)
     New: 4-tier system for clear readability                         */
  --linkooc-text: rgba(255, 255, 255, 0.92);
  --linkooc-text-display: rgba(255, 255, 255, 0.95);
  --linkooc-text-secondary: rgba(255, 255, 255, 0.55);
  --linkooc-text-display-tertiary: rgba(255, 255, 255, 0.35);

  /* ── ACCENT GREEN — DESATURATED (GitHub-inspired) ──────────────────
     Light mode green (#22AD01) is too vivid in dark mode — eye-searing.
     GitHub desaturates ~15-20% and reduces brightness for dark mode.
     Old: #22AD01 (same as light mode — neon glow)
     New: softer, more muted green that reads well on dark surfaces    */
  --linkooc-text-display-second: #34a853;
  /* Issue 288 : le vert PLEIN porte du BLANC — c'est le fond de tous les boutons
     pleins du BackOffice sombre (« Tout accepter » du tiroir de l'Assistant via
     --aia-green-solid, et les boutons Telerik via --kendo-color-on-primary).
     #1a8a30 tombait pile entre deux encres : 4,45:1 en blanc, sous le seuil AA.
     #178029 le remonte à 5,05:1 et se détache encore de la page (3,79:1 sur
     #0f0f0f, au-dessus des 3:1 des composants). Le vert ENCRE du sombre ne bouge
     pas : c'est --linkooc-text-display-second juste au-dessus, éclairci exprès
     pour être lu SUR une surface sombre. Gardé par
     DarkThemeSurfaceTests.The_dark_solid_green_carries_white_ink_above_AA. */
  --linkooc-button-primary: #178029;
  /* Issue 314 — le survol du sombre, coincé entre deux seuils. Il doit être assez
     SOMBRE pour porter du blanc (≥ 4,5:1) et assez CLAIR pour que le bouton se
     détache encore de la page #0f0f0f (≥ 3:1, seuil des composants). #14712a tient
     les deux : 6,13:1 en blanc, 3,13:1 sur la page — un cran plus foncé que le
     repos #178029 (5,05:1 / 3,79:1), sans virer au vert boueux. L'ancien survol
     éclaircissait (#34a853, 3,06:1) : c'est le défaut. */
  --linkooc-button-primary-hover: #14712a;
  --linkooc-button-primary-rgba: rgba(23, 128, 41, 0.45);
  --linkooc-button-secondary: #14712a;
  /* Issue 313 — l'encre verte du sombre. Le vert de REMPLISSAGE ci-dessus ne
     mesure que 3,79:1 sur la page #0f0f0f : il est assombri pour porter du blanc,
     pas pour être lu. Le vert d'affichage, lui, est éclairci exprès pour une
     surface sombre et tient 6,27:1 — c'est déjà lui que lisent --aia-green (#275)
     et --kendo-color-primary-on-surface (#251). Les 216 règles qui posaient le
     remplissage en position de texte (onglet actif, fil d'Ariane, en-têtes de
     page, liens) lisent ce jeton-ci. */
  --linkooc-primary-ink: var(--linkooc-text-display-second);

  /* ── BORDERS — SEMI-TRANSPARENT (Vercel-inspired) ──────────────────
     Vercel uses hsla(0,0%,100%, 0.08-0.12) for borders.
     Semi-transparent white adapts to any surface level automatically.
     Old: #3a3a3a (solid gray — dead, invisible on dark surfaces)
     New: translucent white that creates subtle structure              */
  --linkooc-border-color: rgba(255, 255, 255, 0.08);

  /* Reverse tokens (for elements that need light-on-dark inversion) */
  --linkooc-reverse-second-bg: #FAFAFA;
  --linkooc-reverse-text: #0a0a0a;
  --linkooc-reverse-border-color: rgba(0, 0, 0, 0.12);

  /* ── SEMANTIC COLORS — TUNED FOR DARK (GitHub-inspired) ────────────
     Bump alpha to ~0.12-0.15 range for subtle tinted backgrounds.
     Old: 0.2 alpha was too heavy — created muddy colored blocks.
     New: lighter touch, visible but not overpowering                  */
  --linkooc-primary: var(--linkooc-button-primary);
  --linkooc-primary-light: #1a2e1e;
  --linkooc-primary-subtle: rgba(26, 138, 48, 0.10);
  --linkooc-danger: #e5534b;
  --linkooc-danger-light: rgba(229, 83, 75, 0.12);
  /* Plan 530 : le rouge PLEIN ne peut pas suivre --linkooc-danger en sombre —
     du blanc sur #e5534b ne mesure que 3,70:1, sous le seuil AA. #C62828 remonte
     a 5,62:1 et son survol #D32F2F a 4,98:1, tout en restant plus clair que le
     rouge du theme clair, ce que demande une surface sombre. */
  --linkooc-danger-solid: #C62828;
  --linkooc-danger-solid-hover: #D32F2F;
  --linkooc-warning: #d29922;
  --linkooc-warning-light: rgba(210, 153, 34, 0.12);
  --linkooc-warning-strong: #e3b341;
  --linkooc-warning-surface: rgba(227, 179, 65, 0.12);
  --linkooc-warning-border: rgba(227, 179, 65, 0.30);
  --linkooc-success: #34a853;
  --linkooc-success-light: rgba(52, 168, 83, 0.12);
  --linkooc-info: #58a6ff;
  --linkooc-info-light: rgba(88, 166, 255, 0.12);

  /* ── SURFACES & STATES ─────────────────────────────────────────────  */
  --linkooc-surface: var(--linkooc-second-bg);
  --linkooc-surface-hover: var(--linkooc-hover-bg);

  /* ── LIST SELECTION (Figma-inspired) ───────────────────────────────
     Figma uses low-opacity brand tint + accent left border.
     Old: rgba(8,120,27, 0.2) — heavy green block, swallows text.
     New: very subtle tint — the left border does the heavy lifting    */
  --linkooc-list-selection-bg: rgba(26, 138, 48, 0.08);
  --linkooc-list-selection-border-color: #34a853;
  --linkooc-list-hover-bg: rgba(255, 255, 255, 0.04);

  /* ── GREEN SCALE — DARK MODE OPTIMIZED ─────────────────────────────
     Spread is wider for better distinction between levels.
     Lower end is slightly warmer to avoid "dead" look                 */
  --linkooc-green-50: #0d1a0f;
  --linkooc-green-100: #0f2413;
  --linkooc-green-200: #122e17;
  --linkooc-green-300: #15391c;
  --linkooc-green-400: #194a22;
  --linkooc-green-500: #1a8a30;
  --linkooc-green-600: #34a853;
  --linkooc-green-700: #4cba68;
  --linkooc-green-800: #6fcc82;
  --linkooc-green-900: #95daa3;

  /* ── COLOR PALETTE VARIANTS — ADAPTED FOR DARK ─────────────────────  */
  --linkooc-green-var-1: #34a853;
  --linkooc-green-var-2: #2d9249;
  --linkooc-green-var-3: #257c3e;
  --linkooc-green-var-4: #1e6634;
  --linkooc-green-var-5: #185229;
  --linkooc-green-var-6: #123d1f;
  --linkooc-blue-var-1: #58a6ff;
  --linkooc-blue-var-2: #4899e8;
  --linkooc-blue-var-3: #388bd2;
  --linkooc-blue-var-4: #2d7bbc;
  --linkooc-blue-var-5: #236ba5;
  --linkooc-blue-var-6: #1a5b8f;
  --linkooc-red-var-1: #e5534b;
  --linkooc-red-var-2: #d4443c;
  --linkooc-red-var-3: #c3352e;
  --linkooc-red-var-4: #b12721;
  --linkooc-red-var-5: #9e1b15;
  --linkooc-red-var-6: #8b100c;
  --linkooc-orange-var-1: #d29922;
  --linkooc-orange-var-2: #c48b17;
  --linkooc-orange-var-3: #b57d0d;
  --linkooc-orange-var-4: #a76f05;
  --linkooc-orange-var-5: #986100;
  --linkooc-orange-var-6: #895300;

  /* ── GRADIENTS — DESATURATED FOR DARK ──────────────────────────────  */
  --linkooc-gradient-1: #1a8a30;
  --linkooc-gradient-2: #0e7a4c;
  --linkooc-gradient-3: #087a72;
  --linkooc-gradient-4: #0a7a98;
  --linkooc-gradient-5: #1078b5;
  --linkooc-gradient-6: #1a74c2;

  /* ── SHADOWS — GLOW INSTEAD OF DARKNESS ────────────────────────────
     In dark mode, shadows don't create depth (everything is dark).
     Instead: softer, slightly larger spreads + subtle glow.
     Old: just heavier black shadows (invisible on dark bg)
     New: wider, softer shadows with slight ambient lift               */
  --linkooc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --linkooc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --linkooc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --linkooc-shadow-sticky: 0 -2px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* ── MATRIX COMPONENT TOKENS — DARK OVERRIDES ──────────────────────
     Miroir OBLIGATOIRE du pont Linkooc → MatrixComponents déclaré au `:root`
     (cf. l'avertissement qui l'accompagne) : une propriété personnalisée est
     substituée là où elle est DÉCLARÉE. Sans cette reprise, `var(--linkooc-*)`
     y est résolu avec les valeurs CLAIRES et hérite telle quelle ici.
     Toute ligne ajoutée là-haut se réécrit ici. */
  --matrix-bg-primary: var(--linkooc-surface);
  --matrix-text-primary: var(--linkooc-text);
  --matrix-text-secondary: var(--linkooc-text-secondary);
  --matrix-text-tertiary: var(--linkooc-text-secondary);
  --matrix-bg-secondary: var(--linkooc-hover-bg);
  --matrix-bg-tertiary: var(--linkooc-hover-bg);
  --matrix-bg-hover: var(--linkooc-hover-bg);

  /* ── LE RESTE DU PONT — issue 251 ───────────────────────────────────
     Le 454 n'avait repris ici que le sous-ensemble `--matrix-*` dont il avait
     besoin. Les autres ALIAS déclarés au `:root` (`--linkooc-text-primary`,
     le pont Kendo au complet, les dégradés composés) y étaient substitués avec
     les valeurs CLAIRES puis héritaient tels quels jusqu'ici : mesuré le
     2026-09-10, « Bonjour Mathieu ! » en #000601 sur #0f0f0f (1,07:1), et les
     surfaces Telerik restées à #F7F7F8.

     RÈGLE, tenue par un test : tout alias du `:root` qui dépend d'un jeton
     redéclaré ci-dessus DOIT avoir sa ligne jumelle ici
     (`LinkoocBackOffice.Tests/Unit/Shared/DarkThemeTokenBridgeTests.cs`).   */
  --linkooc-text-primary: var(--linkooc-text);
  --linkooc-text-muted: var(--linkooc-text-secondary);

  /* Surfaces pâles des pastilles : en sombre, une teinte de la couleur sur le
     fond, même forme que `--linkooc-warning-surface` juste au-dessus. */
  --linkooc-success-surface: rgba(52, 168, 83, 0.15);
  --linkooc-danger-surface: rgba(229, 83, 75, 0.15);
  --linkooc-info-surface: rgba(88, 166, 255, 0.15);

  /* Dégradés composés : le `:root` les assemble à partir de
     `--linkooc-gradient-1..6`, donc avec les teintes CLAIRES. */
  --linkooc-gradient-horizontal: linear-gradient(90deg, var(--linkooc-gradient-1), var(--linkooc-gradient-6));
  --linkooc-gradient-vertical: linear-gradient(180deg, var(--linkooc-gradient-1), var(--linkooc-gradient-6));
  --linkooc-gradient-diagonal: linear-gradient(135deg, var(--linkooc-gradient-1), var(--linkooc-gradient-6));
  --linkooc-gradient-subtle: linear-gradient(90deg, var(--linkooc-gradient-1), var(--linkooc-gradient-3));

  /* Pont Linkooc → MatrixComponents, la part que le 454 n'avait pas reprise. */
  --matrix-primary: var(--linkooc-button-primary);
  --matrix-primary-dark: var(--linkooc-button-primary-hover);
  --matrix-primary-ink: var(--linkooc-primary-ink);
  --matrix-secondary: var(--linkooc-text-display);
  --matrix-success: var(--linkooc-text-display-second);
  --matrix-danger: var(--linkooc-red-var-1);
  --matrix-warning: var(--linkooc-orange-var-1);
  --matrix-bg: var(--linkooc-bg);
  --matrix-surface: var(--linkooc-second-bg);
  --matrix-border: var(--linkooc-border-color);
  --matrix-text: var(--linkooc-text);
  --matrix-text-muted: var(--linkooc-text-secondary);

  /* Pont Linkooc → Telerik (Kendo). `--kendo-color-on-app-surface` seul est lu
     259 fois par `linkooc-telerik.css` : c'est l'encre de tous les composants
     Telerik, et elle restait #000601. */
  --kendo-color-primary: var(--linkooc-button-primary);
  --kendo-color-primary-hover: var(--linkooc-button-primary-hover);
  --kendo-color-primary-emphasis: var(--linkooc-button-primary-rgba);
  --kendo-color-base: var(--linkooc-bg);
  --kendo-color-on-base: var(--linkooc-text-display);
  --kendo-color-app-surface: var(--linkooc-bg);
  --kendo-color-surface: var(--linkooc-second-bg);
  --kendo-color-surface-alt: var(--linkooc-hover-bg);
  --kendo-color-on-app-surface: var(--linkooc-text);
  --kendo-color-subtle: var(--linkooc-text-secondary);
  --kendo-color-border: var(--linkooc-border-color);
  --kendo-color-info: var(--linkooc-blue-var-1);
  --kendo-color-success: var(--linkooc-green-var-1);
  --kendo-color-warning: var(--linkooc-orange-var-1);
  --kendo-color-error: var(--linkooc-red-var-1);
  /* Deux « encres POSÉES SUR » qui ne se recopient pas telles quelles : leur
     fond ne s'inverse pas avec le thème. `on-primary` est le texte du bouton
     vert plein — blanc dans les deux thèmes (`--linkooc-reverse-text` vaut
     #0a0a0a ici, ce qui donnerait du noir sur #1a8a30, 4,46:1). `on-subtle`
     est l'encre posée sur une teinte verte, claire ici, donc elle s'éclaircit
     au lieu de foncer. */
  --kendo-color-on-primary: #ffffff;
  --kendo-color-primary-on-subtle: var(--linkooc-text-display-second);
  /* Même raison que `on-subtle` : c'est du vert POSÉ SUR une surface, qui est
     sombre ici. Le vert désaturé du sombre donne 5,46:1 sur #1e1e1e. Depuis
     l'issue 313 ce n'est plus une valeur à part : c'est l'encre verte du thème,
     celle que lisent aussi l'onglet actif et le fil d'Ariane. */
  --kendo-color-primary-on-surface: var(--linkooc-primary-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   L'ENCRE DE LECTURE PAR DEFAUT (issue 251)
   Bootstrap pose `body { color: var(--bs-body-color) }` = #212529. Tout ce qui
   n'écrit pas sa propre couleur en hérite — titres de carte Matrix, cellules,
   corps de texte : mesuré le 2026-09-10, « Carte La Source » en #212529 sur
   #171717 (1,16:1). Une seule règle ici remplace le défaut Bootstrap par le
   jeton du thème ; ce n'est PAS un empilement page par page.

   Elle est volontairement limitée au bloc sombre : le thème clair garde le
   #212529 de Bootstrap, donc cette règle-ci n'y déplace aucun pixel.
   ═══════════════════════════════════════════════════════════════════════ */
main.dark-theme {
  color: var(--linkooc-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   LA SURFACE DES CHAMPS DE SAISIE (issue 267)

   Même piège que l'encre ci-dessus, côté FOND. Bootstrap pose
   `.form-control { background-color: var(--bs-body-bg) }` = #fff, et aucune
   feuille Linkooc ne le reprend : `.linkooc-search-input` ne déclare que sa
   bordure et son gabarit. En sombre, le champ « Rechercher… » de
   `/billing-establishments` était donc un rectangle blanc de 16 908 px²
   (mesuré le 2026-09-11 au banc) — et son texte d'invite, qui lit
   `--matrix-text-tertiary`, y écrivait du blanc à 55 % sur blanc : 1,08:1,
   invisible. L'encre suivait le thème, le fond non : la paire était cassée.

   Une seule règle la répare pour tous les champs Bootstrap du produit — ce
   n'est PAS un empilement page par page, et les champs Telerik (`.k-input`)
   ont déjà leur pont de jetons. Le chevron du `<select>` est redessiné en
   clair : le SVG en dur de Bootstrap est gris #343a40, invisible sur une
   surface sombre.

   Bloc réservé au thème sombre : le clair garde les défauts Bootstrap, donc
   pas un pixel n'y bouge.
   ═══════════════════════════════════════════════════════════════════════ */
main.dark-theme .form-control,
main.dark-theme .form-select {
  background-color: var(--linkooc-bg-muted);
  color: var(--linkooc-text);
  border-color: var(--linkooc-border-color);
}

main.dark-theme .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b4b4b4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

main.dark-theme .form-control::placeholder {
  color: var(--linkooc-text-secondary);
}

/* « Désactivé » restait lisible comme tel avant cette issue (gris #e9ecef de
   Bootstrap) : la règle ci-dessus le recouvrirait, donc elle garde sa jumelle.
   Une info déjà encodée, pas une de plus. */
main.dark-theme .form-control:disabled,
main.dark-theme .form-control[readonly],
main.dark-theme .form-select:disabled {
  background-color: var(--linkooc-hover-bg);
  color: var(--linkooc-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHIE DE BASE — les jetons ci-dessus sont enfin LUS (plan 402)
   Avant : `--linkooc-body-size`, `--linkooc-label-size` et
   `--linkooc-label-weight` étaient déclarés et consommés par personne ; le
   corps de page et les 199 `.form-label` tombaient sur les défauts Bootstrap
   (16px / 400).

   ⚠️ Ne JAMAIS poser ces valeurs sur `html` : la racine fixe l'unité `rem` de
   tout le produit, Telerik compris. `body` ne fixe que l'héritage.
   ═══════════════════════════════════════════════════════════════════════ */
body {
  font-size: var(--linkooc-body-size, 0.875rem);
}

/* Choix opérateur du 2026-08-07 (option B) : 14px / 500 en encre Linkooc.
   Le 14px/600 gris #495057 de `linkooc-matrix.css` a été écarté — ce gris
   est un défaut Bootstrap, pas un jeton Linkooc. */
.form-label {
  font-size: var(--linkooc-label-size, 0.875rem);
  font-weight: var(--linkooc-label-weight, 500);
  color: var(--linkooc-text-primary);
}

.rounded {
  border-radius: var(--linkooc-radius, 1.5rem) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ESTABLISHMENT QR CARD (Sidebar)
   ═══════════════════════════════════════════════════════════════════════ */
.establishment-qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--linkooc-bg);
  border: 1px solid var(--linkooc-border-color);
  border-radius: var(--linkooc-radius-md, 0.75rem);
  padding: 0.375rem 0.5rem;
  /* Tighter padding */
  gap: 0.25rem;
  /* Minimal gap */
}

.establishment-qr-card .qr-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  /* Minimal padding around QR */
  background: white;
  border-radius: var(--linkooc-radius-sm, 0.5rem);
}

.establishment-qr-card .establishment-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.establishment-qr-card .establishment-details .label {
  font-size: 0.6rem;
  color: var(--linkooc-text-muted, #6d6d6d);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.establishment-qr-card .establishment-details .name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--linkooc-primary-ink, #1a7431);
  text-decoration: none;
}

.establishment-qr-card .establishment-details a.name:hover {
  text-decoration: underline;
}

.establishment-qr-mini {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  background: white;
  border-radius: var(--linkooc-radius-sm, 0.5rem);
  border: 1px solid var(--linkooc-border-color);
}

/* ═══════════════════════════════════════════════════════════════════════
   QR CODE FLIP ANIMATION - Context-aware (Esta <-> Menus)
   ═══════════════════════════════════════════════════════════════════════ */
.qr-flip-container {
  perspective: 1000px;
}

.qr-flipper {
    position: relative;
    width: 120px;
    height: 120px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.qr-flipper.flipped {
  transform: rotateY(180deg);
}

.qr-front,
.qr-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr-back {
  transform: rotateY(180deg);
}

/* Label Switcher Animation */
.qr-label-container {
  position: relative;
  width: 100%;
  height: 50px;
  overflow: hidden;
}

.qr-label-switcher {
  position: relative;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.qr-label-switcher.show-esta {
  transform: translateY(0);
}

.qr-label-switcher.show-menus {
  transform: translateY(-50px);
}

.qr-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 50px;
  justify-content: center;
}

.qr-label .label {
  font-size: 0.6rem;
  color: var(--linkooc-text-muted, #6d6d6d);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.qr-label .name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--linkooc-primary-ink, #1a7431);
  text-decoration: none;
}

.qr-label a.name:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOPBAR - New Layout
   ═══════════════════════════════════════════════════════════════════════ */
.topbar-new {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--linkooc-spacing-sm, 0.5rem) var(--linkooc-spacing-md, 1rem);
  border-bottom: 1px solid var(--linkooc-border-color);
  background: var(--linkooc-second-bg);
  min-height: 48px;
  flex-shrink: 0; /* Prevent topbar from shrinking */
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--linkooc-spacing-sm, 0.5rem);
}

.topbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--linkooc-text);
  border-radius: var(--linkooc-radius-sm, 0.5rem);
  cursor: pointer;
  transition: var(--linkooc-transition-fast, 150ms ease);
}

.topbar-btn:hover {
  background: var(--linkooc-hover-bg);
}

.topbar-btn i {
  font-size: 1.1rem;
}

/* Smaller variant for sidebar toggle */
.topbar-btn-sm {
  width: 28px;
  height: 28px;
}

.topbar-btn-sm i {
  font-size: 0.9rem;
}

.topbar-info {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--linkooc-bg);
  border: 1px solid var(--linkooc-border-color);
  border-radius: var(--linkooc-radius-sm, 0.5rem);
  font-size: var(--linkooc-small-size, 0.75rem);
}

.topbar-info .info-label {
  color: var(--linkooc-text-muted, #6d6d6d);
  font-weight: 500;
}

.topbar-info .info-value {
  color: var(--linkooc-text);
  font-weight: 600;
}

.topbar-info .info-id {
  color: var(--linkooc-text-muted, #6d6d6d);
  font-size: var(--linkooc-tiny-size, 0.65rem);
}

.bg-subtle-green {
  background-color: var(--linkooc-primary-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR SETTINGS DROPDOWN - Linkooc Visual Identity
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar-settings-dropdown {
  position: relative;
}

.sidebar-settings-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: var(--linkooc-text);
  cursor: pointer;
  transition: background-color var(--linkooc-transition-fast, 150ms ease);
  text-align: left;
}

.sidebar-settings-btn:hover {
  background-color: var(--linkooc-hover-bg);
}

.sidebar-settings-btn.collapsed {
  justify-content: center;
  padding: 0.75rem;
}

.sidebar-settings-btn i {
  font-size: 1rem;
}

.sidebar-settings-btn .nav-link-text {
  flex: 1;
  font-size: var(--linkooc-body-size, 0.875rem);
}

.sidebar-dropdown-toggle::after {
  content: '';
  display: inline-block;
  margin-left: auto;
  vertical-align: middle;
  border-bottom: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}

.sidebar-dropdown-toggle.collapsed::after {
  display: none;
}

.sidebar-dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: 1050;
  background: var(--linkooc-bg, #fff);
  border: 1px solid var(--linkooc-border-color, #dee2e6);
  border-radius: var(--linkooc-radius-md, 0.5rem);
  box-shadow: var(--linkooc-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
  padding: 0.5rem 0;
  animation: sidebarDropdownIn 0.15s ease-out;
}

.sidebar-dropdown-menu-collapsed {
  left: calc(100% + 4px);
  right: auto;
  bottom: 0;
  min-width: 200px;
}

@keyframes sidebarDropdownIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--linkooc-transition-fast, 150ms ease);
}

.sidebar-dropdown-item:hover {
  background-color: var(--linkooc-hover-second-bg, #e7f1e8);
}

.sidebar-dropdown-item-content {
  display: flex;
  flex-direction: column;
}

.sidebar-dropdown-item-content span {
  font-size: var(--linkooc-body-size, 0.875rem);
  font-weight: 500;
  color: var(--linkooc-text-display, #000601);
}

.sidebar-dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LINKOOC ACTION BUTTONS - For Grid/Table row actions
   These styles override the default Bootstrap btn-primary/btn-danger to use
   Linkooc Visual Identity colors. Use .linkooc-action-btn-* classes.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Base action button container */
.linkooc-actions-cell {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

/* Primary action button (Edit) - Linkooc green */
.linkooc-action-btn-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--linkooc-radius-md, 0.375rem);
  border: none;
  background-color: var(--linkooc-button-primary, #08781B);
  color: var(--linkooc-on-solid, #ffffff);
  cursor: pointer;
  transition: background-color var(--linkooc-transition-fast, 150ms ease),
    transform var(--linkooc-transition-fast, 150ms ease);
}

.linkooc-action-btn-edit:hover:not(:disabled) {
  background-color: var(--linkooc-button-primary-hover, #11671E);
  transform: translateY(-1px);
}

.linkooc-action-btn-edit:active:not(:disabled) {
  transform: translateY(0);
}

.linkooc-action-btn-edit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Danger action button (Delete) - Red with subtle styling */
.linkooc-action-btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--linkooc-radius-md, 0.375rem);
  border: 1px solid var(--linkooc-danger, #BA1919);
  background-color: transparent;
  color: var(--linkooc-danger, #BA1919);
  cursor: pointer;
  transition: background-color var(--linkooc-transition-fast, 150ms ease),
    color var(--linkooc-transition-fast, 150ms ease),
    transform var(--linkooc-transition-fast, 150ms ease);
}

/* Issue 312 — celui-ci garde `--linkooc-reverse-text` là où le crayon vert passe à
   `--linkooc-on-solid` : son fond, lui, S'INVERSE avec le thème. `--linkooc-danger`
   vaut #BA1919 en clair (blanc : 6,48:1) et #e5534b en sombre, un rouge clair sur
   lequel le blanc ne mesure que 3,70:1 quand l'encre sombre en tient 5,35:1.
   L'encre d'un remplissage se choisit POUR ce remplissage — ici c'est bien le jeton
   inversé qui convient. */
.linkooc-action-btn-delete:hover:not(:disabled) {
  background-color: var(--linkooc-danger, #BA1919);
  color: var(--linkooc-reverse-text, #ffffff);
  transform: translateY(-1px);
}

.linkooc-action-btn-delete:active:not(:disabled) {
  transform: translateY(0);
}

.linkooc-action-btn-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary action button (View/Info) - Outline style */
.linkooc-action-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--linkooc-radius-md, 0.375rem);
  border: 1px solid var(--linkooc-border-color, #dee2e6);
  background-color: transparent;
  color: var(--linkooc-text-secondary, #6d6d6d);
  cursor: pointer;
  transition: background-color var(--linkooc-transition-fast, 150ms ease),
    border-color var(--linkooc-transition-fast, 150ms ease),
    transform var(--linkooc-transition-fast, 150ms ease);
}

.linkooc-action-btn-secondary:hover:not(:disabled) {
  background-color: var(--linkooc-hover-bg, #F7F7F8);
  border-color: var(--linkooc-button-primary, #08781B);
  color: var(--linkooc-primary-ink, #08781B);
  transform: translateY(-1px);
}

/* Action buttons with text (larger variant) */
.linkooc-action-btn-text {
  padding: 0.375rem 0.75rem;
  width: auto;
  font-size: var(--linkooc-small-size, 0.75rem);
  font-weight: 500;
}

.linkooc-action-btn-text i {
  margin-right: 0.375rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LINKOOC PAGE HEADER - Common styles for all pages
   Used with .linkooc-page-container, .linkooc-page-header, etc.
   ═══════════════════════════════════════════════════════════════════════════════ */

.linkooc-page-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Critical for flex children to respect overflow */
  overflow: hidden;
}

.linkooc-page-header {
  flex-shrink: 0;
  background-color: var(--linkooc-surface);
}

.linkooc-wizard-footer {
  background-color: var(--linkooc-surface);
}

.linkooc-breadcrumb .breadcrumb {
  font-size: var(--linkooc-breadcrumb-size, 0.8125rem);
}

.linkooc-breadcrumb .breadcrumb-item a {
  color: var(--linkooc-text-secondary, #6d6d6d);
  text-decoration: none;
}

.linkooc-breadcrumb .breadcrumb-item a:hover {
  color: var(--linkooc-primary-ink, #08781B);
}

.linkooc-breadcrumb .breadcrumb-item.active {
  color: var(--linkooc-text-display, #000601);
  font-weight: 500;
}

.linkooc-page-title {
  font-size: var(--linkooc-page-title-size, 1.5rem);
  font-weight: var(--linkooc-page-title-weight, 600);
  color: var(--linkooc-text-display, #000601);
  margin: 0;
}

.linkooc-page-count {
  font-size: var(--linkooc-page-count-size, 1rem);
  font-weight: 400;
  color: var(--linkooc-text-secondary, #6d6d6d);
}

.linkooc-page-subtitle {
  font-size: var(--linkooc-page-subtitle-size, 0.875rem);
  color: var(--linkooc-text-secondary, #6d6d6d);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LINKOOC PAGE HEADER — ÉCRAN BAS (bureau ≤ 820 px de haut) — plan 914
   Un portable à 150 % affiche 1280 × 640 : l'en-tête mangeait la moitié de la
   fiche (formulaire 278 px mesurés sur /establishments/{id}). Même geste que le
   mobile ci-dessous : la phrase sous le titre disparaît, et ce qui suivait le
   titre (rangée de badges « En ligne »…) remonte sur sa ligne. Une seule règle
   pour les 49 pages ; les pages dont le bloc titre n'a pas de phrase directe
   (`:has(> .linkooc-page-subtitle)`) ne bougent pas. Les `!important` battent
   les utilitaires Bootstrap posés dans le balisage (`d-md-block`, `mb-1`,
   `mb-2`), comme le bloc mobile.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-height: 820px) {
  .linkooc-page-subtitle {
    display: none !important;
  }

  .linkooc-title-left:has(> .linkooc-page-subtitle) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
  }

  .linkooc-title-left:has(> .linkooc-page-subtitle) > * {
    margin-bottom: 0 !important;
  }

  .linkooc-page-header .d-flex.mb-2:has(> .linkooc-title-left) {
    margin-bottom: 0 !important;
    align-items: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LINKOOC PAGE HEADER — MOBILE RESPONSIVE (≤768px)
   These rules apply automatically to ALL pages using standard Linkooc classes.
   Uses !important to override per-page scoped <style> blocks (Blazor b-xxxxx).
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hide subtitle — nobody reads it on small screens */
  .linkooc-page-subtitle {
    display: none !important;
  }

  /* Options dropdown — restyle trigger to ⋮ overflow icon on mobile */
  .linkooc-page-header .linkooc-dropdown .linkooc-dropdown-toggle .matrix-btn-label,
  .linkooc-page-header .linkooc-dropdown .linkooc-dropdown-toggle .btn-text {
    display: none !important;
  }
  /* The ⋮ glyph swap is OPT-IN, and only for a menu that really is an overflow
     « Options » menu (plan 464).

     It used to apply to EVERY .linkooc-dropdown-toggle in the header. That was
     silently wrong the day a page grew a SECOND header dropdown that is not an
     Options menu: /admin/ai-assistant-logs carries « Utilisation » (bi-bar-chart,
     quota + billing period) next to « Options » (bi-gear), and on a phone the
     rule repainted both into two rigorously identical 44×44 ⋮ squares — measured
     2026-08-12 at 390×844 on PROD.

     CONVENTION — any header dropdown trigger that IS the Options / overflow menu
     must be declared:

         AdditionalClass="linkooc-dropdown-toggle linkooc-dropdown-toggle--options"

     Everything else in this block (label hidden, 44×44 square, caret removed,
     icon margin) still applies to EVERY .linkooc-dropdown-toggle — only the
     glyph is opt-in. A trigger that keeps its own icon therefore still gets the
     mobile touch target. `grep -rn "linkooc-dropdown-toggle--options"` answers
     « which triggers become ⋮ » in one command. */
  .linkooc-page-header .linkooc-dropdown .linkooc-dropdown-toggle--options .matrix-btn-icon::before {
    content: "\f5d3" !important; /* bi-three-dots-vertical */
  }
  /* Hide the dropdown caret arrow on the ⋮ button */
  .linkooc-page-header .linkooc-dropdown .linkooc-dropdown-toggle::after {
    display: none !important;
  }
  /* 44×44: the repo's minimum touch target (R12). Was 40×40. */
  .linkooc-page-header .linkooc-dropdown .linkooc-dropdown-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--linkooc-radius, 1.5rem) !important;
  }
  .linkooc-page-header .linkooc-dropdown .linkooc-dropdown-toggle .matrix-btn-icon {
    margin: 0 !important;
  }

  /* Wiki « Guide » link: icon-only 44×44, NOT hidden (plan 420).
     It used to be `display: none`, which took a feature off the phone with no
     replacement home — while the CLAUDE.md of this repo makes that link part of
     « done » for every restaurateur-facing page. Measured proof that the
     component itself is fine on a phone: the same .linkooc-link-wiki renders
     21×75 inside the article detail's Traduction tab; only this header selector
     removed it.
     Treated exactly like « Créer un article » and « Options » above: label off,
     icon kept, 44×44 square. The accessible name survives on the anchor's
     title= — LinkToWiki.razor always emits one (« Ouvrir le wiki Linkooc » by
     default, a descriptive French sentence at every call site). */
  .linkooc-page-header .link-to-wiki {
    display: inline-flex !important;
    align-items: center !important;
  }
  .linkooc-page-header .linkooc-link-wiki {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--linkooc-radius, 1.5rem) !important;
    text-decoration: none !important;
  }
  /* The label and the little external-link arrow are what has to go — the book
     icon is the whole affordance. `> span` is the label: the two icons are <i>. */
  .linkooc-page-header .linkooc-link-wiki > span,
  .linkooc-page-header .linkooc-link-wiki .linkooc-link-wiki-external {
    display: none !important;
  }
  .linkooc-page-header .linkooc-link-wiki > i {
    margin: 0 !important;
    font-size: 1.125rem !important; /* same optical size as .matrix-btn-icon below */
  }

  /* Hide refresh button — not a mobile UX pattern */
  .linkooc-page-header .linkooc-refresh-btn {
    display: none !important;
  }

  /* Primary buttons: icon-only 44×44 square (R12 minimum touch target; was 40×40) */
  .linkooc-page-header .matrix-btn-primary .matrix-btn-label,
  .linkooc-page-header .btn-primary .matrix-btn-label {
    display: none !important;
  }
  .linkooc-page-header .matrix-btn-primary,
  .linkooc-page-header .btn-primary {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--linkooc-radius, 1.5rem) !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .linkooc-page-header .matrix-btn-primary .matrix-btn-icon,
  .linkooc-page-header .btn-primary .matrix-btn-icon {
    margin: 0 !important;
    font-size: 1.125rem !important;
  }
  /* Fallback: text-only primary buttons (no icon) keep text */
  .linkooc-page-header .matrix-btn-primary:not(:has(.matrix-btn-icon)),
  .linkooc-page-header .btn-primary:not(:has(.matrix-btn-icon)) {
    width: auto !important;
    padding: 0.375rem 0.75rem !important;
  }
  .linkooc-page-header .matrix-btn-primary:not(:has(.matrix-btn-icon)) .matrix-btn-label,
  .linkooc-page-header .btn-primary:not(:has(.matrix-btn-icon)) .matrix-btn-label {
    display: inline !important;
    font-size: 0.8125rem !important;
  }

  /* Page title: smaller */
  .linkooc-page-title {
    font-size: 1.125rem !important;
  }

  /* Breadcrumb: hide on mobile — hamburger + back nav is enough */
  .linkooc-breadcrumb {
    display: none !important;
  }

  /* Header padding: tighter on mobile */
  .linkooc-page-header {
    padding: 0.375rem 0.75rem !important;
  }

  /* Title row: reduce bottom margin, center-align buttons with title (subtitle hidden) */
  .linkooc-page-header .d-flex.mb-2 {
    margin-bottom: 0.25rem !important;
    align-items: center !important;
  }
  .linkooc-page-header .linkooc-title-right {
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LINKOOC EMPTY STATE - Centered empty state pattern
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Definition UNIQUE de la primitive (plan 417). Elle vivait aussi dans
   `site.css`, charge apres celui-ci : la definition d'ici etait donc morte et
   seul le `padding` de `site.css` s'appliquait. Le `padding` a ete rapatrie
   ici, la regle de `site.css` supprimee. Le fichier des jetons est le bon
   endroit d'apres SubAgents/Design/LINKOOC_CSS_VAR.md.                       */
.linkooc-empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  padding: var(--linkooc-spacing-xl, 2rem);
  text-align: center;
}

.linkooc-empty-state i {
  font-size: 4rem;
  color: var(--linkooc-text-muted, #6d6d6d);
  margin-bottom: 1rem;
}

.linkooc-empty-state h4 {
  color: var(--linkooc-text-display, #000601);
  margin-bottom: 0.5rem;
}

.linkooc-empty-state p {
  color: var(--linkooc-text-muted, #6d6d6d);
  margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LINKOOC USER AVATAR - Card avatar matching topbar style
   ═══════════════════════════════════════════════════════════════════════════════ */

.linkooc-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.1));
  border: 2px solid var(--linkooc-primary, #08781B);
  font-size: 1rem;
  font-weight: 600;
  color: var(--linkooc-primary-ink, #08781B);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.linkooc-user-avatar-sm {
  width: 36px;
  height: 36px;
  font-size: 0.75rem;
}

.linkooc-user-avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYOUT HEIGHT FIX - Ensure full viewport height for pages
   The .main > .content > .container > .row > .col-md-12 chain must propagate height
   so that pages using h-100 and flex-grow-1 can fill remaining space.
   ═══════════════════════════════════════════════════════════════════════════════ */

main {
  display: flex;
  flex-direction: column;
  /* `100vh` sur iOS = viewport LARGE : la hauteur de l'écran barres du
     navigateur RÉTRACTÉES. Ici rien ne défile au niveau du document
     (`overflow: hidden`), donc Chrome/Safari iOS ne rétractent JAMAIS leurs
     barres : le bas de `main` — et avec lui la fin du conteneur qui défile
     réellement — restait caché SOUS la barre d'outils du bas, et il fallait un
     SECOND geste (qui décalait le document) pour voir le dernier élément.
     `100dvh` suit le viewport visible. Repli `100vh` en premier pour les
     navigateurs sans `dvh` (piège 452). */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

main > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Critical for flex children to shrink */
  overflow: hidden;
  padding-top: 0 !important; /* Override site.css */
}

main > .content > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 100%; /* Override Bootstrap container max-width */
  padding: 0;
}

main > .content > .container > .row {
  flex: 1;
  min-height: 0;
}

main > .content > .container > .row > .col-md-12 {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DIMENSIONS DES CONTRÔLES — DESKTOP UNIQUEMENT (plan 407)

   Avant : 8 hauteurs de bouton (28/32/35/36/37/39/45/48) et 4 rayons
   (0/4/8/24) cohabitaient sur une seule page ; les champs Telerik faisaient
   38px avec un texte de 16px, la recherche 31px. Ce bloc ramène les contrôles
   de CONTENU à une hauteur (32px) et un rayon (10px) uniques.

   ⚠️⚠️ TOUT CE BLOC EST DANS `@media (min-width: 769px)`, ET DOIT LE RESTER.
   Sous 769px, `mobile.css` et les plans 393/399 imposent un plancher tactile
   de 44px (boutons, champs, onglets). Une seule de ces règles écrite hors du
   media query rend le back-office inutilisable au doigt. Si vous ajoutez une
   règle de dimension ici, elle va DANS le media query, pas à côté.

   Ce bloc est volontairement placé en FIN de fichier : plusieurs règles plus
   haut dans `linkooc-theme.css` (`.linkooc-action-btn-*`, en-tête de page)
   portent la même spécificité, et l'ordre les départage.

   Pas de `!important` : le nettoyage de cascade du plan 405 suffit. Les
   sélecteurs à deux classes ci-dessous ne sont pas de la surenchère — ils
   égalent des règles de même spécificité déclarées PLUS TARD dans le document
   (balises `<style>` de composants, CSS isolé `LinkoocBackOffice.styles.css`).
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* ── BOUTONS ────────────────────────────────────────────────────────────
     `.btn` couvre tous les boutons de contenu : Bootstrap, `Matrix_Button`
     (qui rend toujours `Matrix_Button btn btn-* btn-<taille>`) et les classes
     maison. `btn-standard`, la taille par défaut de `Matrix_Button`, n'était
     définie NULLE PART et retombait sur Bootstrap : elle l'est ici.
     Les deux sélecteurs à deux classes battent des `<style>` de composants
     qui posent `border-radius: var(--kendo-border-radius-md)` = 24px.
     Hauteur exacte : 4 + 22 + 4 de padding/interligne + 2 de bordure = 32.   */
  .btn,
  .btn.btn-standard,
  .btn.Matrix_Button,
  .btn.linkooc-btn-primary {
    min-height: var(--linkooc-control-height);
    padding-block: 0.25rem;
    border-radius: var(--linkooc-control-radius);
    font-size: var(--linkooc-body-size);
    line-height: 1.375rem;
  }

  /* `Matrix_Button.razor` (projet MatrixComponents, INTOUCHABLE ici) injecte
     un `<style>` qui pose `border-radius: var(--kendo-border-radius-md)` en
     `!important` — c'est de là que venait le rayon de 24px. On ne peut pas le
     battre en spécificité, et ce plan interdit `!important`. On change donc ce
     que la variable VAUT sur ces boutons-là : une custom property déclarée sur
     l'élément prime sur celle héritée de `:root` (ligne ~230 de ce fichier, qui
     mappe `--kendo-border-radius-md` sur `--linkooc-radius` = 24px).
     Portée stricte : les `Matrix_Button` et rien d'autre.                     */
  .btn.Matrix_Button {
    --kendo-border-radius-md: var(--linkooc-control-radius);
  }

  /* Bouton « rafraîchir » : icône seule, il doit rester CARRÉ.
     Défini dans `matrix-components.css` (36×36, r4) — projet hors périmètre,
     on l'aligne depuis ici sans y toucher. Le sélecteur `button.` égale les
     `.razor.css` isolés d'Index/MenuPage/ListMenu, qui le posent à 32px/r8 et
     sont chargés après ce fichier.                                            */
  .linkooc-refresh-btn,
  button.linkooc-refresh-btn {
    width: var(--linkooc-control-height);
    height: var(--linkooc-control-height);
    min-height: var(--linkooc-control-height);
    border-radius: var(--linkooc-control-radius);
  }

  /* ── ONGLETS ────────────────────────────────────────────────────────────
     `.linkooc-tab` est le contrôle le plus nombreux d'une page (10 sur la
     fiche établissement) : le laisser à 35px aurait suffi à faire mentir la
     hauteur unique. Le rayon reste 0 : ce sont des onglets soulignés, pas des
     boutons. Le sélecteur descendant égale le CSS isolé de la barre d'onglets.
     `.nav-tabs .nav-link` (Bootstrap) n'est PAS repris : son gabarit porte
     l'utilitaire `py-2`, en `!important`, et ce plan interdit `!important`
     comme il interdit de modifier les `.razor`.                              */
  .linkooc-tab,
  .linkooc-tabs .linkooc-tab {
    min-height: var(--linkooc-control-height);
    padding-block: 0.25rem;
    line-height: 1.375rem;
  }

  /* ── CHAMPS TELERIK ─────────────────────────────────────────────────────
     `linkooc-telerik.css` est un export ThemeBuilder qu'on n'édite pas ; il
     est chargé AVANT ce fichier, donc une règle de même spécificité suffit.
     `--kendo-font-size` vaut 1rem : d'où le texte à 16px dans un produit qui
     écrit à 14px partout ailleurs. `.k-textarea` est exclu de la hauteur —
     un champ multiligne doit pouvoir grandir.                                */
  .k-input-md,
  .k-picker-md {
    font-size: var(--linkooc-input-size);
    border-radius: var(--linkooc-control-radius);
  }

  .k-input-md:not(.k-textarea),
  .k-picker-md {
    min-height: var(--linkooc-control-height);
  }

  .k-input-md .k-input-inner,
  .k-picker-md .k-input-inner {
    padding-block: 0.25rem;
    font-size: var(--linkooc-input-size);
    line-height: 1.375rem;
  }

  /* La flèche des listes déroulantes et la croix « effacer » sont des boutons
     Telerik posés DANS le champ : avec leurs 6px de padding vertical autour
     d'une icône de 24px, ils faisaient 36px et c'était EUX qui imposaient les
     38px du champ. On leur retire le padding vertical ; ils s'étirent alors
     sur la hauteur du champ et restent centrés (`align-items: center` de
     Telerik, inchangé).                                                       */
  .k-input-md .k-input-button,
  .k-picker-md .k-input-button,
  .k-input-md .k-clear-value,
  .k-picker-md .k-clear-value {
    padding-block: 0;
    min-height: 0;
  }

  /* ── CHAMP DE RECHERCHE ─────────────────────────────────────────────────
     Le padding-inline (38px à gauche) loge l'icône de loupe : on ne touche
     QUE le padding vertical. `input.search-input` (0,1,1) bat le `:where(.search-input)`
     de EstablishmentDrawer.razor.css (0,1,0 avec l'attribut isolé, plan 916).  */
  input.search-input {
    min-height: var(--linkooc-control-height);
    padding-block: 0.25rem;
    border-radius: var(--linkooc-control-radius);
    font-size: var(--linkooc-input-size);
  }
}