/* =========================================================================
   Mobile Data Computer - thème "Windows 11" de JOUR : gris doux (pas de blanc éclatant), aux couleurs du logo du
   serveur (noir, blanc, rouge Torino / bordeaux)
   - Fenêtre "Mica" gris clair, légèrement transparente (Paramètres > MDC), coins presque carrés, traits fins ;
     barre de titre noire soulignée de rouge, accent rouge foncé (boutons principaux, onglet choisi, focus)
   - Les HUD affichés par-dessus le jeu (PLD, display MDC, car HUD, notifications) sont toujours sombres : de jour
     aux couleurs du logo, de nuit dans la couleur du mode nuit (palettes plus bas : data-night-color)
   - Volet de navigation à gauche (pages, mon unité et ses statuts, BOLOs, Paramètres en bas)
   - Contenu en cartes ; boutons et champs Fluent (soulignement d'accent au focus)
   Les couleurs se changent ici, dans les variables.
   ========================================================================= */
:root {
    --glass-a: 1;                              /* opacité de la fenêtre (réglage) */
    --mica:      214, 216, 220;                /* fond de la fenêtre (contenu) : gris doux */
    --mica-2:    201, 204, 209;                /* volet de navigation, barres */
    --card:      rgba(233, 234, 237, .94);     /* cartes */
    --card-2:    rgba(0, 0, 0, .055);          /* survol, en-têtes */
    --card-3:    rgba(0, 0, 0, .09);
    --input:     #eceef1;
    --input-hover: #f0f1f3;
    --input-focus: #f4f5f7;
    --stroke:    rgba(0, 0, 0, .12);
    --stroke-2:  rgba(0, 0, 0, .2);
    --text:      #15171a;
    --text-2:    rgba(16, 18, 22, .8);
    --muted:     rgba(16, 18, 22, .62);
    --faint:     rgba(16, 18, 22, .42);
    --accent:    #8b0e1d;                      /* rouge du logo, entre Torino et bordeaux */
    --accent-rgb: 139, 14, 29;
    --accent-ink: #ffffff;                     /* texte sur l'accent */
    --danger:    #b3261e;
    --danger-rgb: 179, 38, 30;
    --warn-rgb:  176, 120, 0;
    --ok-rgb:    16, 118, 40;
    --radius:    5px;                          /* cartes, fenêtre : presque carré (Windows 11) */
    --radius-sm: 3px;                          /* contrôles */
    --shadow:    0 24px 56px rgba(0, 0, 0, .28), 0 2px 10px rgba(0, 0, 0, .14);
    --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Inter", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, Arial, sans-serif;

    /* Statuts d'une unité ("R, G, B") */
    --st-available:   46, 160, 67;
    --st-en_route:    230, 172, 0;
    --st-on_scene:    232, 113, 26;
    --st-unavailable: 209, 52, 56;
    --st-default:     138, 146, 158;

    /* Polices (pastilles) : une couleur par MDC de police */
    --agency-wsp:  #2d63b3;
    --agency-kcso: #2f7a55;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* HUD et notifications par-dessus le jeu : restent sombres */
.hud, .toasts, .hud-placebar, .car-notice-anchor {
    --card:      rgba(140, 170, 220, .06);
    --card-2:    rgba(140, 170, 220, .1);
    --card-3:    rgba(140, 170, 220, .16);
    --stroke:    rgba(140, 170, 220, .13);
    --stroke-2:  rgba(140, 170, 220, .22);
    --text:      #f2f6fc;
    --text-2:    rgba(226, 234, 246, .82);
    --muted:     rgba(200, 214, 234, .58);
    --faint:     rgba(200, 214, 234, .36);
    --accent:    #3b8cf6;
    --accent-rgb: 59, 140, 246;
    --st-available:   108, 203, 95;
    --st-en_route:    252, 210, 70;
    --st-on_scene:    255, 140, 60;
    --st-unavailable: 255, 99, 99;
}

/* Le fond du NUI reste transparent (le jeu derrière) */
html, body {
    width: 100%;
    height: 100%;
    background: transparent;
    font: 13px/1.4 var(--font);
    color: var(--text);
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.grow { flex: 1; }
body.dragging, body.dragging * { user-select: none !important; }

/* =========================================================================
   FENÊTRE
   ========================================================================= */
.window {
    position: absolute;
    z-index: 35;                               /* au-dessus des HUD (z-index 30) */
    display: flex;
    flex-direction: column;
    min-width: 760px;
    min-height: 480px;
    background: rgba(var(--mica), var(--glass-a));
    border: 1px solid var(--stroke-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    font-family: var(--font);
}
.window.maximized { border-radius: 0; border-width: 0; }
.window.placing-hidden { display: none !important; }
.window .titlebar, .window .frame-body, .window .statusbar, .window .chooser { zoom: var(--ui-zoom, 1); }

/* ---------- Barre de titre ---------- */
.titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding-left: 14px;
    background: rgba(var(--mica-2), var(--glass-a));
    cursor: default;
    flex-shrink: 0;
}
.title { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12px; }
.app-icon {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 18px; height: 18px; color: var(--accent);
}
.app-icon.has-logo { width: 26px; height: 26px; }
.app-icon img, .agency-card-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.app-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-name { color: var(--text-2); white-space: nowrap; }
/* MDC choisi : à côté du nom */
.agency-title {
    display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
    border-radius: var(--radius-sm); background: var(--card-2); border: 1px solid var(--stroke);
    font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.win-buttons { display: flex; align-self: stretch; }
.win-btn {
    display: grid; place-items: center;
    width: 46px; height: 100%;
    background: transparent; color: var(--text-2);
    border: 0; cursor: pointer;
}
.win-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.win-btn:hover { background: rgba(0, 0, 0, .05); color: var(--text); }
.win-btn:active { background: rgba(0, 0, 0, .03); }
.win-close:hover { background: #c42b1c; color: #fff; }
.win-close:active { background: #b22a1b; }
/* Jour : barre de titre noire soulignée du rouge du logo (textes clairs, rouge éclairci pour rester lisible sur le noir) */
.window:not([data-theme="night"]) .titlebar {
    --text: #f1f1f2; --text-2: rgba(241, 241, 242, .82); --muted: rgba(241, 241, 242, .6);
    --card-2: rgba(255, 255, 255, .08); --card-3: rgba(255, 255, 255, .14);
    --stroke: rgba(255, 255, 255, .16); --stroke-2: rgba(255, 255, 255, .24);
    --accent: #e8545f; --accent-rgb: 232, 84, 95;
    background: rgba(16, 16, 18, var(--glass-a)); box-shadow: inset 0 -2px 0 #8b0e1d; color: var(--text);
}
.window:not([data-theme="night"]) .titlebar .win-btn:hover,
.window:not([data-theme="night"]) .titlebar .title-action:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Corps : volet de navigation + contenu ---------- */
.frame-body { display: flex; flex: 1; min-height: 0; }

.navpane {
    width: 236px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 6px 8px;
    background: rgba(var(--mica-2), var(--glass-a));
    overflow-y: auto;
}

/* Profil (nom RP) */
.profile { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px; }
.profile-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rp-display { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rp-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-agency { font-size: 11px; color: var(--muted); }
#rpForm input { height: 30px; }

/* Navigation : éléments de liste Windows 11 (pastille d'accent à gauche) */
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav-foot { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--stroke); }
.sidenav .tab {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    width: 100%; height: 36px; padding: 0 12px;
    background: transparent; color: var(--text-2);
    font: 13px var(--font); text-align: left; white-space: nowrap;
    border: 0; border-radius: var(--radius-sm);
    cursor: pointer;
}
.sidenav .tab:hover { background: var(--card-2); color: var(--text); }
.sidenav .tab:active { background: var(--card); }
.sidenav .tab.active { background: var(--card-2); color: var(--text); }
.sidenav .tab.active::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
    border-radius: 2px; background: var(--accent);
}
.sidenav .tab svg {
    width: 17px; height: 17px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Carte "Mon unité" : nom, tag et statuts en grille 2 x 2 */
.unit-card { display: flex; flex-direction: column; padding: 10px; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius); }
.my-unit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 20px; margin-bottom: 8px; font-weight: 600; }
.my-unit > span:not(.unit-tag) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.my-unit .muted { font-weight: normal; font-style: normal; white-space: normal; font-size: 12px; }
.status-list { display: flex; flex-direction: column; gap: 5px; }
/* Statuts : un bouton par ligne, entièrement de la couleur du statut ; le statut actuel est coché et cerclé */
.status-btn {
    --c: var(--st-default);
    --ink: #ffffff;
    position: relative;
    display: flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 12px;
    background: rgb(var(--c)); color: var(--ink);
    font: 600 13px var(--font); text-align: left; white-space: nowrap;
    border: 0; border-radius: var(--radius-sm);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14);
    opacity: .72;
    cursor: pointer;
    transition: opacity .12s, filter .12s, box-shadow .12s;
}
.status-btn[data-status="en_route"] { --ink: #2b2100; }
.status-btn:hover { opacity: .92; }
.status-btn:active { filter: brightness(.94); }
.status-btn.active { opacity: 1; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px rgb(var(--c)), 0 3px 10px rgba(var(--c), .35); }
.status-btn.active::after { content: "\2713"; margin-left: auto; font-size: 14px; }
.status-btn .sq { display: none; }
.status-list.no-unit .status-btn { opacity: .3; pointer-events: none; }

/* Pastille de couleur du statut */
.sq {
    --c: var(--st-default);
    width: 10px; height: 10px; flex-shrink: 0;
    border-radius: 50%;
    background: rgb(var(--c));
}
.status-btn .sq { --c: inherit; }
[data-status="available"]   { --c: var(--st-available); }
[data-status="en_route"]    { --c: var(--st-en_route); }
[data-status="on_scene"]    { --c: var(--st-on_scene); }
[data-status="unavailable"] { --c: var(--st-unavailable); }

/* BOLOs actifs (volet) */
.side-bolos { display: flex; flex-direction: column; flex: 1; min-height: 110px; }
.side-bolos-count { color: var(--text-2); }
.side-bolo-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.side-bolo-list > .fold-empty { padding: 2px 4px; }
.side-bolo.fold { margin: 0; flex-shrink: 0; }
.side-bolo > summary { display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; font-size: 12px; font-weight: normal; }
.side-bolo > summary::before { flex-shrink: 0; width: 10px; line-height: 17px; }
.side-bolo-kind { flex-shrink: 0; padding: 0 5px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .4px; color: #fff; }
.side-bolo-kind.per { background: rgba(var(--danger-rgb), .85); }
.side-bolo-kind.veh { background: #9a5a12; }
.side-bolo-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text); }
.side-bolo-line { display: flex; align-items: center; gap: 6px; }
.side-bolo-reason { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.side-bolo[open] .side-bolo-reason { white-space: normal; color: var(--text); }
.side-bolo .fold-body { padding: 6px 8px; font-size: 11.5px; }
.side-bolo-sheet { grid-template-columns: auto 1fr; margin: 0; font-size: 11.5px; }
.side-bolo-sheet dt { white-space: nowrap; }
.side-bolo-sheet dd { overflow-wrap: anywhere; }
.side-bolo-sheet dt, .side-bolo-sheet dd { padding: 2px 5px; }
.side-bolo-text { margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); max-height: 90px; overflow-y: auto; }
.side-bolo-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }

/* ---------- Contenu ---------- */
.content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 22px 16px;
    background: rgba(var(--mica), var(--glass-a));
    border-top: 1px solid var(--stroke);
    border-left: 1px solid var(--stroke);
    border-top-left-radius: var(--radius);
    overflow: hidden;
}
.window.maximized .content { border-top-left-radius: 0; }
.page-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-shrink: 0; }
.page-head h1 { font: 600 26px/1.15 var(--font-display); letter-spacing: -.2px; }
.page-sub { font-size: 12px; color: var(--muted); }

/* ---------- Barre d'état ---------- */
.statusbar {
    display: flex; align-items: center; gap: 6px;
    height: 32px; padding: 4px 8px;
    background: rgba(var(--mica-2), var(--glass-a));
    border-top: 1px solid var(--stroke);
    font-size: 12px;
    flex-shrink: 0;
}
.sb-cell {
    display: flex; align-items: center; gap: 7px;
    height: 24px; padding: 0 10px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    white-space: nowrap; overflow: hidden;
}
#sbClock { min-width: 60px; justify-content: center; font-variant-numeric: tabular-nums; }
/* ---------- Bouton de la note (barre de titre, à droite) ---------- */
.title-action {
    display: inline-flex; align-items: center; gap: 7px; align-self: center;
    height: 28px; margin-left: auto; margin-right: 6px; padding: 0 12px;
    background: transparent; color: var(--text-2);
    font: 12px var(--font); border: 1px solid var(--stroke); border-radius: var(--radius-sm);
    cursor: pointer;
}
.title-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.title-action:hover { background: rgba(0, 0, 0, .05); color: var(--text); }
.title-action.active { background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .45); color: var(--accent); font-weight: 600; }
.memo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Deuxième bouton (Messages) : collé au premier */
.title-action-next { margin-left: 0; }
.msg-badge {
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; font: 700 10.5px/17px var(--font); text-align: center;
    color: #fff; background: #d13438;
}

/* ---------- Messages entre unités : panneau à droite ---------- */
.msgpane {
    width: 300px; flex-shrink: 0; min-height: 0;
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 14px 12px;
    background: rgba(var(--mica-2), var(--glass-a));
    border-top: 1px solid var(--stroke); border-left: 1px solid var(--stroke);
}
.msg-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.msg-me { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.msg-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.msg-conv {
    display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; cursor: pointer; text-align: left;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; color: var(--text);
}
.msg-conv:hover { background: rgba(0, 0, 0, .04); border-color: var(--stroke); }
.msg-conv-top { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.msg-conv-top .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conv-agency { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.msg-conv-last { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conv.unread .msg-conv-last { color: var(--text); font-weight: 600; }
.msg-thread-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.msg-thread-head .grow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.grow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.msg-bubble { max-width: 86%; padding: 6px 10px 7px; border-radius: 8px; background: rgba(0, 0, 0, .055); align-self: flex-start; }
.msg-bubble.mine { align-self: flex-end; background: rgba(var(--accent-rgb), .14); }
.msg-bubble-meta { display: flex; gap: 8px; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.msg-bubble-text { margin-top: 2px; white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.msg-compose { display: flex; gap: 6px; align-items: flex-end; }
.msg-compose textarea { flex: 1; min-height: 38px; max-height: 110px; resize: none; line-height: 1.4; }
.msg-empty { padding: 10px 4px; font-size: 12px; color: var(--muted); }
.msg-toast { --prio: var(--accent-rgb); width: 320px; }
.msg-toast-text { margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, .88); white-space: pre-wrap; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[data-theme="night"] .msgpane .legend { color: var(--title); }
[data-theme="night"] .msg-conv:hover { background: rgba(var(--n-rgb), .08); }
[data-theme="night"] .msg-bubble { background: rgba(var(--n-rgb), .08); }
[data-theme="night"] .msg-bubble.mine { background: rgba(var(--n-rgb), .18); }

/* ---------- Note de l'unité : panneau à droite ---------- */
.memopane {
    width: 270px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 14px 12px;
    background: rgba(var(--mica-2), var(--glass-a));
    border-top: 1px solid var(--stroke); border-left: 1px solid var(--stroke);
}
.memo-head { display: flex; align-items: center; justify-content: space-between; }
.memo-head .legend { margin: 0; font-size: 14px; }
.memo-unit { display: flex; align-items: center; gap: 6px; font-weight: 600; min-height: 22px; }
.memopane textarea { flex: 1; min-height: 120px; resize: none; line-height: 1.5; }
.memopane .hint-text { font-size: 11.5px; }
.memo-notepad { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.memo-notepad svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* ---------- Poignées de redimensionnement ---------- */
.rz { position: absolute; z-index: 5; }
.rz-n, .rz-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rz-e, .rz-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.rz-n { top: -3px; } .rz-s { bottom: -3px; } .rz-e { right: -3px; } .rz-w { left: -3px; }
.rz-ne, .rz-nw, .rz-se, .rz-sw { width: 12px; height: 12px; }
.rz-ne { top: -3px; right: -3px; cursor: nesw-resize; }
.rz-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
.rz-nw { top: -3px; left: -3px; cursor: nwse-resize; }
.rz-se { bottom: -3px; right: -3px; cursor: nwse-resize; }
.window.maximized .rz { display: none; }

/* ---------- Choix du MDC (première ouverture) ---------- */
.chooser {
    position: absolute; inset: 40px 0 0 0; z-index: 4;
    display: grid; place-items: center;
    padding: 24px;
    background: rgba(var(--mica), .98);
}
.window.choosing .frame-body, .window.choosing .statusbar, .window.choosing #btnMemo, .window.choosing .memopane,
.window.choosing #btnMessages, .window.choosing .msgpane { visibility: hidden; }
.chooser-box { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(760px, 100%); text-align: center; }
.chooser-logos { display: flex; align-items: center; gap: 16px; }
.chooser-logos img { height: 64px; width: auto; object-fit: contain; }
.chooser-box h2 { font: 600 28px var(--font-display); }
.chooser-box .hint-text { max-width: 520px; margin-bottom: 10px; }
.agency-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.agency-card {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    min-height: 150px; padding: 16px;
    background: var(--card); color: var(--text);
    border: 1px solid var(--stroke); border-radius: var(--radius);
    font: 13px var(--font); text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.agency-card:hover { background: var(--card-2); border-color: var(--stroke-2); }
.agency-card.active { border-color: rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .08); cursor: default; }
.agency-card.locked { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }
.agency-card.locked:hover { background: var(--card); border-color: var(--stroke); }
.agency-card.confirm { border-color: rgba(var(--warn-rgb), .7); background: rgba(var(--warn-rgb), .07); }
.agency-card-icon { width: 30px; height: 30px; color: var(--accent); }
.agency-card-icon.has-logo { width: 46px; height: 46px; }
.agency-card-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.agency-card-text { display: flex; flex-direction: column; gap: 3px; }
.agency-card-text b { font: 600 15px var(--font-display); }
.agency-card-text small { font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--accent); }
.agency-card-text span { font-size: 12px; color: var(--muted); line-height: 1.45; }
.agency-card-check {
    position: absolute; top: 12px; right: 12px;
    padding: 1px 8px; border-radius: var(--radius-sm);
    background: rgba(var(--accent-rgb), .18); color: var(--accent); font-size: 11px; font-weight: 600;
}
.mdc-choice .agency-cards .agency-card { min-height: 0; }

/* =========================================================================
   CARTES (anciennes "cases") ET MISE EN PAGE
   ========================================================================= */
.group {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: 0;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
}
.legend, .subgroup-title {
    display: block; align-self: flex-start;
    margin: 0 0 10px;
    font-size: 13px; font-weight: 600; color: var(--text);
}
.navpane .legend { margin-bottom: 8px; font-size: 12px; color: var(--text-2); }

.page { display: none; }
.page.active { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.group.fill { flex: 1 1 0; min-height: 0; }

.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.group > .toolbar:last-child { margin-bottom: 0; }
.subtabs { margin-bottom: 0; }
.units-toolbar { margin: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; flex: 1 1 0; min-height: 200px; }
.split > .group { min-height: 0; }
.page-body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.view { display: none; }
.view.active { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: auto; padding-top: 4px; }

/* =========================================================================
   CONTRÔLES
   ========================================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 14px;
    background: var(--input); color: var(--text);
    font: 13px var(--font);
    white-space: nowrap;
    border: 1px solid var(--stroke-2); border-bottom-color: rgba(0, 0, 0, .24);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .1s, border-color .1s;
}
.btn:hover { background: var(--input-hover); }
.btn:active, .btn.active { background: var(--input-hover); color: var(--text-2); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* Bouton principal : plein, couleur d'accent */
.btn-default { background: var(--accent); border-color: rgba(0, 0, 0, .12); color: var(--accent-ink); font-weight: 600; }
.btn-default:hover { background: rgba(var(--accent-rgb), .9); }
.btn-default:active, .btn-default.active { background: rgba(var(--accent-rgb), .82); color: rgba(255, 255, 255, .85); }
.btn-default:disabled { background: rgba(0, 0, 0, .08); color: var(--muted); }
.btn-danger:hover, .btn-danger.confirm { background: rgba(var(--danger-rgb), .9); border-color: rgba(var(--danger-rgb), .9); color: #fff; }
/* Demande de renforts : orange foncé */
.btn-backup { background: #b54a00; border-color: rgba(0, 0, 0, .15); color: #fff; font-weight: 600; }
.btn-backup:hover { background: #c95400; }
.btn-backup:active { background: #9a3f00; color: rgba(255, 255, 255, .85); }
.btn-backup:disabled { background: rgba(0, 0, 0, .08); color: var(--muted); }
.flag.c-backup { background: #b54a00; color: #fff; }
.backup-hint { border-left: 3px solid #b54a00; }
.btn-small { height: 26px; padding: 0 10px; font-size: 12px; }
.btn-icon { padding: 0 8px; flex-shrink: 0; }
.btn-ghost { height: 26px; background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--card-2); color: var(--text); }
.btn-ghost svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
/* Sous-onglets : "segmented control" */
.btn.subtab { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.subtab:hover { background: var(--card-2); color: var(--text); }
.btn.subtab.active { background: var(--card-2); border-color: var(--stroke); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.registry-btn { min-width: 110px; }

input[type="text"], input[type="number"], textarea, select, .multi-btn {
    width: 100%;
    height: 32px;
    padding: 4px 10px;
    background: var(--input);
    color: var(--text);
    font: 13px var(--font);
    border: 1px solid var(--stroke);
    border-bottom-color: rgba(0, 0, 0, .42);
    border-radius: var(--radius-sm);
    outline: none;
    user-select: text;
}
input[type="text"]:hover, textarea:hover, select:hover, .multi-btn:hover { background: var(--input-hover); }
textarea { height: auto; resize: vertical; line-height: 1.45; padding-top: 6px; }
input:focus, textarea:focus, select:focus {
    background: var(--input-focus);
    border-color: var(--stroke);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 3px;
}
select option { background: var(--input); color: var(--text); }
select option:disabled { color: #9aa0a8; }
input.upper { text-transform: uppercase; }
input:invalid:not(:placeholder-shown) { color: #c42b1c; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }
.toolbar input[type="text"] { width: auto; }
.toolbar select { width: auto; min-width: 150px; }

.radio, .check { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; color: var(--text); font-size: 13px; }
.check input, .radio input, .mx-cell input[type="checkbox"], .multi-panel input { width: 16px; height: 16px; accent-color: var(--accent); }
input[type="range"] { accent-color: var(--accent); }

.lbl { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); }
.lbl-inline { color: var(--text-2); font-size: 12px; }
.inline { display: flex; gap: 6px; }
.inline input { min-width: 0; text-transform: uppercase; }
#rpForm input { text-transform: none; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }

.search-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.search-fields.search-vehicle { grid-template-columns: minmax(0, 1fr) auto; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 24px; }

.edit-banner {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; padding: 8px 12px;
    background: rgba(var(--warn-rgb), .1); color: #6b4e00;
    border: 1px solid rgba(var(--warn-rgb), .3); border-radius: var(--radius-sm);
}

/* Antécédents / Historique : une carte par entrée */
.entries { display: flex; flex-direction: column; gap: 8px; }
.entries:empty { display: none; }
.entries-toolbar { margin: 10px 0 0; }
.entry-box { padding: 0 12px 12px; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius); overflow: hidden; }
.entry-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 -12px 10px; padding: 6px 6px 6px 12px;
    background: var(--card-2); border-bottom: 1px solid var(--stroke);
}
.entry-title { font-weight: 600; }
.entry-remove { width: 28px; height: 24px; border-radius: var(--radius-sm); }
/* « + » dans le titre d'une liste (infractions, chefs d'accusation…) : ajouter un élément */
.entry-add {
    display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; vertical-align: middle;
    border-radius: var(--radius-sm); font-size: 16px; font-weight: 700; line-height: 1; color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .1); cursor: pointer;
}
.entry-add:hover { background: var(--accent); color: #fff; }
.entry-remove svg { width: 10px; height: 10px; }
.entry-remove:hover { background: rgba(var(--danger-rgb), .9); color: #fff; }
.hint-text { font-size: 12px; color: var(--muted); line-height: 1.45; }
.muted { color: var(--muted); }

/* Sous-carte d'un formulaire (Licence, Statut judiciaire) */
.subgroup { position: relative; margin-top: 14px; padding: 12px 14px; background: rgba(0, 0, 0, .02); border: 1px solid var(--stroke); border-radius: var(--radius); }
.license-grid { margin-top: 10px; }

/* Menu déroulant à choix multiples */
.multi { position: relative; }
.multi-btn { display: flex; align-items: center; text-align: left; cursor: pointer; }
.multi-value { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.multi-arrow { color: var(--muted); }
.multi-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
    padding: 4px;
    background: var(--input-focus); border: 1px solid var(--stroke-2); border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}
.multi-panel label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.multi-panel label:hover { background: var(--card-2); }

.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--stroke); }

/* =========================================================================
   TABLEAUX ET FICHES
   ========================================================================= */
.well {
    background: var(--input);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    flex: 1 1 0;
    min-height: 60px;
    overflow: auto;
}
.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th {
    position: sticky; top: 0; z-index: 1;
    padding: 8px 12px;
    background: rgba(var(--mica-2), 1);
    color: var(--muted); font-weight: 600; font-size: 12px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--stroke);
}
.grid td { padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, .06); white-space: nowrap; }
.grid tr.me td { background: rgba(var(--accent-rgb), .07); }
.grid.selectable tbody tr { cursor: pointer; }
.grid.selectable tbody tr:hover td { background: rgba(0, 0, 0, .03); }
.grid.selectable tbody tr.selected td { background: rgba(var(--accent-rgb), .08); }
.grid.selectable tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.grid td.cell-ellipsis { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.col-actions { width: 1%; white-space: nowrap; }
.col-actions .btn + .btn { margin-left: 4px; }
.badge { display: inline-flex; align-items: center; gap: 7px; }
.empty { padding: 26px; text-align: center; color: var(--muted); }

/* Étiquettes colorées (statuts, conditions) */
.flag { display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; background: rgba(0, 0, 0, .07); color: var(--text-2); }
.flag.c-green  { background: #dff6dd; color: #0e5a0e; }
.flag.c-red    { background: #fde7e9; color: #a4262c; }
.flag.c-yellow { background: #fff4ce; color: #7a5c00; }
.flag.c-orange { background: #fde9d9; color: #8a3d00; }
.flag.c-blue   { background: #deecf9; color: #004e8c; }
.flag.c-purple { background: #ede4f8; color: #5c2e91; }
.flag.c-gray   { background: rgba(0, 0, 0, .07); color: var(--text-2); }

.grid tr.row-wanted td { color: #a4262c; font-weight: 600; }

/* Bandeau d'alerte (fiche) */
.sheet-alert { margin-bottom: 10px; padding: 8px 12px; background: #fde7e9; color: #a4262c; font-weight: 600; border: 1px solid rgba(var(--danger-rgb), .45); border-radius: var(--radius-sm); }
.sheet-alert.yellow { background: #fff4ce; color: #6b4e00; border-color: rgba(var(--warn-rgb), .45); }
.sheet-alert.orange { background: #fde9d9; color: #8a3d00; border-color: rgba(232, 113, 26, .45); }

.detail { padding: 12px; user-select: text; }
.detail .empty { padding: 60px 10px; }
.sheet-title {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 10px; padding: 10px 12px;
    background: var(--card-2); border: 1px solid var(--stroke); border-radius: var(--radius-sm);
    font: 600 14px var(--font-display);
}
.sheet { display: grid; grid-template-columns: 190px 1fr; border: 1px solid var(--stroke); border-radius: var(--radius-sm); overflow: hidden; }
.sheet dt, .sheet dd { padding: 6px 10px; border-bottom: 1px solid var(--stroke); }
.sheet dt { color: var(--muted); background: rgba(0, 0, 0, .025); border-right: 1px solid var(--stroke); }
.sheet dd { white-space: pre-wrap; word-break: break-word; }
.sheet-sub { margin: 14px 0 6px; font-weight: 600; }
.sheet-list { list-style: none; border: 1px solid var(--stroke); border-radius: var(--radius-sm); overflow: hidden; }
.sheet-list li { padding: 6px 10px; border-bottom: 1px solid var(--stroke); }
.sheet-foot { margin-top: 10px; font-size: 11px; color: var(--muted); }

/* Cases dépliables d'une fiche */
.fold { margin-top: 6px; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-sm); overflow: hidden; }
.fold > summary { padding: 8px 10px; font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "\203A"; display: inline-block; width: 14px; color: var(--muted); transition: transform .12s; }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold[open] > summary { border-bottom: 1px solid var(--stroke); }
.fold > summary:hover { background: var(--card-2); }
.fold-body { padding: 8px; background: rgba(0, 0, 0, .02); }
.fold-empty { padding: 6px 4px; color: var(--muted); font-style: italic; }

.entry-view { padding: 8px 10px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--card); }
.entry-view + .entry-view { margin-top: 6px; }
.entry-view-title { font-weight: 600; }
.entry-view-meta { margin: 2px 0 4px; font-size: 11px; color: var(--muted); }
.entry-view-text { white-space: pre-wrap; word-break: break-word; }
.entry-report { cursor: pointer; border-left: 3px solid var(--accent); }
.entry-report:hover { background: var(--card-2); }

/* =========================================================================
   UNITÉS : formulaire, tags colorés, polices
   ========================================================================= */
.unit-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto auto auto; gap: 10px 14px; align-items: end; }
.unit-form-actions { display: flex; gap: 6px; }
.readonly-value { display: block; padding: 5px 0; color: var(--text); }
.swatches { display: flex; gap: 5px; height: 32px; align-items: center; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-box { display: block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); }
.swatch input:checked + .swatch-box { outline: 2px solid var(--text); outline-offset: 2px; }

.unit-tag {
    display: inline-block;
    min-width: 34px;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    letter-spacing: .3px;
    white-space: nowrap;
}
.lbl > .unit-tag, .tag-preview-row .unit-tag { align-self: flex-start; height: 32px; line-height: 30px; font-size: 12px; }
.tag-preview-row { display: flex; align-items: center; gap: 6px; height: 32px; }
.tag-green  { background: #2f6b3e; }
.tag-purple { background: #5b3a87; }
.tag-blue   { background: #2d5aa0; }
.tag-orange { background: #9a5a12; }
.tag-red    { background: #9a2f2f; }
.tag-yellow { background: #8a7712; }
.tag-pink   { background: #8f2f6a; }
.tag-gray   { background: #4a4a4a; }

/* Pastille d'une police (WSP, KCSO) ou d'un appel commun */
.dept-tag, .dept-badge {
    display: inline-flex; align-items: center; flex-shrink: 0;
    height: 18px; padding: 0 7px;
    border-radius: var(--radius-sm);
    font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #fff;
    background: #4a4a4a;
    white-space: nowrap;
}
.agency-wsp { background: var(--agency-wsp); }
.agency-kcso { background: var(--agency-kcso); }
.agency-common { background: #5c6672; }
.unit-name-cell { display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================================
   INTERVENTIONS ET INCIDENTS
   ========================================================================= */
.split.split-list { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr); transition: grid-template-columns .18s ease; }
.split.split-list.detail-min { grid-template-columns: minmax(0, 1fr) 40px; }
.call-detail-group { display: flex; flex-direction: column; }
.detail-head { display: flex; align-items: flex-start; gap: 8px; }
.detail-head .legend { flex: 1; }
.detail-head .detail-close { margin-top: -4px; }
.detail-min-hint { display: none; }
.split.detail-min .call-detail-group { padding: 12px 0; align-items: center; overflow: hidden; }
.split.detail-min .call-detail-group > .detail-head, .split.detail-min #interventionDetail { display: none; }
.split.detail-min .detail-min-hint {
    display: block; writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap;
}

/* Listes des appels (une par police + appels communs) */
.dept-lists { overflow-y: auto; }
.dept-fold + .dept-fold { border-top: 1px solid var(--stroke); }
.dept-fold > summary {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; font-weight: 600; cursor: pointer; list-style: none; user-select: none;
    background: rgba(var(--mica-2), 1); border-bottom: 1px solid var(--stroke);
}
.dept-fold > summary::-webkit-details-marker { display: none; }
.dept-fold > summary::before { content: "\203A"; width: 10px; color: var(--muted); transition: transform .12s; }
.dept-fold[open] > summary::before { transform: rotate(90deg); }
.dept-fold > summary:hover { background: #eef1f5; }
.dept-fold.locked > summary { cursor: default; }
.dept-fold.locked > summary::before { content: ""; width: 0; }
.dept-fold.locked > summary:hover { background: rgba(var(--mica-2), 1); }
.dept-fold .grid th { top: 37px; }
.dept-count { margin-left: auto; font-weight: normal; font-size: 12px; color: var(--muted); }
.dept-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; }
.dept-check { display: inline-flex; align-items: center; gap: 8px; font-weight: normal; color: var(--text); }

/* Ligne d'un appel : pastille de la couleur de sa priorité */
.grid tr.prio-nonurgent { --prio: 176, 124, 255; }
.grid tr.prio-p1        { --prio: 255, 99, 99; }
.grid tr.prio-p2        { --prio: 255, 140, 60; }
.grid tr.prio-p3        { --prio: 252, 210, 70; }
.grid.selectable tbody tr.prio td { background: rgba(var(--prio), .08); }
.grid.selectable tbody tr.prio td:first-child { box-shadow: inset 3px 0 0 rgb(var(--prio)); }
.grid.selectable tbody tr.prio:hover td { background: rgba(var(--prio), .14); }
.grid.selectable tbody tr.prio.selected td { background: rgba(var(--prio), .22); }
.grid tr.row-closed td { color: var(--faint); background: transparent; }
.grid.selectable tbody tr.row-closed.selected td { background: rgba(0, 0, 0, .05); color: var(--text-2); }
.cross-inline { color: var(--muted); font-style: italic; }

.hint-box { margin-bottom: 10px; padding: 8px 12px; background: rgba(var(--accent-rgb), .07); color: #004e8c; border: 1px solid rgba(var(--accent-rgb), .25); border-radius: var(--radius-sm); }
.call-actions { margin-bottom: 10px; }
.call-units { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--card); }
.call-unit { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.unit-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.note { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--card); }
.note-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.note-text { margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.note textarea, .note-new textarea { margin-top: 6px; }
.note-new { margin-top: 10px; }
.note.note-report { border-color: rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .05); }
.note-report-title { color: var(--text); }
.note-meta { margin-top: 3px; font-size: 11px; color: var(--muted); }
.note-toolbar { margin: 6px 0 0; }
.report-starter { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--stroke); }
.report-starter select { min-width: 260px; }
textarea.upper-text { text-transform: uppercase; }
.call-form .form-grid { margin-top: 4px; }
.share-hint { padding: 1px 10px; font-size: 11px; color: #004e8c; background: rgba(var(--accent-rgb), .12); border-radius: var(--radius-sm); }

.call-links { border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.call-link { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--stroke); }
.call-link:last-child { border-bottom: none; }
.call-link-text { min-width: 0; line-height: 20px; }
.link-picker { margin: 8px 0 0; }
.link-picker select { flex: 1; min-width: 220px; }

/* =========================================================================
   RAPPORTS
   ========================================================================= */
.report-types .btn { min-width: 110px; }
.toolbar input.report-query { width: 170px; }
.report-call { margin-bottom: 12px; padding: 10px 12px; background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-rgb), .25); border-radius: var(--radius-sm); }
.report-call .lbl { color: #004e8c; font-weight: 600; }
.report-link {
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
    margin-bottom: 8px; padding: 6px 10px;
    background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-rgb), .25); border-radius: var(--radius-sm);
}
.report-form { flex: 1 1 0; min-height: 0; overflow: auto; padding: 2px 6px 6px 0; }
.report-section + .report-section { margin-top: 16px; }
.report-section-title {
    margin: 12px 0 6px; padding: 6px 10px;
    background: var(--card-2); color: var(--text); font-weight: 600;
    border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
}
.report-section > .report-section-title { margin-top: 0; }
.report-form .subgroup { margin-top: 14px; }
.report-form .form-grid + .form-grid { margin-top: 10px; }
.form-grid > .rp-check { align-self: end; height: 32px; }
.rp-lookup { display: flex; }
.form-grid > .hint-box { margin-bottom: 0; }
input.invalid, select.invalid, textarea.invalid { border-color: rgba(255, 99, 99, .6); border-bottom-color: #ff6363; background: rgba(var(--danger-rgb), .12); }

.mx-wrap { overflow-x: auto; border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--input); }
.grid.matrix { width: auto; min-width: 60%; }
.grid.matrix td { padding: 4px 10px; }
.grid.matrix th { position: static; }
.grid.matrix tr.mx-group td { background: var(--card-2); font-weight: 600; }
.grid.matrix tbody tr:hover td { background: rgba(0, 0, 0, .025); }
.mx-cell { text-align: center; min-width: 110px; }
.mx-cell input[type="text"] { width: 90px; text-align: center; }

.report-meta { margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.view-group { margin: 10px 0 4px; font-weight: 600; color: var(--text-2); }
.entry-view .sheet { margin-top: 4px; }
.view-total { margin-top: 6px; padding: 6px 10px; text-align: right; font-weight: 600; border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: var(--card); }

/* Suggestions (historique des recherches) */
.suggest-hint { font-size: 10px; color: rgba(var(--accent-rgb), .9); }
.suggest {
    position: fixed; z-index: 50; max-height: 280px; overflow-y: auto;
    padding: 4px;
    background: var(--input-focus); border: 1px solid var(--stroke-2); border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}
.suggest-title { padding: 4px 8px 6px; font-size: 11px; color: var(--muted); }
.suggest-item { padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-item.active, .suggest-item:hover { background: var(--card-2); }
.suggest-item .muted { font-style: normal; }
.suggest-empty { padding: 8px; color: var(--muted); font-style: italic; white-space: normal; }

/* =========================================================================
   BOLOs
   ========================================================================= */
.btn-bolos { font-weight: 600; }
.bolo-count { font-weight: normal; color: var(--muted); }
.toolbar-inline { display: flex; gap: 6px; }
.unknown { color: var(--muted); font-style: italic; }
.bolo-meta { margin-top: 12px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.bolo-text { padding: 8px 10px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-word; }
.bolo-vehicle { margin-bottom: 10px; }
.bolo-vehicle-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bolo-alert { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bolo-alert .btn { margin-left: auto; }
.bolo-choose { display: flex; flex-direction: column; gap: 10px; padding: 6px; }
.btn.bolo-choice { flex-direction: column; align-items: flex-start; gap: 4px; height: auto; padding: 14px 16px; text-align: left; white-space: normal; }
.bolo-choice b { font-size: 14px; }
.bolo-choice span { font-size: 12px; color: var(--muted); }
.bolo-form .form-grid + .subgroup { margin-top: 18px; }
.bolo-form .bolo-after-desc { margin-top: 12px; }
.bolo-desc .lbl .check { font-size: 13px; }
.bolo-origins { gap: 6px 16px; font-size: 13px; }
.inline-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.bolo-plate { text-transform: uppercase; letter-spacing: 1px; }
.bolo-plate-warning .sheet-alert { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: normal; }
.bolo-actions { margin-top: 12px; }
.grid td.bolo-reason { max-width: 180px; }
.grid td.bolo-summary { max-width: 220px; }
.toolbar select#boloFilter { min-width: 0; }

/* =========================================================================
   PARAMÈTRES
   ========================================================================= */
#page-settings.active { overflow: auto; gap: 8px; padding-right: 4px; }
.mdc-choice { gap: 4px; }
.settings-cat { flex-shrink: 0; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius); overflow: hidden; }
.settings-cat > summary {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 10px 16px;
    font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; user-select: none;
}
.settings-cat > summary::-webkit-details-marker { display: none; }
.settings-cat > summary::after { content: "\203A"; margin-left: auto; font-size: 18px; color: var(--muted); transition: transform .12s; }
.settings-cat[open] > summary::after { transform: rotate(90deg); }
.settings-cat[open] > summary { border-bottom: 1px solid var(--stroke); }
.settings-cat > summary:hover { background: var(--card-2); }
.settings-cat-hint { font-size: 12px; font-weight: normal; color: var(--muted); }
.settings-cat > .settings-grid { padding: 14px 16px 16px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-grid .span-all { grid-column: 1 / -1; }
.settings-grid .group { gap: 8px; background: rgba(0, 0, 0, .02); }
.settings-grid .subgroup { margin-top: 8px; }
.setting-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.setting-row .lbl-inline { min-width: 140px; }
.setting-row input[type="range"] { flex: 1; max-width: 260px; }
.setting-value { min-width: 48px; font-variant-numeric: tabular-nums; }
.setting-actions { margin: 6px 0 0; }
.setting-select { max-width: 320px; }
.setting-text { line-height: 1.5; }
.settings-chat-missing { margin: 12px 16px; padding: 10px 12px; color: var(--muted); font-style: italic; border: 1px dashed var(--stroke-2); border-radius: var(--radius-sm); }
.chat-border-options.disabled { opacity: .45; pointer-events: none; }
.chat-commands { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 12px; align-items: baseline; }
.chat-commands dt { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.chat-commands dd { color: var(--muted); }
.chat-sample { padding: 1px 6px; background: rgba(0, 0, 0, .55); border-radius: 3px; }
.chat-sample.me { color: #a8e6a1; }
.chat-sample.info { color: #a8141e; background: #f4c6c6; font-weight: 600; }
.chat-sample.qst { color: #f7c58f; }
.chat-sample.rep { color: #cdb0f2; }
#page-settings .radio { margin-top: 4px; }

/* =========================================================================
   BARRES DE DÉFILEMENT (fines, Windows 11)
   ========================================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22); border: 3px solid transparent; border-radius: 10px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .34); background-clip: padding-box; }

/* =========================================================================
   HUD (PLD, display MDC, car HUD) : hors du MDC, sobres (fond sombre translucide, coins arrondis)
   ========================================================================= */
/* Contour de la minimap (en véhicule) : trait noir autour de la minimap, puis une ombre « noir nacré rouge » (noir
   rougeâtre près du trait, reflet rouge visible qui s'éteint vers l'extérieur) ; posé à sa place exacte
   (client/hud.lua), jamais par-dessus la carte (trait et ombre sont à l'extérieur) */
.minimap-frame {
    position: fixed; z-index: 1; box-sizing: border-box; pointer-events: none;
    border: 2px solid #000;
    box-shadow:
        0 0 0 1px rgba(28, 2, 4, .9),
        0 0 4px 2px rgba(45, 4, 7, .75),
        0 0 10px 4px rgba(105, 10, 16, .34),
        0 0 18px 6px rgba(120, 12, 20, .14);
}

.hud {
    position: fixed;
    z-index: 30;
    transform-origin: top left;
    background: rgba(16, 21, 29, .8);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    color: #f2f2f2;
    font: 13px var(--font);
    pointer-events: none;
    white-space: nowrap;
}
.hud .part-off, .hud .part-empty { display: none !important; }
.hud-label { margin-right: 6px; font-size: 10px; font-weight: 700; letter-spacing: .6px; color: rgba(255, 255, 255, .5); }


/* Display MDC : unité, police, tag, statut, appel, secteur */
.hud-unit { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; min-width: 160px; border-left: 3px solid var(--accent); }
.hu-head { display: flex; align-items: center; gap: 8px; }
.hu-name { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--font-display); color: #fff; }
.hu-dept { display: inline-flex; align-items: center; gap: 6px; }
.hu-sep { color: rgba(255, 255, 255, .45); }
.hu-line { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.hu-none { color: rgba(255, 255, 255, .45); font-style: italic; }

/* =========================================================================
   PLD et CAR HUD : SANS FOND NI CONTOUR, lisibles sur le jeu par l'ombre du texte. Couleurs selon le thème de la
   couche des HUD (#hudLayer, toujours sombre) : de jour celles du logo (blanc, rouge ; orange / rouge = alertes),
   de nuit la couleur du mode nuit (alertes : intensité et clignotement).
   ========================================================================= */
.hud-pld, .hud-car {
    --hud-ink: var(--n-text);                     /* texte principal */
    --hud-dim: rgba(var(--n-text-rgb), .64);      /* texte secondaire */
    --hud-accent: var(--n-accent);                /* cap, trait, zone */
    --hud-track: rgba(var(--n-rgb), .22);         /* fond des jauges */
    --hud-fill: var(--n-light);                   /* jauges */
    --hud-warn: var(--n-pale);                    /* à surveiller : réserve, moteur très abîmé */
    --hud-danger: var(--n-bright);                /* alerte : zone rouge, panne sèche, ceinture, frein, moteur détruit */
    --hud-rev-bg: var(--n-text);                  /* marche arrière */
    --hud-rev-ink: var(--n-ink);
    --hud-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .55);
    --hud-drop: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .9)) drop-shadow(0 0 4px rgba(0, 0, 0, .45));
    background: none; border: 0; border-radius: 0; box-shadow: none;
    color: var(--hud-ink); text-shadow: var(--hud-shadow);
}
[data-night-color="logo"] .hud-pld, [data-night-color="logo"] .hud-car {
    --hud-ink: #ffffff; --hud-dim: rgba(255, 255, 255, .7); --hud-accent: #e3323f;
    --hud-track: rgba(255, 255, 255, .24); --hud-fill: #f2f2f2; --hud-warn: #ffa62b; --hud-danger: #ff3b30;
    --hud-rev-bg: #ffc24a; --hud-rev-ink: #1a1206;
}
@keyframes hud-blink { 0% { opacity: 1; } 50% { opacity: .15; } }
@keyframes hud-light-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* ---- PLD : cap (flèche tournée + lettre), trait, puis rue / zone / croisement · bloc · heure ---- */
.hud-pld { display: flex; align-items: center; gap: 10px; }
.pld-compass { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 36px; }
.pld-arrow { width: 16px; height: 16px; fill: var(--hud-accent); filter: var(--hud-drop); transition: transform .45s ease; }
.pld-dir { font: 800 28px/1 var(--font-display); letter-spacing: -.5px; color: var(--hud-ink); }
.pld-rule { align-self: stretch; width: 3px; min-height: 46px; margin: 3px 0; border-radius: 2px; background: linear-gradient(var(--hud-accent), transparent); }
.pld-body { display: flex; flex-direction: column; gap: 1px; }
.pld-street { font: 700 20px/1.15 var(--font-display); letter-spacing: .2px; color: var(--hud-ink); }
.pld-zone { font: 800 11px/1.3 var(--font); letter-spacing: 1.6px; text-transform: uppercase; color: var(--hud-accent); }
.pld-meta { display: flex; align-items: center; gap: 14px; margin-top: 3px; font: 500 12px var(--font); color: var(--hud-dim); }
.pld-item { display: inline-flex; align-items: center; gap: 5px; }
.pld-item svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; filter: var(--hud-drop); }
.pld-cross svg { transform: rotate(45deg); }
#pldCross { font-style: italic; color: var(--hud-ink); opacity: .88; }
.pld-key { font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
#pldBlock, #pldTime { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hud-ink); }

/* ---- CAR HUD : vitesse | voyants, compte-tours en segments, essence | rapport ---- */
.hud-car { display: grid; grid-template-columns: auto 128px auto; align-items: end; column-gap: 10px; transition: filter .35s, opacity .35s; }
.car-speed { display: flex; flex-direction: column; align-items: flex-end; }
.car-speed-value { min-width: 2ch; text-align: right; font: 700 40px/.86 var(--font-display); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; color: var(--hud-ink); transition: color .25s; }
.car-unit { margin-top: 5px; font: 800 9.5px/1 var(--font); letter-spacing: 2.4px; color: var(--hud-dim); }
.car-center { display: flex; flex-direction: column; gap: 6px; padding-bottom: 1px; }
/* Voyants */
.car-lights { display: flex; align-items: center; gap: 9px; height: 20px; }
.car-light { display: inline-flex; width: 20px; height: 20px; filter: var(--hud-drop); }
.car-light svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.car-light svg .fill { fill: currentColor; stroke: none; }
.car-light svg .thin { stroke-width: 1.6; }
.car-belt { color: var(--hud-ink); opacity: .92; transition: color .2s; }
.car-belt:not(.belt-on) { color: var(--hud-danger); opacity: 1; }
.car-belt.belt-blink { animation: hud-blink 1s steps(1, end) infinite; }
.car-park { color: var(--hud-danger); animation: hud-light-in .2s ease-out; }
.car-broken { color: var(--hud-danger); }
.car-broken.car-damaged { color: var(--hud-warn); }
/* Compte-tours : une seule barre (blanche, puis zone rouge au bout : JS CAR_RPM_RED), séparées par un trait fin */
.car-rpm { display: flex; gap: 2px; height: 6px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .75)); }
.car-rpm .rpm-zone { position: relative; overflow: hidden; background: var(--hud-track); }
.car-rpm .rpm-white { flex: 81.25; border-radius: 2px 0 0 2px; }
.car-rpm .rpm-red { flex: 18.75; border-radius: 0 2px 2px 0; }
.car-rpm .rpm-red::before { content: ''; position: absolute; inset: 0; background: var(--hud-danger); opacity: .35; }
.car-rpm .rpm-zone i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); transition: transform .08s linear; }
.car-rpm .rpm-white i { background: var(--hud-fill); }
.car-rpm .rpm-red i { background: var(--hud-danger); }
/* Essence : jauge graduée en quarts */
.car-fuel { display: flex; align-items: center; gap: 6px; }
.car-fuel-icon { width: 12px; height: 12px; flex-shrink: 0; color: var(--hud-dim); filter: var(--hud-drop); }
.car-fuel-icon .fill { fill: currentColor; }
.car-fuel-bar { position: relative; flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: var(--hud-track); box-shadow: 0 0 3px rgba(0, 0, 0, .6); }
.car-fuel-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0, 0, 0, .6) calc(25% - 1px) 25%); }
.car-fuel-fill { width: 0; height: 100%; background: var(--hud-fill); transition: width .4s, background-color .2s; }
.car-fuel-fill.car-low { background: var(--hud-warn); }
.car-fuel-fill.car-empty { background: var(--hud-danger); }
/* Rapport : D dans un cadre ; R plein (ambre de jour) */
.car-gear {
    display: grid; place-items: center; width: 30px; height: 36px; border: 2px solid var(--hud-ink); border-radius: 7px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .25);
    transition: background-color .2s, border-color .2s;
}
.car-gear-letter { font: 800 20px/1 var(--font-display); color: var(--hud-ink); }
.car-gear.gear-r { background: var(--hud-rev-bg); border-color: var(--hud-rev-bg); }
.car-gear.gear-r .car-gear-letter { color: var(--hud-rev-ink); text-shadow: none; }
/* Passagers : la ceinture seule */
.hud-car.car-passenger { display: flex; }
.hud-car.car-passenger .car-speed, .hud-car.car-passenger .car-rpm, .hud-car.car-passenger .car-fuel,
.hud-car.car-passenger .car-gear, .hud-car.car-passenger .car-park, .hud-car.car-passenger .car-broken { display: none !important; }
/* Moteur coupé : tout est grisé, sauf le frein de parking (un voyant reste allumé moteur coupé) */
.hud-car.car-off .car-speed, .hud-car.car-off .car-rpm, .hud-car.car-off .car-fuel, .hud-car.car-off .car-gear,
.hud-car.car-off .car-belt, .hud-car.car-off .car-broken { filter: grayscale(1) brightness(.8); opacity: .5; }
/* Véhicule hors d'usage : vitesse, régime et essence clignotent en alerte ; voyant moteur fixe */
.hud-car.car-is-broken.car-off .car-speed, .hud-car.car-is-broken.car-off .car-rpm, .hud-car.car-is-broken.car-off .car-fuel,
.hud-car.car-is-broken.car-off .car-gear, .hud-car.car-is-broken.car-off .car-belt, .hud-car.car-is-broken.car-off .car-broken { filter: none; opacity: 1; }
.hud-car.car-is-broken .car-speed, .hud-car.car-is-broken .car-rpm, .hud-car.car-is-broken .car-fuel { animation: hud-blink .9s steps(1, end) infinite; }
.hud-car.car-is-broken .car-speed-value, .hud-car.car-is-broken .car-unit, .hud-car.car-is-broken .car-fuel-icon { color: var(--hud-danger); }
.hud-car.car-is-broken .car-rpm .rpm-zone i, .hud-car.car-is-broken .car-fuel-fill { background: var(--hud-danger); opacity: 1; }
.hud-car.car-is-broken .car-broken { color: var(--hud-danger); animation: none; opacity: 1; }

/* Notification du moteur : juste au-dessus du car HUD, entre par la gauche */
.car-notice-anchor { position: fixed; z-index: 31; transform-origin: top left; pointer-events: none; width: 0; height: 0; }
/* Voyants de Riven Impact Dynamics allumés juste au-dessus du car HUD : la notification passe au-dessus d'eux */
.car-notice-anchor.riven-lit .car-notice { bottom: calc(8px + 2.8vh); }
.car-notice {
    position: absolute; left: 0; bottom: 8px;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 14px 8px 8px; white-space: nowrap;
    background: rgba(16, 21, 29, .85); color: #f2f2f2;
    border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    font: 13px var(--font);
    opacity: 0; transform: translateX(calc(-100% - 40px));
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s;
}
.car-notice.show { opacity: 1; transform: translateX(0); }
.car-notice-key {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 7px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-bottom-width: 3px; border-radius: 5px;
    font-weight: 700; font-size: 14px; color: #fff;
}
.car-notice-text { display: flex; flex-direction: column; line-height: 1.25; }
.car-notice-text b { font-size: 13px; color: #fff; }
.car-notice-text small { font-size: 11px; color: rgba(255, 255, 255, .6); }

/* Mode placement : HUD déplaçables, MDC masqué */
body.hud-placing .hud { pointer-events: auto; cursor: move; outline: 1px dashed rgba(255, 255, 255, .7); outline-offset: 4px; }
.hud-placebar {
    position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
    z-index: 40; display: flex; align-items: center; gap: 14px;
    padding: 8px 10px 8px 16px;
    background: rgba(20, 25, 34, .95); color: #fff;
    border: 1px solid var(--stroke-2); border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* =========================================================================
   NOTIFICATIONS (en haut à droite) : style des notifications Windows 11
   ========================================================================= */
.toasts { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
    position: relative;
    min-width: 280px; max-width: 380px;
    padding: 10px 14px 10px 40px;
    background: rgba(40, 40, 40, .97); color: var(--text);
    border: 1px solid var(--stroke-2); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    font: 13px var(--font);
    animation: call-in .2s ease-out;
}
.toast::before {
    content: "i"; position: absolute; left: 13px; top: 50%; margin-top: -9px;
    width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink); font: 700 11px var(--font);
}
.toast.error::before { content: "!"; background: #ff99a4; color: #3a0006; }
.toast.success::before { content: "\2713"; background: #6ccb5f; color: #0b2a06; }

/* Nouvelle intervention / proposition / statut : liseré de la couleur de la priorité */
.call-toast {
    --prio: 150, 150, 150;
    width: 330px;
    padding: 10px 14px 11px;
    background: rgba(20, 25, 34, .95); color: #f2f2f2;
    border: 1px solid rgba(255, 255, 255, .1); border-left: 4px solid rgb(var(--prio)); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    font: 13px var(--font);
    animation: call-in .25s ease-out;
    cursor: pointer;
}
.call-toast.prio-nonurgent { --prio: 176, 124, 255; }
.call-toast.prio-p1        { --prio: 255, 99, 99; }
.call-toast.prio-p2        { --prio: 255, 140, 60; }
.call-toast.prio-p3        { --prio: 252, 210, 70; }
.call-toast.prio-incident  { --prio: var(--accent-rgb); }
.call-toast.prio-backup    { --prio: 230, 110, 20; }
.ct-head { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: .7px; color: rgb(var(--prio)); }
.ct-number { color: rgba(255, 255, 255, .7); white-space: nowrap; }
.ct-title { margin: 3px 0 5px; font: 600 15px var(--font-display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row { display: flex; align-items: center; font-size: 12px; line-height: 19px; }
.ct-row .hud-label { min-width: 70px; }
.call-toast.bolo-toast { --prio: 255, 99, 99; }
.ct-ellipsis { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-toast { --prio: 150, 150, 150; width: 290px; }
.status-toast[data-status="available"]   { --prio: var(--st-available); }
.status-toast[data-status="en_route"]    { --prio: var(--st-en_route); }
.status-toast[data-status="on_scene"]    { --prio: var(--st-on_scene); }
.status-toast[data-status="unavailable"] { --prio: var(--st-unavailable); }
.ct-unit { margin-top: 3px; font-size: 13px; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-status { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 16px var(--font-display); color: #fff; }
@keyframes call-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* Proposition "unité la plus proche" (Y / N) */
.offer-toast { width: 400px; box-shadow: 0 0 0 1px rgba(var(--prio), .4), 0 8px 24px rgba(0, 0, 0, .4); }
.offer-toast .ct-head { color: #fff; }
.offer-toast .ct-head > span:first-child { white-space: nowrap; }
.offer-keys { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 12px; }
.offer-keys kbd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
    font: 700 12px var(--font); color: #111; background: #ececec; border-radius: 4px; box-shadow: 0 2px 0 #8a8a8a;
}
.offer-time { margin-left: auto; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }

/* MDC générique : pas d'unité (note et statut de l'unité masqués dans la barre du bas) */
.window.agency-generic #sbStatus { visibility: hidden; }

/* Couleurs des interfaces sombres : mode nuit (Paramètres > MDC > Apparence : vert par défaut, jaune, rouge ou bleu) et
   « logo » (menus de jour : noir, blanc et rouge Torino / bordeaux du logo du serveur) ; attribut data-night-color="…"
   sur <html> (ou sur un bloc). Mêmes contrastes pour chaque couleur : fond noir, textes clairs, jamais de texte foncé
   sur fond sombre. Nuit : valeurs générées depuis le vert (même luminosité, teinte changée). */
:root {
    --n-ink: #000502; --n-field: #000201; --n-btn: #010402; --n-head: #020704; --n-hover: #04110a; --n-press: #06190d;
    --n-press-2: #093016; --n-step: #071d0f; --n-primary: #0b3d1d; --n-primary-hover: #0f4f26;
    --n-primary-border: #1d8a43; --n-strong: #176533; --n-strong-press: #124f28; --n-banner-1: #0b3a1d;
    --n-banner-2: #062311; --n-banner-3: #010603; --n-tag-1: #278a4b; --n-tag-2: #21773f; --n-tag-3: #1c6938;
    --n-tag-4: #185c30; --n-tag-5: #14502a; --n-tag-6: #114524; --n-tag-7: #0d3a1e; --n-tag-8: #0a3018;
    --n-tag-9: #0c351c; --n-tag-kcso: #0f4423; --n-title: #1a8a3f; --n-accent: #27a854; --n-light: #4cc677;
    --n-soft: #5fa97a; --n-text: #6cc28b; --n-pale: #8ed3a6; --n-bright: #b4e6c5; --n-rgb: 35, 185, 88;
    --n-text-rgb: 108, 194, 139; --n-muted-rgb: 84, 150, 108; --n-glow-rgb: 70, 190, 115; --n-light-rgb: 76, 198, 119;
    --n-bg-rgb: 0, 0, 0; --n-bg2-rgb: 0, 2, 1; --n-card-rgb: 1, 6, 3; --n-accent-rgb: 39, 168, 84;
    --n-danger-rgb: 50, 180, 95; --n-warn-rgb: 40, 165, 85; --n-ok-rgb: 32, 138, 72; --n-p1: 108, 194, 139;
    --n-p2: 55, 170, 95; --n-p3: 38, 155, 80; --n-pn: 25, 105, 55; --n-hue: 75deg;
}
[data-night-color="green"] {
    --n-ink: #000502; --n-field: #000201; --n-btn: #010402; --n-head: #020704; --n-hover: #04110a; --n-press: #06190d;
    --n-press-2: #093016; --n-step: #071d0f; --n-primary: #0b3d1d; --n-primary-hover: #0f4f26;
    --n-primary-border: #1d8a43; --n-strong: #176533; --n-strong-press: #124f28; --n-banner-1: #0b3a1d;
    --n-banner-2: #062311; --n-banner-3: #010603; --n-tag-1: #278a4b; --n-tag-2: #21773f; --n-tag-3: #1c6938;
    --n-tag-4: #185c30; --n-tag-5: #14502a; --n-tag-6: #114524; --n-tag-7: #0d3a1e; --n-tag-8: #0a3018;
    --n-tag-9: #0c351c; --n-tag-kcso: #0f4423; --n-title: #1a8a3f; --n-accent: #27a854; --n-light: #4cc677;
    --n-soft: #5fa97a; --n-text: #6cc28b; --n-pale: #8ed3a6; --n-bright: #b4e6c5; --n-rgb: 35, 185, 88;
    --n-text-rgb: 108, 194, 139; --n-muted-rgb: 84, 150, 108; --n-glow-rgb: 70, 190, 115; --n-light-rgb: 76, 198, 119;
    --n-bg-rgb: 0, 0, 0; --n-bg2-rgb: 0, 2, 1; --n-card-rgb: 1, 6, 3; --n-accent-rgb: 39, 168, 84;
    --n-danger-rgb: 50, 180, 95; --n-warn-rgb: 40, 165, 85; --n-ok-rgb: 32, 138, 72; --n-p1: 108, 194, 139;
    --n-p2: 55, 170, 95; --n-p3: 38, 155, 80; --n-pn: 25, 105, 55; --n-hue: 75deg;
}
[data-night-color="yellow"] {
    --n-ink: #050400; --n-field: #020200; --n-btn: #040301; --n-head: #070602; --n-hover: #111004; --n-press: #191606;
    --n-press-2: #302809; --n-step: #1d1907; --n-primary: #3d340b; --n-primary-hover: #4f440f;
    --n-primary-border: #8a761d; --n-strong: #655717; --n-strong-press: #4f4412; --n-banner-1: #3a330b;
    --n-banner-2: #231f06; --n-banner-3: #060501; --n-tag-1: #8a7927; --n-tag-2: #776721; --n-tag-3: #695c1c;
    --n-tag-4: #5c5018; --n-tag-5: #504614; --n-tag-6: #453c11; --n-tag-7: #3a330d; --n-tag-8: #302a0a;
    --n-tag-9: #352f0c; --n-tag-kcso: #443c0f; --n-title: #8a731a; --n-accent: #a89027; --n-light: #c6b04c;
    --n-soft: #a99d5f; --n-text: #c2b36c; --n-pale: #d3c68e; --n-bright: #e6dcb4; --n-rgb: 185, 158, 35;
    --n-text-rgb: 194, 179, 108; --n-muted-rgb: 150, 139, 84; --n-glow-rgb: 190, 171, 70; --n-light-rgb: 198, 176, 76;
    --n-bg-rgb: 0, 0, 0; --n-bg2-rgb: 2, 2, 0; --n-card-rgb: 6, 5, 1; --n-accent-rgb: 168, 144, 39;
    --n-danger-rgb: 180, 156, 50; --n-warn-rgb: 165, 143, 40; --n-ok-rgb: 138, 121, 32; --n-p1: 194, 179, 108;
    --n-p2: 170, 149, 55; --n-p3: 155, 135, 38; --n-pn: 105, 92, 25; --n-hue: 12deg;
}
[data-night-color="red"] {
    --n-ink: #050000; --n-field: #020000; --n-btn: #040101; --n-head: #070202; --n-hover: #110504; --n-press: #190606;
    --n-press-2: #4a0e10; --n-step: #1d0707; --n-primary: #571010; --n-primary-hover: #691415;
    --n-primary-border: #a32225; --n-strong: #7e1d1d; --n-strong-press: #681818; --n-banner-1: #541110;
    --n-banner-2: #3d0b0a; --n-banner-3: #060101; --n-tag-1: #a22e2e; --n-tag-2: #8f2829; --n-tag-3: #812223;
    --n-tag-4: #741e20; --n-tag-5: #681a1a; --n-tag-6: #5e1717; --n-tag-7: #531313; --n-tag-8: #490f0f;
    --n-tag-9: #4e1312; --n-tag-kcso: #5d1515; --n-title: #a41f24; --n-accent: #c12d2f; --n-light: #cd6365;
    --n-soft: #b47373; --n-text: #cb8282; --n-pale: #d38e8f; --n-bright: #e6b4b5; --n-rgb: 211, 40, 42;
    --n-text-rgb: 203, 130, 130; --n-muted-rgb: 167, 98, 98; --n-glow-rgb: 198, 94, 93; --n-light-rgb: 205, 99, 101;
    --n-bg-rgb: 0, 0, 0; --n-bg2-rgb: 2, 0, 0; --n-card-rgb: 6, 1, 1; --n-accent-rgb: 193, 45, 47;
    --n-danger-rgb: 201, 60, 63; --n-warn-rgb: 190, 46, 47; --n-ok-rgb: 163, 39, 38; --n-p1: 203, 130, 130;
    --n-p2: 193, 63, 65; --n-p3: 180, 44, 45; --n-pn: 130, 32, 31; --n-hue: -42deg;
}
[data-night-color="blue"] {
    --n-ink: #000205; --n-field: #000102; --n-btn: #010204; --n-head: #020407; --n-hover: #040811; --n-press: #060e19;
    --n-press-2: #103157; --n-step: #07111d; --n-primary: #123664; --n-primary-hover: #164076;
    --n-primary-border: #2564b0; --n-strong: #204f8a; --n-strong-press: #1b4274; --n-banner-1: #123361;
    --n-banner-2: #0d274a; --n-banner-3: #010306; --n-tag-1: #3168ae; --n-tag-2: #2b5d9b; --n-tag-3: #26538d;
    --n-tag-4: #214c80; --n-tag-5: #1d4375; --n-tag-6: #1a3d6a; --n-tag-7: #15355f; --n-tag-8: #122f56;
    --n-tag-9: #14315a; --n-tag-kcso: #173a6a; --n-title: #2165b1; --n-accent: #3077cd; --n-light: #6f9bd1;
    --n-soft: #7d97b9; --n-text: #8caacf; --n-pale: #8eadd3; --n-bright: #b4cbe6; --n-rgb: 50, 124, 216;
    --n-text-rgb: 140, 170, 207; --n-muted-rgb: 108, 136, 172; --n-glow-rgb: 104, 146, 202;
    --n-light-rgb: 111, 155, 209; --n-bg-rgb: 0, 0, 0; --n-bg2-rgb: 0, 1, 2; --n-card-rgb: 1, 3, 6;
    --n-accent-rgb: 48, 119, 205; --n-danger-rgb: 72, 132, 204; --n-warn-rgb: 49, 116, 202; --n-ok-rgb: 41, 98, 175;
    --n-p1: 140, 170, 207; --n-p2: 74, 130, 197; --n-p3: 47, 111, 192; --n-pn: 34, 80, 142; --n-hue: 172deg;
}
[data-night-color="logo"] {
    --n-ink: #0b0b0c; --n-field: #09090a; --n-btn: #111113; --n-head: #161618; --n-hover: #22151a; --n-press: #2d1218;
    --n-press-2: #5a0d18; --n-step: #241318; --n-primary: #7a0c19; --n-primary-hover: #931020;
    --n-primary-border: #c62a37; --n-strong: #8b0e1d; --n-strong-press: #6d0a16; --n-banner-1: #8b0e1d;
    --n-banner-2: #4e0811; --n-banner-3: #0d0506; --n-tag-1: #a3192a; --n-tag-2: #921626; --n-tag-3: #821322;
    --n-tag-4: #73111e; --n-tag-5: #650f1a; --n-tag-6: #580d17; --n-tag-7: #4b0b14; --n-tag-8: #3e0a11;
    --n-tag-9: #430a12; --n-tag-kcso: #5c0d17; --n-title: #e4505c; --n-accent: #d8323f; --n-light: #ef7c86;
    --n-soft: #c9c4c5; --n-text: #ebe7e7; --n-pale: #f4f1f1; --n-bright: #ffffff; --n-rgb: 205, 35, 50;
    --n-text-rgb: 235, 231, 231; --n-muted-rgb: 178, 170, 172; --n-glow-rgb: 225, 55, 70;
    --n-light-rgb: 239, 124, 134; --n-bg-rgb: 7, 7, 8; --n-bg2-rgb: 12, 12, 13; --n-card-rgb: 17, 17, 19;
    --n-accent-rgb: 216, 50, 63; --n-danger-rgb: 230, 70, 82; --n-warn-rgb: 214, 150, 40; --n-ok-rgb: 60, 170, 90;
    --n-p1: 240, 120, 130; --n-p2: 216, 50, 63; --n-p3: 170, 30, 45; --n-pn: 120, 22, 32; --n-hue: -42deg;
}

/* =========================================================================
   MODE NUIT (Paramètres > MDC > Apparence ; data-theme="night" sur #mdc / #suggestBox et sur #hudLayer, posé par script.js)
   Fond noir très sombre, dans la COULEUR du mode nuit (vert par défaut, jaune, rouge ou bleu) : les écarts de couleur du mode jour deviennent des écarts de vert (titres
   vert foncé, texte vert clair, zones et boutons plus ou moins verts). Seuls les STATUTS des unités (Disponible,
   En route, Sur place, Indisponible : --st-*) gardent leurs couleurs.
   ========================================================================= */
[data-theme="night"] {
    --mica:      var(--n-bg-rgb);
    --mica-2:    var(--n-bg2-rgb);
    --card:      rgba(var(--n-card-rgb), .92);
    --card-2:    rgba(var(--n-rgb), .06);
    --card-3:    rgba(var(--n-rgb), .11);
    --input:     var(--n-field);
    --input-hover: var(--n-head);
    --input-focus: var(--n-field);
    --stroke:    rgba(var(--n-rgb), .16);
    --stroke-2:  rgba(var(--n-rgb), .3);
    --text:      var(--n-text);                      /* texte : vert clair */
    --text-2:    rgba(var(--n-text-rgb), .84);
    --muted:     rgba(var(--n-muted-rgb), .64);
    --faint:     rgba(var(--n-muted-rgb), .42);
    --title:     var(--n-title);                      /* titres : vert plus foncé */
    --accent:    var(--n-accent);
    --accent-rgb: var(--n-accent-rgb);
    --accent-ink: var(--n-ink);
    --danger:    var(--n-pale);
    --danger-rgb: var(--n-danger-rgb);
    --warn-rgb:  var(--n-warn-rgb);
    --ok-rgb:    var(--n-ok-rgb);
    --shadow:    0 24px 56px rgba(0, 0, 0, .7), 0 0 0 1px rgba(var(--n-rgb), .08);
    --agency-wsp:  var(--n-tag-4);
    --agency-kcso: var(--n-tag-kcso);
}
/* Thème posé sur la fenêtre du MDC (#mdc, #suggestBox) et sur la couche des HUD / notifications (#hudLayer), JAMAIS
   sur la racine (<html>) : le NUI est un cadre dans la page du jeu, une racine en color-scheme sombre lui donnerait un
   fond opaque noir qui cache tout l'écran. */
[data-theme="night"] { color: var(--text); color-scheme: dark; }
.theme-layer { display: contents; }
/* Les HUD et notifications (déjà sombres) passent aussi au vert */
[data-theme="night"] .hud, [data-theme="night"] .toasts, [data-theme="night"] .hud-placebar, [data-theme="night"] .car-notice-anchor {
    --card: rgba(var(--n-rgb), .05); --card-2: rgba(var(--n-rgb), .08); --card-3: rgba(var(--n-rgb), .14);
    --stroke: rgba(var(--n-rgb), .16); --stroke-2: rgba(var(--n-rgb), .3);
    --text: var(--n-text); --text-2: rgba(var(--n-text-rgb), .84); --muted: rgba(var(--n-muted-rgb), .64); --faint: rgba(var(--n-muted-rgb), .42);
    --accent: var(--n-accent); --accent-rgb: var(--n-accent-rgb);
}

/* Titres : vert foncé */
[data-theme="night"] .page-head h1, [data-theme="night"] .legend, [data-theme="night"] .subgroup-title,
[data-theme="night"] .chooser-box h2, [data-theme="night"] .agency-card-text b, [data-theme="night"] .sheet-title,
[data-theme="night"] .settings-cat > summary, [data-theme="night"] .app-name, [data-theme="night"] .rp-name,
[data-theme="night"] .navpane .legend, [data-theme="night"] .memo-head .legend { color: var(--title); }
[data-theme="night"] .agency-title { color: var(--text); }

/* Logos (WSP, KCSO) : en vert, comme le reste */
[data-theme="night"] .app-icon img, [data-theme="night"] .agency-card-icon img, [data-theme="night"] .chooser-logos img {
    filter: grayscale(1) sepia(1) hue-rotate(var(--n-hue)) saturate(3.2) brightness(.85);
}

/* Fenêtre */
[data-theme="night"] .win-btn:hover, [data-theme="night"] .title-action:hover { background: rgba(var(--n-rgb), .08); }
[data-theme="night"] .win-close:hover { background: var(--n-strong); color: var(--n-bright); }
[data-theme="night"] .win-close:active { background: var(--n-strong-press); }

/* Boutons : plus ou moins verts, aucune autre couleur */
[data-theme="night"] .btn { background: var(--n-btn); border-color: rgba(var(--n-rgb), .34); border-bottom-color: rgba(var(--n-rgb), .5); color: var(--text); }
[data-theme="night"] .btn:hover { background: var(--n-hover); }
[data-theme="night"] .btn:active, [data-theme="night"] .btn.active { background: var(--n-press); color: var(--text); }
[data-theme="night"] .btn-default { background: var(--n-primary); border-color: var(--n-primary-border); color: var(--n-pale); }
[data-theme="night"] .btn-backup { background: #8a3a00; border-color: #b54a00; color: #ffe2cc; }
[data-theme="night"] .flag.c-backup { background: #8a3a00; color: #ffe2cc; }
[data-theme="night"] .btn-default:hover { background: var(--n-primary-hover); }
[data-theme="night"] .btn-default:active, [data-theme="night"] .btn-default.active { background: var(--n-press-2); color: var(--n-pale); }
[data-theme="night"] .btn-default:disabled { background: var(--n-btn); color: var(--faint); }
[data-theme="night"] .btn-danger:hover, [data-theme="night"] .btn-danger.confirm { background: var(--n-strong); border-color: var(--n-accent); color: var(--n-bright); }
[data-theme="night"] .btn-ghost, [data-theme="night"] .btn.subtab { background: transparent; border-color: transparent; }
[data-theme="night"] .btn.subtab.active { background: var(--card-2); border-color: var(--stroke); }
[data-theme="night"] .agency-card.active { background: rgba(var(--n-rgb), .08); }
[data-theme="night"] .agency-card.confirm { border-color: var(--n-accent); background: rgba(var(--n-rgb), .12); }

/* Champs, listes, tableaux */
[data-theme="night"] input[type="text"], [data-theme="night"] input[type="number"], [data-theme="night"] textarea,
[data-theme="night"] select, [data-theme="night"] .multi-btn { border-bottom-color: rgba(var(--n-rgb), .5); }
[data-theme="night"] select option { background: var(--n-field); color: var(--text); }
[data-theme="night"] select option:disabled { color: var(--faint); }
[data-theme="night"] input:invalid:not(:placeholder-shown) { color: var(--n-bright); }
[data-theme="night"] input.invalid, [data-theme="night"] select.invalid, [data-theme="night"] textarea.invalid { border-color: var(--n-accent); border-bottom-color: var(--n-accent); background: rgba(var(--n-rgb), .12); }
[data-theme="night"] .multi-panel, [data-theme="night"] .suggest, [data-theme="night"] .well, [data-theme="night"] .mx-wrap { background: var(--n-field); box-shadow: 0 8px 20px rgba(0, 0, 0, .6); }
[data-theme="night"] .grid th, [data-theme="night"] .dept-fold > summary, [data-theme="night"] .dept-fold.locked > summary:hover { background: var(--n-head); color: var(--title); }
[data-theme="night"] .dept-fold > summary:hover { background: var(--n-hover); }
[data-theme="night"] .grid td { border-bottom-color: rgba(var(--n-rgb), .08); }
[data-theme="night"] .grid.selectable tbody tr:hover td, [data-theme="night"] .grid.matrix tbody tr:hover td { background: rgba(var(--n-rgb), .05); }
[data-theme="night"] .grid.selectable tbody tr.selected td { background: rgba(var(--n-rgb), .12); }
[data-theme="night"] .grid tr.row-wanted td { color: var(--n-bright); }
[data-theme="night"] .subgroup, [data-theme="night"] .fold-body, [data-theme="night"] .settings-grid .group, [data-theme="night"] .sheet dt { background: rgba(var(--n-rgb), .03); }
[data-theme="night"] ::-webkit-scrollbar-thumb { background: rgba(var(--n-rgb), .25); background-clip: padding-box; }
[data-theme="night"] ::-webkit-scrollbar-thumb:hover { background: rgba(var(--n-rgb), .4); background-clip: padding-box; }

/* Pastilles et étiquettes de couleur -> nuances de vert (plus la couleur était forte, plus le vert est clair) */
[data-theme="night"] .flag { background: rgba(var(--n-rgb), .07); color: var(--text-2); }
[data-theme="night"] .flag.c-red    { background: rgba(var(--n-rgb), .26); color: var(--n-bright); }
[data-theme="night"] .flag.c-orange { background: rgba(var(--n-rgb), .2);  color: var(--n-pale); }
[data-theme="night"] .flag.c-yellow { background: rgba(var(--n-rgb), .15); color: var(--n-pale); }
[data-theme="night"] .flag.c-green  { background: rgba(var(--n-rgb), .11); color: var(--n-text); }
[data-theme="night"] .flag.c-blue, [data-theme="night"] .flag.c-purple { background: rgba(var(--n-rgb), .08); color: var(--n-soft); }
[data-theme="night"] .flag.c-gray   { background: rgba(var(--n-rgb), .05); color: var(--muted); }
[data-theme="night"] .sheet-alert, [data-theme="night"] .sheet-alert.yellow, [data-theme="night"] .sheet-alert.orange { background: rgba(var(--n-rgb), .14); color: var(--n-bright); border-color: rgba(var(--n-rgb), .45); }
[data-theme="night"] .hint-box, [data-theme="night"] .report-call, [data-theme="night"] .share-hint { color: var(--text); background: rgba(var(--n-rgb), .06); border-color: rgba(var(--n-rgb), .25); }
[data-theme="night"] .report-call .lbl { color: var(--title); }
[data-theme="night"] .unit-tag, [data-theme="night"] .dept-tag, [data-theme="night"] .dept-badge, [data-theme="night"] .side-bolo-kind { color: var(--n-bright); }
[data-theme="night"] .tag-red    { background: var(--n-tag-1); }
[data-theme="night"] .tag-orange { background: var(--n-tag-2); }
[data-theme="night"] .tag-yellow { background: var(--n-tag-3); }
[data-theme="night"] .tag-pink   { background: var(--n-tag-4); }
[data-theme="night"] .tag-purple { background: var(--n-tag-5); }
[data-theme="night"] .tag-blue   { background: var(--n-tag-6); }
[data-theme="night"] .tag-green  { background: var(--n-tag-7); }
[data-theme="night"] .tag-gray   { background: var(--n-tag-8); }
[data-theme="night"] .agency-common, [data-theme="night"] .dept-tag, [data-theme="night"] .dept-badge { background: var(--n-tag-9); }
[data-theme="night"] .agency-wsp { background: var(--agency-wsp); }
[data-theme="night"] .agency-kcso { background: var(--agency-kcso); }
[data-theme="night"] .side-bolo-kind.per { background: var(--n-tag-1); }
[data-theme="night"] .side-bolo-kind.veh { background: var(--n-tag-4); }
/* Priorités des appels : P1 vert le plus clair … non urgent le plus sombre */
[data-theme="night"] .grid tr.prio-p1, [data-theme="night"] .call-toast.prio-p1 { --prio: var(--n-p1); }
[data-theme="night"] .grid tr.prio-p2, [data-theme="night"] .call-toast.prio-p2 { --prio: var(--n-p2); }
[data-theme="night"] .grid tr.prio-p3, [data-theme="night"] .call-toast.prio-p3 { --prio: var(--n-p3); }
[data-theme="night"] .grid tr.prio-nonurgent, [data-theme="night"] .call-toast.prio-nonurgent { --prio: var(--n-pn); }
[data-theme="night"] .call-toast, [data-theme="night"] .status-toast { --prio: var(--n-p3); }

/* HUD (PLD, display de l'unité, car HUD) et notifications */
[data-theme="night"] .hud:not(.hud-car):not(.hud-pld), [data-theme="night"] .toast, [data-theme="night"] .call-toast, [data-theme="night"] .car-notice, [data-theme="night"] .hud-placebar {
    background: rgba(var(--n-bg-rgb), .88); border-color: rgba(var(--n-rgb), .25); color: var(--text);
}
[data-theme="night"] .hud-label, [data-theme="night"] .hu-sep,
[data-theme="night"] .hu-none, [data-theme="night"] .ct-number, [data-theme="night"] .offer-time, [data-theme="night"] .car-notice-text small { color: var(--muted); }
[data-theme="night"] .hu-name, [data-theme="night"] .ct-title, [data-theme="night"] .ct-status,
[data-theme="night"] .car-notice-text b, [data-theme="night"] .offer-toast .ct-head { color: var(--text); }
[data-theme="night"] .ct-unit { color: var(--text-2); }
[data-theme="night"] .toast.error::before, [data-theme="night"] .toast.success::before { background: var(--n-accent); color: var(--n-ink); }
[data-theme="night"] .offer-keys kbd, [data-theme="night"] .car-notice-key { color: var(--n-ink); background: var(--n-text); box-shadow: 0 2px 0 var(--n-tag-4); }

/* =========================================================================
   RAPPORTS : classification des infractions (État de Washington)
   TI / CI : infractions civiles ; M / GM : délits ; FC / FB / FA : crimes (felonies)
   ========================================================================= */
.off-badge {
    display: inline-block; min-width: 26px; padding: 1px 6px; margin-right: 2px; border-radius: 3px;
    font: 700 10.5px/1.5 var(--font, inherit); letter-spacing: .04em; text-align: center; vertical-align: 1px;
    color: #fff; background: #5b6470;
}
.off-badge.off-TI { background: #2f6db5; }
.off-badge.off-CI { background: #3d8a83; }
.off-badge.off-M { background: #b7791f; }
.off-badge.off-GM { background: #c2561d; }
.off-badge.off-FC { background: #b4232f; }
.off-badge.off-FB { background: #8f1726; }
.off-badge.off-FA { background: #5e0d18; }
.off-info { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.35; }
/* Mode nuit : une seule couleur (celle du mode nuit), plus ou moins dense selon la gravité */
[data-theme="night"] .off-badge { color: var(--n-bright); background: rgba(var(--n-rgb), .22); }
[data-theme="night"] .off-badge.off-M, [data-theme="night"] .off-badge.off-GM { background: rgba(var(--n-rgb), .38); }
[data-theme="night"] .off-badge.off-FC, [data-theme="night"] .off-badge.off-FB,
[data-theme="night"] .off-badge.off-FA { background: rgba(var(--n-rgb), .6); color: #000; }

/* =========================================================================
   CASIER JUDICIAIRE ET REGISTRE DES DÉLINQUANTS
   ========================================================================= */
.subtabs-justice { margin-top: -4px; padding-top: 6px; border-top: 1px dashed var(--stroke); }
.subtabs-justice .hint-text { margin-right: 2px; }
.inline-top { align-items: flex-start; }
.inline-top textarea { flex: 1; min-width: 0; }
.conviction-box .entry-title, .reg-box .entry-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-editor + .reg-editor { margin-top: 10px; }
.reg-toggle { font-weight: 600; }
.reg-box { margin-top: 8px; border-left: 3px solid #6b3fa0; }
.reg-box .entry-head { gap: 8px; }
.reg-box .sheet-alert { margin: 10px 0 0; }
.reg-months { display: block; min-height: 16px; font-size: 11px; }
.justice-summary { margin: 2px 0 6px; }
.justice-summary b { color: var(--text); }
.linked-records, .legacy-records { margin-bottom: 8px; }
.sheet-alert.purple { background: #efe6fa; color: #4b2380; border-color: rgba(107, 63, 160, .45); }
.conviction-view .entry-view-title .flag, .reg-view .entry-view-title .flag { margin-right: 2px; }
.conviction-view .entry-view-text, .reg-view .entry-view-text { margin-top: 4px; font-size: 12px; }
.btn-offenders { font-weight: 600; color: #4b2380; }
.segmented { display: inline-flex; border: 1px solid var(--stroke); border-radius: var(--radius-sm); overflow: hidden; }
.segmented .seg-btn { border: 0; border-radius: 0; background: transparent; color: var(--text-2); }
.segmented .seg-btn + .seg-btn { border-left: 1px solid var(--stroke); }
.segmented .seg-btn.active { background: var(--card-2); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.offenders-query { flex: 1 1 200px; width: auto; }
#offendersLevel { width: auto; }
tr.row-ended td { opacity: .55; }
[data-theme="night"] .sheet-alert.purple { background: rgba(var(--n-rgb), .14); color: var(--n-bright); border-color: rgba(var(--n-rgb), .45); }
[data-theme="night"] .btn-offenders { color: inherit; }
[data-theme="night"] .reg-box { border-left-color: rgba(var(--n-rgb), .6); }
#page-offenders .grid { width: 100%; }
#page-offenders .grid td { white-space: normal; vertical-align: top; }
#page-offenders .grid td .muted { font-size: 11px; }