/* ==========================================================================
   SmartStaff design system — F0.3
   Ported from the validated Figma prototype: docs/reference/SmaertStaff/
   (src/index.css for the raw tokens + skeleton/badge/cell classes verbatim,
   src/views/DesignSystem.tsx + Login.tsx + App.tsx for every component
   pattern below — those files use Tailwind utility classes with inline
   hex styles rather than a stylesheet, so the class names here are new,
   but every color, radius and spacing value is copied from them one-to-one).
   Custom properties are prefixed --ss-.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Navy — sidebar #152d4a, texte #1e3a5f, bordures #dae4f0, fond #f0f4f9 */
    --ss-navy-950: #0f1e33;
    --ss-navy-900: #152d4a;
    --ss-navy-800: #1e3a5f;
    --ss-navy-700: #264a77;
    --ss-navy-600: #2e5a8f;
    --ss-navy-200: #b8cde6;
    --ss-navy-100: #dae4f0;
    --ss-navy-50: #f0f4f9;

    /* Teal — primaire #0f7d74, hover #138f86 */
    --ss-teal-900: #0a4f4a;
    --ss-teal-800: #0d6660;
    --ss-teal-700: #0f7d74;
    --ss-teal-600: #138f86;
    --ss-teal-500: #18a89e;
    --ss-teal-200: #99d9d5;
    --ss-teal-100: #cceeec;
    --ss-teal-50: #e8f7f6;

    /* Amber — avertissements, clôture */
    --ss-amber-700: #b45309;
    --ss-amber-600: #d97706;
    --ss-amber-500: #f59e0b;
    --ss-amber-200: #fcd97b;
    --ss-amber-100: #fde68a;
    --ss-amber-50: #fffbeb;

    /* Emerald — succès */
    --ss-emerald-700: #047857;
    --ss-emerald-600: #059669;
    --ss-emerald-100: #d1fae5;
    --ss-emerald-50: #ecfdf5;

    /* Rose — erreur */
    --ss-rose-700: #b91c1c;
    --ss-rose-600: #dc2626;
    --ss-rose-100: #fee2e2;
    --ss-rose-50: #fef2f2;

    /* Sky — information */
    --ss-sky-700: #0369a1;
    --ss-sky-600: #0284c7;
    --ss-sky-100: #e0f2fe;
    --ss-sky-50: #f0f9ff;

    /* Purple / orange / green — attendance-code accents (index.css cell-*) */
    --ss-purple-700: #7e22ce;
    --ss-purple-600: #9333ea;
    --ss-purple-50: #fdf4ff;
    --ss-orange-700: #c2410c;
    --ss-orange-50: #fff7ed;
    --ss-green-800: #166534;
    --ss-green-50: #f0fdf4;
    --ss-pink-800: #9d174d;
    --ss-pink-50: #fdf2f8;
    --ss-indigo-800: #3730a3;
    --ss-indigo-50: #eef2ff;

    /* Neutral surfaces & text (used throughout the prototype as inline hex) */
    --ss-surface-0: #ffffff;
    --ss-surface-1: #f8fafc;
    --ss-surface-2: var(--ss-navy-50);
    --ss-text-primary: var(--ss-navy-800);
    --ss-text-secondary: #64748b;
    --ss-text-tertiary: #94a3b8;
    --ss-border: var(--ss-navy-100);
    --ss-border-soft: var(--ss-navy-50);

    --ss-radius-sm: 6px;
    --ss-radius-md: 8px;
    --ss-radius-lg: 12px;
    --ss-radius-xl: 16px;
    --ss-radius-2xl: 20px;
    --ss-radius-pill: 999px;

    --ss-shadow-card: 0 1px 2px rgba(15, 30, 51, 0.04);
    --ss-shadow-popover: 0 12px 32px rgba(15, 30, 51, 0.16);

    --ss-font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ss-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: var(--ss-font-sans);
    background-color: var(--ss-navy-50);
    color: var(--ss-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

/* Tabular numerals for data display — heures, matricules, montants */
.tabnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.font-mono {
    font-family: var(--ss-font-mono);
}

/* Thin scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: #c8d8eb transparent;
}
*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: #c8d8eb;
    border-radius: 3px;
}

/* Focus ring */
*:focus-visible {
    outline: 2px solid var(--ss-teal-700);
    outline-offset: 2px;
}

/* Attendance grid frozen column */
.attendance-grid {
    display: grid;
    overflow-x: auto;
}
.frozen-col {
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--ss-surface-0);
}

/* Skeleton loading animation */
@keyframes ss-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #e8edf3 25%, #f4f7fb 50%, #e8edf3 75%);
    background-size: 200% 100%;
    animation: ss-shimmer 1.5s infinite;
    border-radius: 4px;
}

/* Print styles */
@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
}

/* ── Typography scale (DesignSystem.tsx "Typographie") ──────────────────
   H1 28/700, H2 22/600, H3 18/600, body 15/400, label 13/500, caption 11/400 */

.ss-h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--ss-text-primary); }
.ss-h2 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--ss-text-primary); }
.ss-h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ss-text-primary); }
.ss-body { font-size: 15px; font-weight: 400; color: var(--ss-text-primary); }
.ss-body-secondary { font-size: 15px; font-weight: 400; color: var(--ss-text-secondary); margin: 0; }
.ss-label { font-size: 13px; font-weight: 500; color: var(--ss-text-primary); }
.ss-caption { font-size: 11px; font-weight: 400; color: var(--ss-text-tertiary); }
.ss-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ss-teal-700); }

/* ── Badges de statut (index.css, verbatim) ──────────────────────────── */

.badge-success { background-color: var(--ss-emerald-50); color: var(--ss-emerald-700); border: 1px solid var(--ss-emerald-100); }
.badge-warning { background-color: var(--ss-amber-50); color: var(--ss-amber-700); border: 1px solid var(--ss-amber-100); }
.badge-danger  { background-color: var(--ss-rose-50); color: var(--ss-rose-700); border: 1px solid var(--ss-rose-100); }
.badge-info    { background-color: var(--ss-sky-50); color: var(--ss-sky-700); border: 1px solid var(--ss-sky-100); }
.badge-navy    { background-color: var(--ss-navy-50); color: var(--ss-navy-800); border: 1px solid var(--ss-navy-100); }
.badge-teal    { background-color: var(--ss-teal-50); color: var(--ss-teal-700); border: 1px solid var(--ss-teal-100); }
.badge-amber   { background-color: var(--ss-amber-50); color: var(--ss-amber-700); border: 1px solid var(--ss-amber-100); }

.ss-badge-pill,
[class^="badge-"].ss-badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--ss-radius-pill);
    font-size: 13px;
    font-weight: 600;
}

/* ── Attendance cell colors (index.css, verbatim) ────────────────────── */

.cell-P  { background-color: var(--ss-emerald-50); color: var(--ss-emerald-700); }
.cell-A  { background-color: var(--ss-rose-50); color: var(--ss-rose-700); }
.cell-AJ { background-color: var(--ss-sky-50); color: var(--ss-sky-700); }
.cell-MA { background-color: var(--ss-purple-50); color: var(--ss-purple-700); }
.cell-CA { background-color: var(--ss-amber-50); color: var(--ss-amber-700); }
.cell-CV { background-color: var(--ss-orange-50); color: var(--ss-orange-700); }
.cell-MS { background-color: var(--ss-navy-50); color: var(--ss-navy-700); }
.cell-CC { background-color: var(--ss-green-50); color: var(--ss-green-800); }
.cell-RM { background-color: var(--ss-pink-50); color: var(--ss-pink-800); }
.cell-CM { background-color: var(--ss-pink-50); color: var(--ss-pink-800); }
.cell-FM { background-color: var(--ss-indigo-50); color: var(--ss-indigo-800); }
.cell-dim { background-color: var(--ss-surface-1); color: var(--ss-text-tertiary); }

/* ── Buttons (DesignSystem.tsx "Boutons") ────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--ss-radius-md);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.btn-primaire { background: var(--ss-teal-700); color: var(--ss-surface-0); }
.btn-primaire:hover:not(:disabled) { background: var(--ss-teal-600); }

.btn-secondaire { background: var(--ss-navy-800); color: var(--ss-surface-0); }
.btn-secondaire:hover:not(:disabled) { background: var(--ss-navy-700); }

.btn-tertiaire { background: transparent; border-color: var(--ss-border); color: var(--ss-text-secondary); }
.btn-tertiaire:hover:not(:disabled) { border-color: var(--ss-teal-700); color: var(--ss-teal-700); }

.btn-avertissement { background: var(--ss-amber-600); color: var(--ss-surface-0); }
.btn-succes { background: var(--ss-emerald-600); color: var(--ss-surface-0); }
.btn-danger { background: var(--ss-rose-600); color: var(--ss-surface-0); }

.btn:disabled,
.btn[disabled] {
    background: var(--ss-navy-50);
    color: var(--ss-text-tertiary);
    border-color: transparent;
    cursor: not-allowed;
    opacity: 0.85;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.card {
    background: var(--ss-surface-0);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-xl);
    box-shadow: var(--ss-shadow-card);
    padding: 20px;
}

.card-lg {
    border-radius: var(--ss-radius-2xl);
    padding: 24px;
}

.card-kpi { display: grid; gap: 4px; }
.card-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ss-text-tertiary); }
.card-kpi-value { font-size: 30px; font-weight: 700; }
.card-kpi-sub { font-size: 12px; color: var(--ss-text-secondary); }

/* ── Form controls (Login.tsx) ───────────────────────────────────────── */

.ss-form { display: flex; flex-direction: column; gap: 16px; }
.ss-field { display: flex; flex-direction: column; }
.ss-field-label { font-size: 14px; font-weight: 600; color: var(--ss-text-primary); margin-bottom: 6px; }

.ss-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--ss-radius-md);
    border: 1px solid var(--ss-border);
    background: var(--ss-surface-0);
    color: var(--ss-text-primary);
    font-size: 14px;
}
.ss-input:focus-visible { border-color: var(--ss-teal-700); }
.ss-input.is-invalid { border-color: var(--ss-rose-600); }

.ss-form-error {
    padding: 8px 12px;
    border-radius: var(--ss-radius-md);
    background: var(--ss-rose-50);
    color: var(--ss-rose-700);
    font-size: 14px;
}

/* W9-EV2 — bandeau informatif neutre (ex. « ce brouillon n'a aucun effet
   tant qu'il n'est pas publié »), même gabarit que .ss-form-error mais sur
   la palette teal plutôt que rose : ce n'est pas une erreur. */
.ss-info-banner {
    padding: 8px 12px;
    border-radius: var(--ss-radius-md);
    background: var(--ss-teal-50);
    color: var(--ss-teal-700);
    font-size: 14px;
}

.ss-link-inline {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ss-teal-700);
    text-align: left;
}

/* ── Steppers (inferred: numbered activation/wizard steps, not directly
   verified against a reference screenshot — see docs/plan/logs/F0.3.md) ── */

.ss-stepper { display: flex; align-items: center; gap: 8px; }
.ss-stepper-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    background: var(--ss-navy-50);
    color: var(--ss-text-tertiary);
    flex-shrink: 0;
}
.ss-stepper-step.is-active { background: var(--ss-teal-700); color: var(--ss-surface-0); }
.ss-stepper-step.is-done { background: var(--ss-emerald-600); color: var(--ss-surface-0); }
.ss-stepper-connector { flex: 1; height: 2px; background: var(--ss-border); }
.ss-stepper-connector.is-done { background: var(--ss-emerald-600); }

/* ── Tables (inferred generic surface; register/grid screens will refine
   this in later briefs — see docs/plan/logs/F0.3.md) ────────────────── */

.ss-table-wrap { overflow-x: auto; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-lg); }
/* Focus target of « Historique des pointages » (dossier Présence): focused only to scroll it into view. */
.ss-dossier-presence-jours:focus { outline: none; }
.ss-table { width: 100%; border-collapse: collapse; background: var(--ss-surface-0); font-size: 13px; }
.ss-table thead th {
    text-align: left;
    padding: 10px 14px;
    background: var(--ss-navy-50);
    color: var(--ss-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--ss-border);
}
.ss-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ss-border-soft);
    color: var(--ss-text-primary);
}
.ss-table tbody tr:hover td { background: var(--ss-navy-50); }

/* ── Kernel fallback surfaces (Components/RouteNotFound.razor,
   HostAccessMismatch.razor) — restyled onto the design system tokens ─── */

.shell-card {
    max-width: 480px;
    margin: 64px auto;
    background: var(--ss-surface-0);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-2xl);
    box-shadow: var(--ss-shadow-card);
    padding: 32px;
    text-align: left;
}
.shell-card-warning { border-color: var(--ss-amber-200); background: var(--ss-amber-50); }
.shell-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-teal-700); margin-bottom: 8px; }
.shell-card-warning .shell-eyebrow { color: var(--ss-amber-700); }
.shell-title { font-size: 22px; font-weight: 700; color: var(--ss-text-primary); margin: 0 0 8px; }
.shell-copy { font-size: 14px; color: var(--ss-text-secondary); margin: 0 0 20px; line-height: 1.5; }
.shell-link-button {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--ss-radius-md);
    background: var(--ss-teal-700);
    color: var(--ss-surface-0);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.shell-link-button:hover { background: var(--ss-teal-600); }

/* Generic page padding + "coming soon" placeholder card used by the
   /agent/accueil and /rh/tableau-de-bord placeholders. */
.ss-page-pad { padding: 20px; }
.ss-coming-soon { max-width: 520px; display: grid; gap: 10px; }

/* ==========================================================================
   Login screen — docs/reference/SmaertStaff/src/views/Login.tsx
   ========================================================================== */

.ss-login-shell {
    min-height: 100vh;
    display: flex;
    background: var(--ss-navy-50);
}

.ss-login-brand {
    display: none;
    width: 384px;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    background: var(--ss-navy-900);
    color: var(--ss-surface-0);
}

.ss-login-brand-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }

.ss-login-logo-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--ss-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    background: var(--ss-teal-700);
    color: var(--ss-surface-0);
    flex-shrink: 0;
}

.ss-login-brand-title { font-weight: 700; font-size: 18px; line-height: 1.2; }
.ss-login-brand-subtitle { color: rgba(255, 255, 255, 0.5); font-size: 14px; }

.ss-login-features { display: flex; flex-direction: column; gap: 24px; }
.ss-login-feature-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--ss-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: rgba(15, 125, 116, 0.3);
}
.ss-login-feature-title { font-weight: 600; margin-bottom: 4px; }
.ss-login-feature-copy { color: rgba(255, 255, 255, 0.6); font-size: 14px; }

.ss-login-brand-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 24px; }
.ss-login-brand-footer-eyebrow { color: rgba(255, 255, 255, 0.4); font-size: 12px; }
.ss-login-brand-footer-name { font-weight: 600; margin-top: 4px; }
.ss-login-brand-footer-note { color: rgba(255, 255, 255, 0.5); font-size: 12px; margin-top: 2px; }

.ss-login-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ss-login-card { width: 100%; max-width: 384px; }

.ss-login-mobile-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.ss-login-mobile-title { font-weight: 700; font-size: 20px; color: var(--ss-text-primary); }
.ss-login-mobile-subtitle { font-size: 12px; color: var(--ss-text-secondary); }

.ss-login-lede { margin-bottom: 32px; }

.ss-login-submit { width: 100%; padding: 12px; font-size: 14px; }
.ss-login-submit:disabled { opacity: 0.7; background: var(--ss-teal-700); color: var(--ss-surface-0); cursor: progress; }

.ss-login-activation { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ss-border); text-align: center; }
.ss-login-activation-lede { margin-bottom: 12px; }
.ss-login-activation-button { width: 100%; }

/* W11-SEC1 — étape « Confirmez avec votre clé d'accès » (second facteur). */
.ss-login-second-factor-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--ss-teal-50);
    color: var(--ss-teal-700);
}

/* W11-SEC1 — liste des clés d'accès dans « Mon compte ». */
.ss-passkey-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ss-border);
}
.ss-passkey-row:last-child { border-bottom: none; }
.ss-passkey-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-passkey-name { font-weight: 600; color: var(--ss-text-primary); overflow-wrap: anywhere; }

/* ── Activation flow — docs/reference/SmaertStaff/src/views/Activation.tsx ── */

.ss-activation-card { width: 100%; max-width: 440px; }
.ss-activation-stepper { margin-bottom: 20px; }
.ss-activation-body { padding: 24px; }
.ss-activation-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: var(--ss-radius-lg);
    background: var(--ss-navy-50);
    margin-top: 12px;
    cursor: pointer;
}
.ss-activation-consent:first-of-type { margin-top: 0; }
.ss-activation-consent.is-checked { background: var(--ss-teal-50); }
.ss-activation-consent input { margin-top: 3px; flex-shrink: 0; }

.ss-login-demo-panel {
    margin-top: 24px;
    padding: 12px;
    border-radius: var(--ss-radius-xl);
    background: var(--ss-amber-50);
    border: 1px solid var(--ss-amber-100);
}
.ss-login-demo-title { font-size: 12px; font-weight: 600; color: var(--ss-amber-700); margin-bottom: 8px; }
.ss-login-demo-hint { font-size: 11px; color: var(--ss-amber-700); margin: -4px 0 8px; }
.ss-login-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ss-login-demo-button {
    padding: 6px 8px;
    border-radius: var(--ss-radius-sm);
    border: none;
    background: var(--ss-navy-900);
    color: var(--ss-surface-0);
    font-size: 12px;
    font-weight: 500;
}
.ss-login-demo-button:hover { background: var(--ss-navy-800); }

@media (min-width: 1024px) {
    .ss-login-brand { display: flex; }
    .ss-login-mobile-logo { display: none; }
}

/* ==========================================================================
   RH desktop shell — docs/reference/SmaertStaff/src/App.tsx (DesktopShell)
   ========================================================================== */

.ss-rh-shell {
    display: flex;
    height: 100vh;
    background: var(--ss-navy-50);
    overflow: hidden;
    font-family: var(--ss-font-sans);
}

.ss-rh-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}

.ss-rh-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 240px;
    background: var(--ss-navy-900);
    color: var(--ss-surface-0);
    transition: width 0.2s ease, transform 0.2s ease;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
}
.ss-rh-sidebar.is-collapsed { width: 56px; }

.ss-rh-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    min-height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ss-rh-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--ss-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ss-teal-700);
    color: var(--ss-surface-0);
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}
.ss-rh-logo-text { overflow: hidden; }
.ss-rh-logo-title { font-weight: 700; font-size: 14px; line-height: 1.2; }
.ss-rh-logo-subtitle { font-size: 12px; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ss-rh-org-badge {
    margin: 12px 12px 4px;
    padding: 8px 12px;
    border-radius: var(--ss-radius-md);
    background: rgba(255, 255, 255, 0.07);
}
.ss-rh-org-eyebrow { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 2px; }
.ss-rh-org-name { font-size: 14px; font-weight: 600; }

.ss-rh-nav { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.ss-rh-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--ss-radius-md);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    border-left: 2px solid transparent;
    text-decoration: none;
    background: transparent;
}
.ss-rh-nav-item:hover { background: rgba(255, 255, 255, 0.06); }
.ss-rh-nav-item.is-active {
    background: rgba(15, 125, 116, 0.3);
    color: var(--ss-teal-200);
    border-left-color: var(--ss-teal-700);
}
.ss-rh-nav-icon { flex-shrink: 0; }
.ss-rh-nav-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ss-rh-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
}
.ss-rh-collapse-toggle:hover { color: rgba(255, 255, 255, 0.7); }

/* The sidebar is a normal flex child on desktop (position: relative), so it
   already reserves its own width — no spacer element needed. */

.ss-rh-main-column { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.ss-rh-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 16px;
    background: var(--ss-surface-0);
    border-bottom: 1px solid var(--ss-border);
    flex-shrink: 0;
}

.ss-rh-hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--ss-radius-md);
    background: transparent;
    flex-shrink: 0;
}
.ss-rh-hamburger span { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--ss-text-primary); }

.ss-rh-topbar-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ss-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ss-rh-topbar-search { position: relative; display: none; align-items: center; }
.ss-rh-search-icon { position: absolute; left: 10px; color: var(--ss-text-tertiary); }
.ss-rh-search-input {
    width: 220px;
    padding: 7px 12px 7px 30px;
    border-radius: var(--ss-radius-md);
    border: 1px solid var(--ss-border);
    background: var(--ss-navy-50);
    font-size: 13px;
    color: var(--ss-text-primary);
}

.ss-rh-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--ss-radius-md);
    background: transparent;
    color: var(--ss-text-primary);
    flex-shrink: 0;
}
.ss-rh-bell:hover { background: var(--ss-navy-50); }

/* W5-N1: NotificationBell — shared by RhLayout's topbar (`.ss-rh-bell`
   above) and AgentLayout's dark status bar (`.ss-notif-bell-compact`). */
.ss-notif-bell { position: relative; cursor: pointer; }
.ss-notif-bell-compact {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
}
.ss-notif-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ss-rose-600);
    color: var(--ss-surface-0);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.ss-rh-user-chip { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--ss-border); flex-shrink: 0; }
.ss-rh-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-surface-0);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.ss-rh-user-meta { display: none; }
.ss-rh-user-name { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ss-text-primary); }
.ss-rh-user-role { font-size: 12px; color: var(--ss-text-secondary); }

.ss-rh-main { flex: 1; overflow-y: auto; background: var(--ss-navy-50); }

@media (max-width: 1023px) {
    .ss-rh-sidebar { transform: translateX(-100%); }
    .ss-rh-sidebar.is-open { transform: translateX(0); }
    .ss-rh-backdrop { display: block; }
}

@media (min-width: 1024px) {
    .ss-rh-sidebar { position: relative; transform: none !important; }
    .ss-rh-hamburger { display: none; }
    .ss-rh-backdrop { display: none !important; }
}

@media (min-width: 768px) {
    .ss-rh-topbar-search { display: flex; }
}

@media (min-width: 1024px) {
    .ss-rh-user-meta { display: block; }
}

/* ── Network badge — shared by RhLayout topbar and AgentLayout status bar ── */

.ss-network-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--ss-radius-md);
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}
.ss-network-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.ss-network-online       { background: var(--ss-emerald-50); color: var(--ss-emerald-700); }
.ss-network-online .ss-network-dot { background: var(--ss-emerald-600); }
.ss-network-offline      { background: var(--ss-rose-50); color: var(--ss-rose-700); }
.ss-network-offline .ss-network-dot { background: var(--ss-rose-600); }
.ss-network-weak         { background: var(--ss-amber-50); color: var(--ss-amber-700); }
.ss-network-weak .ss-network-dot { background: var(--ss-amber-600); }
.ss-network-syncing      { background: var(--ss-sky-50); color: var(--ss-sky-700); }
.ss-network-syncing .ss-network-dot { background: var(--ss-sky-600); }
.ss-network-sync-failed  { background: var(--ss-rose-50); color: var(--ss-rose-700); }
.ss-network-sync-failed .ss-network-dot { background: var(--ss-rose-600); }
.ss-network-conflict     { background: var(--ss-amber-50); color: var(--ss-amber-700); }
.ss-network-conflict .ss-network-dot { background: var(--ss-amber-600); }
.ss-network-rejected     { background: var(--ss-rose-50); color: var(--ss-rose-700); }
.ss-network-rejected .ss-network-dot { background: var(--ss-rose-600); }

.ss-network-badge-compact {
    background: transparent !important;
    padding: 0;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Agent shell status bar: the sync badge doubles as « Réessayer maintenant »
   when something is pending/rejected (brief R2-D-offline-outbox). */
.ss-agent-syncbadge-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.ss-agent-syncbadge-btn:disabled { cursor: default; }

/* ==========================================================================
   Agent mobile shell — docs/reference/SmaertStaff/src/App.tsx (MobileShell)
   ========================================================================== */

.ss-agent-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 430px;
    margin: 0 auto;
    background: var(--ss-navy-50);
    overflow: hidden;
    font-family: var(--ss-font-sans);
}

.ss-agent-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ss-navy-900);
    color: var(--ss-surface-0);
    font-size: 12px;
    flex-shrink: 0;
}
.ss-agent-statusbar-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ss-agent-statusbar-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-agent-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ss-surface-0);
    flex-shrink: 0;
}
/* W13-UX1: <img> counterpart of .ss-agent-avatar (EmployeePhoto.razor, own photo). */
.ss-agent-avatar-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ss-agent-clock { opacity: 0.6; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.ss-agent-content { flex: 1; overflow-y: auto; background: var(--ss-navy-50); }

.ss-agent-bottomnav { display: flex; background: var(--ss-surface-0); border-top: 1px solid var(--ss-border); flex-shrink: 0; }
.ss-agent-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--ss-text-tertiary);
}
.ss-agent-tab.is-active { color: var(--ss-teal-700); }
.ss-agent-tab-icon { font-size: 18px; line-height: 1; }
.ss-agent-tab-label { font-size: 11px; font-weight: 500; }

/* ==========================================================================
   Agent pages — Accueil / Pointage / Historique / Justifications (UI-A)
   Ported from docs/reference/SmaertStaff/src/views/agent/{Home,Pointage,
   Historique,Justifications}.tsx — same layout, colors and French copy.
   ========================================================================== */

/* ── Generic inline alert boxes (offline banner, retard, hors-zone…) ────── */
.ss-alert { border-radius: var(--ss-radius-lg); padding: 12px; font-size: 13px; text-align: left; line-height: 1.4; }
.ss-alert-title { font-weight: 700; margin-bottom: 2px; }
.ss-alert-success { background: var(--ss-emerald-50); color: var(--ss-emerald-700); }
.ss-alert-warning { background: var(--ss-amber-50); color: var(--ss-amber-700); border: 1px solid var(--ss-amber-100); }
.ss-alert-danger  { background: var(--ss-rose-50); color: var(--ss-rose-700); border: 1px solid var(--ss-rose-100); }
.ss-alert-info    { background: var(--ss-sky-50); color: var(--ss-sky-700); }
.ss-alert-teal    { background: var(--ss-teal-50); color: var(--ss-teal-700); }

.ss-alert-button { width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; border: none; cursor: pointer; }
.ss-alert-button-chevron { margin-left: auto; font-size: 18px; line-height: 1; flex-shrink: 0; }

/* ── Page shell shared by every agent sub-page (header + scroll body) ───── */
.ss-agent-page-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ss-surface-0);
    border-bottom: 1px solid var(--ss-border);
}
.ss-agent-page-header-back { color: var(--ss-text-secondary); background: none; border: none; display: flex; padding: 2px; }
.ss-agent-page-header-title { font-weight: 700; color: var(--ss-text-primary); font-size: 16px; }
.ss-agent-page-header-sub { font-size: 13px; color: var(--ss-text-secondary); margin-top: 1px; }

.ss-agent-body { padding: 16px; max-width: 400px; margin: 0 auto; }

/* ── Pointage: idle / checking / confirmation / result ───────────────────── */
.ss-pointage-icon-circle {
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    background: var(--ss-navy-50);
    color: var(--ss-navy-800);
}
.ss-pointage-title { text-align: center; font-size: 20px; font-weight: 700; color: var(--ss-text-primary); margin: 0 0 8px; }
.ss-pointage-sub { text-align: center; font-size: 14px; color: var(--ss-text-secondary); margin: 0 0 4px; }

.ss-pointage-cta {
    width: 100%; padding: 16px; border-radius: var(--ss-radius-2xl);
    font-weight: 700; font-size: 17px; color: var(--ss-surface-0);
    background: var(--ss-teal-700); border: none; cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 125, 116, 0.3);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ss-pointage-cta:hover { background: var(--ss-teal-600); }
.ss-pointage-cta.is-navy { background: var(--ss-navy-800); box-shadow: none; }
.ss-pointage-cta.is-navy:hover { background: var(--ss-navy-700); }
.ss-pointage-cta-secondary {
    width: 100%; margin-top: 10px; padding: 12px; border-radius: var(--ss-radius-xl);
    font-weight: 600; font-size: 14px; color: var(--ss-teal-700);
    background: var(--ss-teal-50); border: 1px solid var(--ss-teal-100); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ── W19-MS2 : carte « Site du jour » + sélecteur (feuille en bas) ────────
   Décision PO 2026-09-09 (sites multiples par agent). Aucune couleur
   nouvelle : uniquement les jetons --ss-* déjà posés plus haut. */
.ss-site-jour { margin-bottom: 16px; }
.ss-site-jour-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ss-site-jour-nom { font-size: 17px; font-weight: 700; color: var(--ss-text-primary); margin-top: 4px; }
.ss-site-jour-action { flex-shrink: 0; }

.ss-site-choix-list { display: flex; flex-direction: column; gap: 8px; }
.ss-site-choix {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 12px 14px; border-radius: var(--ss-radius-xl); cursor: pointer;
    background: var(--ss-surface-0); border: 1px solid var(--ss-border);
}
.ss-site-choix.is-selected { border-color: var(--ss-teal-700); background: var(--ss-teal-50); }
.ss-site-choix-radio {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--ss-border); color: var(--ss-surface-0);
}
.ss-site-choix.is-selected .ss-site-choix-radio { border-color: var(--ss-teal-700); background: var(--ss-teal-700); }
.ss-site-choix-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-site-choix-nom { font-size: 15px; font-weight: 600; color: var(--ss-text-primary); }

/* Le bloc RH « Sites » / « Planning hebdomadaire » de l'onglet Emploi. */
.ss-site-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ss-site-checkbox { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--ss-radius-md); border: 1px solid var(--ss-border); }
.ss-planning-ligne { display: grid; grid-template-columns: 120px minmax(180px, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ss-border); }
.ss-planning-ligne:last-child { border-bottom: none; }
.ss-planning-jour { font-weight: 600; color: var(--ss-text-primary); }
.ss-planning-bornes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 8px 130px; }
@media (max-width: 720px) {
    .ss-planning-ligne { grid-template-columns: 1fr; }
    .ss-planning-bornes { padding-left: 0; }
}

.ss-check-list { display: flex; flex-direction: column; gap: 16px; }
.ss-check-row { display: flex; align-items: center; gap: 12px; }
.ss-check-bullet {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; background: var(--ss-navy-50); color: var(--ss-text-tertiary);
}
.ss-check-bullet.is-done { background: var(--ss-emerald-50); color: var(--ss-emerald-700); }
.ss-check-bullet.is-active { color: var(--ss-navy-800); }
.ss-check-label { font-size: 14px; font-weight: 600; color: var(--ss-text-tertiary); }
.ss-check-label.is-done { color: var(--ss-emerald-700); }
.ss-check-label.is-active { color: var(--ss-text-primary); }
.ss-check-detail { font-size: 12px; color: var(--ss-text-secondary); margin-top: 2px; }

.ss-result-card { border-radius: var(--ss-radius-2xl); padding: 24px; }
.ss-result-icon { display: flex; align-items: center; justify-content: center; }
.ss-result-title { text-align: center; font-size: 17px; font-weight: 700; margin: 8px 0 0; }
.ss-result-lines { margin-top: 16px; font-size: 14px; }
.ss-result-line { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.4); }
.ss-result-line:last-child { border-bottom: none; }
.ss-result-line-label { color: var(--ss-text-secondary); }
.ss-result-line-value { font-weight: 600; }
.ss-result-line-value.is-highlight { color: var(--ss-rose-700); }
.ss-result-note { margin-top: 12px; padding: 12px; border-radius: var(--ss-radius-lg); font-size: 12px; }
.ss-result-actions { margin-top: 16px; display: flex; gap: 12px; }
.ss-result-actions .btn { flex: 1; }

/* ── Accueil: hero card ───────────────────────────────────────────────── */
.ss-hero {
    border-radius: var(--ss-radius-2xl);
    padding: 20px;
    color: var(--ss-surface-0);
    background: linear-gradient(135deg, var(--ss-navy-900) 0%, var(--ss-navy-800) 100%);
}
.ss-hero-date { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 4px; text-transform: capitalize; }
.ss-hero-greeting { font-size: 20px; font-weight: 700; }
.ss-hero-sub { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.ss-hero-status { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.7); }
.ss-hero-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ss-hero-status-dot.online { background: var(--ss-emerald-500,#34d399); }
.ss-hero-status-dot.offline { background: var(--ss-rose-600); }
.ss-hero-today { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.ss-hero-today-eyebrow { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 4px; letter-spacing: 0.04em; }
.ss-hero-today-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ss-hero-today-title { font-size: 14px; font-weight: 600; }
.ss-hero-today-sub { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.ss-hero-today-check {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--ss-emerald-600); color: var(--ss-surface-0);
}

.ss-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-info-block { border-radius: var(--ss-radius-lg); padding: 12px; background: var(--ss-navy-50); }
.ss-info-block-label { font-size: 12px; color: var(--ss-text-tertiary); margin-bottom: 2px; }
.ss-info-block-value { font-weight: 700; color: var(--ss-text-primary); }
.ss-info-block-sub { font-size: 12px; color: var(--ss-text-secondary); margin-top: 2px; }

.ss-activity-row { display: flex; align-items: flex-start; gap: 12px; }
.ss-activity-icon { width: 32px; height: 32px; border-radius: var(--ss-radius-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ss-activity-text { font-size: 14px; font-weight: 500; color: var(--ss-text-primary); }
.ss-activity-sub { font-size: 12px; color: var(--ss-text-tertiary); margin-top: 2px; }

.ss-quicklinks-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ss-quicklink {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: var(--ss-radius-xl); border: 1px solid var(--ss-border);
    background: var(--ss-surface-0); color: var(--ss-text-primary); cursor: pointer; text-align: center;
}
.ss-quicklink:hover { background: var(--ss-navy-50); }
.ss-quicklink-label { font-size: 12px; font-weight: 500; }

/* ── Historique ───────────────────────────────────────────────────────── */
.ss-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ss-summary-item { text-align: center; }
.ss-summary-value { font-size: 24px; font-weight: 700; }
.ss-summary-label { font-size: 12px; color: var(--ss-text-secondary); }
.ss-summary-row { display: flex; justify-content: space-between; font-size: 14px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--ss-navy-50); }

.ss-month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-month-nav-btn { background: var(--ss-surface-0); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-md); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ss-text-secondary); cursor: pointer; }
.ss-month-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ss-month-nav-label { font-weight: 700; color: var(--ss-text-primary); text-transform: capitalize; }

.ss-day-card { background: var(--ss-surface-0); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-2xl); padding: 14px 16px; }
.ss-day-card.has-anomaly { border-color: var(--ss-amber-100); }
.ss-day-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.ss-day-card-date { font-weight: 600; font-size: 13px; color: var(--ss-text-primary); text-transform: capitalize; }
.ss-day-code-badge { padding: 2px 8px; border-radius: var(--ss-radius-md); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ss-day-times { display: flex; gap: 16px; font-size: 14px; }
.ss-day-times-label { color: var(--ss-text-tertiary); }
.ss-day-times-value { font-weight: 500; color: var(--ss-text-primary); }
.ss-day-note { margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--ss-text-secondary); }
.ss-day-note.is-anomaly { color: var(--ss-amber-700); }

/* ── Justifications / bons de sortie ─────────────────────────────────── */
.ss-tabs { display: flex; gap: 4px; padding: 4px; background: var(--ss-navy-50); border-radius: var(--ss-radius-lg); }
.ss-tab { flex: 1; padding: 8px; border-radius: var(--ss-radius-md); border: none; background: transparent; font-size: 13px; font-weight: 600; color: var(--ss-text-secondary); cursor: pointer; }
.ss-tab.is-active { background: var(--ss-surface-0); color: var(--ss-teal-700); box-shadow: var(--ss-shadow-card); }

.ss-list-card {
    width: 100%; text-align: left; background: var(--ss-surface-0); border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-2xl); padding: 16px; cursor: pointer; display: block;
}
.ss-list-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ss-list-card-title { font-size: 14px; font-weight: 600; color: var(--ss-text-primary); }
.ss-list-card-line { font-size: 13px; color: var(--ss-text-secondary); margin-top: 1px; }

.ss-empty-state { padding: 40px 16px; text-align: center; }
.ss-empty-state-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; color: var(--ss-text-tertiary); }
.ss-empty-state-title { font-weight: 700; color: var(--ss-text-primary); }
.ss-empty-state-sub { font-size: 13px; color: var(--ss-text-secondary); margin-top: 4px; }

.ss-sheet-backdrop { position: fixed; inset: 0; background: rgba(15,30,51,0.4); z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; }
.ss-sheet { background: var(--ss-surface-0); border-radius: 20px 20px 0 0; padding: 20px; max-height: 88vh; overflow-y: auto; }
.ss-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ss-sheet-close { background: none; border: none; color: var(--ss-text-secondary); display: flex; padding: 2px; cursor: pointer; }

.ss-timeline-item { display: flex; gap: 12px; }
.ss-timeline-rail { display: flex; flex-direction: column; align-items: center; }
.ss-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ss-teal-700); margin-top: 4px; flex-shrink: 0; }
.ss-timeline-line { width: 2px; flex: 1; background: var(--ss-border); margin-top: 4px; }
.ss-timeline-content { padding-bottom: 14px; }
.ss-timeline-action { font-size: 14px; font-weight: 500; color: var(--ss-text-primary); }
.ss-timeline-meta { font-size: 12px; color: var(--ss-text-secondary); }
.ss-timeline-comment { font-size: 12px; color: var(--ss-text-secondary); font-style: italic; margin-top: 2px; }

/* ── Notifications (W5-N1) — Pages/Notifications.razor, both audiences ── */
.ss-notif-group-heading {
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ss-text-tertiary); margin: 18px 0 8px;
}
.ss-notif-group-heading:first-child { margin-top: 0; }
.ss-notif-item { display: flex; gap: 12px; align-items: flex-start; }
.ss-notif-item-icon {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--ss-navy-50); color: var(--ss-text-tertiary);
}
.ss-notif-item.is-unread .ss-notif-item-icon { background: var(--ss-teal-50); color: var(--ss-teal-700); }
.ss-notif-item-body { flex: 1; min-width: 0; }
.ss-notif-item-title-row { display: flex; align-items: center; gap: 6px; }
.ss-notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-teal-600); flex-shrink: 0; }
.ss-notif-item-date { font-size: 12px; color: var(--ss-text-tertiary); white-space: nowrap; margin-left: auto; }
/* W12-MAIL1: caption « envoyé par e-mail le … » sous le message. */
.ss-notif-item-email-caption { display: flex; align-items: center; gap: 4px; margin-top: 4px; }

/* ==========================================================================
   RH desktop pages — Tableau de bord / Personnel / Dossier / Présence /
   Bons de sortie / Administration (UI-B). Ported from
   docs/reference/SmaertStaff/src/views/rh/{Dashboard,Personnel,Dossier,
   PresenceTempsReel}.tsx and views/Administration.tsx — same layout, colors
   and French copy; class names are new (the reference uses Tailwind
   utilities + inline hex), reusing the --ss-* tokens above throughout.
   ========================================================================== */

/* ── Generic text-color utilities (status text, no badge background) ───── */
.ss-text-success { color: var(--ss-emerald-600); }
.ss-text-warning { color: var(--ss-amber-600); }
.ss-text-danger { color: var(--ss-rose-600); }
.ss-text-info { color: var(--ss-sky-600); }
.ss-text-muted { color: var(--ss-text-tertiary); }
.ss-inline-icon-text { display: inline-flex; align-items: center; gap: 4px; }
.ss-link-teal { color: var(--ss-teal-700); font-weight: 600; font-size: 13px; }

/* ── Generic list/table page header + filters bar (Personnel, Présence,
   Bons de sortie) ───────────────────────────────────────────────────────── */
.ss-list-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ss-list-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ss-filters-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; }
.ss-search-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 220px; }
.ss-search-field .ss-search-icon { position: absolute; left: 10px; color: var(--ss-text-tertiary); }
.ss-search-input { padding-left: 30px; }
.ss-filter-select { width: auto; min-width: 160px; }

.ss-toggle-anomalies {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--ss-radius-md);
    border: 1px solid var(--ss-border);
    background: var(--ss-surface-0);
    color: var(--ss-text-secondary);
    font-size: 13px;
    font-weight: 600;
}
.ss-toggle-anomalies.is-active { border-color: var(--ss-rose-600); color: var(--ss-rose-700); background: var(--ss-rose-50); }

.ss-clickable-row { cursor: pointer; }
.ss-row-anomaly td { background: #fffef0; }
.ss-row-anomaly:hover td { background: var(--ss-navy-50); }

.ss-agent-cell { display: flex; align-items: center; gap: 8px; }
.ss-agent-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-surface-0);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.ss-agent-name { font-weight: 600; color: var(--ss-text-primary); }

/* Dossier completeness bar (Personnel list + Dossier Résumé tab) */
.ss-completeness { display: flex; align-items: center; gap: 8px; }
.ss-completeness-track { width: 48px; height: 6px; border-radius: var(--ss-radius-pill); background: var(--ss-navy-100); overflow: hidden; flex-shrink: 0; }
.ss-completeness-fill { height: 100%; border-radius: var(--ss-radius-pill); transition: width 0.2s ease; }
.ss-completeness-text-success { color: var(--ss-emerald-600); font-weight: 700; font-size: 12px; }
.ss-completeness-text-warning { color: var(--ss-amber-600); font-weight: 700; font-size: 12px; }
.ss-completeness-text-danger { color: var(--ss-rose-600); font-weight: 700; font-size: 12px; }

/* ── Modal shell (Ajouter/Modifier un agent, site form, bon de sortie) ──── */
.ss-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15, 30, 51, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ss-modal-card {
    background: var(--ss-surface-0);
    border-radius: var(--ss-radius-2xl);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ss-shadow-popover);
    overflow: hidden;
}
.ss-modal-close { background: none; border: none; color: var(--ss-text-secondary); display: flex; padding: 4px; cursor: pointer; flex-shrink: 0; }
.ss-modal-close:hover { color: var(--ss-text-primary); }

/* ── 7-step agent wizard (AgentWizardModal) ──────────────────────────────── */
.ss-wizard-card { max-width: 680px; }
.ss-wizard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; border-bottom: 1px solid var(--ss-border); flex-shrink: 0; }
.ss-wizard-stepper { display: flex; gap: 4px; overflow-x: auto; padding: 12px 20px; border-bottom: 1px solid var(--ss-border); flex-shrink: 0; }
.ss-wizard-step-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--ss-radius-md);
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ss-text-tertiary);
    flex-shrink: 0;
}
.ss-wizard-step-pill.is-current { background: var(--ss-teal-50); color: var(--ss-teal-700); }
.ss-wizard-step-pill.is-done { color: var(--ss-emerald-700); }
.ss-wizard-body { padding: 20px; overflow-y: auto; flex: 1; }
.ss-wizard-footer { display: flex; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--ss-border); flex-shrink: 0; }

.ss-wizard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ss-field-span-2 { grid-column: span 2; }
.ss-wizard-subsection { border-top: 1px solid var(--ss-border); padding-top: 14px; margin-top: 4px; }

.ss-wizard-callout { border-radius: var(--ss-radius-lg); padding: 12px; font-size: 13px; line-height: 1.5; margin-top: 14px; }
.ss-wizard-callout-amber { background: var(--ss-amber-50); color: var(--ss-amber-700); }
.ss-wizard-callout-teal { background: var(--ss-teal-50); color: var(--ss-teal-700); }

.ss-wizard-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    border: 2px dashed var(--ss-border);
    border-radius: var(--ss-radius-lg);
    padding: 28px 16px;
    color: var(--ss-text-secondary);
    cursor: pointer;
}
.ss-wizard-dropzone:hover { border-color: var(--ss-teal-700); }
.ss-wizard-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.ss-wizard-document-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-wizard-document-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-md); }
.ss-wizard-document-name { flex: 1; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-wizard-document-type { width: auto; min-width: 150px; font-size: 12px; padding: 6px 8px; }
.ss-icon-button { background: none; border: none; color: var(--ss-text-tertiary); display: flex; padding: 4px; cursor: pointer; flex-shrink: 0; }
.ss-icon-button:hover { color: var(--ss-rose-600); }

.ss-wizard-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin-top: 10px; }
.ss-wizard-checkbox input { margin-top: 3px; }

.ss-wizard-recap { background: var(--ss-navy-50); border-radius: var(--ss-radius-lg); padding: 14px; }
.ss-wizard-recap-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--ss-border-soft); }
.ss-wizard-recap-row:last-child { border-bottom: none; }

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.ss-dashboard-header { margin-bottom: 18px; }
.ss-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.ss-kpi-link { text-decoration: none; transition: box-shadow 0.15s ease; }
.ss-kpi-link:hover { box-shadow: var(--ss-shadow-popover); }
.ss-dashboard-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.ss-dashboard-main { display: flex; flex-direction: column; gap: 16px; }
.ss-dashboard-side { min-height: 120px; display: flex; flex-direction: column; gap: 16px; }
.ss-dashboard-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ss-dashboard-activity-note { margin: 0; }

.ss-priority-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-priority-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--ss-border-soft); cursor: pointer; font-size: 13px; }
.ss-priority-item:last-child { border-bottom: none; }
.ss-priority-item:hover { background: var(--ss-navy-50); }
.ss-priority-icon { color: var(--ss-amber-600); flex-shrink: 0; }
.ss-priority-text { flex: 1; color: var(--ss-text-primary); }

.ss-quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.ss-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-lg);
    text-decoration: none;
    color: var(--ss-text-primary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.ss-quick-action:hover { border-color: var(--ss-teal-700); color: var(--ss-teal-700); }

@media (min-width: 900px) {
    .ss-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .ss-kpi-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1023px) {
    .ss-dashboard-columns { grid-template-columns: 1fr; }
}

/* ── Dossier header + tabs + Résumé layout ───────────────────────────────── */
.ss-back-link { display: inline-block; font-size: 13px; color: var(--ss-text-secondary); text-decoration: none; margin-bottom: 12px; }
.ss-back-link:hover { color: var(--ss-teal-700); }

.ss-dossier-header { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ss-agent-avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-surface-0);
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}
/* W13-UX1: <img> counterpart of .ss-agent-avatar-lg (EmployeePhoto.razor, dossier header). */
.ss-dossier-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ss-dossier-identity { flex: 1; min-width: 240px; }
.ss-dossier-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-dossier-actions { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-start; }

/* W16-PHO1 — bloc « Photo proposée » du dossier RH (validation / refus) et
   carte « Ma photo » du profil agent. Le cadre de l'aperçu reprend le format
   portrait 3:4 de la carte de service, pour que le RH voie exactement ce qui
   sera imprimé. */
.ss-photo-proposee-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; }
.ss-photo-proposee-frame {
    width: 96px;
    height: 128px;
    border-radius: 8px;
    border: 2px solid var(--ss-border);
    background: var(--ss-surface-2, #eef1f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.ss-photo-proposee-img { width: 100%; height: 100%; object-fit: cover; }
.ss-photo-proposee-actions { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }

.ss-ma-photo-row { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.ss-ma-photo-frame {
    width: 72px;
    height: 96px;
    border-radius: 8px;
    border: 2px solid var(--ss-border);
    background: var(--ss-surface-2, #eef1f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.ss-ma-photo-img { width: 100%; height: 100%; object-fit: cover; }
.ss-ma-photo-state { flex: 1; min-width: 0; }

.ss-tab-bar { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--ss-border); margin-bottom: 16px; }
.ss-tab-item {
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-text-tertiary);
    white-space: nowrap;
    cursor: pointer;
}
.ss-tab-item.is-active { color: var(--ss-teal-700); border-bottom-color: var(--ss-teal-700); }
.ss-tab-item:hover:not(.is-active) { color: var(--ss-text-secondary); }

.ss-dossier-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.ss-dossier-main, .ss-dossier-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1023px) {
    .ss-dossier-columns { grid-template-columns: 1fr; }
}

.ss-info-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ss-border-soft); font-size: 13px; }
.ss-info-row:last-child { border-bottom: none; }
.ss-info-row > span:first-child { color: var(--ss-text-secondary); }
.ss-info-row > span:last-child { font-weight: 600; color: var(--ss-text-primary); text-align: right; }

.ss-device-card { display: flex; align-items: center; gap: 12px; }

/* ── Présence temps réel — right-side drawer ─────────────────────────────── */
.ss-drawer-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(15, 30, 51, 0.4); display: flex; justify-content: flex-end; }
.ss-drawer-panel { width: 100%; max-width: 512px; background: var(--ss-surface-0); height: 100%; overflow-y: auto; box-shadow: var(--ss-shadow-popover); padding: 20px; }
.ss-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ss-border); position: sticky; top: 0; background: var(--ss-surface-0); }
.ss-drawer-section { margin-bottom: 16px; }
.ss-drawer-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-text-tertiary); margin-bottom: 6px; }
.ss-drawer-warning { margin-top: 10px; padding: 10px; border-radius: var(--ss-radius-md); background: var(--ss-rose-50); color: var(--ss-rose-700); font-size: 13px; }
.ss-drawer-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }

/* ── Bons de sortie — printable paper-form modal ─────────────────────────── */
.ss-bon-card { max-width: 560px; position: relative; padding: 0; }
.ss-bon-close { position: absolute; top: 12px; right: 12px; z-index: 1; }
.ss-bon-paper { padding: 28px 24px; overflow-y: auto; }
.ss-bon-letterhead { display: flex; justify-content: space-between; gap: 16px; font-size: 10px; color: var(--ss-text-secondary); margin-bottom: 16px; }
.ss-bon-letterhead-right { text-align: right; max-width: 260px; }
.ss-bon-title { text-align: center; font-size: 16px; font-weight: 700; margin: 0 0 20px; text-decoration: underline; }
.ss-bon-fields p { font-size: 14px; margin: 0 0 12px; line-height: 1.6; }
/* W25-BON2 : le nombre de blocs varie (agent, validé par, paramétrage, chef) — autant de colonnes égales que de blocs. */
.ss-bon-signatures { display: flex; gap: 12px; margin-top: 32px; text-align: center; }
.ss-bon-signatures > div { flex: 1 1 0; min-width: 0; }
.ss-bon-decision { margin: 16px 0 0; font-weight: 600; color: var(--ss-text-primary); }
.ss-bon-visa-note { border-top: 1px solid var(--ss-border); padding: 12px 24px; margin: 0; }
.ss-bon-signature-line { border-top: 1px solid var(--ss-text-tertiary); margin-bottom: 6px; height: 36px; }
.ss-bon-visa-form { border-top: 1px solid var(--ss-border); padding: 16px 24px; display: flex; flex-direction: column; gap: 8px; }
.ss-bon-visa-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Administration ───────────────────────────────────────────────────────── */
.ss-admin-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.ss-admin-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.ss-admin-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--ss-radius-md);
    border: none;
    background: transparent;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-text-secondary);
}
.ss-admin-nav-item.is-active { background: var(--ss-sky-50); color: var(--ss-sky-700); font-weight: 600; }
.ss-admin-nav-item:hover:not(.is-active) { background: var(--ss-navy-50); }
.ss-admin-content { min-width: 0; }
@media (max-width: 900px) {
    .ss-admin-layout { grid-template-columns: 1fr; }
}

.ss-admin-site-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ss-border-soft); }
.ss-admin-site-card:last-of-type { border-bottom: none; }
.ss-admin-add-site {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: 2px dashed var(--ss-border);
    border-radius: var(--ss-radius-lg);
    background: none;
    color: var(--ss-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ss-admin-add-site:hover { border-color: var(--ss-teal-700); color: var(--ss-teal-700); }

.ss-admin-audit-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

.ss-rule-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ss-border-soft); font-size: 13px; }
.ss-rule-row:last-of-type { border-bottom: none; }
.ss-rule-input { width: 90px; text-align: center; flex-shrink: 0; }
.ss-rule-input[type="time"] { width: 120px; }
/* Champs texte / e-mail / listes dans une ligne de règle : ils prennent la
   largeur disponible au lieu des 90 px prévus pour un nombre (PO 2026-09-30). */
.ss-rule-input-large { width: auto; flex: 1 1 auto; min-width: 200px; max-width: 520px; text-align: left; }

/* ── Agent « Documents » tab — carte de service inside the shell ─────────
   (docs/reference/SmaertStaff/src/views/agent/Carte.tsx layout; the card
   artwork itself comes from smartstaff-print.css's .mesp-card rules.) ──── */
.ss-carte-body { display: flex; flex-direction: column; gap: 16px; }
.ss-carte-placeholder { text-align: center; color: var(--ss-text-secondary); padding: 24px 16px; }
.ss-carte-preview { display: flex; justify-content: center; }
/* One column on the phone: recto above verso (the print sheet keeps two). */
.ss-carte-preview .mesp-batch-grid { grid-template-columns: 54mm; gap: 16px; }
.ss-carte-status { padding: 16px; }
.ss-carte-status-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ss-carte-status-title { font-size: 14px; font-weight: 600; color: var(--ss-navy-800); }
.ss-carte-status-row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.ss-carte-status-row > span:first-child { color: var(--ss-text-secondary); }
.ss-carte-status-row > span:last-child { color: var(--ss-navy-800); }
.ss-carte-mono { font-family: var(--ss-font-mono, 'JetBrains Mono', monospace); }
.ss-carte-actions { display: flex; flex-direction: column; gap: 8px; }
.ss-carte-action {
    width: 100%;
    padding: 12px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid var(--ss-border);
    background: var(--ss-surface-0);
    color: var(--ss-navy-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ss-carte-hint { font-size: 12px; color: var(--ss-text-tertiary); text-align: center; margin: 0; }

/* W20-DOS1 — aperçu de la carte dans l'onglet « Carte » du dossier RH :
   recto et verso côte à côte sur le bureau (l'agent, sur son téléphone,
   garde la colonne unique de .ss-carte-preview ci-dessus). */
.ss-dossier-carte-preview .mesp-batch-grid { grid-template-columns: repeat(2, 54mm); gap: 16px; }
@media (max-width: 900px) {
    .ss-dossier-carte-preview .mesp-batch-grid { grid-template-columns: 54mm; }
}

/* Printing an agent tab (« Télécharger PDF »): only the document itself. */
@media print {
    .ss-agent-shell { overflow: visible; height: auto; max-width: none; background: #fff; }
    .ss-agent-statusbar, .ss-agent-bottomnav, .ss-agent-page-header { display: none !important; }
    .ss-agent-content { overflow: visible; background: #fff; }
    .ss-agent-body { max-width: none; padding: 0; }
    .ss-carte-preview .mesp-batch-grid { grid-template-columns: repeat(2, 54mm); gap: 10mm; }
}

/* Congés (W5-L3): balance progress bar on the agent's « Soldes » cards. */
.ss-balance-track { height: 8px; border-radius: 999px; overflow: hidden; background: var(--ss-navy-50); margin: 8px 0 6px; }
.ss-balance-fill { height: 100%; border-radius: 999px; background: var(--ss-teal-700); }

/* W10-DIR1 begin — simple design-system bar rows for the Direction/Équipe
   dashboards (cahier §14.3): no chart library, one labelled progress bar
   per row (mention distribution, presence-rate trend). */
.ss-bar-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.ss-bar-row-label { flex: 0 0 auto; min-width: 140px; max-width: 220px; font-size: 13px; color: var(--ss-text-secondary); }
.ss-bar-row-track { flex: 1 1 auto; height: 10px; border-radius: 999px; background: var(--ss-navy-50); overflow: hidden; }
.ss-bar-row-fill { height: 100%; border-radius: 999px; background: var(--ss-teal-700); }
.ss-bar-row-value { flex: 0 0 auto; min-width: 42px; text-align: right; font-size: 13px; font-weight: 600; color: var(--ss-text-primary); }
@media (max-width: 640px) {
    .ss-bar-row-label { min-width: 110px; }
}
/* W10-DIR1 end */

/* W8-NOT1 begin — écran /notifications/preferences (cahier §14.2). Une
   ligne par type d'événement : libellé à gauche, réglages à droite, et
   passage en pile sur la coquille agent (viewport étroit) plutôt que
   d'écraser le libellé sur quatre lignes. */
.ss-notif-pref-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 0; border-bottom: 1px solid var(--ss-border-soft);
}
.ss-notif-pref-row:last-of-type { border-bottom: none; }
.ss-notif-pref-label { flex: 1 1 200px; min-width: 0; }
.ss-notif-pref-controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.ss-notif-pref-mode { width: auto; min-width: 170px; }
@media (max-width: 640px) {
    .ss-notif-pref-controls { width: 100%; margin-left: 0; }
    .ss-notif-pref-mode { flex: 1 1 auto; min-width: 0; }
}
/* W8-NOT1 end */

/* W10-KIO1 begin — borne d'établissement (/borne, cahier §15 canaux,
   DEP-003). Coquille plein écran dédiée : ni barre d'onglets agent, ni
   barre latérale RH — un terminal partagé n'a nulle part où naviguer.
   Cibles tactiles ≥ 72 px (tablette), contraste renforcé, aucune donnée
   personnelle hormis le prénom pendant les 5 s de l'écran de résultat. */
.ss-borne-shell {
    display: flex; flex-direction: column; min-height: 100vh;
    background: var(--ss-navy-950); color: #fff;
}
.ss-borne-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ss-borne-brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 600; letter-spacing: 0.01em; }
.ss-borne-clock { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-borne-main { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ss-borne-panel {
    width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: stretch; gap: 18px;
    background: var(--ss-navy-900); border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px; padding: 32px;
}
.ss-borne-title { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 700; text-align: center; }
.ss-borne-hint { margin: 0; text-align: center; font-size: 17px; color: var(--ss-navy-200); }
.ss-borne-display {
    min-height: 76px; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px;
    font-size: 40px; font-weight: 700; letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
}
.ss-borne-display-pin { letter-spacing: 0.3em; }
.ss-borne-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ss-borne-key {
    min-height: 76px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-size: 30px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ss-borne-key:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.ss-borne-key:disabled { opacity: 0.35; cursor: default; }
.ss-borne-key-soft { background: rgba(255, 255, 255, 0.03); }
.ss-borne-primary { min-height: 72px; font-size: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ss-borne-secondary { min-height: 72px; font-size: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; }
.ss-borne-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-borne-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ss-borne-action {
    min-height: 132px; border-radius: 20px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    font-size: 20px; font-weight: 600;
}
.ss-borne-action:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.ss-borne-action:disabled { opacity: 0.4; cursor: default; }
/* L'action attendue par le registre (arrivée, puis départ) est mise en
   avant — jamais la seule proposée : l'agent reste libre de son geste. */
.ss-borne-action.is-attendue { background: var(--ss-teal-700); border-color: var(--ss-teal-500); }
.ss-borne-action.is-attendue:hover:not(:disabled) { background: var(--ss-teal-600); }
.ss-borne-result { align-items: center; text-align: center; }
.ss-borne-result-icon { display: flex; align-items: center; justify-content: center; }
.ss-borne-result.is-succes { border-color: var(--ss-emerald-600); }
.ss-borne-result.is-succes .ss-borne-result-icon { color: var(--ss-emerald-600); }
.ss-borne-result.is-refus { border-color: var(--ss-rose-600); }
.ss-borne-result.is-refus .ss-borne-result-icon { color: var(--ss-rose-600); }
.ss-borne-result-message { margin: 0; font-size: 20px; color: var(--ss-navy-200); }
.ss-borne-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 28px; border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px; color: var(--ss-navy-200);
}
.ss-borne-signout { display: inline-flex; align-items: center; gap: 6px; color: var(--ss-navy-200); text-decoration: none; }
.ss-borne-signout:hover { color: #fff; text-decoration: underline; }
@media (max-width: 560px) {
    .ss-borne-panel { padding: 20px; border-radius: 18px; }
    .ss-borne-title { font-size: 27px; }
    .ss-borne-display { font-size: 32px; }
    .ss-borne-key, .ss-borne-primary, .ss-borne-secondary { min-height: 64px; }
}

/* « via borne » : marqueur de canal sur Présence temps réel. */
.ss-borne-tag {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
    padding: 1px 8px; border-radius: 999px; white-space: nowrap;
    background: var(--ss-navy-50); border: 1px solid var(--ss-navy-100);
    color: var(--ss-navy-700); font-size: 11px; font-weight: 600;
}
/* W10-KIO1 end */

/* W11-KIO2 begin — liaison au terminal, lecteur de QR, colonnes RH. */

/* Le site, sous le libellé, dans la barre du haut de la borne. */
.ss-borne-site {
    padding: 2px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.10); font-size: 13px; font-weight: 500;
    letter-spacing: 0.01em; white-space: nowrap;
}

/* L'écran « en attente de validation » : ni un succès (vert) ni un refus
   d'identification (rouge) — un état d'installation, en ambre. */
.ss-borne-result.is-attente { border-color: var(--ss-amber-500); }
.ss-borne-result.is-attente .ss-borne-result-icon { color: var(--ss-amber-500); }

/* L'identifiant que l'installateur lit à voix haute à la RH — monospace,
   sélectionnable, sur sa propre ligne. */
.ss-borne-terminal-id {
    display: block; margin-top: 8px;
    font-family: var(--ss-font-mono);
    font-size: 14px; color: var(--ss-navy-200); user-select: all; word-break: break-all;
}

.ss-borne-scan-hint {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    text-align: center; color: var(--ss-navy-200);
}

/* Le lecteur est retiré du flux tant qu'il est fermé : aucune caméra
   n'est même montée dans le DOM visible. */
.ss-borne-scanner { display: none; }
.ss-borne-scanner.is-ouvert { display: flex; flex-direction: column; gap: 10px; }
.ss-borne-scanner-video {
    width: 100%; max-height: 320px; border-radius: 16px;
    background: #000; object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Administration → « Appareils mobiles » : l'état du terminal d'une borne. */
.ss-borne-etat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ss-borne-etat.is-valide { color: var(--ss-emerald-600); }
.ss-borne-etat.is-attente { color: var(--ss-amber-700); }
.ss-borne-etat.is-nonlie { color: var(--ss-text-tertiary); }

/* W11-KIO2 end */

/* W13-BIO1 begin — « biométrie » : marqueur de niveau de preuve sur les
   surfaces RH (Présence temps réel, dossier agent). Même géométrie que
   `.ss-borne-tag` (marqueur de canal) mais en teal, pour que l'œil les
   distingue immédiatement : l'un dit OÙ le pointage a été fait, l'autre
   COMMENT l'agent a été vérifié. */
.ss-biometrie-tag {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
    padding: 1px 8px; border-radius: 999px; white-space: nowrap;
    background: var(--ss-teal-50); border: 1px solid var(--ss-teal-100);
    color: var(--ss-teal-700); font-size: 11px; font-weight: 600;
}
/* W13-BIO1 end */

/* W29-PWA1 begin — invitation « Installer l'application »
   (`Components/InstallerApplication.razor`). Compact : barre du haut RH, à
   côté du menu utilisateur (libellé visible à partir de 1280 px, icône
   seule en dessous — à 1024 px le titre de la page n'aurait plus de place) ; carte : accueil agent web. */
.ss-install-compact { position: relative; flex-shrink: 0; }
.ss-install-compact-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-md);
    background: var(--ss-surface-0);
    color: var(--ss-teal-700);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.ss-install-compact-btn:hover:not(:disabled) { border-color: var(--ss-teal-700); background: var(--ss-teal-50); }
.ss-install-compact-btn:disabled { color: var(--ss-text-tertiary); cursor: default; }
.ss-install-compact-label { display: none; }
@media (min-width: 1280px) {
    .ss-install-compact-label { display: inline; }
}
.ss-install-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 260px;
    padding: 12px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-lg);
    background: var(--ss-surface-0);
    box-shadow: var(--ss-shadow-popover);
    font-size: 13px;
    color: var(--ss-text-primary);
}

.ss-install-card { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.ss-install-card-head { display: flex; align-items: flex-start; gap: 12px; }
.ss-install-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ss-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ss-teal-50);
    color: var(--ss-teal-700);
    flex-shrink: 0;
}
.ss-install-card-title { font-weight: 700; font-size: 14px; color: var(--ss-text-primary); }
.ss-install-card-text { font-size: 13px; color: var(--ss-text-secondary); margin-top: 2px; }
.ss-install-card-btn { width: 100%; }
.ss-install-ios {
    padding: 10px 12px;
    border-radius: var(--ss-radius-md);
    background: var(--ss-navy-50);
    font-size: 13px;
    color: var(--ss-text-primary);
}
.ss-install-ios-text strong { font-weight: 600; }

@media print {
    .ss-install-card, .ss-install-compact { display: none !important; }
}
/* W29-PWA1 end */