/* ===== Jetons (design tokens) — source unique de l'apparence ===== */
:root {
    /* Couleurs */
    --esn-accent:#2563eb;
    --esn-accent-strong:#1d4ed8;
    --esn-accent-contrast:#ffffff;
    --esn-bg:#f5f7fa;
    --esn-surface:#ffffff;
    --esn-surface-2:#f1f5f9;
    --esn-fg:#1b1f24;
    --esn-muted:#6b7280;
    --esn-border:#e5e7eb;
    --esn-ok-bg:#ecfdf5;  --esn-ok-fg:#065f46;
    --esn-err-bg:#fef2f2; --esn-err-fg:#991b1b;
    --esn-warn-bg:#fffbeb; --esn-warn-fg:#92400e;
    /* Typographie */
    --esn-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --esn-fs-sm:.825rem; --esn-fs-lg:1.15rem;
    /* Rayons / ombres / espacements */
    --esn-radius:.5rem; --esn-radius-sm:.35rem;
    --esn-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
    --esn-shadow-lg:0 4px 12px rgba(16,24,40,.12);
    --esn-space-2:.5rem; --esn-space-3:.75rem; --esn-space-4:1rem; --esn-space-6:1.5rem;
    /* Structure */
    --esn-topbar-h:56px; --esn-sidebar-w:232px;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font-family:var(--esn-font); font-size:15px; color:var(--esn-fg); background:var(--esn-bg); }
a { color:var(--esn-accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:1.5rem; margin:0 0 var(--esn-space-4); }
h2 { font-size:var(--esn-fs-lg); }

/* ===== Coquille applicative : barre haute + menu latéral ===== */
.esn-shell { min-height:100vh; display:flex; flex-direction:column; }
.esn-topbar { position:sticky; top:0; z-index:20; height:var(--esn-topbar-h); display:flex; align-items:center; gap:var(--esn-space-4); padding:0 var(--esn-space-4); background:var(--esn-surface); border-bottom:1px solid var(--esn-border); }
.esn-brand-client { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.esn-brand-client img { max-height:32px; max-width:160px; display:block; }
.esn-topbar .esn-spacer { flex:1; }
.esn-topbar nav { display:flex; align-items:center; gap:var(--esn-space-3); }
.esn-body { flex:1; display:flex; align-items:stretch; }
.esn-sidebar { width:var(--esn-sidebar-w); flex:0 0 var(--esn-sidebar-w); background:var(--esn-surface); border-right:1px solid var(--esn-border); display:flex; flex-direction:column; padding:var(--esn-space-4) var(--esn-space-2); }
.esn-sidebar nav { display:flex; flex-direction:column; gap:.15rem; }
.esn-sidebar nav a { display:block; padding:.5rem .75rem; border-radius:var(--esn-radius-sm); color:var(--esn-fg); }
.esn-sidebar nav a:hover { background:var(--esn-surface-2); text-decoration:none; }
.esn-sidebar nav a.active { background:color-mix(in srgb, var(--esn-accent) 12%, transparent); color:var(--esn-accent); font-weight:600; }
.esn-sidebar .esn-spacer { flex:1; }
.esn-brand-product { padding:.5rem .75rem; font-size:var(--esn-fs-sm); color:var(--esn-muted); letter-spacing:.02em; }
.esn-brand-product strong { font-weight:700; }
.esn-brand-product img { display:block; width:auto; height:26px; opacity:.9; }
.esn-content { flex:1; min-width:0; padding:var(--esn-space-6); max-width:1100px; }

/* Repli responsive du menu (CSS pur, sans JS) */
.esn-nav-toggle { display:none; }
.esn-nav-burger { display:none; cursor:pointer; font-size:1.25rem; line-height:1; padding:.25rem .5rem; border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); background:var(--esn-surface); }
@media (max-width:760px) {
    .esn-nav-burger { display:inline-flex; }
    .esn-sidebar { position:fixed; top:var(--esn-topbar-h); bottom:0; left:0; transform:translateX(-100%); transition:transform .2s ease; z-index:15; box-shadow:var(--esn-shadow-lg); }
    .esn-nav-toggle:checked ~ .esn-body .esn-sidebar { transform:translateX(0); }
    .esn-content { padding:var(--esn-space-4); }
}

/* ===== Composants ===== */
.esn-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--esn-space-4); }
.esn-card { display:block; padding:var(--esn-space-4); background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius); box-shadow:var(--esn-shadow); color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.esn-card:hover { border-color:var(--esn-accent); box-shadow:var(--esn-shadow-lg); text-decoration:none; }
.esn-card h2 { margin:.1rem 0 .25rem; font-size:1.05rem; }
.esn-card p { margin:0; color:var(--esn-muted); font-size:var(--esn-fs-sm); }

table.esn-table { width:100%; border-collapse:collapse; background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius); }
.esn-table th, .esn-table td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--esn-border); }
.esn-table thead th { background:var(--esn-surface-2); font-size:var(--esn-fs-sm); text-transform:uppercase; letter-spacing:.03em; color:var(--esn-muted); }
.esn-table tbody tr:hover { background:var(--esn-surface-2); }
.esn-table tbody tr:last-child td { border-bottom:none; }
.esn-cell-center { text-align:center; }
.esn-empty { padding:var(--esn-space-6); text-align:center; color:var(--esn-muted); }
.esn-pager { display:flex; gap:.5rem; align-items:center; margin-top:var(--esn-space-4); }

.esn-badge { display:inline-block; font-size:.7rem; font-weight:600; padding:.1rem .45rem; margin-left:.35rem; border-radius:999px; background:var(--esn-surface-2); color:var(--esn-muted); vertical-align:middle; }
.esn-badge.ok { background:var(--esn-ok-bg); color:var(--esn-ok-fg); }
.esn-badge.err { background:var(--esn-err-bg); color:var(--esn-err-fg); }
.esn-badge.warn { background:var(--esn-warn-bg); color:var(--esn-warn-fg); }

.esn-form { background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius); padding:var(--esn-space-6); box-shadow:var(--esn-shadow); max-width:640px; }
.esn-form label { display:block; margin:.6rem 0 .2rem; font-size:var(--esn-fs-sm); font-weight:600; color:var(--esn-fg); }
.esn-form input, .esn-form select, .esn-form textarea { width:100%; max-width:420px; padding:.5rem .6rem; border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); font:inherit; background:var(--esn-surface); }
.esn-form input:focus, .esn-form select:focus, .esn-form textarea:focus { outline:2px solid color-mix(in srgb, var(--esn-accent) 40%, transparent); outline-offset:1px; border-color:var(--esn-accent); }

.esn-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border:1px solid var(--esn-accent); background:var(--esn-accent); color:var(--esn-accent-contrast); border-radius:var(--esn-radius-sm); cursor:pointer; font:inherit; font-weight:600; transition:background .15s, border-color .15s; }
.esn-btn:hover { background:var(--esn-accent-strong); border-color:var(--esn-accent-strong); text-decoration:none; }
.esn-btn.secondary { background:var(--esn-surface); color:var(--esn-accent); }
.esn-btn.secondary:hover { background:var(--esn-surface-2); }
.esn-btn.danger { background:var(--esn-err-fg); border-color:var(--esn-err-fg); color:#fff; }
.esn-btn.danger:hover { background:#7f1414; border-color:#7f1414; }
.esn-btn.info { background:#2563eb; border-color:#2563eb; color:#fff; }
.esn-btn.info:hover { background:#1d4ed8; border-color:#1d4ed8; }
.esn-btn.warn { background:#ea580c; border-color:#ea580c; color:#fff; }
.esn-btn.warn:hover { background:#c2410c; border-color:#c2410c; }
.esn-btn.sm { padding:.3rem .6rem; font-size:var(--esn-fs-sm); font-weight:500; }
.esn-btn:disabled { opacity:.5; cursor:not-allowed; }

/* C6 : en-têtes de colonnes cliquables pour le tri */
.esn-sort { background:none; border:none; padding:0; margin:0; font:inherit; font-weight:inherit; color:inherit; cursor:pointer; }
.esn-sort:hover { color:var(--esn-accent); }

/* C9 : menu d'actions « kebab » (3 points verticaux) */
.esn-actions-cell { position:relative; white-space:nowrap; }
.esn-kebab { position:relative; display:inline-block; }
.esn-kebab-btn { background:none; border:1px solid transparent; border-radius:var(--esn-radius-sm); cursor:pointer; font-size:1.2rem; line-height:1; padding:.2rem .5rem; color:var(--esn-fg); }
.esn-kebab-btn:hover { background:var(--esn-surface-2); border-color:var(--esn-border); }
.esn-kebab-menu { position:absolute; right:0; top:100%; z-index:30; min-width:160px; background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); box-shadow:var(--esn-shadow-lg); padding:.25rem; display:flex; flex-direction:column; }
.esn-kebab-item { display:block; width:100%; text-align:left; background:none; border:none; padding:.45rem .6rem; border-radius:var(--esn-radius-sm); cursor:pointer; font:inherit; color:var(--esn-fg); }
.esn-kebab-item:hover { background:var(--esn-surface-2); }
.esn-kebab-item.danger { color:var(--esn-err-fg); }

/* C8 : la ligne entière d'un collaborateur désactivé est grisée */
.esn-table tbody tr.esn-row-disabled td { color:var(--esn-muted); background:var(--esn-surface-2); }
.esn-table tbody tr.esn-row-disabled:hover td { background:#e9eef4; }

/* Filtre de la liste collaborateurs */
.esn-filter label { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--esn-fs-sm); color:var(--esn-fg); cursor:pointer; }

/* Sélecteur de langue : drapeaux */
.esn-flag { display:inline-flex; padding:0; border-radius:2px; line-height:0; }
/* Boîte fixe identique pour les deux drapeaux (ratios officiels FR 3:2 / UK 2:1 différents) :
   on impose largeur ET hauteur, le SVG remplit la boîte (preserveAspectRatio="none"). */
.esn-flag img { width:24px; height:16px; border:1px solid var(--esn-border); border-radius:2px; display:block; object-fit:fill; }
.esn-flag:hover { opacity:.85; }

/* Lien du site sous le logo produit Esnalia (un cran plus petit, ne dépasse pas le logo) */
.esn-brand-product { display:inline-block; }
.esn-brand-site { display:block; margin-top:.15rem; font-size:.6rem; line-height:1.1; color:var(--esn-muted); white-space:nowrap; }

.esn-msg { padding:.6rem .8rem; border-radius:var(--esn-radius-sm); margin:.6rem 0; font-size:.92rem; }
.esn-msg.ok { background:var(--esn-ok-bg); color:var(--esn-ok-fg); }
.esn-msg.err { background:var(--esn-err-bg); color:var(--esn-err-fg); }
.esn-msg.warn { background:#fff7ed; color:#9a3412; }

.esn-codes { font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; background:var(--esn-surface-2); border:1px solid var(--esn-border); padding:var(--esn-space-3); border-radius:var(--esn-radius-sm); white-space:pre; }

/* ===== Coquille d'authentification (carte centrée, sans menu) ===== */
.esn-auth { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--esn-space-6); background:var(--esn-bg); }
.esn-auth-card { width:100%; max-width:400px; background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius); box-shadow:var(--esn-shadow-lg); padding:var(--esn-space-6); }
.esn-auth-brand { text-align:center; margin-bottom:var(--esn-space-4); }
.esn-auth-brand img { display:block; width:auto; height:40px; margin:0 auto; }
.esn-auth-card h1 { font-size:1.2rem; text-align:center; }
.esn-auth-card form { display:flex; flex-direction:column; gap:.5rem; }
.esn-auth-card label { display:flex; flex-direction:column; gap:.2rem; font-size:var(--esn-fs-sm); font-weight:600; }
.esn-auth-card input { padding:.55rem .6rem; border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); font:inherit; }
.esn-auth-card button { margin-top:var(--esn-space-2); }
.esn-auth-lang { margin-top:var(--esn-space-4); text-align:center; font-size:var(--esn-fs-sm); }
.esn-auth-lang a { margin:0 .25rem; color:var(--esn-muted); }

/* ===== Affordances d'erreur Blazor (conservées du template) ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred." }