/* LandLogisticPlatform — feuille de style applicative
   Alignée très exactement sur les tokens et composants du POC L99 (LandLogisticPlatform_L99.html) :
   même palette (marine #0D2B52 + dégradé "teal" #547AA3→#0D2B52 pour les sceaux de marque,
   plus aucun or/gold — c'était une licence prise par ce portage, retirée pour coller au POC),
   même typographie système (Segoe UI, pas de police Google Fonts), mêmes ombres/rayons/badges/
   tableaux/KPI, et une coquille en barre de navigation HORIZONTALE (le POC dit lui-même dans son
   propre CSS « sidebar removed app-wide ») au lieu de la sidebar verticale utilisée jusqu'ici. */

:root {
    /* Typographie — POC : Segoe UI partout (affichage ET corps), pas de police web chargée */
    --llp-font: "Segoe UI", Arial, Helvetica, sans-serif;
    --llp-font-display: var(--llp-font);
    --llp-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Chrome (navbar/footer) — fond marine foncé */
    --llp-navy: #0D2B52;
    --llp-navy-2: #123863;
    --llp-navy-3: #17457a;
    --llp-chrome-border: rgba(255, 255, 255, .09);
    --llp-chrome-text: #eef3f8;
    --llp-chrome-text-muted: #9db3c9;
    --llp-chrome-active-bg: rgba(84, 122, 163, .24);
    --llp-chrome-active-text: #bcd2e8;

    /* Dégradé de sceau de marque (brand seal / avatar) */
    --llp-teal-400: #547AA3;
    --llp-teal-600: #0D2B52;

    /* Accent "sarcelle" (mise en avant positive ponctuelle — carte pays, valeurs clé) */
    --llp-sarcelle: #1f9d86;
    --llp-sarcelle-dark: #0d5f50;
    --llp-sarcelle-tint: #e1f3ef;

    /* Surfaces / texte */
    --llp-bg: #F5F7FA;
    --llp-surface: #FFFFFF;
    --llp-surface-2: #F7F9FC;
    --llp-surface-hover: #EEF1F5;
    --llp-border: #E0E4EA;
    --llp-border-strong: #C9D0D9;
    --llp-text: #1F2933;
    --llp-text-muted: #6B7280;
    --llp-text-muted-2: #98A2AE;

    /* Accent applicatif (surfaces claires) — le POC utilise le marine lui-même comme accent,
       pas une couleur distincte : liens, focus, sélection, bordures actives. */
    --llp-navy-tint: #E4EAF1;

    --llp-shadow-sm: 0 1px 2px rgba(13, 43, 82, .08);
    --llp-shadow-md: 0 8px 24px rgba(13, 43, 82, .12);
    --llp-shadow: var(--llp-shadow-sm);
    --llp-focus-ring: 0 0 0 3px rgba(13, 43, 82, .35);
    --llp-radius: 12px;

    /* États / statuts (POC : 6 teintes, dont un palier "serious" intermédiaire que ce portage
       n'utilisait pas encore — ajouté ici, disponible via .llp-badge-serious) */
    --llp-good: #0ca30c;
    --llp-good-bg: #e3f6e3;
    --llp-warning: #8a6008;
    --llp-warning-bg: #fdf0d6;
    --llp-serious: #a3491f;
    --llp-serious-bg: #fde6dc;
    --llp-critical: #d03b3b;
    --llp-critical-bg: #fbe1e1;
    --llp-info: #2a78d6;
    --llp-info-bg: #e3edfa;
    --llp-neutral: #6b7290;
    --llp-neutral-bg: #e9eaf0;

    /* Couleurs PLEINES dédiées aux toasts (demande LANDLEX : "full green" plutôt qu'un fond
       pastel/"bonbon") — volontairement fixes (non redéfinies en thème sombre) pour garantir
       un contraste correct avec le texte blanc quel que soit le thème actif, contrairement à
       --llp-warning/--llp-critical qui, eux, changent de valeur entre clair et sombre. */
    --llp-toast-success: #17873e;
    --llp-toast-warning: #b35c00;
    --llp-toast-critical: #c62828;
    --llp-toast-info: #1c54a8;
}

/* ---------- Thème sombre — reprend très exactement les tokens :root[data-theme="dark"] du
   POC (color-scheme:dark) : la barre de navigation/pied de page restent en marine (--llp-navy
   n'est PAS redéfini, le POC ne le fait pas non plus), seules les surfaces de contenu passent
   sombres. Bouton "Apparence" dans NavShell (voir UiPreferencesService.cs), attribut
   data-theme posé sur <html> par wwwroot/js/app.js (llpTheme.set), mémorisé en localStorage. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --llp-bg: #081525; --llp-surface: #0d1f36; --llp-surface-2: #112841; --llp-surface-hover: #15304e;
        --llp-border: rgba(255, 255, 255, .09); --llp-border-strong: rgba(255, 255, 255, .18);
        --llp-text: #eef3f8; --llp-text-muted: #a7b6c9; --llp-text-muted-2: #6f8199;
        --llp-navy-tint: #132840;
        --llp-sarcelle: #2bbf9f; --llp-sarcelle-dark: #7fe0c9; --llp-sarcelle-tint: rgba(43, 191, 159, .14);
        --llp-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --llp-shadow-md: 0 10px 28px rgba(0,0,0,.45); --llp-shadow: var(--llp-shadow-sm);
        --llp-focus-ring: 0 0 0 3px rgba(84, 122, 163, .4);
        --llp-good: #0ca30c; --llp-good-bg: #123318;
        --llp-warning: #fab219; --llp-warning-bg: #3a2c0e;
        --llp-serious: #ec835a; --llp-serious-bg: #3a2015;
        --llp-critical: #e66767; --llp-critical-bg: #3a1414;
        --llp-info: #3987e5; --llp-info-bg: #122238;
        --llp-neutral: #98a0bd; --llp-neutral-bg: #1c2136;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --llp-bg: #081525; --llp-surface: #0d1f36; --llp-surface-2: #112841; --llp-surface-hover: #15304e;
    --llp-border: rgba(255, 255, 255, .09); --llp-border-strong: rgba(255, 255, 255, .18);
    --llp-text: #eef3f8; --llp-text-muted: #a7b6c9; --llp-text-muted-2: #6f8199;
    --llp-navy-tint: #132840;
    --llp-sarcelle: #2bbf9f; --llp-sarcelle-dark: #7fe0c9; --llp-sarcelle-tint: rgba(43, 191, 159, .14);
    --llp-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --llp-shadow-md: 0 10px 28px rgba(0,0,0,.45); --llp-shadow: var(--llp-shadow-sm);
    --llp-focus-ring: 0 0 0 3px rgba(84, 122, 163, .4);
    --llp-good: #0ca30c; --llp-good-bg: #123318;
    --llp-warning: #fab219; --llp-warning-bg: #3a2c0e;
    --llp-serious: #ec835a; --llp-serious-bg: #3a2015;
    --llp-critical: #e66767; --llp-critical-bg: #3a1414;
    --llp-info: #3987e5; --llp-info-bg: #122238;
    --llp-neutral: #98a0bd; --llp-neutral-bg: #1c2136;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--llp-font);
    font-size: 14px;
    line-height: 1.5;
    background: var(--llp-bg);
    color: var(--llp-text);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--llp-font-display); margin: 0; text-wrap: balance; letter-spacing: -.01em; }
a { color: var(--llp-navy-3); }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--llp-focus-ring); border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------- Icônes vectorielles (AdminIcon.razor) — langage visuel du POC ---------- */
.llp-icon-svg { width: 100%; height: 100%; display: block; }
h1 .llp-icon-svg {
    width: 22px; height: 22px; margin-right: 6px; vertical-align: -4px;
    color: var(--llp-navy);
}
/* BUG affichage signalé (icônes énormes sur les boutons "Gérer mon compte" / "Rôles &
   permissions" de l'écran Paramètres) : même cause que le bug de carte déjà documenté plus
   bas (.llp-card-header-title > .llp-icon-svg) — .llp-icon-svg vaut par défaut width:100%/
   height:100% de son PARENT direct, mais .llp-btn (voir plus bas, section "Forms /
   buttons") est un simple inline-flex SANS hauteur propre déclarée ; un SVG en pourcentage
   sans bloc contenant dimensionné retombe alors sur la taille intrinsèque par défaut du
   navigateur (environ 300×150px), et le bouton, en inline-flex, s'étire pour l'accueillir -
   d'où des boutons qui ressemblent à d'immenses tuiles plutôt qu'à des boutons compacts.
   Les boutons qui s'en sortaient déjà bien (export, actions de ligne...) le doivent
   uniquement à LEUR PROPRE règle dédiée (.llp-export-btn/.llp-row-act .llp-icon-svg plus
   bas) ; cette règle générique couvre tous les AUTRES boutons à icône qui n'en avaient
   aucune (ex. .llp-form-actions du profil dans SettingsView.razor). Déclarée ICI,
   volontairement AVANT les règles plus spécifiques plus bas dans le fichier : à
   spécificité CSS égale (deux classes), c'est l'ordre de déclaration qui tranche, donc les
   règles plus spécifiques déclarées après continuent de gagner là où elles s'appliquent. */
.llp-btn > .llp-icon-svg, .llp-btn > svg { width: 16px; height: 16px; flex: none; }

/* =========================================================================
   Coquille applicative — barre de navigation horizontale sticky en haut de
   page (AppShell/AdminShell), fidèle à la coquille réelle du POC (.shell/
   .navbar/.navbar-inner/.navlink) : le POC a explicitement abandonné la
   sidebar verticale ("sidebar removed app-wide" dans son propre CSS).
   Implémentée une seule fois dans Components/Shared/NavShell.razor,
   partagée par AppShell.razor (modules métier) et AdminShell.razor
   (explorateur de données), avec le même menu déroulant "Administration".
   ========================================================================= */
.llp-app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.llp-navbar { background: var(--llp-navy); border-bottom: 1px solid var(--llp-chrome-border); position: sticky; top: 0; z-index: 30; }
.llp-navbar-inner { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; max-width: 1600px; margin: 0 auto; width: 100%; }

.llp-brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.llp-brand-seal {
    width: 34px; height: 34px; flex: none; border-radius: 9px;
    background: linear-gradient(155deg, var(--llp-teal-400), var(--llp-teal-600));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--llp-font-display); font-weight: 800; font-size: 12.5px; color: #fff;
}
.llp-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.llp-brand-name { color: var(--llp-chrome-text); font-family: var(--llp-font-display); font-weight: 700; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; }
.llp-brand-sub { color: var(--llp-chrome-text-muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 1500px) { .llp-brand-sub { display: none; } }

.llp-navbar-links {
    display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none;
    flex: 1; min-width: 0;
}
.llp-navbar-links::-webkit-scrollbar { display: none; }
.llp-navlink {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: none;
    text-align: left; background: none; border: none; color: var(--llp-chrome-text-muted);
    padding: 9px 12px; border-radius: 8px; font-size: 12.2px; font-weight: 600;
    transition: background .12s ease, color .12s ease; text-decoration: none;
}
.llp-navlink:hover { background: var(--llp-navy-2); color: var(--llp-chrome-text); }
.llp-navlink.active { background: var(--llp-chrome-active-bg); color: var(--llp-chrome-active-text); }
.llp-navlink.llp-has-caret { gap: 6px; }
.llp-nav-ico { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; }

/* ---------- Menu déroulant "Administration" — flottant, fidèle à .navlink-menu du POC ---------- */
.llp-navlink-wrap { position: relative; flex: none; }
.llp-caret-ico { width: 11px; height: 11px; display: flex; transition: transform .15s ease; opacity: .75; }
.llp-caret-ico.open { transform: rotate(180deg); }
.llp-navlink-menu {
    position: absolute; top: 46px; right: 0; min-width: 270px; max-width: 320px;
    background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 12px;
    box-shadow: var(--llp-shadow-md); z-index: 40; overflow: hidden; padding: 6px;
    max-height: min(70vh, 560px); overflow-y: auto;
}
.llp-navlink-menu-label {
    font-size: 10.3px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--llp-text-muted-2); padding: 10px 10px 4px;
}
.llp-navlink-menu-label:first-child { padding-top: 6px; }
.llp-navlink-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; padding: 9px 10px; border-radius: 8px;
    font-size: 12.6px; font-weight: 600; color: var(--llp-text); transition: background .12s ease;
}
.llp-navlink-menu-item:hover { background: var(--llp-surface-hover); }
.llp-navlink-menu-item.active { background: var(--llp-navy-tint); color: var(--llp-navy); }
.llp-navlink-menu-item .llp-nav-ico { color: var(--llp-text-muted); }
.llp-navlink-menu-item.active .llp-nav-ico { color: var(--llp-navy); }

/* ---------- Zone utilisateur (droite de la navbar) ---------- */
.llp-topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.llp-user-box { display: flex; align-items: center; gap: 9px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); }
.llp-avatar {
    width: 32px; height: 32px; border-radius: 9px; flex: none;
    background: linear-gradient(155deg, var(--llp-teal-400), var(--llp-teal-600));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--llp-font-display); font-weight: 700; font-size: 12px; color: #fff;
}
.llp-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.llp-user-name { font-size: 12.5px; font-weight: 600; color: var(--llp-chrome-text); }
.llp-user-role { font-size: 11px; color: var(--llp-chrome-text-muted); }
.llp-icon-btn {
    width: 34px; height: 34px; border-radius: 9px; flex: none; margin-left: 4px;
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center; color: var(--llp-chrome-text-muted);
}
.llp-icon-btn:hover { background: rgba(255,255,255,.16); color: var(--llp-chrome-text); }
.llp-icon-btn svg { width: 16px; height: 16px; }
.llp-icon-btn { position: relative; }
.llp-dot-badge {
    position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--llp-critical); border: 1.5px solid var(--llp-navy);
}
.llp-user-box { cursor: pointer; background: none; border: none; }
@media (max-width: 560px) {
    .llp-user-meta { display: none; }
    .llp-user-box { padding-left: 0; border-left: none; }
}

/* ---------- Sélecteur de langue FR/EN/PT — repris de .lang-switch du POC ---------- */
.llp-lang-switch { display: flex; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 100px; padding: 2px; flex: none; }
.llp-lang-switch button { border: none; background: none; padding: 5px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 600; color: var(--llp-chrome-text-muted); letter-spacing: .03em; }
.llp-lang-switch button.active { background: rgba(255,255,255,.16); color: var(--llp-chrome-text); }
@media (max-width: 760px) { .llp-lang-switch { display: none; } }

/* ---------- Badge numérique sur lien de nav (ex. Conformité — infractions ouvertes) ---------- */
.llp-nav-badge { background: var(--llp-critical); color: #fff; font-size: 10px; font-weight: 700; border-radius: 100px; padding: 1px 6px; line-height: 1.5; }

/* ---------- Menus déroulants de la zone utilisateur (notifications / profil) — repris de
   .dropdown du POC ; positionnés en absolu par rapport à .llp-navbar (position: sticky y
   établit le bloc de positionnement), pas par rapport au bouton lui-même. ---------- */
.llp-header-dropdown {
    position: absolute; top: 64px; right: 22px; width: 340px; max-width: calc(100vw - 28px);
    background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 12px;
    box-shadow: var(--llp-shadow-md); z-index: 40; overflow: hidden;
}
.llp-header-dropdown-head { padding: 12px 14px; border-bottom: 1px solid var(--llp-border); display: flex; align-items: center; justify-content: space-between; }
.llp-header-dropdown-head b { font-size: 13px; }
.llp-header-dropdown-head .llp-chip { font-size: 11px; font-weight: 700; color: var(--llp-text-muted); background: var(--llp-surface-2); border-radius: 100px; padding: 1px 8px; }
.llp-header-dropdown-list { max-height: 360px; overflow-y: auto; }
.llp-header-dropdown-foot { padding: 12px 14px; text-align: center; cursor: pointer; border-top: 1px solid var(--llp-border); }
.llp-header-dropdown-foot b { color: var(--llp-navy); font-size: 12.5px; }
.llp-notif-row { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--llp-border); }
.llp-notif-row:last-child { border-bottom: none; }
.llp-notif-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; }
.llp-notif-ico svg { width: 14px; height: 14px; }
.llp-notif-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.llp-notif-time { font-size: 11px; color: var(--llp-text-muted); margin-top: 2px; }
.llp-user-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; padding: 11px 14px; font-size: 12.6px; font-weight: 600; color: var(--llp-text);
}
.llp-user-menu-item:hover { background: var(--llp-surface-hover); }
.llp-user-menu-item.danger:hover { background: var(--llp-critical-bg); color: var(--llp-critical); }
@media (max-width: 640px) { .llp-header-dropdown { right: 14px; left: 14px; width: auto; } }

/* ---------- Pied de page signature ("appfoot") — repris tel quel du POC ---------- */
.llp-appfoot { background: var(--llp-navy); border-top: 1px solid var(--llp-chrome-border); margin-top: auto; }
.llp-appfoot-inner {
    max-width: 1600px; margin: 0 auto; padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.llp-appfoot-sig { display: flex; align-items: center; gap: 9px; flex: none; }
.llp-appfoot-seal {
    width: 22px; height: 22px; flex: none; border-radius: 6px;
    background: linear-gradient(155deg, var(--llp-teal-400), var(--llp-teal-600));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--llp-font-display); font-weight: 800; font-size: 8.5px; color: #fff;
}
.llp-appfoot-word { font-family: var(--llp-font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; color: var(--llp-chrome-text); }
.llp-appfoot-word b { font-weight: 800; }
.llp-appfoot-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 10.5px; color: var(--llp-chrome-text-muted); }
.llp-appfoot-dot { opacity: .55; }
@media (max-width: 640px) { .llp-appfoot-inner { justify-content: center; text-align: center; } }

.llp-main { flex: 1; min-width: 0; padding: 22px 26px 60px; max-width: 1520px; width: 100%; margin: 0 auto; }

/* ---------- Page head / panels ---------- */
.llp-page-head { margin-bottom: 20px; }
.llp-page-head h1 { font-size: 22px; }
.llp-page-head p { margin: 5px 0 0; color: var(--llp-text-muted); font-size: 13px; max-width: 640px; }
.llp-page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Sélecteur "Lancer une règle maintenant" du centre d'alertes (AlertsView.razor, demande
   LANDLEX point 5 — déclenchement manuel) : select + bouton alignés horizontalement, cohérent
   avec .llp-filter-bar ailleurs dans l'application. */
.llp-run-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.llp-panel {
    background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 14px;
    box-shadow: var(--llp-shadow-sm); margin-bottom: 18px; overflow: hidden;
}
.llp-panel-head { padding: 15px 18px; border-bottom: 1px solid var(--llp-border); }
.llp-panel-head h3 { font-size: 14px; font-weight: 700; }
.llp-panel-head p { margin: 2px 0 0; font-size: 11.5px; color: var(--llp-text-muted); }
.llp-panel-body { padding: 16px 18px; }
.llp-panel-body-flush { padding: 0; }

/* ---------- KPI cards ("cadrons") ---------- */
.llp-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.llp-kpi-row-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.llp-kpi {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 13px 14px 11px; border-radius: 12px; border: 1px solid var(--llp-border); background: var(--llp-surface);
    cursor: pointer; font: inherit; color: inherit; box-shadow: var(--llp-shadow-sm);
    border-top: 3px solid var(--llp-navy-3);
    transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.llp-kpi:hover { box-shadow: var(--llp-shadow-md); border-color: var(--llp-navy-3); transform: translateY(-2px); }
.llp-kpi-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--llp-navy-tint); color: var(--llp-navy); display: flex; align-items: center; justify-content: center; }
.llp-kpi-ico .llp-icon-svg { width: 12px; height: 12px; }
.llp-kpi-label { font-size: 10.5px; color: var(--llp-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.llp-kpi-value { font-family: var(--llp-font-display); font-size: 20px; font-weight: 800; margin-top: 4px; letter-spacing: -.01em; }
.llp-kpi-foot { font-size: 10.5px; color: var(--llp-text-muted); margin-top: 2px; }
.llp-kpi-tint-good { border-top-color: var(--llp-good); }
.llp-kpi-tint-warning { border-top-color: var(--llp-warning); }
.llp-kpi-tint-critical { border-top-color: var(--llp-critical); }

/* Variante "top row" (libellé + icône sur une même ligne, icône teintée selon la carte) —
   calquée sur kpi-top du POC. Utilisée par les écrans qui reprennent explicitement ce
   gabarit (ex. Conformité & Risques) ; les autres écrans gardent la disposition existante
   (icône au-dessus du libellé) et ne sont pas affectés par ces règles. */
.llp-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.llp-kpi-top .llp-kpi-label { padding-top: 2px; }
.llp-kpi-tint-good .llp-kpi-top .llp-kpi-ico { background: var(--llp-good-bg); color: var(--llp-good); }
.llp-kpi-tint-warning .llp-kpi-top .llp-kpi-ico { background: var(--llp-warning-bg); color: var(--llp-warning); }
.llp-kpi-tint-critical .llp-kpi-top .llp-kpi-ico { background: var(--llp-critical-bg); color: var(--llp-critical); }

/* ---------- Fil d'Ariane + icône de titre (gabarit calqué sur pageHead() du POC) ---------- */
.llp-crumb { font-size: 11.5px; color: var(--llp-text-muted); margin-bottom: 7px; }
.llp-crumb strong { color: var(--llp-text); font-weight: 600; }
.llp-page-title-ico {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 30px; height: 30px; border-radius: 9px; margin-right: 9px;
    background: var(--llp-navy-tint); color: var(--llp-navy);
}
.llp-page-title-ico .llp-icon-svg { width: 16px; height: 16px; }

/* ---------- Barre de filtres à puces (gabarit calqué sur filterBar() du POC) ---------- */
.llp-filter-bar { display: flex; align-items: center; gap: 10px 14px; margin-bottom: 14px; flex-wrap: wrap; }
.llp-filter-fields { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; }

/* Filtres Année/Entrepôts du tableau de bord : sur la même ligne que le titre (llp-page-head-
   row), alignés à droite — .llp-filter-fields a flex:1 1 auto par défaut (pensé pour
   .llp-filter-bar), ce qui l'étirerait ici collé au titre ; on le fige à sa largeur de
   contenu et on pousse son contenu à droite. */
.llp-dash-filters { flex: 0 0 auto; justify-content: flex-end; }
/* Uniformisation des tailles de champs du tableau de bord (demande LANDLEX point 5 : "ajuste
   egalement les tailles fields de facon identique afin que cela donne bien") : sans largeur
   fixée, chaque <select> se dimensionne sur le texte de son option sélectionnée — Année/
   Entrepôts/Régime douanier ("Toutes les années" vs "Tous les régimes douaniers") avaient donc
   des largeurs très inégales, cassant l'alignement de la barre de filtres. Largeur commune
   fixe + ellipsis pour les libellés de régime, qui peuvent être plus longs que les deux autres
   filtres (Code — Nom complet du régime). */
.llp-dash-filters .llp-select-ico-wrap { width: 188px; }
.llp-dash-filters .llp-select-pill-ico {
    width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.llp-search-pill {
    display: flex; align-items: center; gap: 7px; min-width: 220px; flex: 1 1 220px; max-width: 320px;
    background: var(--llp-surface); border: 1px solid var(--llp-border-strong); border-radius: 999px; padding: 7px 14px;
    color: var(--llp-text-muted);
}
.llp-search-pill .llp-icon-svg { width: 14px; height: 14px; flex: none; }
.llp-search-pill input { border: none; background: transparent; padding: 0; font: inherit; font-size: 12.8px; color: var(--llp-text); flex: 1; min-width: 0; }
.llp-search-pill input:focus { outline: none; }
.llp-select-pill {
    appearance: none; -webkit-appearance: none;
    background-color: var(--llp-surface); border: 1px solid var(--llp-border-strong); border-radius: 999px;
    padding: 7px 30px 7px 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--llp-text); cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7290' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.llp-select-pill:hover { border-color: var(--llp-navy-3); }
.llp-filter-bar-end { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.llp-filter-count { font-size: 12px; color: var(--llp-text-muted); white-space: nowrap; }
.llp-export-btn .llp-icon-svg { width: 14px; height: 14px; }

/* Icône superposée devant un <select class="llp-select-pill"> (demande LANDLEX point 6 :
   icônes attractives sur les filtres) — wrapper positionné en relative, icône en absolute
   sur la gauche (pointer-events:none pour ne pas intercepter le clic destiné au <select>),
   .llp-select-pill-ico ajoute le padding-gauche nécessaire pour ne pas chevaucher le texte. */
.llp-select-ico-wrap { position: relative; display: inline-flex; align-items: center; }
.llp-select-ico-wrap .llp-select-ico {
    position: absolute; left: 11px; display: flex; align-items: center; justify-content: center;
    color: var(--llp-text-muted); pointer-events: none;
}
.llp-select-ico-wrap .llp-select-ico .llp-icon-svg { width: 13px; height: 13px; }
.llp-select-pill-ico { padding-left: 32px; }

/* ---------- Groupes de blocs du Dashboard (demande LANDLEX point 2 : réorganisation "très
   explicite sur la mise en exergue des infos") : chaque .llp-dash-group porte un en-tête
   <h2> avec icône, au-dessus d'un ou plusieurs .llp-panel/.llp-grid-2 existants — sans
   changer le style de ces panneaux, seulement la hiérarchie visuelle de la page. ---------- */
.llp-dash-group { margin-bottom: 22px; }
.llp-dash-group:last-of-type { margin-bottom: 0; }
.llp-dash-group-head {
    display: flex; align-items: center; gap: 10px; margin: 0 0 13px;
    font-family: var(--llp-font-display); font-size: 15.5px; font-weight: 800;
    color: var(--llp-text); letter-spacing: -.005em;
}
.llp-dash-group-ico {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: 9px;
    background: var(--llp-navy-tint); color: var(--llp-navy);
}
.llp-dash-group-ico .llp-icon-svg { width: 15px; height: 15px; }

/* ---------- Colonne d'actions (icônes rondes, gabarit actionsCell()/actionsHead() du POC) ---------- */
.llp-actions-head { text-align: right; width: 1%; white-space: nowrap; }
.llp-actions-cell { text-align: right; white-space: nowrap; }
.llp-row-act {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 999px; border: none; background: transparent; color: var(--llp-text-muted); cursor: pointer; margin-left: 2px;
}
.llp-row-act .llp-icon-svg { width: 14px; height: 14px; }
.llp-row-act:hover { background: var(--llp-surface-hover); color: var(--llp-navy-3); }
.llp-row-act.danger:hover { background: var(--llp-critical-bg); color: var(--llp-critical); }

/* ---------- Tables ---------- */
.llp-table-wrap { overflow-x: auto; }
.llp-table { width: 100%; border-collapse: collapse; font-size: 12.3px; }
.llp-table th, .llp-table td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--llp-border); }
.llp-table th { color: var(--llp-text-muted); font-weight: 700; font-size: 10.3px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; white-space: nowrap; background: var(--llp-surface-2); }
.llp-table tbody tr:hover { background: var(--llp-surface-hover); }
.llp-table th.llp-num, .llp-table td.llp-num { text-align: right; }
.llp-row-clickable { cursor: pointer; }
.llp-mono { font-family: var(--llp-font-mono); font-size: 11.5px; letter-spacing: .01em; }
.llp-col-actions { white-space: nowrap; text-align: right; }
.llp-link-btn { background: none; border: none; color: var(--llp-navy-3); cursor: pointer; font: inherit; font-size: 12.5px; padding: 0; margin-left: 10px; text-decoration: underline; }
.llp-link-btn:first-child { margin-left: 0; }
.llp-link-danger { color: var(--llp-critical); }

.llp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.6; }
.llp-badge-good { background: var(--llp-good-bg); color: var(--llp-good); }
.llp-badge-warning { background: var(--llp-warning-bg); color: var(--llp-warning); }
.llp-badge-serious { background: var(--llp-serious-bg); color: var(--llp-serious); }
.llp-badge-critical { background: var(--llp-critical-bg); color: var(--llp-critical); }
.llp-badge-info { background: var(--llp-info-bg); color: var(--llp-info); }
.llp-badge-neutral { background: var(--llp-neutral-bg); color: var(--llp-neutral); }

/* ---------- Forms / buttons ---------- */
.llp-btn {
    font: inherit; font-size: 12.8px; font-weight: 600; padding: 8px 14px; border-radius: 8px;
    border: 1px solid var(--llp-border-strong); cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none; background: var(--llp-surface); transition: background .12s ease;
}
.llp-btn:hover { background: var(--llp-surface-hover); }
.llp-btn.llp-btn-sm { padding: 5px 10px; font-size: 11.5px; gap: 5px; }
.llp-btn.llp-btn-sm .llp-icon-svg, .llp-btn.llp-btn-sm svg { width: 14px; height: 14px; }
/* NB : sélecteur à DEUX classes chaînées (.llp-btn.llp-btn-primary), comme .btn.primary dans
   le POC — indispensable. Avec un simple .llp-btn-primary (une seule classe), sa spécificité
   (0,1,0) est INFÉRIEURE à celle de .llp-btn:hover ci-dessus (0,2,0 : une classe + :hover) ;
   au survol, .llp-btn:hover gagnait alors sur la propriété background et le bouton "+Nouveau"
   repassait à sa couleur de fond neutre (blanc/gris clair) au lieu de rester teal — c'est le
   bug "le bouton ajout passe en blanc au hover" signalé. En chaînant les deux classes ici,
   la spécificité remonte à (0,2,0), à égalité avec .llp-btn:hover ; à spécificité égale,
   c'est l'ordre de déclaration qui tranche, et cette règle est déclarée APRÈS — elle gagne
   donc bien, exactement comme dans le POC. */
.llp-btn.llp-btn-primary { background: linear-gradient(155deg, var(--llp-teal-400), var(--llp-teal-600)); color: #fff; border-color: transparent; }
.llp-btn.llp-btn-primary:hover { filter: brightness(1.05); }
.llp-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.llp-btn-ghost { background: transparent; color: var(--llp-navy); border-color: transparent; }
.llp-btn-ghost:hover { background: var(--llp-surface-hover); }
.llp-btn-block { width: 100%; justify-content: center; }
/* NB : même piège de spécificité que .llp-btn-primary ci-dessus (voir commentaire) —
   chaîné en .llp-btn.llp-btn-danger pour battre .llp-btn:hover. */
.llp-btn.llp-btn-danger { background: var(--llp-critical); color: #fff; border-color: transparent; }
.llp-btn.llp-btn-danger:hover { filter: brightness(1.08); }
.llp-btn-danger:disabled { opacity: .55; cursor: not-allowed; }

/* Variante "export" (retour LANDLEX : les boutons Export PDF/Word du Dashboard, en
   .llp-btn-ghost sur le fond de page — pas sur une carte — étaient "trop légers"/peu
   visibles). Fond teinté + bordure marquée + libellé en gras, même logique de chaînage de
   classes que .llp-btn-primary/.llp-btn-danger ci-dessus (bat la spécificité de
   .llp-btn:hover). Utilisée par DashboardView.razor (Export PDF/Word). */
.llp-btn.llp-btn-export { background: var(--llp-navy-tint); color: var(--llp-navy); border-color: var(--llp-navy-3); font-weight: 700; }
.llp-btn.llp-btn-export:hover { background: var(--llp-navy-3); color: #fff; }
.llp-btn-export:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Cartes (card_header / card_body / card_footer) — habillage des formulaires
   et des sections de liste des écrans d'administration d'entité ---------- */
.llp-card { background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.llp-card-header { padding: 14px 18px; border-bottom: 1px solid var(--llp-border); background: var(--llp-surface-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.llp-card-header-title { display: flex; align-items: center; gap: 10px; }
/* BUG affichage signalé (icône de carte disproportionnée, ex. "Documents douaniers") :
   .llp-icon-svg par défaut vaut width:100%/height:100% de son PARENT direct (voir règle
   générique en tête de fichier) ; le parent ici est un <div>/<span> flex sans dimension
   propre déclarée, donc le SVG hérite du comportement par défaut du navigateur pour un
   SVG en pourcentage sans bloc contenant dimensionné — rendu bien plus grand que prévu.
   Toutes les autres icônes du fichier (h1, .llp-kpi-ico, .llp-row-act, etc.) ont chacune
   une règle de taille dédiée ; celle-ci manquait pour l'en-tête de carte. */
.llp-card-header-title > .llp-icon-svg,
.llp-card-header-title > svg { width: 20px; height: 20px; flex: none; color: var(--llp-teal-600); }
.llp-card-header h2, .llp-card-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.llp-card-header p { margin: 2px 0 0; font-size: 12px; color: var(--llp-text-muted); }
.llp-card-body { padding: 18px; }
.llp-card-body-flush { padding: 0; }
.llp-card-footer { padding: 12px 18px; border-top: 1px solid var(--llp-border); background: var(--llp-surface-2); display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.llp-card-footer-between { justify-content: space-between; }

/* ---------- Modal de confirmation (ex. avant suppression) ---------- */
.llp-modal-overlay { position: fixed; inset: 0; background: rgba(8, 21, 37, .55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; }
.llp-modal { background: var(--llp-surface); border-radius: 12px; width: 100%; max-width: 420px; box-shadow: var(--llp-shadow-md); overflow: hidden; }
.llp-modal-header { padding: 16px 20px; border-bottom: 1px solid var(--llp-border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.llp-modal-header h3 { margin: 0; font-size: 16px; }
.llp-modal-body { padding: 18px 20px; font-size: 13.5px; color: var(--llp-text-muted); line-height: 1.5; }
.llp-modal-footer { padding: 14px 20px; border-top: 1px solid var(--llp-border); display: flex; justify-content: flex-end; gap: 10px; }
.llp-modal-x { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--llp-text-muted); padding: 2px 4px; flex: none; }
.llp-modal-x:hover { color: var(--llp-text); }

/* Modale "Historique" (Conformité & risques — demande LANDLEX, reprend le motif de la modale
   Historique du POC : liste des événements AdminAuditLog filtrés par EntityName+EntityId,
   avec une réserve vide quand aucun événement n'a encore été journalisé pour cet élément). */
.llp-modal-hist { max-width: 480px; }
.llp-modal-hist .llp-modal-body { max-height: 60vh; overflow-y: auto; color: var(--llp-text); }
.llp-hist-row { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--llp-border); align-items: flex-start; }
.llp-hist-row:last-child { border-bottom: none; }
.llp-hist-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.llp-hist-ico .llp-icon-svg { width: 14px; height: 14px; }
.llp-hist-row-body { flex: 1; min-width: 0; }
.llp-hist-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.8px; }
.llp-hist-row-top .llp-hint { font-size: 11.5px; }
.llp-hist-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 34px 12px 20px; color: var(--llp-text-muted); }
.llp-hist-empty .llp-icon-svg { width: 30px; height: 30px; }
.llp-hist-empty p { font-size: 12.6px; line-height: 1.5; max-width: 320px; margin: 0; }

/* ---------- Vue Rapports (grille de cartes + modal Aperçu façon impression) ---------- */
.llp-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.llp-report-card {
    display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px;
    background: var(--llp-surface); border: 1px solid var(--llp-border); box-shadow: var(--llp-shadow-sm);
    border-top: 3px solid var(--llp-navy-3);
    transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.llp-report-card:hover { box-shadow: var(--llp-shadow-md); border-color: var(--llp-navy-3); transform: translateY(-2px); }
.llp-report-card-top { display: flex; align-items: center; justify-content: space-between; }
.llp-report-card-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--llp-navy-tint); color: var(--llp-navy); display: flex; align-items: center; justify-content: center; }
.llp-report-card-ico .llp-icon-svg { width: 18px; height: 18px; }
.llp-report-card-count { font-size: 10.5px; color: var(--llp-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.llp-report-card h3 { font-size: 14.5px; margin: 0; }
.llp-report-card p { font-size: 12.5px; color: var(--llp-text-muted); margin: 0; line-height: 1.45; flex: 1; }
.llp-report-card-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.llp-report-card-actions .llp-btn { flex: 1; justify-content: center; white-space: nowrap; padding-left: 10px; padding-right: 10px; }

/* Carte "BI & Rapports" (demande LANDLEX point 3) : mise en avant discrète au-dessus de la
   grille des rapports (léger dégradé + bordure teintée) pour la distinguer visuellement des
   cartes de rapports unitaires ci-dessous. */
.llp-bi-card {
    margin-bottom: 18px; border: 1px solid var(--llp-navy-3);
    background: linear-gradient(155deg, var(--llp-navy-tint) 0%, var(--llp-surface) 55%);
}

.llp-modal-lg { max-width: 860px; max-height: 88vh; display: flex; flex-direction: column; }
.llp-modal-lg .llp-report-print-area { overflow-y: auto; }
.llp-modal-lg .llp-modal-body { color: var(--llp-text); }

.llp-letterhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 2px solid var(--llp-navy); }
.llp-letterhead-brand { display: flex; align-items: center; gap: 10px; }
.llp-letterhead-seal { width: 36px; height: 36px; border-radius: 9px; background: var(--llp-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.llp-letterhead-brand-text { display: flex; flex-direction: column; }
.llp-letterhead-company { font-weight: 800; font-size: 14.5px; color: var(--llp-navy); }
.llp-letterhead-sub { font-size: 11px; color: var(--llp-text-muted); }
.llp-letterhead-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; color: var(--llp-text-muted); text-align: right; }

.llp-report-preview-title { font-size: 17px; margin: 4px 0 0; color: var(--llp-text); }
.llp-report-print-footer {
    display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 10px;
    border-top: 1px dashed var(--llp-border); font-size: 11px; color: var(--llp-text-muted); flex-wrap: wrap;
}

/* N'imprime que le contenu de l'aperçu (en-tête + tableau + pied) — le reste de l'écran
   (grille de cartes, boutons du modal, overlay) est masqué au moment de l'impression /
   export PDF déclenché par window.print() (bouton "Imprimer / Exporter en PDF"). */
@media print {
    body * { visibility: hidden; }
    .llp-report-print-area, .llp-report-print-area * { visibility: visible; }
    .llp-report-print-area { position: absolute; top: 0; left: 0; width: 100%; }
    .llp-no-print { display: none !important; }
}

.llp-toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.llp-toolbar input[type="search"] { flex: 1; max-width: 320px; }

.llp-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.llp-field-wide { grid-column: 1 / -1; }
.llp-field label { font-size: 10.5px; font-weight: 700; color: var(--llp-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.llp-required { color: var(--llp-critical); margin-left: 2px; }
.llp-field input[type="text"], .llp-field input[type="search"], .llp-field input[type="number"],
.llp-field input[type="datetime-local"], .llp-field input[type="password"],
.llp-field select, .llp-field textarea,
input[type="text"], input[type="search"], input[type="number"], input[type="datetime-local"], input[type="password"], select, textarea {
    font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--llp-border-strong);
    background: var(--llp-surface); color: var(--llp-text);
}
.llp-field input:disabled { background: var(--llp-surface-2); color: var(--llp-text-muted); }
textarea { resize: vertical; }

.llp-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; margin-bottom: 14px; }
.llp-form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; }
.llp-entity-form { padding: 6px 2px; }

/* ---------- Sections de formulaire groupées (mise en page des écrans d'admin d'entité :
   regroupe les champs par thème plutôt qu'une seule longue grille) ---------- */
.llp-form-section { margin-bottom: 18px; }
.llp-form-section + .llp-form-section { padding-top: 16px; border-top: 1px solid var(--llp-border); }
.llp-form-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--llp-navy-3); margin: 0 0 10px; }
.llp-form-section .llp-form-grid { margin-bottom: 0; }

/* Bloc "Calcul dynamique" (règle de calcul douanier — LANDLEX) : phrase d'aide sous le
   titre de section, et bouton(s) d'action alignés à côté d'un champ de sélection. */
.llp-form-hint { font-size: 12px; color: var(--llp-text-muted); margin: -4px 0 12px; line-height: 1.5; max-width: 720px; }
.llp-hint-text { font-size: 12.5px; color: var(--llp-text-muted); font-style: italic; }
.llp-field-actions { justify-content: flex-end; }
.llp-field-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

.llp-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--llp-border); overflow-x: auto; }
.llp-tab { font: inherit; font-size: 13px; font-weight: 600; background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 4px; margin-right: 20px; cursor: pointer; color: var(--llp-text-muted); white-space: nowrap; }
.llp-tab.active { color: var(--llp-text); border-bottom-color: var(--llp-navy-3); }

.llp-pagination { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 16px; font-size: 12px; color: var(--llp-text-muted); }

.llp-alert { padding: 11px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.llp-alert-danger { background: var(--llp-critical-bg); color: var(--llp-critical); }
.llp-alert-success { background: var(--llp-good-bg); color: var(--llp-good); }
.llp-alert-info { background: var(--llp-info-bg); color: var(--llp-info); }

.llp-loading, .llp-empty { padding: 40px 0; text-align: center; color: var(--llp-text-muted); font-size: 12.8px; }
.llp-loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
.llp-hint { font-size: 12px; color: var(--llp-text-muted); }
.llp-field-error { font-size: 12px; color: var(--llp-critical); }

/* ---------- ErrorBoundary (NavShell) : rendu visible d'une exception au lieu d'une zone vide ---------- */
.llp-error-boundary {
    display: flex; align-items: flex-start; gap: 14px; margin: 24px 0; padding: 18px 20px;
    background: var(--llp-critical-bg); border: 1px solid var(--llp-critical); border-radius: var(--llp-radius);
}
.llp-error-boundary-ico { width: 22px; height: 22px; flex: none; color: var(--llp-critical); }
.llp-error-boundary h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--llp-critical); }
.llp-error-boundary p { margin: 0 0 10px; font-size: 12.8px; color: var(--llp-text); word-break: break-word; }

/* ---------- Accès refusé en place (AppShell) : défense en profondeur du filtrage par
   Rôle/Permission (NavPermissions.cs) contre un lien profond vers un module inaccessible ---------- */
.llp-access-denied {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    margin: 48px auto; padding: 32px 28px; max-width: 420px;
    background: var(--llp-warning-bg); border: 1px solid var(--llp-warning); border-radius: var(--llp-radius);
}
.llp-access-denied-ico { width: 30px; height: 30px; color: var(--llp-warning); }
.llp-access-denied h3 { margin: 0; font-size: 16px; color: var(--llp-text); }
.llp-access-denied p { margin: 0 0 6px; font-size: 12.8px; color: var(--llp-text-muted); }

/* ---------- Indicateur d'activité (chargement liste/options, enregistrement, suppression) ---------- */
.llp-spinner {
    display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
    border: 2px solid rgba(13, 43, 82, .15); border-top-color: var(--llp-navy-3);
    border-radius: 50%; animation: llp-spin .8s linear infinite;
}
.llp-spinner-sm { width: 12px; height: 12px; border-width: 2px; }
.llp-btn .llp-spinner { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; margin-right: 7px; vertical-align: -2px; }
.llp-btn-ghost .llp-spinner, .llp-link-btn .llp-spinner { border-color: rgba(13, 43, 82, .2); border-top-color: var(--llp-navy-3); }
.llp-btn:disabled { cursor: progress; opacity: .85; }

/* ---------- Notifications "toast" (ToastService / ToastContainer.razor) — POC : .toast ---------- */
/* Toasts recentrés en haut d'écran et élargis (demande LANDLEX), en couleur PLEINE par
   tonalité (--llp-toast-*) avec texte blanc, au lieu du fond pastel + liseré coloré précédent. */
.llp-toast-container {
    position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 10000;
    display: flex; flex-direction: column; gap: 10px; align-items: stretch;
    width: min(480px, calc(100vw - 36px));
}
.llp-toast {
    display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
    background: var(--llp-neutral); color: #fff; border-radius: 10px; box-shadow: var(--llp-shadow-md);
    border-left: none;
    animation: llp-toast-in .18s ease-out;
}
.llp-toast-icon { font-size: 15px; line-height: 1.4; flex-shrink: 0; color: #fff; }
.llp-toast-body { flex: 1; min-width: 0; }
.llp-toast-title { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; color: #fff; }
.llp-toast-msg { font-size: 12.5px; color: rgba(255, 255, 255, .94); line-height: 1.45; word-wrap: break-word; }
.llp-toast-close {
    background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1;
    color: rgba(255, 255, 255, .8); padding: 2px; flex-shrink: 0;
}
.llp-toast-close:hover { color: #fff; }
.llp-toast-success { background: var(--llp-toast-success); }
.llp-toast-error { background: var(--llp-toast-critical); }
.llp-toast-warning { background: var(--llp-toast-warning); }
.llp-toast-info { background: var(--llp-toast-info); }
@keyframes llp-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
    .llp-toast-container { left: 18px; right: 18px; width: auto; transform: none; }
}

/* ---------- Assistant IA interne (ChatWidget.razor / AiAssistantService.cs) ---------- */
.llp-chat-root { position: fixed; right: 20px; bottom: 20px; z-index: 9000; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.llp-chat-fab {
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(155deg, var(--llp-teal-400), var(--llp-navy)); color: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--llp-shadow-md);
    transition: transform .14s ease, box-shadow .14s ease;
}
.llp-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(13, 43, 82, .28); }
.llp-chat-fab .llp-icon-svg { width: 24px; height: 24px; }
.llp-chat-panel {
    width: min(360px, calc(100vw - 40px)); height: min(480px, calc(100vh - 140px));
    background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 16px;
    box-shadow: var(--llp-shadow-md); display: flex; flex-direction: column; overflow: hidden;
    animation: llp-chat-in .16s ease-out;
}
@keyframes llp-chat-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.llp-chat-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--llp-border); background: var(--llp-surface-2); flex: none; }
.llp-chat-head-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--llp-navy-tint); color: var(--llp-navy); display: flex; align-items: center; justify-content: center; flex: none; }
.llp-chat-head-ico .llp-icon-svg { width: 16px; height: 16px; }
.llp-chat-head-text { flex: 1; min-width: 0; }
.llp-chat-head-title { font-size: 13px; font-weight: 700; }
.llp-chat-head-sub { font-size: 11px; color: var(--llp-text-muted); }
.llp-chat-close { border: none; background: none; cursor: pointer; color: var(--llp-text-muted); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transform: rotate(180deg); }
.llp-chat-close:hover { background: var(--llp-border); color: var(--llp-text); }
.llp-chat-close .llp-icon-svg { width: 16px; height: 16px; }
.llp-chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.llp-chat-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 92%; }
.llp-chat-msg-user { align-self: flex-end; }
.llp-chat-msg-bot { align-self: flex-start; }
.llp-chat-msg-ico { width: 24px; height: 24px; border-radius: 50%; background: var(--llp-navy-tint); color: var(--llp-navy); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.llp-chat-msg-ico .llp-icon-svg { width: 13px; height: 13px; }
.llp-chat-bubble { font-size: 12.5px; line-height: 1.55; padding: 9px 12px; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; }
.llp-chat-msg-bot .llp-chat-bubble { background: var(--llp-surface-2); color: var(--llp-text); border-bottom-left-radius: 3px; }
.llp-chat-msg-user .llp-chat-bubble { background: var(--llp-navy); color: #fff; border-bottom-right-radius: 3px; }
.llp-chat-bubble-thinking { display: flex; align-items: center; gap: 4px; padding: 12px; }
.llp-chat-bubble-thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--llp-text-muted); animation: llp-chat-dot 1.1s ease-in-out infinite; }
.llp-chat-bubble-thinking span:nth-child(2) { animation-delay: .15s; }
.llp-chat-bubble-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes llp-chat-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.llp-chat-input-row { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--llp-border); flex: none; }
.llp-chat-input { flex: 1; border: 1px solid var(--llp-border-strong); border-radius: 100px; padding: 8px 13px; font: inherit; font-size: 12.5px; background: var(--llp-surface); color: var(--llp-text); }
.llp-chat-input:focus { outline: none; border-color: var(--llp-navy-3); }
.llp-chat-send { width: 34px; height: 34px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; flex: none; }
.llp-chat-send .llp-icon-svg { width: 15px; height: 15px; }
@media (max-width: 480px) {
    .llp-chat-root { right: 14px; bottom: 14px; }
    .llp-chat-panel { width: calc(100vw - 28px); }
}

.llp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.llp-entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.llp-entity-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px;
    border: 1px solid var(--llp-border); border-radius: 12px; background: var(--llp-surface); cursor: pointer; text-align: left; font: inherit;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.llp-entity-card:hover { border-color: var(--llp-navy-3); box-shadow: var(--llp-shadow-sm); transform: translateY(-1px); }
.llp-entity-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--llp-navy); }
.llp-entity-name { font-size: 12.5px; font-weight: 600; }

/* ---------- Master / detail (listes avec fiche détaillée) — POC : .master-detail/.list-card/.detail-card ---------- */
.llp-master-detail { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.llp-list-card { background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 12px; max-height: 640px; overflow-y: auto; }
.llp-list-row { padding: 12px 16px; border-bottom: 1px solid var(--llp-border); cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.llp-list-row:last-child { border-bottom: none; }
.llp-list-row:hover { background: var(--llp-surface-hover); }
.llp-list-row.selected { background: var(--llp-navy-tint); box-shadow: inset 3px 0 0 var(--llp-navy-3); }
.llp-list-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.llp-list-row-title { font-size: 13px; font-weight: 700; }
.llp-list-row-sub { font-size: 11.5px; color: var(--llp-text-muted); }
.llp-detail-card { background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 12px; padding: 20px; }
.llp-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.llp-detail-title { font-family: var(--llp-font-display); font-size: 17px; font-weight: 700; }
.llp-detail-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; margin-bottom: 12px; }
.llp-meta-item label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--llp-text-muted); margin-bottom: 3px; font-weight: 600; }
.llp-meta-item div { font-size: 13px; font-weight: 600; overflow-wrap: break-word; }
.llp-hairline { border: none; border-top: 1px solid var(--llp-border); margin: 14px 0; }
.llp-mini-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--llp-border); }
.llp-mini-row:last-child { border-bottom: none; }
.llp-mini-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--llp-navy-tint); color: var(--llp-navy); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.llp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 100px; background: var(--llp-surface); border: 1px solid var(--llp-border-strong); font-size: 11px; color: var(--llp-text-muted); font-family: var(--llp-font); }
.llp-cell-sub { font-size: 11.3px; color: var(--llp-text-muted); }

/* Sélection dynamique des rôles destinataires d'une règle d'alerte (AlertRuleAdminView.razor,
   demande LANDLEX : ajouter des rôles un par un depuis une liste plutôt que de taper le texte
   brut) : réutilise .llp-chip pour chaque rôle déjà ajouté, avec un petit bouton de retrait. */
.llp-role-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; min-height: 26px; }
.llp-chip-removable { padding-right: 5px; background: var(--llp-navy-tint); color: var(--llp-navy); border-color: transparent; font-weight: 600; }
.llp-chip-x { border: none; background: none; cursor: pointer; color: inherit; font-size: 13px; line-height: 1; padding: 0 0 0 2px; opacity: .7; }
.llp-chip-x:hover { opacity: 1; }
.llp-role-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Listes à barres horizontales (répartitions — ex. déclarations par statut) ---------- */
.llp-bar-list { display: flex; flex-direction: column; gap: 11px; }
.llp-bar-row { display: grid; grid-template-columns: 132px 1fr 34px; align-items: center; gap: 10px; }
.llp-bar-label { font-size: 12.3px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llp-bar-track { height: 8px; border-radius: 100px; background: var(--llp-surface-2); overflow: hidden; }
.llp-bar-fill { height: 100%; border-radius: 100px; transition: width .25s ease; }
.llp-bar-fill.llp-bar-good { background: var(--llp-good); }
.llp-bar-fill.llp-bar-warning { background: var(--llp-warning); }
.llp-bar-fill.llp-bar-critical { background: var(--llp-critical); }
.llp-bar-fill.llp-bar-info { background: var(--llp-info); }
.llp-bar-fill.llp-bar-neutral { background: var(--llp-neutral); }
.llp-bar-value { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Expéditions — en-tête de liste + chronologie de cycle de vie (fiche détail) ---------- */
.llp-exp-list-head { font-size: 13px; font-weight: 700; margin: 0 0 10px; padding: 0 2px; }
.llp-exp-timeline { display: flex; flex-direction: column; }
.llp-exp-tl-step { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; position: relative; padding-bottom: 22px; }
.llp-exp-tl-step:last-child { padding-bottom: 0; }
.llp-exp-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--llp-surface); border: 2.5px solid var(--llp-border-strong); margin-top: 2px; position: relative; z-index: 1; }
.llp-exp-tl-step.done .llp-exp-tl-dot { background: var(--llp-good); border-color: var(--llp-good); }
.llp-exp-tl-step.current .llp-exp-tl-dot { background: var(--llp-navy); border-color: var(--llp-navy); }
.llp-exp-tl-step:not(:last-child)::before {
    content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--llp-border);
}
.llp-exp-tl-step.done:not(:last-child)::before { background: var(--llp-good); }
.llp-exp-tl-label { font-size: 13px; font-weight: 700; }
.llp-exp-tl-step:not(.done):not(.current) .llp-exp-tl-label { color: var(--llp-text-muted); font-weight: 600; }
.llp-exp-tl-date { font-size: 11.5px; color: var(--llp-text-muted); margin-top: 2px; }

/* ---------- Diagramme de flux inter-entrepôts (façon Sankey — onglet Expéditions) ---------- */
.llp-flow-diagram-wrap {
    background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 12px;
    padding: 14px 18px; box-shadow: var(--llp-shadow-sm); margin-bottom: 6px;
}
.llp-flow-diagram { width: 100%; height: auto; display: block; }
.llp-flow-node-label { font-size: 11.5px; fill: var(--llp-text); dominant-baseline: middle; }
.llp-flow-node-label.strong { font-weight: 700; font-size: 12.5px; }
.llp-flow-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--llp-border); }
.llp-flow-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--llp-text-muted); }
.llp-flow-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ---------- Classement d'articles (ex. Top articles en stock) ---------- */
.llp-toplist { display: flex; flex-direction: column; gap: 14px; }
.llp-toplist-row { display: grid; grid-template-columns: 18px 1fr auto; column-gap: 10px; align-items: start; }
.llp-toplist-rank { font-size: 12px; font-weight: 700; color: var(--llp-text-muted); padding-top: 1px; font-variant-numeric: tabular-nums; }
.llp-toplist-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.llp-toplist-name { font-size: 12.8px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llp-toplist-track { height: 6px; border-radius: 100px; background: var(--llp-surface-2); overflow: hidden; }
.llp-toplist-fill { height: 100%; border-radius: 100px; background: var(--llp-navy); transition: width .25s ease; }
.llp-toplist-value { font-size: 12px; font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; padding-top: 1px; }

/* ---------- Lignes de liste cliquables (cartes d'analyse du tableau de bord, liens de
   navigation vers l'écran métier associé — demande explicite de LANDLEX) : ces modificateurs
   se combinent avec .llp-bar-row / .llp-mini-row-clickable / .llp-toplist-row-clickable posés
   sur un <button> plutôt qu'un <div>, exactement comme .llp-kpi (voir plus haut) qui fait déjà
   ce même double usage div/bouton. On ne touche ici qu'aux propriétés de "chrome" de bouton
   (bordure, fond, marge, police, alignement, curseur) — jamais display/grid-template-columns/
   padding déjà définis par les classes de base .llp-bar-row/.llp-mini-row/.llp-toplist-row,
   donc aucun risque de collision de cascade quel que soit l'ordre de déclaration. */
.llp-bar-row-clickable, .llp-mini-row-clickable, .llp-toplist-row-clickable {
    width: 100%; border: none; background: none; margin: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.llp-bar-row-clickable:hover .llp-bar-label,
.llp-toplist-row-clickable:hover .llp-toplist-name { color: var(--llp-navy); }
.llp-mini-row-clickable:hover { background: var(--llp-surface-2); border-radius: 8px; }
@media (max-width: 960px) {
    .llp-master-detail { grid-template-columns: 1fr; }
}

/* ---------- Explorateur d'administration — sous-nav compacte dans la page (voir note ci-dessous) ---------- */
.llp-admin-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
.llp-admin-nav { background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 12px; max-height: calc(100vh - 160px); overflow-y: auto; position: sticky; top: 82px; }
.llp-admin-nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none;
    padding: 10px 14px; font: inherit; font-size: 12.8px; font-weight: 600; color: var(--llp-text); cursor: pointer;
    border-bottom: 1px solid var(--llp-border);
}
.llp-admin-nav-item:hover { background: var(--llp-surface-hover); }
.llp-admin-nav-item.active { background: var(--llp-navy-tint); color: var(--llp-navy); }
.llp-admin-nav-item .llp-nav-ico { color: var(--llp-text-muted); flex: none; }
.llp-admin-nav-item.active .llp-nav-ico { color: var(--llp-navy); }
.llp-admin-nav-group-label {
    padding: 12px 14px 4px; font-size: 10.3px; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 700; color: var(--llp-text-muted-2); border-bottom: 1px solid var(--llp-border);
}
@media (max-width: 960px) {
    .llp-admin-layout { grid-template-columns: 1fr; }
    .llp-admin-nav { position: static; max-height: none; }
}

/* ---------- Connexion — écran "vitrine" deux panneaux, fidèle au POC (#splash/.splash-*) ---------- */
.llp-splash { min-height: 100vh; background: var(--llp-bg); }
.llp-splash-shell { min-height: 100vh; display: grid; grid-template-columns: 6fr 6fr; }

.llp-splash-showcase {
    position: relative; overflow: hidden; background: #0a1f3d;
    padding: 52px 52px 40px; display: flex; flex-direction: column; justify-content: center;
    color: var(--llp-chrome-text);
}
.llp-showcase-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.llp-showcase-art svg { width: 100%; height: 100%; display: block; }
.llp-showcase-scrim {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,20,40,.5) 0%, rgba(8,20,40,.88) 14%, rgba(8,20,40,.92) 86%, rgba(8,20,40,.4) 100%);
}
.llp-showcase-top, .llp-showcase-headline, .llp-feat-grid { position: relative; z-index: 1; }
.llp-showcase-top { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.llp-brand-seal-lg {
    width: 48px; height: 48px; flex: none; border-radius: 12px;
    background: linear-gradient(155deg, var(--llp-teal-400), var(--llp-teal-600));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--llp-font-display); font-weight: 800; font-size: 15px; color: #fff;
    box-shadow: 0 8px 22px rgba(13, 43, 82, .35);
}
.llp-showcase-word { font-family: var(--llp-font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--llp-chrome-text); }
.llp-showcase-tag { color: var(--llp-chrome-text-muted); font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; margin-top: 2px; }
.llp-showcase-headline {
    font-size: 28px; line-height: 1.28; max-width: 460px; margin-bottom: 34px; text-wrap: balance;
    font-family: var(--llp-font-display); font-weight: 700; letter-spacing: -.01em; color: var(--llp-chrome-text);
}
.llp-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.llp-feat-item { display: flex; gap: 12px; align-items: flex-start; }
.llp-feat-ico {
    width: 36px; height: 36px; flex: none; border-radius: 10px;
    background: var(--llp-chrome-active-bg); border: 1px solid rgba(84, 122, 163, .35); color: var(--llp-teal-400);
    display: flex; align-items: center; justify-content: center;
}
.llp-feat-ico svg { width: 18px; height: 18px; }
.llp-feat-title { font-size: 13px; font-weight: 700; color: var(--llp-chrome-text); }
.llp-feat-desc { font-size: 11.8px; color: var(--llp-chrome-text-muted); margin-top: 2px; line-height: 1.42; }

.llp-splash-loginpane { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--llp-surface); }
.llp-splash-card { width: 100%; max-width: 380px; animation: llp-splash-rise .5s ease both; }
@keyframes llp-splash-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.llp-splash-code {
    display: inline-flex; padding: 3px 9px; border: 1px solid var(--llp-border-strong); border-radius: 100px;
    color: var(--llp-navy); font-family: var(--llp-font-mono); font-size: 11px; letter-spacing: .08em;
}
.llp-login-title-row { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.llp-login-title-ico {
    width: 36px; height: 36px; border-radius: 11px; background: var(--llp-navy-tint); color: var(--llp-navy);
    display: flex; align-items: center; justify-content: center; flex: none;
}
.llp-login-title-ico svg { width: 19px; height: 19px; }
.llp-login-title { font-family: var(--llp-font-display); font-weight: 700; font-size: 24px; color: var(--llp-text); margin: 0; }
.llp-login-sub { color: var(--llp-text-muted); font-size: 13px; margin-top: 6px; }

.llp-splash-form { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.llp-splash-field { display: flex; flex-direction: column; gap: 6px; }
.llp-splash-field label { font-size: 11.5px; color: var(--llp-text-muted-2); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.llp-splash-field-input { position: relative; display: flex; align-items: center; }
.llp-splash-field-input .llp-field-ico {
    position: absolute; left: 12px; width: 16px; height: 16px; color: var(--llp-text-muted-2);
    display: flex; pointer-events: none; transition: color .15s ease;
}
.llp-splash-field-input .llp-field-ico svg { width: 100%; height: 100%; }
.llp-splash-field-input:focus-within .llp-field-ico { color: var(--llp-navy); }
.llp-splash-field input {
    width: 100%; background: var(--llp-surface-2); border: 1px solid var(--llp-border-strong); border-radius: 8px;
    padding: 10px 12px 10px 38px; color: var(--llp-text); font: inherit; font-size: 13.5px;
}
.llp-splash-field input:focus-visible { border-color: var(--llp-navy-3); outline: none; }
.llp-splash-btn {
    margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(155deg, var(--llp-teal-400), var(--llp-teal-600)); border: none; color: #fff; font-weight: 700;
    padding: 11px; border-radius: 8px; font-size: 13.5px; letter-spacing: .02em;
    transition: transform .15s ease, box-shadow .15s ease;
}
.llp-splash-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(13, 43, 82, .35); }
.llp-splash-btn .llp-btn-ico { width: 16px; height: 16px; display: flex; flex: none; }
.llp-splash-btn .llp-btn-ico svg { width: 100%; height: 100%; }

.llp-splash-trust { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--llp-border); display: flex; flex-direction: column; gap: 10px; }
.llp-splash-trust-item { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--llp-text-muted); }
.llp-splash-trust-item .llp-trust-ico { width: 15px; height: 15px; flex: none; color: var(--llp-navy); display: flex; }
.llp-splash-trust-item .llp-trust-ico svg { width: 100%; height: 100%; }

.llp-splash-foot { margin-top: 20px; font-size: 11.5px; color: var(--llp-text-muted-2); text-align: center; }
.llp-splash-signature { margin-top: 18px; }
.llp-splash-sig-line { height: 1px; width: 100%; background: var(--llp-border); }
.llp-splash-sig-copy { margin-top: 7px; font-size: 10px; line-height: 1.4; color: var(--llp-text-muted-2); text-align: center; letter-spacing: .03em; }

@media (max-width: 900px) {
    .llp-splash-shell { grid-template-columns: minmax(0, 1fr); }
    .llp-splash-showcase { padding: 34px 24px 26px; }
    .llp-showcase-headline { font-size: 22px; margin-bottom: 22px; }
}
@media (max-width: 560px) {
    .llp-feat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Module placeholder ---------- */
.llp-module-placeholder { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.llp-placeholder-card { max-width: 480px; text-align: center; background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 14px; padding: 36px 32px; }
.llp-placeholder-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin: 0 auto; color: var(--llp-navy); }
.llp-placeholder-card h1 { font-size: 18px; margin: 10px 0 8px; }
.llp-placeholder-card p { font-size: 13px; color: var(--llp-text-muted); line-height: 1.6; }
.llp-placeholder-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

/* ---------- État de démarrage d'un module gaté par bouton (ex. Audit douanier SYDONIA,
   maquette POC : l'interface d'import/résultats n'apparaît qu'après un clic explicite) ---------- */
.llp-audit-start { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 32px; gap: 6px; }
.llp-audit-start-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--llp-navy-tint); color: var(--llp-navy); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.llp-audit-start-ico .llp-icon-svg { width: 22px; height: 22px; }
.llp-audit-start h3 { font-size: 16px; margin: 0; }
.llp-audit-start p { font-size: 13px; color: var(--llp-text-muted); max-width: 440px; line-height: 1.6; margin: 0 0 10px; }

/* ---------- Erreurs plein écran ---------- */
.llp-fullscreen-message { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--llp-text); padding: 24px; }
.llp-fullscreen-message h1 { font-size: 20px; }
.llp-fullscreen-message p { color: var(--llp-text-muted); font-size: 13px; max-width: 480px; word-break: break-word; }
.llp-fullscreen-error h1 { color: var(--llp-critical); }

/* ---------- Bandeau d'erreur de circuit Blazor Server (standard, non capturée par un
   <ErrorBoundary> : crash JS interop, échec de la connexion, etc.) ---------- */
#blazor-error-ui {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10001;
    background: var(--llp-critical); color: #fff; padding: 11px 18px; font-size: 13px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; font-weight: 600; margin-left: 10px; }
#blazor-error-ui .dismiss { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: .85; }

/* ---------- Reconnexion de circuit Blazor Server ---------- */
#components-reconnect-modal { display: none; position: fixed; inset: 0; background: rgba(13,43,82,.75); z-index: 9999; align-items: center; justify-content: center; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
.llp-reconnect-box { background: var(--llp-surface); border-radius: 12px; padding: 26px 30px; text-align: center; max-width: 320px; }
.llp-reconnect-spinner { width: 30px; height: 30px; border: 3px solid var(--llp-border); border-top-color: var(--llp-navy); border-radius: 50%; margin: 0 auto 12px; animation: llp-spin 0.8s linear infinite; }
@keyframes llp-spin { to { transform: rotate(360deg); } }
.llp-reconnect-msg-show, .llp-reconnect-msg-failed, .llp-reconnect-msg-rejected { display: none; font-size: 13.5px; margin: 4px 0; }
#components-reconnect-modal.components-reconnect-show .llp-reconnect-msg-show { display: block; }
#components-reconnect-modal.components-reconnect-failed .llp-reconnect-msg-failed { display: block; }
#components-reconnect-modal.components-reconnect-rejected .llp-reconnect-msg-rejected { display: block; }

/* ---------- Écran Paramètres (refonte alignée sur la maquette POC transmise par LANDLEX) ---------- */
.llp-profile-avatar {
    width: 56px; height: 56px; border-radius: 50%; flex: none;
    background: linear-gradient(155deg, var(--llp-teal-400), var(--llp-teal-600));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--llp-font-display); font-weight: 700; font-size: 19px; color: #fff;
}
.llp-profile-head { display: flex; align-items: center; gap: 14px; }
.llp-profile-head-name { font-size: 15px; font-weight: 700; }
.llp-profile-head-role { font-size: 12px; color: var(--llp-text-muted); margin-top: 1px; }

/* Sélecteur en pilules (langue/apparence) — variante panel-body de .llp-lang-switch (qui est
   réservée au chrome sombre de la navbar et masquée sous 760px, donc réutilisable telle
   quelle ici). */
.llp-pref-pills { display: flex; gap: 4px; background: var(--llp-surface-2); border-radius: 100px; padding: 3px; }
.llp-pref-pill {
    flex: 1; border: none; background: none; padding: 7px 10px; border-radius: 100px;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--llp-text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: background .14s ease, color .14s ease;
}
.llp-pref-pill.active { background: var(--llp-surface); color: var(--llp-navy); box-shadow: var(--llp-shadow-sm); }

/* Interrupteur à bascule (notifications, 2FA) — aucun équivalent n'existait dans ce projet
   (seules des <input type="checkbox"> nues étaient utilisées jusqu'ici, voir les formulaires
   d'admin). Structure : <label class="llp-toggle"><input type="checkbox" .../><span
   class="llp-toggle-track"></span></label> — le suivi visuel (::after) est un enfant du
   <span>, déplacé par la pseudo-classe :checked du <input> qui le précède (sélecteur ~). */
.llp-toggle { position: relative; display: inline-flex; width: 38px; height: 22px; flex: none; }
.llp-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.llp-toggle-track { position: absolute; inset: 0; background: var(--llp-border-strong); border-radius: 100px; transition: background .16s ease; pointer-events: none; }
.llp-toggle-track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: var(--llp-shadow-sm); transition: transform .16s ease;
}
.llp-toggle input:checked ~ .llp-toggle-track { background: var(--llp-navy); }
.llp-toggle input:checked ~ .llp-toggle-track::after { transform: translateX(16px); }
.llp-toggle input:disabled ~ .llp-toggle-track { opacity: .5; cursor: not-allowed; }
.llp-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--llp-border); }
.llp-settings-row:last-child { border-bottom: none; }
.llp-settings-row-label { font-size: 13px; font-weight: 600; }
.llp-settings-row-sub { font-size: 11.5px; color: var(--llp-text-muted); margin-top: 2px; }

/* ---------- Écran Entrepôts (carte du Congo + synthèse + comparatif) ----------
   Repris à l'identique du POC (.map-kpi-grid / .congo-map-* / .map-marker* / .map-tip* /
   .kpi-summary-* / .compare-mini*), avec les jetons de couleur --llp-* du projet à la
   place des jetons --sarcelle*/--surface* de la maquette. */
.llp-map-kpi-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
@media (max-width: 1180px) { .llp-map-kpi-grid { grid-template-columns: minmax(0, 1fr); } }

.llp-congo-map-wrap {
    position: relative; padding: 20px; min-height: 400px; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 100% at 30% 0%, var(--llp-navy-tint), transparent 62%);
}
.llp-congo-map-stage { position: relative; width: 220px; height: 380px; flex: none; }
.llp-congo-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.llp-congo-map-shape { fill: var(--llp-navy-tint); stroke: var(--llp-navy); stroke-width: 1.6; transition: fill .15s ease; }

.llp-map-marker { position: absolute; transform: translate(-50%, -50%); cursor: pointer; }
.llp-map-marker-dot {
    width: 13px; height: 13px; border-radius: 50%; background: var(--llp-navy); border: 3px solid var(--llp-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25); position: relative; transition: transform .15s ease, background .15s ease; display: block;
}
.llp-map-marker-pulse { position: absolute; inset: -8px; border-radius: 50%; background: var(--llp-navy); opacity: .35; animation: llpMapPulse 2.4s ease-out infinite; }
@keyframes llpMapPulse { 0% { transform: scale(.4); opacity: .5; } 100% { transform: scale(2.3); opacity: 0; } }
.llp-map-marker:hover .llp-map-marker-dot, .llp-map-marker.active .llp-map-marker-dot { transform: scale(1.3); background: var(--llp-navy-3); }
.llp-map-marker-label {
    position: absolute; top: 19px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--llp-text);
    text-shadow: 0 1px 3px var(--llp-surface), 0 -1px 3px var(--llp-surface), 1px 0 3px var(--llp-surface), -1px 0 3px var(--llp-surface);
}
.llp-map-tip {
    position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 4px); width: 190px;
    background: var(--llp-surface); border: 1px solid var(--llp-border); border-radius: 10px; box-shadow: var(--llp-shadow-md);
    padding: 12px 14px; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 5;
}
.llp-map-marker:hover .llp-map-tip { opacity: 1; transform: translate(-50%, 0); }
.llp-map-marker-inactive .llp-map-marker-dot { background: var(--llp-text-muted); }
.llp-map-marker-inactive:hover .llp-map-marker-dot { background: var(--llp-text-muted-2, var(--llp-text-muted)); }
.llp-view-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--llp-border); border-radius: 9px; background: var(--llp-surface-2); flex: none; }
.llp-view-toggle-btn {
    font: inherit; font-size: 12px; font-weight: 600; color: var(--llp-text-muted); background: none; border: none;
    border-radius: 6px; padding: 6px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.llp-view-toggle-btn svg, .llp-view-toggle-btn .llp-icon-svg { width: 14px; height: 14px; flex: none; }
.llp-view-toggle-btn:hover { color: var(--llp-text); }
.llp-view-toggle-btn.active { background: var(--llp-surface); color: var(--llp-text); box-shadow: var(--llp-shadow-sm, 0 1px 3px rgba(0,0,0,.12)); }
.llp-map-tip-title { font-weight: 700; font-size: 12.5px; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.llp-map-tip-title .llp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--llp-navy); flex: none; }
.llp-map-tip-row { display: flex; justify-content: space-between; gap: 14px; font-size: 11.5px; color: var(--llp-text-muted); padding: 2px 0; }
.llp-map-tip-row b { color: var(--llp-text); }

.llp-kpi-summary-card { display: flex; flex-direction: column; height: 100%; }
.llp-kpi-summary-list { padding: 2px 18px; }
.llp-kpi-summary-row { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--llp-border); }
.llp-kpi-summary-row:last-child { border-bottom: none; }
.llp-kpi-summary-row-label { font-size: 12.5px; color: var(--llp-text-muted); }
.llp-kpi-summary-row-value { font-family: var(--llp-font-display); font-size: 20px; font-weight: 700; color: var(--llp-navy-3); }
.llp-compare-mini-head { padding: 12px 18px 0; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--llp-text-muted); }
.llp-compare-mini { padding: 6px 14px 12px; }
.llp-compare-mini table { width: 100%; border-collapse: collapse; }
.llp-compare-mini th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--llp-text-muted); text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--llp-border); }
.llp-compare-mini td { font-size: 12px; padding: 7px 6px; border-bottom: 1px solid var(--llp-border); }
.llp-compare-mini tr:last-child td { border-bottom: none; }
.llp-compare-mini td.llp-num, .llp-compare-mini th.llp-num { text-align: right; }

.llp-wh-detail-banner { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--llp-border); position: relative; overflow: hidden; }
.llp-wh-detail-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--llp-navy-tint); color: var(--llp-navy); display: flex; align-items: center; justify-content: center; flex: none; }
.llp-wh-detail-ico svg { width: 18px; height: 18px; }
.llp-back-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--llp-navy-3); cursor: pointer; font: inherit; font-size: 12.5px; padding: 0; margin-bottom: 10px; }
.llp-back-link:hover { text-decoration: underline; }

/* ---------- Bandeau entrepôt "foncé", onglet Stocks (gabarit calqué sur whDetailBanner()
   du POC — variante distincte du bandeau clair ci-dessus utilisé par l'onglet Entrepôts &
   capacités, pour ne pas modifier ce dernier). ---------- */
.llp-wh-stock-banner {
    position: relative; overflow: hidden; border-radius: 14px 14px 0 0; padding: 18px 20px;
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(120deg, var(--llp-navy), var(--llp-navy-2)); color: var(--llp-chrome-text);
}
.llp-wh-stock-banner-art { position: absolute; right: -10px; bottom: -16px; width: 130px; opacity: .15; pointer-events: none; color: #fff; }
.llp-wh-stock-banner-art .llp-icon-svg { width: 100%; height: 100%; }
.llp-wh-stock-banner-ico {
    width: 48px; height: 48px; flex: none; border-radius: 12px; position: relative; z-index: 1;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.llp-wh-stock-banner-ico .llp-icon-svg { width: 22px; height: 22px; }
.llp-wh-stock-banner-body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.llp-wh-stock-banner-name { font-family: var(--llp-font-display); font-weight: 700; font-size: 16px; }
.llp-wh-stock-banner-sub { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 3px; }
.llp-stock-banner-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 20px; align-items: start; }
.llp-stock-banner-occ-top { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--llp-text-muted); margin-bottom: 6px; }
.llp-stock-banner-occ-value { font-weight: 700; }

/* ---------- Responsive ----------
   Pas de tiroir mobile façon .navbar-mobile du POC (menu-btn hamburger) : la barre de
   liens reste simplement défilable horizontalement (overflow-x déjà posé ci-dessus sur
   .llp-navbar-links), ce qui couvre le même besoin avec beaucoup moins de code côté
   composant — à revoir si un vrai tiroir mobile est explicitement demandé. */
@media (max-width: 960px) {
    .llp-main { padding: 18px; }
    .llp-kpi-row, .llp-kpi-row-2, .llp-form-grid, .llp-grid-2 { grid-template-columns: 1fr; }
    .llp-map-kpi-grid { grid-template-columns: 1fr; }
    .llp-stock-banner-grid { grid-template-columns: 1fr; }
}