/* ── Variables ────────────────────────────────────────────────────────── */
:root {
    --sidebar-w: 252px;
    --sidebar-bg: #0c1220;
    --sidebar-text: #8b9bb4;
    --sidebar-active-bg: rgba(99,102,241,.16);
    --sidebar-active-text: #fff;
    --sidebar-hover-bg: rgba(255,255,255,.05);
    --sidebar-border: rgba(255,255,255,.06);

    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: rgba(99,102,241,.08);
    --primary-glow: rgba(99,102,241,.24);

    --surface: #ffffff;
    --surface-raised: #f8fafc;
    --bg: #f0f2f7;
    --border: #e4e8f0;
    --border-strong: #c9d1e0;

    --text: #111827;
    --text-secondary: #374151;
    --muted: #6b7280;
    --muted-light: #9ca3af;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);

    --transition: .18s cubic-bezier(.4,0,.2,1);
}

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

html {
    /* Désactive l'agrandissement automatique du texte par le navigateur mobile
       (Chrome/Safari "text autosizing"). */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Filet de sécurité : au premier affichage à froid d'une PWA en mode standalone,
       certains WebKit calculent brièvement une largeur de viewport erronée (proche
       du bureau) avant de se recaler après la première navigation. Plutôt que de
       dépendre de ce calcul, on interdit tout débordement horizontal quoi qu'il arrive. */
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: .9rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Seuil anti-zoom iOS Safari : un champ avec font-size < 16px déclenche un
   zoom automatique au focus, qui ne se réinitialise pas ensuite. */
input, select, textarea {
    font-size: 16px;
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

/* ── Layout ───────────────────────────────────────────────────────────── */
/* 100vh en repli pour les navigateurs sans support de dvh, 100dvh ensuite pour tenir
   compte des barres d'interface mobiles (Safari/Chrome) qui changent de hauteur au
   chargement — sans ça, la mise en page déborde de l'écran au premier affichage. */
.app-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}
.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}
.app-content {
    flex: 1;
    padding: 30px 36px;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}
.app-content--wide {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--sidebar-border);
    text-decoration: none;
    transition: opacity var(--transition);
}
.sidebar-brand:hover { opacity: .85; }

.sidebar-brand-icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--primary), #818cf8);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(99,102,241,.45);
}
.sidebar-brand-text {
    font-weight: 700;
    color: #fff;
    font-size: .92rem;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.sidebar-brand-sub {
    font-size: .67rem;
    color: #4b5e7c;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sidebar-section { padding: 20px 12px 6px; }
.sidebar-section-label {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #3d5068;
    padding: 0 8px;
    margin-bottom: 5px;
}
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li { position: relative; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: .835rem;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
    margin-bottom: 1px;
    position: relative;
}
.sidebar-nav a:hover {
    background: var(--sidebar-hover-bg);
    color: #c8d3e6;
}
.sidebar-nav a.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}
.sidebar-nav a.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 18px;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
}
.sidebar-nav a.active .nav-icon { color: #a5b4fc; }
.nav-icon { font-size: .95rem; flex-shrink: 0; opacity: .7; }
.sidebar-nav a.active .nav-icon,
.sidebar-nav a:hover .nav-icon { opacity: 1; }

.sidebar-footer {
    margin-top: auto;
    padding: 12px 12px 16px;
    border-top: 1px solid var(--sidebar-border);
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.sidebar-user:hover { background: var(--sidebar-hover-bg); }
.sidebar-user-avatar {
    width: 33px; height: 33px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #818cf8);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 1px 6px rgba(99,102,241,.35);
}
.sidebar-user-name {
    font-size: .8rem;
    font-weight: 600;
    color: #d1dae8;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size: .65rem;
    color: #3d5068;
    font-weight: 500;
    letter-spacing: .02em;
}
.sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 7px;
    color: #3d5068;
    text-decoration: none;
    margin-left: auto;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.sidebar-logout:hover { background: rgba(239,68,68,.15); color: #f87171; }

/* ── Sidebar config dropdown ──────────────────────────────────────────── */
.sidebar-config-chevron {
    font-size: .7rem;
    margin-left: auto;
    flex-shrink: 0;
    opacity: .5;
    transition: transform .2s ease, opacity .18s ease;
}
.sidebar-nav a:hover .sidebar-config-chevron { opacity: .9; }
.sidebar-nav a.active .sidebar-config-chevron { opacity: .85; color: #a5b4fc; }
.sidebar-nav a[aria-expanded="true"] .sidebar-config-chevron { transform: rotate(-180deg); opacity: 1; }
.sidebar-config-sub {
    margin-top: 2px;
    padding-left: 4px;
    border-left: 1px solid rgba(255,255,255,.07);
    margin-left: 18px;
}

/* ── Flashes ──────────────────────────────────────────────────────────── */
.flash-zone { margin-bottom: 22px; }
.flash-zone .alert {
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: .84rem;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-xs);
    animation: slideInDown .22s ease;
}
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.flash-zone .alert-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.flash-zone .alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.flash-zone .alert-danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.flash-zone .alert-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}
.card-header-section {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-raised);
}
.card-header-section .card-header-title {
    font-weight: 600;
    font-size: .875rem;
    color: var(--text);
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.table { margin: 0; font-size: .855rem; }
.table thead th {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
    padding: 11px 16px;
    white-space: nowrap;
}
.table td {
    padding: 13px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f4fb;
    color: var(--text-secondary);
}
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover td {
    background: #f5f7ff;
    color: var(--text);
}

/* ── Boutons ──────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--radius-sm);
    font-size: .84rem;
    font-weight: 500;
    padding: 7px 15px;
    transition: all var(--transition);
    letter-spacing: -.01em;
    position: relative;
}
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-primary {
    background: linear-gradient(135deg, var(--primary), #818cf8);
    border: none;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,.35);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    box-shadow: 0 4px 14px rgba(99,102,241,.45);
    color: #fff;
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-secondary {
    border-color: var(--border-strong);
    color: var(--text-secondary);
    background: var(--surface);
}
.btn-outline-secondary:hover {
    background: var(--surface-raised);
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-outline-danger:hover { background: #fef2f2; }

.btn-sm { padding: 4px 11px; font-size: .775rem; }

/* ── Badges statut ────────────────────────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.status-badge.valide          { background: #dcfce7; color: #15803d; }
.status-badge.en_attente      { background: #fef9c3; color: #92400e; }
.status-badge.refuse          { background: #fee2e2; color: #9f1239; }
.status-badge.en_attente_drh  { background: #dbeafe; color: #1e40af; }

/* ── Stat cards ───────────────────────────────────────────────────────── */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #818cf8);
    opacity: 0;
    transition: opacity var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card:hover::before { opacity: 1; }

.stat-card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.stat-card-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}
.stat-card-label {
    font-size: .73rem;
    color: var(--muted);
    font-weight: 500;
    margin-top: 4px;
}

/* ── Page header ──────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}
.page-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -.02em;
}

/* ── Forms ────────────────────────────────────────────────────────────── */
.form-label {
    font-size: .81rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: .855rem;
    padding: 8px 12px;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-control::placeholder { color: var(--muted-light); }
.form-control:hover, .form-select:hover {
    border-color: var(--border-strong);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.14);
    background: var(--surface);
    outline: none;
}
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}

/* ── Filter bar ───────────────────────────────────────────────────────── */
.filter-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-xs);
}

/* ── Avatar chip ──────────────────────────────────────────────────────── */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
    font-size: .72rem;
}
.avatar-sm { width: 28px; height: 28px; }
.avatar-md { width: 38px; height: 38px; font-size: .82rem; }
.user-chip { display: inline-flex; align-items: center; gap: 9px; }
.user-chip strong { font-size: .855rem; color: var(--text); }

/* ── Empty state ──────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--muted);
}
.empty-state-icon {
    font-size: 2.6rem;
    margin-bottom: 14px;
    opacity: .3;
    line-height: 1;
}
.empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.empty-state-sub { font-size: .83rem; color: var(--muted); }

/* ── Decision log ─────────────────────────────────────────────────────── */
.decision-log { font-size: .8rem; }
.decision-log-item {
    border-left: 3px solid var(--primary);
    padding: 10px 0 10px 14px;
    margin-bottom: 12px;
    position: relative;
}
.decision-log-item::before {
    content: '';
    position: absolute;
    left: -6px; top: 14px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--surface);
}

/* ── Recap panel ──────────────────────────────────────────────────────── */
.recap-panel dt { font-size: .72rem; color: var(--muted); }
.recap-panel dd { margin: 0 0 8px; font-weight: 600; }

/* ── Topbar (unused but kept) ─────────────────────────────────────────── */
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 36px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}
.topbar-title { font-weight: 700; font-size: 1rem; color: var(--text); }
.topbar-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: .8rem; color: var(--muted);
}
.topbar-breadcrumb a { color: var(--muted); text-decoration: none; }
.topbar-breadcrumb a:hover { color: var(--primary); }

/* ── Utilities ────────────────────────────────────────────────────────── */
.text-primary { color: var(--primary) !important; }

/* ── Navbar mobile ────────────────────────────────────────────────────── */
.mobile-nav { display: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .app-content { padding: 16px 12px 80px; }
    .sidebar { display: none; }
    .stat-card-value { font-size: 1.4rem; }
    .page-title { font-size: 1.1rem; }

    /* Navbar fixe en bas */
    .mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 62px;
        background: #0c1220;
        border-top: 1px solid rgba(255,255,255,.08);
        z-index: 1000;
        align-items: stretch;
        box-shadow: 0 -4px 20px rgba(0,0,0,.25);
    }
    .mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #8b9bb4;
        text-decoration: none;
        font-size: .58rem;
        font-weight: 600;
        letter-spacing: .03em;
        padding: 6px 4px;
        transition: color .15s, background .15s;
        border: none;
        background: none;
        cursor: pointer;
    }
    .mobile-nav-item i { font-size: 1.15rem; line-height: 1; }
    .mobile-nav-item:hover { color: #c7d2fe; }
    .mobile-nav-item.active { color: #a5b4fc; }
    .mobile-nav-item.active i {
        filter: drop-shadow(0 0 4px rgba(165,180,252,.6));
    }

    /* Tableaux : colonnes moins importantes masquées sur mobile */
    .table thead th:nth-child(3),
    .table td:nth-child(3),
    .table thead th:nth-child(6),
    .table td:nth-child(6) { display: none; }
}

/* ── Impression ────────────────────────────────────────────────────────── */
@media print {
    .mobile-nav { display: none !important; }
    .sidebar { display: none !important; }
    .app-content { padding: 0 !important; }
}