/* ─── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ─── MudBlazor Layout Overrides ───────────────────────────── */
.mud-layout {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
}

.mud-main-content {
    background: transparent !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
}

/* ─── AppBar: two-row auto-height header ───────────────────── */
/* The app bar is in-flow with height:auto, so --mud-appbar-height only drives
   the top offset of the clipped L2 drawer. Anything stacked above the app bar
   must be added to it, or the drawer slides under the header. */
:root {
    --app-header-height: 128px;
    --app-sim-banner-height: 40px;
    --mud-appbar-height: var(--app-header-height) !important;
}

.mud-layout.has-role-simulation {
    --mud-appbar-height: calc(var(--app-header-height) + var(--app-sim-banner-height)) !important;
}

.app-sim-banner { flex-shrink: 0; }

.app-sim-banner > .mud-paper {
    height: var(--app-sim-banner-height);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.app-sim-banner > .mud-paper > * { height: 100%; }

/* ─── Syntax highlighting tokens (highlight.js, used by MarkdownRenderer) ── */
:root {
    --code-keyword: #cf222e;
    --code-string: #0a3069;
    --code-comment: #6e7781;
    --code-number: #0550ae;
    --code-function: #8250df;
    --code-builtin: #0550ae;
    --code-literal: #0550ae;
    --code-type: #953800;
    --code-attr: #116329;
    --code-variable: #953800;
    --code-meta: #1b7c83;
    --code-tag: #116329;
    --code-selector: #6f42c1;
    --code-addition: #116329;
    --code-deletion: #82071e;
    --code-addition-bg: #dafbe1;
    --code-deletion-bg: #ffebe9;
}

@media (prefers-color-scheme: dark) {
    :root {
        --code-keyword: #ff7b72;
        --code-string: #a5d6ff;
        --code-comment: #8b949e;
        --code-number: #79c0ff;
        --code-function: #d2a8ff;
        --code-builtin: #79c0ff;
        --code-literal: #79c0ff;
        --code-type: #ffa657;
        --code-attr: #7ee787;
        --code-variable: #ffa657;
        --code-meta: #56d4dd;
        --code-tag: #7ee787;
        --code-selector: #d2a8ff;
        --code-addition: #3fb950;
        --code-deletion: #f85149;
        --code-addition-bg: #12261e;
        --code-deletion-bg: #3d1117;
    }
}

.mud-appbar {
    border-radius: 0 !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

.app-header.mud-appbar {
    position: relative !important;
    height: auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    z-index: var(--mud-zindex-appbar) !important;
}

.app-header .mud-toolbar,
.app-header .mud-toolbar-appbar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
}

/* ─── Top navigation tabs ──────────────────────────────────── */
.nav-row {
    overflow-x: auto;
    scrollbar-width: thin;
}

.nav-tab.mud-button-root {
    border-radius: 0 !important;
    text-transform: none !important;
    min-width: auto;
    padding: 8px 16px;
    font-weight: 400;
    font-size: 0.8125rem;
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s, background-color 0.2s;
}


.nav-tab.mud-button-root .mud-icon-button-label,
.nav-tab.mud-button-root .mud-button-icon-start {
    font-size: 1.125rem;
    margin-right: 4px;
}

.nav-tab.mud-button-root:hover:not(:disabled) {
    opacity: 1;
    background-color: rgba(128, 128, 128, 0.12);
}

.nav-tab-active.mud-button-root {
    opacity: 1;
    font-weight: 500;
    box-shadow: inset 0 -3px 0 0 currentColor;
}

/* ─── Drawer ────────────────────────────────────────────────── */
.mud-drawer { border-radius: 0 !important; }

/* Edit drawers (BIA / Actifs TIC / précontractuel) : moitié de la largeur
   disponible, pleine largeur quand le viewport ≤ 800px (les onglets ont
   besoin de place). Width="50%" sur le composant pose la variable inline ;
   la media query la force à 100% en dessous du seuil. */
@media (max-width: 800px) {
    .mud-drawer.edit-drawer { --mud-drawer-width: 100% !important; }
}

/* Grille des montants budgétaires : valeurs alignées à droite (comme l'éditeur Python). */
.budget-amounts input { text-align: right; }

/* Drawer imbriqué (fiche prestataire, ouvert depuis le drawer d'édition de contrat).
   Les overlays de drawer MudBlazor sont à appbar+1, sous le drawer parent (appbar+2) :
   on remonte ce drawer ET son overlay au-dessus du drawer parent pour qu'il le recouvre. */
.nested-drawer-host .mud-drawer.mud-drawer-temporary { z-index: calc(var(--mud-zindex-appbar) + 5); }
.nested-drawer-host .mud-overlay.mud-overlay-drawer { z-index: calc(var(--mud-zindex-appbar) + 4); }

/* Cartes KPI cliquables du tableau de bord du registre (toute la carte navigue vers la liste). */
.dashboard-kpi-card { transition: box-shadow .15s ease, border-color .15s ease; }
.dashboard-kpi-card:hover { border-color: var(--mud-palette-primary); box-shadow: var(--mud-elevation-4); }

/* Matrice fonctions × actifs : 1re colonne collante + défilement horizontal. */
.fa-matrix { border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
.fa-matrix th, .fa-matrix td { border: 1px solid var(--mud-palette-lines-default); }
.fa-matrix thead th { background: var(--mud-palette-background-grey); text-align: center; white-space: nowrap; padding: 4px 4px; }
/* Colonnes de cases serrées : padding minimal + marge native du checkbox supprimée. */
.fa-matrix tbody td { text-align: center; padding: 1px; }

/* Liste des budgets : chiffres tabulaires (largeur fixe par chiffre) pour que les colonnes
   monétaires s'alignent verticalement comme un grand livre, quel que soit le nombre de chiffres.
   vertical-align: top calé en haut (au lieu du middle par défaut du navigateur) car la colonne
   Budget 2027 (montant + tendance) est plus haute que ses voisines à une seule ligne : sans ce
   réglage, le contenu des cellules plus courtes flotte au centre de la ligne au lieu de s'aligner
   avec les autres colonnes. */
.budgets-table td, .budgets-table th { font-variant-numeric: tabular-nums; vertical-align: top; }
/* Budget 2027 = prévisionnel : italique + gris (comme un chiffre non définitif en reporting
   financier) et séparateur pointillé pour le détacher visuellement du bloc 2026 (données actées). */
.budgets-table .budget-2027 { font-style: italic; border-left: 1px dashed var(--mud-palette-lines-default); }
.fa-matrix tbody td input[type="checkbox"] { margin: 0; vertical-align: middle; }
/* 1re colonne (actif) collante : opaque, au-dessus des cellules qui défilent, séparée par une ombre. */
.fa-matrix .fa-sticky { position: sticky; left: 0; z-index: 2; background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)); text-align: left; min-width: 200px; padding: 4px 10px; box-shadow: 1px 0 0 var(--mud-palette-lines-default); }
.fa-matrix thead th.fa-sticky { z-index: 3; background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)); }
.fa-matrix .fa-group-row th {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    border-top: 2px solid var(--mud-palette-primary);
    color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-text-primary));
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.72rem;
    padding: 6px 10px;
}
/* Libellé de groupe (département) épinglé à gauche : reste visible pendant le défilement horizontal. */
.fa-matrix .fa-group-row .fa-group-label { position: sticky; left: 10px; display: inline-block; }

/* ─── Multiline text fields : redimensionnables verticalement ── */
textarea.mud-input-slot,
.mud-input .mud-input-slot.mud-input-root-multiline {
    resize: vertical !important;
}

/* ─── Layout Utilities ──────────────────────────────────────── */
.h-100 { height: 100%; }
.vh-100 { height: 100vh; height: 100dvh; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }

/* ─── Text Utilities ────────────────────────────────────────── */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-nowrap { white-space: nowrap; }

/* ─── Snackbar Positioning ──────────────────────────────────── */
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-right { top: 64px !important; }

@media (max-width: 600px) {
    .mud-snackbar { font-size: 0.8rem; padding: 6px 10px; min-width: 0; }
    .mud-snackbar-location-top-right { right: 8px !important; left: 8px !important; width: auto !important; }
}

/* ── Notification list divider ──────────────────── */
.border-bottom-divider {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* ─── Home — DORA risk-management framework dashboard ──────────
   Global (not scoped) so the rules reach the HomeLinkView child
   component without depending on ::deep landing the scope attribute
   on MudBlazor component roots. Brand/domain colours are fixed;
   neutral surfaces use --mud-palette-* so light/dark both adapt. */
.risk-home {
    min-height: 100%;
    background: var(--mud-palette-background);
}

/* Top banner */
.risk-home .risk-banner {
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, #b87cf0);
    border-radius: 20px;
    background: var(--mud-palette-surface);
    box-shadow: 0 6px 16px rgba(60, 34, 92, 0.12);
}

.risk-home .risk-banner-title {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 18%, #7c4fb4);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.risk-home .risk-framework-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

/* Domain cards : 4 colonnes côte à côte sur desktop, calé sur les mêmes
   ruptures que la grille du cadre (4 dès ≥1200px, 2 en tablette, 1 en mobile). */
.risk-home .risk-domain-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    /* Cartes à hauteur naturelle (pas d'étirement) : évite le trou au-dessus
       de la tuile-résultat dans les domaines qui ont moins de liens. */
    align-items: start;
}

/* Shared link shape — framework pills and domain items */
.risk-home .risk-framework-link,
.risk-home .risk-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    border: 2px solid currentColor;
    border-radius: 12px;
    color: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.risk-home .risk-framework-link {
    justify-content: center;
    min-height: 64px;
    padding: 0.55rem 0.7rem;
    text-align: center;
    border-color: #b87cf0;
    background: color-mix(in srgb, var(--mud-palette-surface) 84%, #f4ecff);
    color: var(--mud-palette-text-primary);
}

.risk-home .risk-framework-link:hover,
.risk-home .risk-item[href]:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(35, 33, 45, 0.15);
}

.risk-home .risk-framework-link-primary {
    border-color: #a062dd;
    background: linear-gradient(90deg, #b77aed 0%, #9f63db 100%);
    color: #fff;
}

.risk-home .risk-link-content,
.risk-home .risk-link-trailing {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

/* Domain cards */
.risk-home .risk-domain {
    --domain-color: #0d5797;
    --domain-primary: #0d5ea6;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    padding: 1rem;
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-background));
    box-shadow: 0 8px 18px rgba(35, 33, 45, 0.07);
    color: color-mix(in srgb, var(--mud-palette-text-primary) 22%, var(--domain-color));
}

.risk-home .risk-domain-security   { --domain-color: #7a2f45; --domain-primary: #7a2f45; }
.risk-home .risk-domain-resilience { --domain-color: #0f9b50; --domain-primary: #0fad56; }
.risk-home .risk-domain-third      { --domain-color: #0b579d; --domain-primary: #0d5ea6; }
.risk-home .risk-domain-incidents  { --domain-color: #0a9bde; --domain-primary: #14a6e2; }

.risk-home .risk-domain-header {
    min-height: 96px;
}

.risk-home .risk-domain-title {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 16%, var(--domain-color));
    font-size: 1.7rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.1;
}

.risk-home .risk-domain-subtitle {
    margin-top: 0.4rem;
    color: var(--mud-palette-text-secondary);
}

.risk-home .risk-domain-links {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.risk-home .risk-item {
    min-height: 52px;
    padding: 0.62rem 0.76rem;
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--domain-color));
}

.risk-home .risk-item[href]:hover {
    background: var(--mud-palette-surface);
}

.risk-home .risk-item-primary,
.risk-home .risk-item-primary[href]:hover {
    border-color: var(--domain-primary);
    background: var(--domain-primary);
    color: #fff;
}

.risk-home .risk-item-outcome {
    margin-top: auto;
    min-height: 56px;
    border-color: var(--domain-primary);
    background: color-mix(in srgb, var(--domain-primary) 55%, var(--mud-palette-surface) 45%);
    color: var(--domain-color);
}

.risk-home .risk-item-disabled {
    border-style: dashed;
    cursor: not-allowed;
    opacity: 0.6;
}

.risk-home .risk-link-mode {
    flex: 0 0 auto;
    opacity: 0.8;
}

.risk-home .risk-count-chip,
.risk-home .risk-pending-chip {
    flex: 0 0 auto;
    height: 24px;
    background: color-mix(in srgb, var(--mud-palette-surface) 80%, transparent);
    color: inherit;
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 1199.98px) {
    .risk-home .risk-framework-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .risk-home .risk-domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .risk-home .risk-framework-grid { grid-template-columns: 1fr; }
    .risk-home .risk-domain-grid { grid-template-columns: 1fr; }
    .risk-home .risk-domain-header { min-height: auto; }
    .risk-home .risk-domain-title { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .risk-home .risk-framework-link,
    .risk-home .risk-item { transition: none; }
}

/* Compteurs de registre (CountBadge) : pilule tonale lisible si > 0, tiret discret si 0. */
.count-pill {
    display: inline-block;
    min-width: 2rem;
    padding: 1px 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.count-empty {
    color: var(--mud-palette-text-disabled);
    font-weight: 400;
    user-select: none;
}