/*
 * Deskea LiveVoice console — direction A (design/handoff/HANDOFF.md).
 * The tokens below are those of design/handoff/tokens.css: light by default, dark as the system says, forced by
 * <html data-theme="light|dark"> (the account's choice, Votre compte). The rules use them; the raw values of the
 * mock-ups have tokens of their own, so that the dark theme changes them too.
 * The Windows client carries the same values: src/Deskea.LiveVoice.WindowsClient/Themes/Theme.Tokens.xaml.
 * Manrope (SIL Open Font License, fonts/OFL.txt) is served by the console itself, never by a CDN.
 */
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Variable.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  color-scheme: light;

  --font: Manrope, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  --fs-page-title: 20px;   /* 700 */
  --fs-section: 12px;      /* 800, majuscules, interlettrage 0.5px */
  --fs-body: 13px;
  --fs-small: 12px;
  --fs-kpi: 18px;          /* 800 */

  --r-chip: 4px;
  --r-button: 6px;
  --r-card: 6px;
  --r-kpi: 8px;
  --r-modal: 10px;
  --r-rail-item: 10px;
  --r-pill: 14px;

  --rail-w: 64px;
  --rail-item: 44px;
  --row-h: 52px;

  --page: #F3F2F7;
  --rail: #F9F9FB;
  --surface: #FFFFFF;
  --surface-sunken: #F9FAFC;
  --line: #ECEDF3;
  --line-strong: #E3E4EC;
  --ink: #2B2E3A;
  --ink-2: #4A4E60;
  --ink-3: #6B6F84;
  --icon: #7A7E92;

  --brand-indigo: #3C33C4;
  --brand-mint: #06E0B5;
  --on-mint: #073B30;
  --primary: #554BD0;
  --primary-ink: #4038C4;
  --primary-soft: #ECEAFB;
  --on-primary: #FFFFFF;

  --ok: #2D6B3A;      --ok-bg: #DEF6E0;      --ok-line: #BFE6C4;      --ok-strong: #2F8268;
  --warn: #7A4300;    --warn-bg: #FFF7E8;    --warn-line: #F0D29C;    --warn-strong: #C77700;
  --danger: #9E2A40;  --danger-bg: #FBEAEE;  --danger-line: #F2C9D2;  --danger-strong: #D9475E; --danger-button: #B3263E;
  --neutral: #4A4E60; --neutral-bg: #F1F2F6; --neutral-line: #DCDDE8;

  /* Values of the mock-ups without a token of the handoff (design/handoff/reference). */
  --ink-body: #3A3D4C;
  --danger-deep: #7E1F33; --danger-text: #5A1A28; --danger-outline: #C24A60;
  --disabled-bg: #ECEDF2;
  --focus-ring: #D9D6FA;
  --row-alert: #FFFBFC; --row-muted: #FAFAFC; --alert-soft: #FFF7F9;
  --initials-bg: #F6F6FA;
  --fix-line: #E7B5C0;
  --segmented: #EEF0F5;
  --warn-soft: #FFF1DB;
  --switch-off: #8A8EA3;
  --changed-bg: #FFFBF4;
  --confirm-bg: #FAFAFE;
  --mint-soft: #E2F7F3; --on-mint-soft: #0E5E52;
  --haze: rgba(243, 242, 247, 0.55);

  --code-bg: #18154D;
  --code-ink: #E9E7FF;

  --grad-kpi: linear-gradient(90deg, #0FD8C5 0%, #818BED 100%);
  --on-grad-kpi: #18154D;
  --grad-save: linear-gradient(90deg, #5646DA 0%, #8D34E6 100%);
  --grad-login: linear-gradient(219deg, #9181F4 0%, #5038ED 100%);

  --shadow-modal: 0 24px 60px rgba(20, 18, 50, 0.35);
  --shadow-pop: 0 12px 32px rgba(24, 21, 60, 0.12);
  --scrim: rgba(24, 21, 60, 0.45);
  --logo: url("../brand/deskea-logo.svg");

  --dur-fast: 150ms;
  --dur: 250ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #100F1E; --rail: #15142A; --surface: #1C1B33; --surface-sunken: #232240;
    --line: #34335A; --line-strong: #34335A;
    --ink: #ECEBF7; --ink-2: #C3C1DA; --ink-3: #9D9BB8; --icon: #9D9BB8;
    --primary: #6A60E8; --primary-ink: #B3ADFF; --primary-soft: #2E2A63;
    --ok: #62E0A4; --ok-bg: #143A28; --ok-line: #1F5A3B; --ok-strong: #34B856;
    --warn: #FFC27A; --warn-bg: #3A2A12; --warn-line: #6B4D1E;
    --danger: #FF9AAA; --danger-bg: #3D1724; --danger-line: #6E2A3C;
    --neutral: #C3C1DA; --neutral-bg: #2A2948; --neutral-line: #34335A;
    --logo: url("../brand/deskea-logo-blanc.svg");
    /* The values below have no dark counterpart in the handoff: taken from A-Sombre-Postes, or the nearest dark token. */
    --ink-body: #C3C1DA; --danger-deep: #FF9AAA; --danger-text: #ECEBF7; --danger-outline: #E0687D;
    --disabled-bg: #2A2948; --focus-ring: #4A43A0; --row-alert: #221A2E; --row-muted: #1F1E38; --alert-soft: #2A1A2C;
    --initials-bg: #232240; --fix-line: #6E2A3C; --segmented: #15142A; --warn-soft: #3A2A12; --switch-off: #5D5B80;
    --changed-bg: #2A2416; --confirm-bg: #232240; --mint-soft: #123A33; --on-mint-soft: #7FE8D2;
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45); --scrim: rgba(5, 4, 15, 0.6); --haze: rgba(16, 15, 30, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #100F1E; --rail: #15142A; --surface: #1C1B33; --surface-sunken: #232240;
  --line: #34335A; --line-strong: #34335A;
  --ink: #ECEBF7; --ink-2: #C3C1DA; --ink-3: #9D9BB8; --icon: #9D9BB8;
  --primary: #6A60E8; --primary-ink: #B3ADFF; --primary-soft: #2E2A63;
  --ok: #62E0A4; --ok-bg: #143A28; --ok-line: #1F5A3B; --ok-strong: #34B856;
  --warn: #FFC27A; --warn-bg: #3A2A12; --warn-line: #6B4D1E;
  --danger: #FF9AAA; --danger-bg: #3D1724; --danger-line: #6E2A3C;
  --neutral: #C3C1DA; --neutral-bg: #2A2948; --neutral-line: #34335A;
  --logo: url("../brand/deskea-logo-blanc.svg");
  /* The values below have no dark counterpart in the handoff: taken from A-Sombre-Postes, or the nearest dark token. */
  --ink-body: #C3C1DA; --danger-deep: #FF9AAA; --danger-text: #ECEBF7; --danger-outline: #E0687D;
  --disabled-bg: #2A2948; --focus-ring: #4A43A0; --row-alert: #221A2E; --row-muted: #1F1E38; --alert-soft: #2A1A2C;
  --initials-bg: #232240; --fix-line: #6E2A3C; --segmented: #15142A; --warn-soft: #3A2A12; --switch-off: #5D5B80;
  --changed-bg: #2A2416; --confirm-bg: #232240; --mint-soft: #123A33; --on-mint-soft: #7FE8D2;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45); --scrim: rgba(5, 4, 15, 0.6); --haze: rgba(16, 15, 30, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--page); color: var(--ink); font: var(--fs-body)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.3; }
h1 { font-size: var(--fs-page-title); font-weight: 700; }
/* A section title: the text stays in sentence case for screen readers, the capitals are the style's. */
h2 { font-size: var(--fs-section); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
h3 { font-size: 14px; font-weight: 700; }
p { margin: 0.25rem 0; }
a { color: var(--primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); font-size: var(--fs-small); }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-small); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Headings receive the focus after navigation (for screen readers), not a visible frame. */
h1:focus, h1:focus-visible, [tabindex="-1"]:focus { outline: none; }
/* A page that failed (Blazor shows #blazor-error-ui): what happened, what to do, Recharger. */
#blazor-error-ui { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-kpi); background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger-deep); box-shadow: var(--shadow-pop); }
#blazor-error-ui[style*="block"] { display: flex !important; }
.error-ui__icon { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("../icons/erreur.svg") center / contain no-repeat; mask: url("../icons/erreur.svg") center / contain no-repeat; }
.error-ui__text { flex: 1; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; color: var(--danger-text); }
.error-ui__text strong { color: var(--danger-deep); font-weight: 800; }
#blazor-error-ui .reload { flex: none; font-weight: 800; color: var(--danger-deep); }

/* The Deskea logo: its file comes from the theme (--logo). */
.logo { display: block; flex: none; height: 24px; aspect-ratio: 72 / 21; background: var(--logo) center / contain no-repeat; }

/* An icon (Icon.razor): the SVG of wwwroot/icons as a mask, in the text colour. */
.icon { --icon-size: 20px; display: inline-block; flex: none; width: var(--icon-size); height: var(--icon-size); background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- shell: the icon bar on the left (MainLayout) ---- */
.shell { min-height: 100vh; display: flex; }
.mobilebar { display: none; }
.rail { position: sticky; top: 0; z-index: 20; height: 100vh; flex: 0 0 var(--rail-w); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0; background: var(--rail); border-right: 1px solid var(--line); }
.rail__mark { display: block; width: 36px; height: 36px; margin-bottom: 26px; }
.rail__item { position: relative; width: var(--rail-item); height: var(--rail-item); border: 0; border-radius: var(--r-rail-item); background: transparent; color: var(--icon); display: grid; place-items: center; cursor: pointer; text-decoration: none !important; transition: background var(--dur-fast), color var(--dur-fast); }
.rail__item:hover { background: var(--neutral-bg); color: var(--ink); }
.rail__item[aria-current="page"] { background: var(--primary-soft); color: var(--primary-ink); }
.rail__end { margin-top: auto; }
/* Workstations to check: a red dot on Postes (its count is in the item's name). */
.rail__dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger-strong); box-shadow: 0 0 0 2px var(--rail); }
/* An item's name: a tooltip on the bar, written out in the mobile menu. It stays in the item's accessible name. */
.rail__label { position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%); padding: 6px 10px; border-radius: var(--r-button); background: var(--code-bg); color: var(--code-ink); font-size: var(--fs-small); font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast), transform var(--dur-fast); }
.rail__item:hover .rail__label, .rail__item:focus-visible .rail__label { opacity: 1; transform: translate(0, -50%); }
.content { flex: 1; min-width: 0; padding: 24px 28px 40px; }

/* ---- page head (PageHeader.razor) ---- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.page-head__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.page-head__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.page-head__back .icon { --icon-size: 16px; }
.page-head__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-head__total { font-weight: 600; color: var(--primary-ink); margin-right: 4px; }
.page-head__lead { margin: 0; max-width: 820px; color: var(--ink-2); line-height: 1.55; }
.page-head__actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- pills (Pill.razor) ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); }
.pill .icon { --icon-size: 14px; }
.pill--alert { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); font-weight: 600; }
a.pill { text-decoration: none !important; transition: border-color var(--dur-fast); }
a.pill:hover { border-color: var(--primary); }
.pill[aria-current="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* ---- page structure ---- */
.section { margin-bottom: 16px; }
.section > h2 { margin-bottom: 12px; }
.card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 20px 22px; }
.card + .card { margin-top: 16px; }
.card > h2 { margin-bottom: 12px; }
/* A card that is only a table: the table fills it (its menus may overflow it). */
.card--flush { padding: 0; }
.card--flush > .table tr:first-child > th:first-child { border-top-left-radius: var(--r-card); }
.card--flush > .table tr:first-child > th:last-child { border-top-right-radius: var(--r-card); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; border-radius: var(--r-button); border: 1px solid transparent; padding: 0 16px; font-weight: 700; cursor: pointer; text-decoration: none !important; transition: background var(--dur-fast), border-color var(--dur-fast); }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-ink); color: var(--on-primary); }
.btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); font-weight: 600; }
.btn--ghost:hover { background: var(--surface-sunken); color: var(--ink); }
.btn--danger { background: var(--danger-button); color: var(--on-primary); }
.btn--danger:hover { background: var(--danger); color: var(--on-primary); }
.btn--danger-outline { background: var(--surface); border-color: var(--danger-outline); color: var(--danger); }
.btn--danger-outline:hover { background: var(--danger-bg); color: var(--danger); }
.btn--save { background: var(--grad-save); color: var(--on-primary); }
.btn--save:hover { filter: brightness(0.94); color: var(--on-primary); }
.btn:disabled, .btn:disabled:hover { background: var(--disabled-bg); border-color: transparent; color: var(--ink-3); filter: none; cursor: default; }
.btn--small { min-height: 32px; padding: 0 12px; }
.btn--block { width: 100%; }

/* ---- status: dots, notices ---- */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--ink-3); }
.dot--ok { background: var(--ok-strong); }
.dot--warn { background: var(--warn-strong); }
.dot--down { background: var(--danger-strong); }
.dot--neutral { background: var(--ink-3); }
/* A banner (bandeau): its icon says the kind, never the colour alone. */
.notice { position: relative; border-radius: var(--r-button); border: 1px solid transparent; padding: 16px 20px 16px 50px; margin-bottom: 16px; line-height: 1.55; }
.notice::before { content: ""; position: absolute; left: 18px; top: 17px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.notice--danger { --glyph: url("../icons/erreur.svg"); background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.notice--info { --glyph: url("../icons/info.svg"); background: var(--primary-soft); color: var(--primary-ink); }
.notice--warn { --glyph: url("../icons/alerte.svg"); background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

/* ---- indicator cards (KpiCard.razor) ---- */
.kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.kpi { flex: 1 1 160px; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-kpi); background: var(--surface); border: 1px solid var(--line-strong); }
a.kpi { color: inherit; text-decoration: none !important; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
a.kpi:hover { border-color: var(--primary); }
.kpi[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--primary); }
.kpi--brand { flex: 1.3 1 200px; background: var(--grad-kpi); border-color: transparent; color: var(--on-grad-kpi); }
.kpi--alert { border-color: var(--danger-line); }
.kpi__mark { flex: none; width: 30px; height: 30px; border-radius: 15px; }
.kpi__icon { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; background: var(--primary-soft); color: var(--primary-ink); }
.kpi--muted .kpi__icon { background: var(--neutral-bg); color: var(--neutral); }
.kpi--alert .kpi__icon { background: var(--danger-bg); color: var(--danger); }
.kpi__text { display: flex; flex-direction: column; gap: 2px; }
.kpi__label { font-weight: 600; }
.kpi--brand .kpi__label { font-weight: 700; }
.kpi__value { display: flex; align-items: baseline; gap: 5px; font-size: var(--fs-kpi); line-height: 1.3; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary-ink); }
.kpi--brand .kpi__value { color: inherit; }
.kpi--alert .kpi__value { color: var(--danger); }
.kpi__detail { font-size: var(--fs-body); font-weight: 600; }

/* ---- tables: hairlines between rows and columns, sunken head ---- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--fs-small); font-weight: 700; color: var(--ink-body); padding: 12px; background: var(--surface-sunken); border-bottom: 1px solid var(--line-strong); }
.table td { height: var(--row-h); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.table th + th, .table td + td { border-left: 1px solid var(--line); }
.table tr:last-child td { border-bottom: 0; }
/* The last table of a card runs to its edges. */
.card > .table:last-child { width: calc(100% + 44px); margin: 0 -22px -20px; }
.card > .table:last-child :is(th, td):first-child { padding-left: 22px; }
.card > .table:last-child :is(th, td):last-child { padding-right: 22px; }
.card--flush > .table:last-child { width: 100%; margin: 0; }
.empty-inline { color: var(--ink-2); padding: 14px 0; }

/* ---- head of a page: search, panels, menus ---- */
.page-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.page-head__title h1 { font-size: 22px; font-weight: 800; letter-spacing: 0.2px; }
.page-head__meta { color: var(--ink-2); }
.search { display: flex; align-items: center; gap: 8px; width: 220px; height: 34px; padding: 0 12px; border-radius: var(--r-button); background: var(--surface); border: 1px solid var(--line-strong); color: var(--icon); }
.search:focus-within { border-color: var(--primary); outline: 2px solid var(--focus-ring); }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: var(--ink); }
.search .icon { --icon-size: 16px; }
.count-badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; }
.btn .icon { --icon-size: 16px; }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: var(--r-button); background: transparent; color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer; }
.icon-button:hover, .icon-button[aria-expanded="true"] { background: var(--neutral-bg); color: var(--ink); }
/* A panel or a menu under its button; the veil behind it closes it on a click elsewhere. */
.popover-anchor { position: relative; }
.popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 220px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-kpi); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); text-align: left; }
.popover--menu { gap: 2px; padding: 6px; min-width: 200px; }
.popover__title { margin: 0; font-size: var(--fs-small); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-2); }
.popover__item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-button); background: transparent; color: var(--ink); font-weight: 600; text-align: left; cursor: pointer; text-decoration: none !important; }
.popover__item:hover { background: var(--neutral-bg); }
.popover__item--danger { color: var(--danger); }
.popover-veil { position: fixed; inset: 0; z-index: 30; }
.check--compact { gap: 10px; align-items: center; }
.check--compact input { margin: 0; }

/* ---- Postes ---- */
.postes__filtered { margin: 0 0 12px; color: var(--ink-2); }
.postes__filtered a { margin-left: 8px; font-weight: 700; }
.table.postes td { vertical-align: middle; }
.postes__eye { width: 52px; text-align: center; }
.postes__eye a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-button); color: var(--ink-3); }
.postes__eye a:hover { background: var(--neutral-bg); color: var(--primary-ink); }
.postes__more { width: 48px; text-align: center; }
.postes__more .popover { top: calc(100% + 2px); }
.postes__name { font-weight: 700; }
.postes__sub { display: block; font-size: var(--fs-small); color: var(--ink-3); }
.postes__mic { display: block; font-weight: 700; color: var(--ink); }
.postes__mic--cleaned { color: var(--ok-strong); }
.postes__mic--notcleaned { color: var(--danger); }
.postes__mic--comparing { color: var(--primary-ink); }
.postes__mic--unknown, .postes__mic--reductionoff { color: var(--neutral); }
.postes__quiet { color: var(--ink-3); }
.postes__row--tocheck > td { background: var(--row-alert); }
.postes__row--revoked > td { background: var(--row-muted); }
.postes__row--revoked .postes__name { color: var(--ink-3); }
.postes__row--tocheck > td { border-bottom: 0; }
.postes__fix-row > td { height: auto; padding: 0 12px 12px 52px; background: var(--row-alert); }
.postes__none { text-align: center; color: var(--ink-2); }
.postes__none > * { display: block; margin: 4px auto; }
.postes__note { margin: 10px 0 0; color: var(--ink-3); }
.col--narrow { display: none; }
.sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.sort span { color: var(--ink-3); font-weight: 600; }
.agent { display: inline-flex; align-items: center; gap: 8px; }
.agent__initials { width: 26px; height: 22px; flex: none; border-radius: var(--r-chip); border: 1px solid var(--neutral-line); background: var(--initials-bg); color: var(--ink-3); font-size: 9px; font-weight: 700; display: grid; place-items: center; }
/* What to do under a workstation to check: a dashed box. */
.fix { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-button); background: var(--surface); border: 1px dashed var(--fix-line); }
.fix__title { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--danger); }
.fix__text { flex: 1 1 320px; color: var(--ink-body); }
.fix a { font-weight: 700; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--ink-3); }
.pager button { min-width: 28px; height: 28px; padding: 0 6px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager__page[aria-current="page"] { font-weight: 700; color: var(--primary-ink); box-shadow: inset 0 -2px 0 var(--primary); }
.pager__size { margin-left: 12px; }
.postes-cards { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.postes-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-kpi); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none !important; }
.postes-card--tocheck { border-color: var(--danger-line); }
.postes-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.postes-card__head strong { font-weight: 800; color: var(--primary-ink); }
.postes-card__head .chip { margin-left: auto; }
.postes-card .postes__mic { font-weight: 600; }
/* One list for each width: the table on a computer, the cards on a phone. */
.postes__phone, p.postes__phone { display: none; }

/* ---- state pill (StateChip.razor): a word and its sign on the state's colour ---- */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--r-chip); font-size: var(--fs-small); font-weight: 700; white-space: nowrap; border: 1px solid var(--neutral-line); background: var(--neutral-bg); color: var(--neutral); }
.chip--tocheck { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.chip--online { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.chip--revoked { color: var(--ink-3); }

/* ---- loading and empty states ---- */
.skeleton { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line-strong); }
.skeleton__row { display: flex; gap: 10px; }
.skeleton__row span { height: 14px; border-radius: var(--r-chip); background: var(--neutral-bg); animation: skeleton 1.4s ease-in-out infinite; }
.skeleton__row span:nth-child(1) { width: 130px; background: var(--line); }
.skeleton__row span:nth-child(2) { width: 220px; }
.skeleton__row span:nth-child(3) { width: 90px; }
@keyframes skeleton { 50% { opacity: 0.5; } }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 56px 32px; text-align: center; }
.empty-state__mark { width: 72px; height: 72px; border-radius: 36px; background: linear-gradient(135deg, #0FD8C5 0%, #818BED 100%); display: grid; place-items: center; }
.empty-state__mark img { width: 44px; height: 44px; }
.empty-state__icon { width: 56px; height: 56px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-3); display: grid; place-items: center; }
.empty-state__icon--denied { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); }
.empty-state__icon--error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.system-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; }
.empty-state--card { padding: 32px 22px; gap: 14px; }
.empty-state__text h3 { font-size: 16px; font-weight: 800; }
.empty-state__text { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.empty-state__text h1, .empty-state__text h2 { font-size: var(--fs-page-title); font-weight: 800; letter-spacing: 0; text-transform: none; }
.empty-state__text p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.empty-state__steps { counter-reset: step; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; }
.empty-state__steps li { counter-increment: step; position: relative; flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; padding: 16px 16px 16px 54px; border-radius: var(--r-kpi); background: var(--surface-sunken); border: 1px solid var(--line); text-align: left; }
.empty-state__steps li::before { content: counter(step); position: absolute; left: 16px; top: 16px; width: 26px; height: 26px; border-radius: 13px; background: var(--primary); color: var(--on-primary); font-weight: 800; display: grid; place-items: center; }
.empty-state__steps span { color: var(--ink-2); line-height: 1.45; }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---- a workstation's page ---- */
.station { display: flex; flex-direction: column; gap: 16px; }
.card.station > h2 { margin-bottom: 0; }
.danger-title { color: var(--danger); }
.state-box { display: flex; flex-wrap: wrap; gap: 20px; padding: 16px 18px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line-strong); }
.state-box--alert { background: var(--alert-soft); border-color: var(--danger-line); }
.state-box--ok { background: var(--ok-bg); border-color: var(--ok-line); }
.state-box__what { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.state-box__what p { margin: 0; color: var(--ink-body); line-height: 1.55; }
.state-box__title { font-size: 16px; font-weight: 800; }
.state-box--alert .state-box__title { color: var(--danger-deep); }
.state-box--ok .state-box__title { color: var(--ok); }
.state-box__next { flex: 1 1 360px; display: flex; flex-direction: column; gap: 8px; }
.state-box__next p { margin: 0; color: var(--ink-body); line-height: 1.55; }
.state-box__label { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--primary-ink); }
.state-box--alert .state-box__label { color: var(--danger); }
.steps { counter-reset: step; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.steps li { counter-increment: step; display: flex; gap: 10px; line-height: 1.5; }
.steps li::before { content: counter(step); flex: none; width: 20px; height: 20px; border-radius: 10px; background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.steps a { font-weight: 700; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.facts div { display: flex; flex-direction: column; gap: 4px; }
.facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; font-size: 14px; font-weight: 600; }
.facts__bad { color: var(--danger); }
.known { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-card); border: 1px solid var(--line-strong); }
.known__title { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink-3); }
.details summary { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-button); border: 1px solid var(--line-strong); background: var(--surface-sunken); font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
.details summary::-webkit-details-marker { display: none; }
.details summary .icon { --icon-size: 16px; transition: transform var(--dur-fast); }
.details[open] summary .icon { transform: rotate(90deg); }
.details__list { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.details__list div { display: flex; gap: 12px; }
.details__list dt { flex: 0 0 170px; color: var(--ink-3); }
.details__list dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-small); overflow-wrap: anywhere; }
/* The last 24 h of a workstation: a bar of its states (each also written in the list under it). */
.history { display: flex; flex-direction: column; gap: 8px; }
.history__title { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink-3); }
.history__bar { display: flex; height: 14px; border-radius: var(--r-chip); overflow: hidden; background: var(--neutral-bg); }
.history__segment { flex-basis: 0; min-width: 2px; }
.history__segment--ok, .history__tone--ok { background: var(--ok-strong); }
.history__segment--alert, .history__tone--alert { background: var(--danger-strong); }
.history__segment--primary, .history__tone--primary { background: var(--primary); }
.history__segment--neutral, .history__tone--neutral { background: var(--neutral); }
.history__segment--muted, .history__tone--muted { background: var(--neutral-line); }
.history__segment--unknown { background: repeating-linear-gradient(135deg, var(--neutral-bg) 0 4px, var(--surface) 4px 8px); }
.history__axis { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-3); }
.history__changes { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.history__changes li { display: flex; align-items: center; gap: 10px; }
.history__changes time { flex: none; width: 92px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.history__tone { flex: none; width: 10px; height: 10px; border-radius: 50%; }

/* A segmented choice: native radios, so the arrows move between the options. */
.theme-choice { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.segmented { align-self: flex-start; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 8px; background: var(--segmented); }
.segmented__option { position: relative; }
.segmented__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented__option span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--r-button); font-size: 14px; color: var(--ink-2); }
.segmented__option input:checked + span { background: var(--surface); box-shadow: 0 1px 3px rgba(30, 30, 60, 0.12); font-weight: 700; color: var(--ink); }
.segmented__option input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.options { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); }
.option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.option:last-child { border-bottom: 0; }
.option input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); flex: none; }
.option span { display: flex; flex-direction: column; gap: 3px; }
.option strong { font-size: 14px; font-weight: 700; }
.option small { font-size: var(--fs-body); color: var(--ink-2); line-height: 1.5; }
.option:has(input:disabled) { cursor: default; }
.option:has(input:disabled) span { opacity: 0.75; }
.card-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.card-row > .card { flex: 1 1 420px; margin: 0; }
.card-row > .card + .card { margin-top: 0; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---- cards with a head row, tags, badges ---- */
.card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.card__head h2 { margin: 0; }
.card__head--stacked { flex-direction: column; align-items: flex-start; gap: 6px; }
.card__head-end { margin-left: auto; color: var(--ink-3); }
.card__empty { margin: 0; padding: 16px 22px; color: var(--ink-2); }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-ink); font-size: var(--fs-small); font-weight: 700; }
.badge { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; border-radius: var(--r-chip); font-size: 11px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; vertical-align: middle; }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--primary { background: var(--primary-soft); color: var(--primary-ink); }
.count-badge--large { min-width: 18px; height: 18px; font-size: 11px; font-weight: 800; }
.link-button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--primary-ink); cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.notice--action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.notice__body { flex: 1 1 420px; display: flex; flex-direction: column; gap: 4px; }
.notice--action .btn { flex: none; }

/* ---- a switch (Switch.razor): ✓ on green, ✕ on grey ---- */
.switch { flex: none; width: 48px; height: 28px; padding: 3px; border: 0; border-radius: 14px; background: var(--switch-off); display: flex; align-items: center; justify-content: flex-start; cursor: pointer; transition: background var(--dur-fast); }
.switch--on { background: var(--ok-strong); justify-content: flex-end; }
.switch__knob { width: 22px; height: 22px; border-radius: 11px; background: var(--surface); color: var(--switch-off); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.switch--on .switch__knob { color: var(--ok-strong); }
.switch:disabled { opacity: 0.45; cursor: default; }

/* ---- Réglages du parc: one row per setting, the confirmation bar under them ---- */
.setting { display: flex; align-items: flex-start; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.setting--changed { background: var(--changed-bg); }
.setting .switch { margin-top: 2px; }
.setting__text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.setting__text .muted { max-width: 760px; line-height: 1.55; }
.setting__title { font-size: 14px; font-weight: 700; }
.setting__cost { flex: 0 0 220px; display: flex; flex-direction: column; gap: 2px; text-align: right; font-weight: 700; }
.setting__cost-label { font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink-3); }
.setting__cost--heavy { color: var(--warn); }
.confirm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 22px; background: var(--confirm-bg); }
.confirm-bar__text { flex: 1 1 360px; line-height: 1.5; }

/* ---- Mises à jour: one card per ring ---- */
.ring__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ring__head > div { display: flex; flex-direction: column; gap: 4px; }
.ring__stats { display: flex; gap: 28px; }
.ring__stats > div { display: flex; flex-direction: column; gap: 2px; }
.ring__stats strong { font-size: var(--fs-kpi); font-weight: 800; }
.ring__progress { flex: 1; }
.ring__label { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink-3); }
.ring__done { color: var(--ok); font-weight: 700; }
.ring__late { color: var(--warn); font-weight: 700; }
.progress { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--neutral-bg); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--ok-strong); }
.ring__target { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ring__target .field { flex: 1 1 200px; }
.ring__members { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ring__members li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ring__members li > :last-child { margin-left: auto; }
.ring .muted { margin: 0; }
.fingerprint { display: inline-flex; align-items: center; gap: 10px; }
.copy { flex: none; }

/* ---- Enrôlement: the form and the « Clé créée » window ---- */
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.field--grow { flex: 1 1 320px; }
.field__hint { font-weight: 400; color: var(--ink-3); }
.field--site { flex: 1 1 240px; }
.field--count { flex: 0 1 150px; }
.key-progress { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.key-progress__bar { height: 6px; border-radius: 3px; background: var(--neutral-bg); overflow: hidden; display: flex; }
.key-progress__bar span { background: var(--ok-strong); }
.dialog.dialog--wide { width: min(680px, 100%); }
.dialog.dialog--narrow { width: min(440px, 100%); }
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dialog__head > div { display: flex; flex-direction: column; gap: 4px; }
.dialog .notice { margin: 0; }
.dialog__actions.dialog__actions--split { justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.secret { display: flex; flex-direction: column; gap: 10px; }
.secret p { margin: 0; }
.secret__label { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-2); }
.secret__value { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-button); background: var(--surface-sunken); border: 1px solid var(--line-strong); }
.secret__value code { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.secret__value--command { background: var(--code-bg); border-color: var(--code-bg); }
.secret__value--command code { font-size: var(--fs-small); font-weight: 400; color: var(--code-ink); }

/* ---- Déployer: the steps, and the files beside them ---- */
.deploy { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.deploy__steps { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.deploy__aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.deploy__aside .card + .card, .deploy__steps .card + .card { margin-top: 0; }
.deploy-step { display: flex; gap: 16px; }
.deploy-step__num { flex: none; width: 30px; height: 30px; border-radius: 15px; background: var(--primary); color: var(--on-primary); font-weight: 800; display: grid; place-items: center; }
.deploy-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.deploy-step__body h2 { font-size: 15px; letter-spacing: 0; text-transform: none; }
.deploy-step__body .command { margin: 0; }
.deploy-step__body > a { align-self: flex-start; font-weight: 700; }
.dots { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dots li { position: relative; padding-left: 16px; line-height: 1.55; }
.dots li::before { content: ""; position: absolute; left: 4px; top: 0.65em; width: 4px; height: 4px; border-radius: 2px; background: var(--ink-3); }
.file { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.file__name { font-weight: 600; overflow-wrap: anywhere; }
.file__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-3); }
.steps--text { margin-top: 12px; }

/* ---- Comptes: tabs, the side panel to add an account, roles ---- */
.tabs-line { display: flex; gap: 4px; border-bottom: 1px solid var(--line-strong); }
.tabs-line a { padding: 8px 12px; color: var(--ink-2); font-weight: 600; text-decoration: none !important; box-shadow: inset 0 -2px 0 transparent; }
.tabs-line a[aria-current="page"] { color: var(--primary-ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--primary); }
.accounts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.accounts__main { flex: 999 1 560px; min-width: 0; }
.side-panel { flex: 1 1 340px; max-width: 420px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; box-shadow: var(--shadow-pop); }
.side-panel__form { display: flex; flex-direction: column; gap: 16px; }
.side-panel__form .muted { margin: 0; line-height: 1.5; }
.roles { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.roles legend { margin-bottom: 6px; font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); }
.role-option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-button); border: 1px solid var(--line-strong); cursor: pointer; }
.role-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.role-option input { margin: 2px 0 0; accent-color: var(--primary); flex: none; }
.role-option span { display: flex; flex-direction: column; gap: 3px; }
.role-option small { font-size: var(--fs-body); color: var(--ink-2); line-height: 1.45; }
.chip--admin { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); }
.chip--supervisor { background: var(--mint-soft); border-color: transparent; color: var(--on-mint-soft); }
.provider__head { display: flex; align-items: center; gap: 10px; }
.provider__head h2 { flex: 1; }
.provider__actions { display: flex; justify-content: flex-end; gap: 10px; }
.field--narrow { max-width: 320px; }
.rules { margin: 0; padding: 14px 16px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; border-radius: var(--r-button); background: var(--surface-sunken); }
.toast__mark--failed { background: var(--danger-button); }

/* ---- toasts (ToastHost.razor): top right, 6 s ---- */
.toasts { position: fixed; top: 16px; right: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 12px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-kpi); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 8px 22px rgba(30, 34, 60, 0.12); animation: toast-in var(--dur) ease-out; }
.toast__mark { flex: none; width: 22px; height: 22px; border-radius: 11px; background: var(--ok-strong); color: var(--on-primary); font-size: var(--fs-small); font-weight: 800; display: grid; place-items: center; }
.toast__text { display: flex; flex-direction: column; gap: 3px; }
.toast__text strong { font-weight: 800; }
.toast__text span { color: var(--ink-2); line-height: 1.45; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---- confirmation window (ConfirmHost.razor) ---- */
.scrim { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: var(--scrim); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--r-modal); background: var(--surface); box-shadow: var(--shadow-modal); }
.dialog__mark { width: 40px; height: 40px; border-radius: 20px; background: var(--danger-bg); color: var(--danger); font-size: 18px; font-weight: 800; display: grid; place-items: center; }
.dialog__title { font-size: 17px; letter-spacing: 0; text-transform: none; }
.dialog__consequences { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dialog__consequences li { display: flex; gap: 8px; line-height: 1.5; color: var(--ink-body); }
.dialog__consequences li::before { content: "·" / ""; color: var(--danger); font-weight: 800; }
.dialog__actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); }
.field input, .field select { font: inherit; font-size: 14px; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-button); min-height: 38px; padding: 0 12px; min-width: 150px; }
.field input:focus, .field select:focus { outline: 2px solid var(--focus-ring); border-color: var(--primary); }
.form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.checks { display: flex; flex-direction: column; gap: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); flex: none; }
.check input:disabled + span { opacity: 0.55; }
.check small { display: block; font-size: var(--fs-small); color: var(--ink-2); margin-top: 2px; }

/* ---- commands, keys, fingerprints ---- */
.command { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.65; background: var(--code-bg); color: var(--code-ink); border-radius: var(--r-button); padding: 12px 14px; margin: 8px 0 16px; overflow-x: auto; white-space: pre; }
.hash { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-2); overflow-wrap: anywhere; }

.command--wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- sign-in pages (SignInFrame.razor): the form on the left, the picture on the right (Deskea Danoise) ---- */
/* The sign-in pages are drawn light only (A-Console-Connexion): they keep the light tokens whatever the theme. */
.signin {
  color-scheme: light; min-height: 100vh; display: flex; flex-wrap: wrap;
  --surface: #FFFFFF; --ink: #2B2E3A; --ink-2: #4A4E60; --ink-3: #6B6F84; --line: #ECEDF3;
  --primary: #554BD0; --primary-soft: #ECEAFB; --ok-strong: #2F8268; --logo: url("../brand/deskea-logo.svg");
  background: var(--surface); color: var(--ink);
}
.signin__main { flex: 1 1 480px; display: flex; flex-direction: column; padding: 48px 32px; }
.signin__logo.logo { height: 30px; margin-left: max(0px, calc(50% - 245px)); }
.signin__center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.signin__panel { width: 100%; max-width: 489px; display: flex; flex-direction: column; }
.signin__panel h1 { font-size: 26px; font-weight: 800; color: #1A202C; }
.signin__lead { margin: 2px 0 0; font-size: 14px; color: #718096; line-height: 1.55; }
.signin__error { margin-top: 24px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 4px; background: #FFF5F5; border: 1px solid #FEB2B2; color: #9B2C2C; font-weight: 700; }
.signin__notice { margin-top: 24px; padding: 12px 14px; border-radius: 4px; background: #F0FFF4; border: 1px solid #9AE6B4; color: #22543D; font-weight: 700; }
.signin__form { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
/* The second factor's setup: the QR code (light background whatever the theme: phones read dark on light) and the recovery codes. */
.qr { align-self: flex-start; margin-top: 24px; padding: 8px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 4px; line-height: 0; }
.qr svg { width: 200px; height: 200px; }
.recovery-codes { margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.recovery-codes code { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: #1A202C; }
.signin__field { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: 3px; background: #EDF2F7; border: 1px solid #E2E8F0; color: #4A5568; }
.signin__field:focus-within { border-color: var(--primary); outline: 2px solid #D9D6FA; }
.signin__field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: #1A202C; }
.signin__forgot { align-self: flex-start; font-weight: 700; color: #718096; }
.signin__submit { margin-top: 20px; display: flex; align-items: center; justify-content: center; height: 42px; border: 0; border-radius: 3px; background: var(--brand-mint); color: var(--on-mint); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; text-decoration: none !important; }
.signin__submit:hover { filter: brightness(0.95); color: var(--on-mint); }
.signin__or { margin-top: 40px; display: flex; align-items: center; gap: 24px; color: #718096; font-weight: 600; }
.signin__or::before, .signin__or::after { content: ""; flex: 1; height: 1px; background: #CBD5E0; }
.signin__providers { margin-top: 40px; display: flex; gap: 20px; }
.signin__provider { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; height: 48px; border-radius: 3px; border: 1px solid #CBD5E0; background: var(--surface); color: #4A5568; font-size: 15px; font-weight: 600; text-decoration: none !important; }
.signin__provider:hover { border-color: var(--primary); color: #4A5568; }
.signin__back { margin-top: 20px; align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #718096; cursor: pointer; }
.signin__back-form { display: contents; }
.signin__badge { width: 48px; height: 48px; margin-bottom: 18px; border-radius: 24px; background: var(--primary-soft); color: var(--brand-indigo); font-size: 22px; font-weight: 800; display: grid; place-items: center; }
.signin__badge--danger { background: #FFF5F5; color: #9B2C2C; }
.signin__rules { margin: -6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; color: #718096; }
.signin__rules li::before { content: "✓ "; color: var(--ok-strong); font-weight: 800; }
.signin__footer { margin-left: max(0px, calc(50% - 245px)); color: #718096; }
.signin__visual { flex: 1.07 1 520px; position: relative; min-height: 560px; padding: 48px 40px; background: var(--grad-login); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.signin__motif { position: absolute; inset: 0; opacity: 0.06; background: url("../img/login/connexion-motif.png") 0 0 / 66% auto repeat; }
.signin__frame { position: relative; width: 100%; max-width: 563px; padding: 32px 33px; border-radius: 20px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.52); }
.signin__picture { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; }
.signin__photo, .signin__person { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.signin__person { pointer-events: none; }
.signin__cards { position: absolute; left: 5.2%; top: 19.4%; width: 68%; display: flex; flex-direction: column; gap: 14px; }
.signin__card { display: flex; flex-direction: column; gap: 6px; padding: 8px 7px 7px; border-radius: 4px; background: #F9FAFB; box-shadow: 0 6px 18px rgba(40, 30, 120, 0.12); }
.signin__card-head { display: flex; align-items: center; font-size: 12px; font-weight: 700; color: #1A202C; }
.signin__switch { margin-left: auto; width: 40px; height: 20px; padding: 2px; border-radius: 10px; background: #718096; display: flex; justify-content: flex-start; align-items: center; }
.signin__switch--on { background: #38C119; justify-content: flex-end; }
.signin__switch span { width: 16px; height: 16px; border-radius: 8px; background: #FFFFFF; color: inherit; font-size: 9px; font-weight: 900; display: grid; place-items: center; }
.signin__wave { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-radius: 3px; background: #FFFFFF; color: #718096; }
.signin__wave .icon { --icon-size: 18px; }
.signin__bars { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; }
.signin__bars span { flex: 1; max-width: 2px; border-radius: 1px; }
.signin__bars .signin__rest { flex: 1 1 30%; max-width: none; height: 1px; background: #E2E8F0; }

/* ---- empty states, loading ---- */
.page-loading { display: grid; place-items: center; padding: 48px; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--primary); border-radius: 50%; display: inline-block; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* The connection to the console was lost (Blazor's reconnection modal): the page stays visible behind. */
.reconnect { display: none; position: fixed; inset: 0; z-index: 1000; background: var(--haze); padding: 16px; justify-items: center; align-items: start; }
.reconnect.components-reconnect-show, .reconnect.components-reconnect-failed, .reconnect.components-reconnect-rejected { display: grid; }
.reconnect__box { width: min(520px, 100%); margin-top: 8px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--r-kpi); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(24, 21, 60, 0.18); line-height: 1.55; color: #3A3D4C; }
.reconnect__title { display: none; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--ink); }
.reconnect__title .spinner { width: 16px; height: 16px; border-width: 2.5px; }
.components-reconnect-show .reconnect__title--retrying { display: flex; }
.components-reconnect-failed .reconnect__title--failed, .components-reconnect-rejected .reconnect__title--failed { display: flex; }
.reconnect__mark { width: 20px; height: 20px; border-radius: 10px; background: var(--danger-button); color: var(--on-primary); font-size: 12px; display: grid; place-items: center; }
.reconnect__reload { align-self: flex-start; font-weight: 700; }

@media (max-width: 760px) {
  :root { --rail-w: 56px; --rail-item: 40px; }
  .col--wide, .kpi--wide, .postes__tools { display: none; }
  .col--narrow { display: block; }
  .page-head__actions { margin-left: 0; width: 100%; }
  .page-head__actions .search { flex: 1; width: auto; }
  .postes__fix-row > td { padding-left: 12px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .details__list { grid-template-columns: 1fr; }
  .rail { padding: 14px 0; }
  .rail__mark { width: 32px; height: 32px; margin-bottom: 20px; }
  .content { padding: 20px 20px 40px; }
  .table:not(.postes) th:nth-child(3), .table:not(.postes) td:nth-child(3) { display: none; }
}

/* Under 520 px: a top bar, and its Menu button opens the links with their names. */
@media (max-width: 520px) {
  .shell { flex-direction: column; }
  .mobilebar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; height: 57px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .mobilebar__mark { width: 32px; height: 32px; }
  .mobilebar__title { font-weight: 800; }
  .mobilebar__menu { margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: var(--r-rail-item); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
  .rail { display: none; }
  .shell--menu .rail { display: flex; position: fixed; top: 57px; left: 0; right: 0; height: auto; align-items: stretch; gap: 2px; padding: 8px 16px 16px; background: var(--surface); border: 0; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop); }
  .shell--menu .rail__mark { display: none; }
  .shell--menu .rail__end { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .shell--menu .rail__item { width: 100%; height: 44px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px; }
  .shell--menu .rail__label { position: static; transform: none; opacity: 1; padding: 0; background: none; color: inherit; font-size: var(--fs-body); font-weight: 600; }
  .shell--menu::after { content: ""; position: fixed; inset: 57px 0 0; z-index: 15; background: var(--scrim); }
  .content { padding: 16px 16px 40px; }
  .postes__desktop { display: none; }
  .postes__phone { display: flex; }
  p.postes__phone { display: block; text-align: center; }
  .kpis .kpi:not(.kpi--brand) { display: none; }
  .facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Journal */
.period { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.period input { border: 0; background: transparent; font: inherit; color: inherit; color-scheme: inherit; }
.table-scroll { overflow-x: auto; }
.journal { min-width: 1000px; }
.journal__date { white-space: nowrap; color: var(--ink-body); }
.journal__action { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-chip); font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.journal__action--reglages { background: var(--primary-soft); color: var(--primary-ink); }
.journal__action--postes { background: var(--danger-bg); color: var(--danger); }
.journal__action--cles { background: var(--mint-soft); color: var(--on-mint-soft); }
.journal__action--mises-a-jour { background: var(--warn-soft); color: var(--warn); }
.journal__action--comptes { background: var(--neutral-bg); color: var(--ink-body); }
.journal__target { font-weight: 700; color: var(--primary-ink); }
.journal__detail { color: var(--ink-body); line-height: 1.5; }
.journal__note { margin: 0; padding: 12px 16px; color: var(--ink-3); }

/* Sites */
.sites { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.site-card { flex: 1 1 420px; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: var(--r-kpi); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; }
.site-card:hover { border-color: var(--primary); color: var(--ink); }
.site-card__head { display: flex; align-items: center; gap: 12px; }
.site-card__mark { width: 36px; height: 36px; flex: none; border-radius: 9px; background: var(--primary-soft); color: var(--primary-ink); display: grid; place-items: center; }
.site-card__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-card__name { font-size: 16px; font-weight: 800; }
.site-card__sub { color: var(--ink-3); }
.site-card__head .chip { margin-left: auto; }
.site-card__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.site-kpi { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-card); background: var(--surface-sunken); border: 1px solid var(--line); }
.site-kpi__label { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.site-kpi__value { font-size: var(--fs-kpi); font-weight: 800; color: var(--ink-body); }
.site-kpi__value--ok { color: var(--ok-strong); }
.site-kpi__value--danger { color: var(--danger); }
.site-kpi__value--primary { color: var(--primary-ink); }
.site-card__progress { display: flex; flex-direction: column; gap: 6px; }
.site-card__progress-text { display: flex; justify-content: space-between; color: var(--ink-2); }
.site-card__bar { height: 8px; border-radius: 4px; background: var(--neutral-bg); display: flex; overflow: hidden; }
.site-card__bar--ok { background: var(--ok-strong); }
.site-card__bar--warn { background: var(--danger-strong); }
.site-card__bar--off { background: var(--switch-off); }
.site-card__cta { font-weight: 700; color: var(--primary-ink); }
.sites__key--active { color: var(--ok); font-weight: 600; }
.sites__key--revoked { color: var(--ink-3); font-weight: 600; }
@media (max-width: 520px) { .site-card__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }