/*
 * La feuille de style de l'application, chargée dans les deux espaces
 * (AppServiceProvider, FilamentAsset). Pas de build : on l'écrit à la main.
 *
 * 1. Les tableaux Filament : une carte par ligne sur téléphone, les actions
 *    juste après le premier champ ; sur ordinateur, une ligne tient dans la
 *    largeur, ses actions sur une seconde ligne.
 * 2. Les tableaux écrits à la main (cl-table).
 * 3. Les classes des vues écrites à la main (cl-…). Filament ne livre que les
 *    siennes : tests/Feature/ViewClassesTest.php échoue sur une classe qui
 *    n'est ni de Filament (fi-…), ni ici, ni dans le <style> de sa vue.
 */

/* ── 1. Tableaux Filament ───────────────────────────────────────────────── */

@media not all and (min-width: 40rem) {
    /* Une grille : chaque champ sur toute la largeur, les actions après le premier. */
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td { grid-column: 1 / -1; order: 3; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td.fi-ta-selection-cell,
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:first-child,
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td.fi-ta-selection-cell + td { order: 1; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:has(> .fi-ta-actions) { order: 2; }

    /* L'étiquette à gauche de la valeur, sauf pour le premier champ : c'est le titre de la carte. */
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:has(> .fi-ta-cell-label) { display: flex; gap: .75rem; align-items: baseline; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td > .fi-ta-cell-label { flex: none; width: 7.5rem; text-align: start; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td > .fi-ta-cell-content { flex: 1; min-width: 0; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:first-child > .fi-ta-cell-label,
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td.fi-ta-selection-cell + td > .fi-ta-cell-label { display: none; }

    /* Nombres centrés ou à droite dans le tableau : à gauche dans la carte. */
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td :is(.fi-ta-text, .fi-ta-text-item, .fi-ta-icon, .fi-ta-col, .fi-ta-text > ul) { justify-content: flex-start; text-align: start; }
}

@media (min-width: 40rem) {
    /* Le texte passe à la ligne au lieu d'élargir le tableau. */
    .fi-ta-table > tbody,
    .fi-ta-table > thead .fi-ta-header-cell { white-space: normal; }
    .fi-ta-table > tbody > tr > td .fi-ta-text-description { overflow-wrap: anywhere; }
    .fi-ta-table > tbody > tr > td .fi-badge, .fi-ta-table > tbody > tr > td .fi-badge * { white-space: normal; overflow-wrap: normal; }
    .fi-ta-table-stacked-on-mobile :is(.fi-ta-text, .fi-ta-text-input, .fi-ta-icon, .fi-ta-image, .fi-ta-color, .fi-ta-select, .fi-ta-toggle, .fi-ta-checkbox):not(.fi-inline) { padding-inline: calc(var(--spacing) * 2); }
    .fi-ta-table > thead .fi-ta-header-cell { padding-inline: calc(var(--spacing) * 2); }

    /* Les actions d'une ligne sur une seconde ligne, sous son début. */
    .fi-ta-table > tbody > tr:has(> td > .fi-ta-actions > *) { position: relative; }
    .fi-ta-table > tbody > tr:has(> td > .fi-ta-actions > *) > td:not(:has(> .fi-ta-actions)) { padding-bottom: 3rem; }
    .fi-ta-table > tbody > tr > td:has(> .fi-ta-actions) { position: absolute; inset-inline-start: 0; bottom: 0; padding: 0 .75rem .55rem; white-space: nowrap; }
    .fi-ta-table > tbody > tr > td.fi-ta-selection-cell ~ td:has(> .fi-ta-actions) { inset-inline-start: 2.75rem; }
    .fi-ta-table > tbody > tr > td > .fi-ta-actions { justify-content: flex-start; }
    .fi-ta-table > thead .fi-ta-actions-header-cell { display: none; }
}

/* ── 2. Tableaux écrits à la main ───────────────────────────────────────── */

/*
 * <table class="cl-table">, un data-label sur chaque cellule sauf la première,
 * cl-num pour un nombre, cl-actions pour les boutons, cl-opt pour une cellule
 * souvent vide (elle quitte la carte quand elle l'est), cl-hide-phone /
 * cl-show-phone. Sur téléphone, une carte par ligne ; sur ordinateur, la ligne
 * tient dans la largeur et ses boutons passent dessous.
 */
.cl-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.cl-table > thead > tr > th { padding: .5rem .6rem; text-align: start; font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--gray-500); }
.dark .cl-table > thead > tr > th { color: var(--gray-400); }
.cl-table > tbody > tr > td,
.cl-table > tfoot > tr > td { padding: .5rem .6rem; vertical-align: top; overflow-wrap: break-word; }
.cl-table > tbody > tr + tr,
.cl-table > tfoot > tr { border-top: 1px solid var(--gray-200); }
.dark .cl-table > tbody > tr + tr,
.dark .cl-table > tfoot > tr { border-color: rgb(255 255 255 / .1); }
.cl-table .cl-num { text-align: end; font-variant-numeric: tabular-nums; }
.cl-table .cl-actions { text-align: end; }
.cl-table .cl-show-phone { display: none; }

@media (min-width: 40rem) {
    .cl-table > tbody > tr:has(> td.cl-actions > *) { position: relative; }
    .cl-table > tbody > tr:has(> td.cl-actions > *) > td:not(.cl-actions) { padding-bottom: 2.75rem; }
    .cl-table > tbody > tr > td.cl-actions { position: absolute; inset-inline-start: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0 .6rem .45rem; }
    .cl-table > thead > tr > th.cl-actions { display: none; }
}

@media not all and (min-width: 40rem) {
    .cl-table,
    .cl-table > tbody,
    .cl-table > tfoot { display: block; }
    .cl-table > thead { display: none; }
    .cl-table > tbody > tr,
    .cl-table > tfoot > tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .75rem; padding-block: .4rem; }
    .cl-table > tbody > tr > td,
    .cl-table > tfoot > tr > td { grid-column: 1 / -1; order: 3; display: block; padding: .2rem .25rem; text-align: start; overflow-wrap: anywhere; }
    .cl-table > tbody > tr > td:first-child,
    .cl-table > tbody > tr > td.cl-hide-phone:first-child + td,
    .cl-table > tfoot > tr > td:first-child { order: 1; }
    .cl-table > tbody > tr > td.cl-actions { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .cl-table > tbody > tr > td[data-label] { position: relative; padding-inline-start: 8rem; }
    .cl-table > tbody > tr > td[data-label]::before { content: attr(data-label); position: absolute; inset-inline-start: .25rem; top: .2rem; width: 7.25rem; color: var(--gray-500); font-size: var(--text-xs); line-height: var(--text-sm--line-height); font-weight: 400; }
    .dark .cl-table > tbody > tr > td[data-label]::before { color: var(--gray-400); }
    .cl-table > tbody > tr > td.cl-num { grid-column: auto; padding-inline-start: .25rem; text-align: start; }
    .cl-table > tbody > tr > td.cl-num::before { position: static; display: block; width: auto; }
    .cl-table > tbody > tr > td.cl-actions:not(:has(*)),
    .cl-table > tbody > tr > td.cl-opt:not(:has(*)),
    .cl-table .cl-hide-phone { display: none; }
    .cl-table .cl-show-phone { display: inline; }
}

/* ── 3. Classes des vues ────────────────────────────────────────────────── */

/* Un bloc de texte s'arrête vers 75 caractères ; une cible tactile fait au moins 44 px. */
.cl-prose { max-width: 75ch; overflow-wrap: break-word; }
.cl-prose > * + * { margin-top: .75em; }
.cl-prose ul { list-style: disc; padding-inline-start: 1.25rem; }
.cl-prose ol { list-style: decimal; padding-inline-start: 1.25rem; }
.cl-prose h2, .cl-prose h3 { font-weight: 600; }
.cl-muted { color: var(--gray-500); }
.dark .cl-muted { color: var(--gray-400); }
.cl-small { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.cl-stack > * + * { margin-top: .75rem; }

/* « À faire » en tête de l'accueil : un bouton par chose qui attend ce compte. */
.cl-todo { margin: 0; }
.cl-todo-title { margin: 0 0 .6rem; font-size: var(--text-base); line-height: var(--text-base--line-height); font-weight: 600; }
.cl-todo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .6rem; }
.cl-todo-item {
    --c-300: var(--gray-300); --c-500: var(--gray-500); --c-600: var(--gray-600); --c-700: var(--gray-700);
    display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .7rem .9rem;
    border: 1px solid color-mix(in oklab, var(--c-500) 35%, transparent); border-inline-start-width: 4px; border-inline-start-color: var(--c-500);
    border-radius: .75rem; background: color-mix(in oklab, var(--c-500) 9%, transparent);
    color: inherit; text-decoration: none; transition: background-color .15s;
}
.cl-todo-item:hover, .cl-todo-item:focus-visible { background: color-mix(in oklab, var(--c-500) 16%, transparent); }
.cl-todo-primary { --c-300: var(--primary-300); --c-500: var(--primary-500); --c-600: var(--primary-600); --c-700: var(--primary-700); }
.cl-todo-warning { --c-300: var(--warning-300); --c-500: var(--warning-500); --c-600: var(--warning-600); --c-700: var(--warning-700); }
.cl-todo-danger { --c-300: var(--danger-300); --c-500: var(--danger-500); --c-600: var(--danger-600); --c-700: var(--danger-700); }
.cl-todo-info { --c-300: var(--info-300); --c-500: var(--info-500); --c-600: var(--info-600); --c-700: var(--info-700); }
.cl-todo-icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--c-600); }
.cl-todo-go { flex: none; width: 1.1rem; height: 1.1rem; margin-inline-start: auto; color: var(--c-500); }
.cl-todo-text { display: flex; flex-direction: column; min-width: 0; }
.cl-todo-label { font-weight: 600; color: var(--c-700); overflow-wrap: anywhere; }
.cl-todo-detail { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--gray-600); }
.dark .cl-todo-label { color: var(--c-300); }
.dark .cl-todo-icon { color: var(--c-300); }
.dark .cl-todo-detail { color: var(--gray-400); }

/* ── 4. Le tableau de développement (module Board) ──────────────────────── */

/*
 * Sur ordinateur, six colonnes côte à côte, chacune défilant seule ; une carte montre
 * son numéro, son titre sur deux lignes au plus et ses badges. Sur téléphone, une
 * colonne à la fois derrière des onglets qui passent à la ligne : rien ne défile de côté.
 */
.bd-board { min-width: 0; }
.bd-sub { font-size: .85rem; color: var(--gray-500); }
.dark .bd-sub { color: var(--gray-400); }
.bd-agents { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.bd-hand { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; padding: .7rem .9rem; border-radius: .75rem; border: 1px solid var(--primary-500); background: color-mix(in oklab, var(--primary-500) 14%, transparent); }
.bd-hand[data-free="true"] { border-color: var(--gray-300); background: var(--gray-100); color: var(--gray-600); }
.dark .bd-hand[data-free="true"] { border-color: rgb(255 255 255 / .15); background: rgb(255 255 255 / .04); color: var(--gray-400); }
.bd-hand-icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--primary-600); }
.bd-next { font-size: 1.05rem; font-weight: 700; }
.bd-agent-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.bd-agent { flex: 1 1 18rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .6rem .75rem; border-radius: .75rem; background: var(--gray-100); }
.dark .bd-agent { background: rgb(255 255 255 / .04); }
.bd-agent[data-hand="true"] { box-shadow: 0 0 0 2px var(--primary-500); }
.bd-agent[data-stale="true"] { opacity: .55; }
.bd-agent-name { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.bd-quota { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; }
.bd-quota-label { min-width: 6.5rem; }
.bd-meter { flex: 1 1 6rem; min-width: 4rem; height: .55rem; appearance: none; border: 0; border-radius: .3rem; overflow: hidden; background: var(--gray-200); }
.dark .bd-meter { background: rgb(255 255 255 / .1); }
.bd-meter::-webkit-progress-bar { background: transparent; }
.bd-meter::-webkit-progress-value { background: var(--success-500); }
.bd-meter::-moz-progress-bar { background: var(--success-500); }
.bd-meter[data-level="mid"]::-webkit-progress-value { background: var(--warning-500); }
.bd-meter[data-level="mid"]::-moz-progress-bar { background: var(--warning-500); }
.bd-meter[data-level="high"]::-webkit-progress-value { background: var(--danger-500); }
.bd-meter[data-level="high"]::-moz-progress-bar { background: var(--danger-500); }
.bd-tabs { display: none; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.bd-tab { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .35rem .8rem; border: 1px solid var(--gray-300); border-radius: 999px; background: transparent; font-size: var(--text-sm); font-weight: 500; color: inherit; cursor: pointer; }
.bd-tab[aria-selected="true"] { border-color: var(--primary-600); background: var(--primary-600); color: #fff; }
.dark .bd-tab { border-color: var(--gray-700); }
.bd-count { font-variant-numeric: tabular-nums; opacity: .75; }
/* Carte #21 : une carte qui attend une réponse se voit sans lire ses capsules ; son onglet (téléphone) porte une pastille. */
.bd-card[data-awaiting="true"] { border-inline-start: 4px solid var(--warning-500); background: color-mix(in oklab, var(--warning-500) 10%, var(--color-white, #fff)); }
.dark .bd-card[data-awaiting="true"] { background: color-mix(in oklab, var(--warning-500) 14%, var(--gray-900)); }
.bd-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding-inline: .3rem; border-radius: 999px; background: var(--warning-500); color: #fff; font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-columns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; align-items: start; }
.bd-col { min-width: 0; border-radius: .75rem; background: var(--gray-100); padding: .5rem; }
.dark .bd-col { background: rgb(255 255 255 / .04); }
.bd-col-title { display: flex; justify-content: space-between; gap: .25rem; margin: .1rem .25rem .5rem; font-size: var(--text-sm); font-weight: 600; }
.bd-list { display: flex; flex-direction: column; gap: .45rem; max-height: calc(100dvh - 22rem); overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.bd-card { min-width: 0; padding: .5rem .55rem; border-radius: .6rem; background: var(--color-white, #fff); box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.dark .bd-card { background: var(--gray-900); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.bd-card-head { display: flex; align-items: flex-start; gap: .25rem; min-width: 0; }
.bd-card[data-locked="true"] { background: color-mix(in oklab, var(--warning-500) 14%, var(--color-white, #fff)); box-shadow: 0 0 0 2px var(--warning-500); }
.dark .bd-card[data-locked="true"] { background: color-mix(in oklab, var(--warning-500) 16%, var(--gray-900)); }
.bd-handle { flex: none; cursor: grab; color: var(--gray-400); line-height: 1.4; user-select: none; }
.bd-link { flex: 1; min-width: 0; color: inherit; text-decoration: none; font-size: var(--text-sm); line-height: 1.35; }
.bd-link:hover .bd-title { text-decoration: underline; }
.bd-num { font-weight: 600; color: var(--gray-500); margin-inline-end: .2rem; }
.bd-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bd-more { flex: none; }
.bd-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.bd-badges:empty { display: none; }
.bd-empty { padding: .4rem .25rem; font-size: var(--text-sm); color: var(--gray-500); }

@media not all and (min-width: 48rem) {
    .bd-tabs { display: flex; }
    .bd-columns { grid-template-columns: minmax(0, 1fr); }
    .bd-col:not([data-active="true"]) { display: none; }
    .bd-col-title { display: none; }
    .bd-list { max-height: none; overflow: visible; }
    .bd-handle { display: none; }
    .bd-card { padding: .65rem .7rem; }
    .bd-link { font-size: var(--text-base); }
    .bd-more { min-width: 2.75rem; min-height: 2.75rem; }
}

/* La carte : ses blocs, les questions à répondre sur place, l'histoire. */
.bd-section-title { margin: 0 0 .5rem; font-size: var(--text-base); font-weight: 600; }
.bd-question { padding: .75rem 0; }
.bd-question + .bd-question { border-top: 1px solid var(--gray-200); }
.dark .bd-question + .bd-question { border-color: rgb(255 255 255 / .1); }
.bd-question-text { font-weight: 600; max-width: 75ch; }
.bd-options { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
.bd-option { display: flex; align-items: flex-start; gap: .55rem; min-height: 2.75rem; padding: .45rem .6rem; border: 1px solid var(--gray-200); border-radius: .5rem; cursor: pointer; }
.dark .bd-option { border-color: rgb(255 255 255 / .1); }
.bd-option .fi-radio-input { margin-top: .2rem; flex: none; }
.bd-textarea { display: block; width: 100%; min-height: 4.5rem; padding: .5rem .65rem; border: 1px solid var(--gray-300); border-radius: .5rem; background: transparent; color: inherit; font: inherit; }
.dark .bd-textarea { border-color: var(--gray-700); }
.bd-answer { margin-top: .35rem; padding: .45rem .6rem; border-inline-start: 3px solid var(--success-500); background: color-mix(in oklab, var(--success-500) 8%, transparent); border-radius: .35rem; }
.bd-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.bd-meta { font-size: var(--text-sm); color: var(--gray-500); }
.dark .bd-meta { color: var(--gray-400); }
.bd-comment { padding: .5rem 0; }
.bd-comment + .bd-comment { border-top: 1px solid var(--gray-200); }
.dark .bd-comment + .bd-comment { border-color: rgb(255 255 255 / .1); }
.bd-locked { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; padding: .7rem .9rem; border-radius: .7rem; border: 1px solid var(--warning-500); background: color-mix(in oklab, var(--warning-500) 16%, transparent); color: var(--warning-800); font-weight: 600; }
.dark .bd-locked { color: var(--warning-300); }
.bd-locked-icon { flex: none; width: 1.3rem; height: 1.3rem; }
.bd-lockroot[data-locked="true"] .bd-textarea { opacity: .55; cursor: not-allowed; }
.bd-code { font-family: ui-monospace, monospace; font-size: var(--text-sm); overflow-wrap: anywhere; }

/* ── 5. Le planning (module Planning) ───────────────────────────────────── */

.pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pl-select { min-width: 12rem; }
.pl-grid > tbody > tr > td { min-width: 0; }
/* Carte #14 : sur ordinateur, les jours ont des colonnes de même largeur ; un texte long passe à la ligne au lieu de les élargir. */
@media (min-width: 40rem) {
    .pl-grid { table-layout: fixed; }
    .pl-grid > thead > tr > th:first-child, .pl-grid > tbody > tr > td:first-child { width: 8rem; }
    .pl-grid > thead > tr > th:last-child, .pl-grid > tbody > tr > td:last-child { width: 4.5rem; }
    .pl-grid > thead > tr > th, .pl-grid > tbody > tr > td { overflow-wrap: anywhere; }
    .pl-grid .pl-nowrap, .pl-grid .pl-shift .fi-link { white-space: nowrap; }
}
.pl-sub { display: block; font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--gray-500); font-weight: 400; }
.dark .pl-sub { color: var(--gray-400); }
.pl-shift { display: block; padding: .1rem .35rem; margin-bottom: .2rem; border-radius: .35rem; border-inline-start: 3px solid var(--gray-400); background: color-mix(in oklab, var(--gray-500) 8%, transparent); }
.pl-opening { border-inline-start-color: var(--info-500); }
.pl-closing { border-inline-start-color: var(--primary-600); }
.pl-full { border-inline-start-color: var(--warning-500); }
.pl-off { opacity: .6; text-decoration: line-through; }
/* Glisser un poste vers un autre jour : la poignée, les colonnes qui peuvent le recevoir, celle qui le reçoit. */
.pl-handle { display: inline-block; margin-inline-end: .3rem; color: var(--gray-400); cursor: grab; user-select: none; touch-action: none; }
.pl-handle:active { cursor: grabbing; }
.pl-grid td[data-can-drop="true"] { outline: 2px dashed var(--primary-400); outline-offset: -3px; }
.pl-grid td[data-over="true"] { background: color-mix(in oklab, var(--primary-500) 14%, transparent); }
/* Pas de glisser sur téléphone (cartes empilées) ni au doigt : le formulaire du poste change le jour. */
@media not all and (min-width: 40rem) { .pl-handle { display: none; } }
@media (hover: none), (pointer: coarse) { .pl-handle { display: none; } }
.pl-warning { display: block; font-size: var(--text-xs); color: var(--warning-700); }
.dark .pl-warning { color: var(--warning-400); }
/* Carte #17 : le trou de couverture est une capsule orange ; son texte passe à la ligne dans la colonne du jour. */
.pl-gap-badge { max-width: 100%; height: auto; white-space: normal; }
.pl-ok { color: var(--success-700); }
.dark .pl-ok { color: var(--success-400); }
.pl-over { font-weight: 600; color: var(--warning-700); }
.pl-under { font-weight: 600; color: var(--danger-600); }
.pl-coverage > td { background: color-mix(in oklab, var(--gray-500) 5%, transparent); }
.pl-day { padding: .6rem 0; }
.pl-day + .pl-day { border-top: 1px solid var(--gray-200); }
.dark .pl-day + .pl-day { border-color: rgb(255 255 255 / .1); }
.pl-day-title { font-weight: 600; }
.pl-big { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── 6. Clients (module Customers) ──────────────────────────────────────── */
.cu-qr { width: min(100%, 15rem); background: #fff; padding: .5rem; border-radius: .5rem; }
.cu-qr svg { display: block; width: 100%; height: auto; }

/* ── 7. Le stock (module Stock) ─────────────────────────────────────────── */
.st-scan { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: .75rem; }
.st-video { width: 100%; max-width: 24rem; border-radius: .6rem; background: #000; }
.st-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.st-field { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 14rem; min-width: 0; font-size: var(--text-sm); font-weight: 500; }
.st-qty { flex: 0 1 8rem; }
/* Carte #22 : les filtres et la pagination du journal des événements (Historique). */
.bd-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-bottom: .75rem; }
.bd-filter { display: flex; flex-direction: column; gap: .2rem; min-width: 0; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--gray-500); }
.bd-input { min-height: 2.5rem; padding: .35rem .6rem; border: 1px solid var(--gray-300); border-radius: .5rem; background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); font-weight: 400; text-transform: none; letter-spacing: 0; }
.dark .bd-input { border-color: var(--gray-700); }
.bd-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; }
/* Carte #23 : l'état de la veille d'un agent, dans sa case du tableau. */
.bd-watch[data-state="listening"] { color: var(--success-600); }
.bd-watch[data-state="working"] { color: var(--primary-600); }
.bd-watch[data-state="paused"], .bd-watch[data-state="silent"] { color: var(--warning-600); }
/* Carte #26 : la jauge d'un quota porte un trait à l'endroit de sa limite haute (--limit). */
.bd-gauge { position: relative; display: flex; flex: 1 1 6rem; min-width: 4rem; }
.bd-gauge .bd-meter { flex: 1 1 auto; min-width: 0; }
.bd-gauge::after { content: ""; position: absolute; top: -.2rem; bottom: -.2rem; left: var(--limit); width: 2px; background: var(--gray-700); pointer-events: none; }
.dark .bd-gauge::after { background: var(--gray-300); }