:root {
    --primary: #1b84ff;
    --primary-d: #056ee9;
    --primary-l: #eef6ff;
    --primary-bd: #a4ceff;
    --accent: #17c653;
    --navy: #071437;
    --bg: #f9f9f9;
    --surf: #fff;
    --bd: #f1f1f4;
    --bd2: #dbdfe9;
    --tx: #071437;
    --mu: #78829d;
    --red: #f8285a;
    --topbar-h: 74px;
    --sidebar-w: 265px;
    --shadow-sm: 0 0 20px rgba(76,87,125,.04);
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mono: 'Roboto Mono', 'Cascadia Code', 'Consolas', 'Fira Code', monospace;
}

@font-face {
    font-family: 'keenicons-outline';
    src: url('../fonts/keenicons-outline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.ki-outline { font-family: 'keenicons-outline' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; display: inline-flex; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ki-abstract-14.ki-outline::before { content: '\e90d'; }
.ki-bank.ki-outline::before { content: '\e958'; }
.ki-calendar.ki-outline::before { content: '\e987'; }
.ki-chart.ki-outline::before { content: '\e99b'; }
.ki-document.ki-outline::before { content: '\e9d4'; }
.ki-element-11.ki-outline::before { content: '\e9f6'; }
.ki-exit-right.ki-outline::before { content: '\ea04'; }
.ki-file-sheet.ki-outline::before { content: '\ea14'; }
.ki-financial-schedule.ki-outline::before { content: '\ea1d'; }
.ki-handcart.ki-outline::before { content: '\ea37'; }
.ki-home.ki-outline::before { content: '\ea3e'; }
.ki-office-bag.ki-outline::before { content: '\ea89'; }
.ki-people.ki-outline::before { content: '\ea95'; }
.ki-setting-2.ki-outline::before { content: '\eabe'; }
.ki-shield-tick.ki-outline::before { content: '\eac6'; }
.ki-user.ki-outline::before { content: '\eb1f'; }
.ki-wallet.ki-outline::before { content: '\eb26'; }

* { box-sizing: border-box; }
html { min-width: 320px; }
/* Force Inter partout — couvre Bootstrap, Select2, SweetAlert, etc. */
html, body, button, input, select, textarea, .btn, .form-control, .form-select,
.select2-container, .select2-selection__rendered, .swal2-popup, .swal2-title,
.swal2-html-container, .alert, .topbar, .menu-dropdown, .menu-section-title,
.menu-item, .page-hdr, h1, h2, h3, h4, h5, h6, p, label, table {
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body { background: var(--bg); color: var(--tx); font-size: 13px; margin: 0; min-height: 100vh; }
code, pre, kbd, .num, .pt-in, .calc-amt, .bul-table td:nth-child(n+2):nth-child(-n+5), .pt-h-input { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ══════ AUTH PAGE ══════ */
.auth-page { min-height: 100vh; display: flex; align-items: stretch; background: #fff; position: relative; overflow: hidden; }
.auth-left { flex: 1.2; background: linear-gradient(135deg,#0a5c2e 0%,#064a24 50%,#042818 100%); display: flex; flex-direction: column; justify-content: space-between; padding: 60px 56px; color: #fff; position: relative; overflow: hidden; }
.auth-left::before { content: ''; position: absolute; top: -20%; right: -10%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.15) 0%, transparent 70%); pointer-events: none; }
.auth-left::after { content: ''; position: absolute; bottom: -15%; left: -15%; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.08) 0%, transparent 70%); pointer-events: none; }
.auth-left-content { position: relative; z-index: 1; }
.auth-hero-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.auth-hero-logo { width: 46px; height: 46px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; letter-spacing: -.5px; }
.auth-hero-name { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.auth-hero-name span { color: #6ee7b7; }
.auth-hero-tag { font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .05em; text-transform: uppercase; margin-left: 58px; margin-top: -4px; }
.auth-hero-title { font-size: 38px; font-weight: 800; line-height: 1.15; margin-top: 80px; letter-spacing: -1px; }
.auth-hero-sub { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.65; margin-top: 18px; max-width: 420px; }
.auth-features { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.auth-feat { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255,255,255,.8); }
.auth-feat-ico { width: 28px; height: 28px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.auth-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 32px; }
.auth-form { width: 100%; max-width: 380px; }
.auth-form-head { text-align: center; margin-bottom: 30px; }
.auth-form-title { font-size: 24px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; margin-bottom: 6px; }
.auth-form-sub { font-size: 13px; color: #64748b; }
.auth-fg { margin-bottom: 14px; }
.auth-fg label { display: block; font-size: 11.5px; font-weight: 600; color: #475569; margin-bottom: 6px; letter-spacing: .02em; }
.auth-fg input { width: 100%; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 11px 12px; font-size: 14px; outline: none; transition: all .15s; background: #fff; }
.auth-fg input:focus { border-color: #0a5c2e; box-shadow: 0 0 0 4px rgba(10,92,46,.08); }
.auth-submit { width: 100%; background: linear-gradient(135deg,#0a5c2e,#085025); color: #fff; border: none; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 700; margin-top: 6px; cursor: pointer; box-shadow: 0 2px 8px rgba(10,92,46,.25); }
.auth-submit:hover { box-shadow: 0 4px 14px rgba(10,92,46,.35); transform: translateY(-1px); }
.auth-err-box { color: #b91c1c; font-size: 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 7px; padding: 9px 12px; margin-top: 10px; }

@media (max-width: 900px) {
    .auth-page { flex-direction: column; }
    .auth-left { padding: 30px 28px; flex: 0 0 auto; }
    .auth-hero-title { font-size: 26px; margin-top: 20px; }
    .auth-features, .auth-hero-tag { display: none; }
}

/* ══════ TOPBAR ══════ */
.topbar { background: rgba(255,255,255,.96); height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--bd); box-shadow: 0 1px 8px rgba(15,23,42,.04); backdrop-filter: blur(12px); }
.menu-btn { width: 36px; height: 36px; flex: 0 0 36px; border: none; background: transparent; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: background .15s; }
.menu-btn:hover { background: #f1f5f9; }
.menu-btn span { display: block; width: 17px; height: 2px; background: #334155; border-radius: 2px; }
.tb-brand { font-weight: 800; font-size: 15px; color: #0f172a; letter-spacing: -0.35px; text-decoration: none; }
.tb-brand:hover { color: #0f172a; }
.tb-brand span { color: var(--primary); }
.tb-divider { width: 1px; height: 18px; background: #e2e8f0; }
.page-title { font-size: 13px; font-weight: 600; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.user-pill { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #475569; }
.user-name { font-weight: 600; color: #0f172a; }
.logout-btn { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 5px; border: 1px solid #e2e8f0; }
.logout-btn:hover { background: var(--primary-l); }

.menu-dropdown { position: fixed; top: var(--topbar-h); left: 0; width: var(--sidebar-w); background: #fff; border-right: 1px solid var(--bd); box-shadow: 4px 0 18px rgba(15,23,42,.055); z-index: 99; transform: translateX(-100%); transition: transform .22s cubic-bezier(.4,0,.2,1); height: calc(100vh - var(--topbar-h)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.menu-dropdown.open { transform: translateX(0); }
.menu-backdrop { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(15,23,42,.42); opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 98; backdrop-filter: blur(2px); }
.menu-backdrop.show { opacity: 1; pointer-events: auto; }
.menu-user { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.menu-user-name { font-size: 13px; font-weight: 600; color: #0f172a; }
.menu-user-email { font-size: 11px; color: #64748b; margin-top: 2px; }
.menu-section { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.menu-section-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; font-weight: 600; padding: 4px 16px 6px; background: transparent; border: 0; width: 100%; text-align: left; }
.menu-collapsible > .menu-section-title { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; transition: background .12s; padding: 8px 16px; }
.menu-collapsible > .menu-section-title:hover { background: #f8fafc; color: #475569; }
.menu-chev { display: inline-block; font-size: 10px; transition: transform .15s; }
.menu-collapsible.collapsed > .menu-section-title .menu-chev { transform: rotate(-90deg); }
.menu-collapsible > .menu-section-items { overflow: hidden; transition: max-height .18s ease-out; max-height: 1000px; }
.menu-collapsible.collapsed > .menu-section-items { max-height: 0; padding: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; color: #334155; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
.menu-item:hover { background: #f8fafc; color: #0f172a; }
.menu-item.active { background: var(--primary-l); color: var(--primary-d); border-left-color: var(--primary); font-weight: 700; }
.menu-item-danger { color: #b91c1c; }
.menu-item-danger:hover { background: #fef2f2; color: #991b1b; }

/* ══════ PAGE ══════ */
.page-body { padding: 28px 30px 48px; max-width: 1400px; margin: 0 auto; transition: margin-left .22s cubic-bezier(.4,0,.2,1); }
.page-hdr { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.page-hdr h1 { font-size: 24px; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.6px; line-height: 1.25; }
.page-hdr .spacer { flex: 1; }

/* ══════ STATS / MODULE CARDS ══════ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 18px 20px; transition: all .15s; }
.stat:hover { border-color: var(--primary-bd); box-shadow: 0 2px 8px rgba(10,92,46,.06); }
.stat .l { font-size: 11.5px; color: #64748b; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat .n { font-size: 28px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; margin-top: 6px; }
.stat .ico { font-size: 22px; margin-bottom: 4px; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.module-card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 22px; cursor: pointer; transition: all .15s; text-decoration: none; color: inherit; display: block; }
.module-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(10,92,46,.12); transform: translateY(-2px); color: inherit; text-decoration: none; }
.m-ico { font-size: 32px; margin-bottom: 10px; }
.m-name { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.m-desc { font-size: 12.5px; color: #64748b; line-height: 1.5; }

/* ══════ CARD / TABLE ══════ */
.card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.card-hdr { background: #f8fafc; border-bottom: 1px solid var(--bd); padding: 12px 18px; font-size: 13px; font-weight: 600; color: #334155; display: flex; align-items: center; }
.card-body { padding: 18px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { background: #f8fafc; padding: 10px 12px; text-align: left; font-size: 11.5px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--bd); }
table.tbl td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
table.tbl tr:hover { background: #fafbfc; }

.btn-pri { background: var(--primary); color: #fff; border: none; min-height: 36px; padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, box-shadow .15s, transform .15s; }
.btn-pri:hover { background: var(--primary-d); color: #fff; }
.btn-sec { background: #fff; color: #334155; border: 1px solid var(--bd); min-height: 36px; padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn-sec:hover { background: #f8fafc; color: #0f172a; }
.btn-dan { background: #ef4444; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn-dan:hover { background: #dc2626; color: #fff; }
.btn-sm { min-height: 30px; padding: 5px 10px; font-size: 12px; }

/* Form groups */
.fg { margin-bottom: 14px; }
.fg label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 5px; }
.fg input, .fg select, .fg textarea { width: 100%; border: 1px solid var(--bd); border-radius: 6px; padding: 8px 10px; font-size: 13px; background: #fff; outline: none; transition: border-color .12s; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10,92,46,.08); }
.fg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 14px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-green { background: var(--primary-l); color: var(--primary); }
.badge-gray { background: #f1f5f9; color: #64748b; }
.badge-amber { background: #fffbeb; color: #d97706; }

/* Select2 tweaks */
.select2-container--bootstrap-5 .select2-selection { min-height: 32px; }
.select2-container--bootstrap-5 .select2-selection--single { padding-top: 2px; padding-bottom: 2px; }
.period-bar .select2-container { vertical-align: middle; }

/* Select2 — dark mode */
body.dark .select2-container--bootstrap-5 .select2-selection { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark .select2-container--bootstrap-5 .select2-selection__rendered { color: #e2e8f0 !important; }
body.dark .select2-dropdown { background: #1e293b; border-color: #334155; }
body.dark .select2-container--bootstrap-5 .select2-results__option { color: #e2e8f0; }
body.dark .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] { background: #334155; color: #f1f5f9; }
body.dark .select2-container--bootstrap-5 .select2-results__option[aria-selected=true] { background: rgba(52,211,153,.2); color: #34d399; }
body.dark .select2-search--dropdown .select2-search__field { background: #0f172a; border-color: #334155; color: #e2e8f0; }

/* ══════ TOPBAR COMPANY PICKER ══════ */
.co-switch { display: flex; align-items: center; }
.co-static { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--bd); border-radius: 6px; background: var(--primary-l); color: var(--primary); font-size: 12.5px; font-weight: 600; }
body.dark .co-static { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.3); color: #34d399; }

/* ══════ TOPBAR CONTEXT BAR (year · month · company) ══════ */
.tb-context { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; overflow: hidden; }
/* When the company popover opens we let it escape the rounded clip. */
.tb-context.co-open { overflow: visible; }
.tb-ctx-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; margin: 0; }
.tb-ctx-item form, .tb-ctx-item.tb-ctx-static { background: transparent; }
.tb-ctx-ico { font-size: 14px; color: #64748b; line-height: 1; }
.tb-ctx-sel { border: none !important; background: transparent !important; padding: 2px 20px 2px 4px !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--tx) !important; min-width: auto !important; max-width: 220px; cursor: pointer; height: 34px; }
.tb-ctx-sel:focus { outline: none !important; box-shadow: none !important; }
.tb-ctx-sep { width: 1px; background: var(--bd); margin: 4px 0; }
.tb-ctx-static { color: var(--primary); font-weight: 700; font-size: 12.5px; padding-right: 14px; }
.tb-ctx-co { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
body.dark .tb-context { background: #0f172a; border-color: #334155; }
body.dark .tb-ctx-ico { color: #94a3b8; }
body.dark .tb-ctx-sel { color: #f1f5f9 !important; }
body.dark .tb-ctx-sel option { background: #1e293b; color: #f1f5f9; }
body.dark .tb-ctx-sep { background: #334155; }
body.dark .tb-ctx-static { color: #34d399; }
@media (max-width: 800px) { .tb-context { max-width: 100%; flex-wrap: wrap; height: auto; } .tb-ctx-sel { max-width: 140px; } }

/* Company picker as a button + popover menu */
.tb-co-picker { position: relative; padding: 0 !important; }
.tb-co-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: none; border-radius: 0 7px 7px 0; background: var(--primary-l); color: var(--primary); font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background .15s; }
.tb-co-btn:hover { background: rgba(10,92,46,.18); }
.tb-co-empty-state .tb-co-btn { background: #fef3c7 !important; color: #b45309 !important; animation: pulseCoBtn 1.6s ease-in-out infinite; }
.tb-co-empty-state .tb-co-btn:hover { background: #fcd34d !important; }
@keyframes pulseCoBtn { 0%,100% { box-shadow: 0 0 0 0 rgba(180,83,9,.35) } 50% { box-shadow: 0 0 0 6px rgba(180,83,9,0) } }
.tb-co-name { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-co-chev { font-size: 10px; color: var(--primary); margin-left: 2px; }
body.dark .tb-co-btn { background: rgba(52,211,153,.15); color: #34d399; }
body.dark .tb-co-btn:hover { background: rgba(52,211,153,.25); }
body.dark .tb-co-chev { color: #34d399; }

.tb-co-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 340px; max-width: 460px; background: #fff; border: 1px solid var(--bd); border-radius: 10px; box-shadow: 0 8px 28px rgba(15,23,42,.12); z-index: 1000; padding: 6px; max-height: 70vh; display: flex; flex-direction: column; }
.tb-co-menu-list { overflow-y: auto; max-height: calc(70vh - 80px); }
.tb-co-search-wrap { position: relative; padding: 4px 4px 8px; border-bottom: 1px solid var(--bd); margin-bottom: 4px; }
.tb-co-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #94a3b8; pointer-events: none; }
.tb-co-search-input { width: 100%; padding: 7px 10px 7px 34px; border: 1px solid var(--bd); border-radius: 6px; font-size: 12.5px; background: #fff; }
.tb-co-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(10,92,46,.12); }
.tb-co-search-input::-webkit-search-cancel-button { cursor: pointer; }
.tb-co-empty { padding: 16px 12px; text-align: center; font-size: 12.5px; color: #94a3b8; font-style: italic; }
body.dark .tb-co-search-wrap { border-bottom-color: #334155; }
body.dark .tb-co-search-input { background: #0f172a; color: #f1f5f9; border-color: #334155; }
body.dark .tb-co-empty { color: #64748b; }
.tb-co-menu-hdr { padding: 8px 12px 6px; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.tb-co-menu-form { margin: 0; padding: 0; display: block; }
.tb-co-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: transparent; border-radius: 6px; cursor: pointer; text-align: left; transition: background .12s; font-size: 13px; }
.tb-co-menu-item:hover { background: #f1f5f9; }
.tb-co-menu-item.active { background: var(--primary-l); }
.tb-co-menu-ico { font-size: 16px; }
.tb-co-menu-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-co-menu-name { font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-co-menu-meta { font-size: 11px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-co-menu-check { color: var(--primary); font-weight: 700; }
body.dark .tb-co-menu { background: #1e293b; border-color: #334155; box-shadow: 0 8px 28px rgba(0,0,0,.5); }
body.dark .tb-co-menu-item:hover { background: #334155; }
body.dark .tb-co-menu-item.active { background: rgba(52,211,153,.15); }
body.dark .tb-co-menu-name { color: #f1f5f9; }
body.dark .tb-co-menu-meta { color: #94a3b8; }
body.dark .tb-co-menu-check { color: #34d399; }

/* ══════ TABS (Paramètres) ══════ */
.tabs-nav { display: flex; gap: 0; border-bottom: 1px solid var(--bd); }
.tab { padding: 10px 18px; font-size: 13px; color: #64748b; text-decoration: none; border-bottom: 2px solid transparent; font-weight: 500; transition: all .15s; }
.tab:hover { color: #0f172a; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ══════ COMPANY GRID (society cards) ══════ */
.co-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.co-card { background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 14px 16px; transition: all .15s; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.co-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(10,92,46,.08); color: inherit; text-decoration: none; transform: translateY(-1px); }
.co-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.co-name { font-weight: 700; color: #0f172a; font-size: 13.5px; }
.co-num { font-family: monospace; font-size: 11.5px; color: #64748b; background: #f8fafc; padding: 1px 6px; border-radius: 4px; }
.co-card-bd { font-size: 12.5px; color: #64748b; }
.co-card-ft { display: flex; gap: 6px; align-items: center; margin-top: 2px; }

/* ══════ PERIOD BAR ══════ */
.period-bar { display: flex; gap: 8px; margin-bottom: 18px; }
.period-bar select { border: 1px solid var(--bd); border-radius: 6px; padding: 6px 30px 6px 12px; font-size: 13px; font-weight: 500; background: #fff; cursor: pointer; }
.period-bar select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10,92,46,.08); }

/* ══════ 12-MONTH CALENDAR ══════ */
.cal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 16px; }
@media (max-width: 900px) { .cal-grid { grid-template-columns: repeat(3, 1fr); } }
.cal-tile { background: #f8fafc; border: 1px solid var(--bd); border-radius: 8px; padding: 10px 12px; text-align: center; transition: all .15s; }
.cal-tile.done { background: var(--primary-l); border-color: var(--primary-bd); cursor: pointer; }
.cal-tile.done:hover { background: #c8e6c9; }
.cal-m { font-size: 11.5px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cal-tile.done .cal-m { color: var(--primary); }
.cal-v { font-size: 20px; font-weight: 800; color: #cbd5e1; margin-top: 2px; }
.cal-tile.done .cal-v { color: var(--primary); }
.cal-amt { font-size: 10.5px; color: #64748b; margin-top: 2px; font-weight: 600; }

/* ══════ BREADCRUMB ══════ */
.breadcrumb { padding: 0 0 12px; font-size: 12px; color: #64748b; }
.breadcrumb a { color: #64748b; text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { margin: 0 8px; color: #cbd5e1; }
.breadcrumb b { color: #0f172a; }

/* ══════ WIZARD STEPS ══════ */
.wizard-steps { display: flex; gap: 0; margin-bottom: 22px; border-bottom: 1px solid var(--bd); }
.wiz-step { flex: 1; padding: 12px 16px; position: relative; font-size: 13px; color: #94a3b8; font-weight: 500; }
.wiz-step .num { display: inline-flex; width: 22px; height: 22px; background: #e2e8f0; color: #64748b; border-radius: 50%; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; margin-right: 8px; }
.wiz-step.active { color: var(--primary); font-weight: 700; border-bottom: 2px solid var(--primary); margin-bottom: -1px; }
.wiz-step.active .num { background: var(--primary); color: #fff; }
.wiz-step.done .num { background: var(--accent); color: #fff; }

/* ══════ INSPIRE WIZARD (strip) ══════ */
.wiz { display: flex; gap: 8px; margin-bottom: 14px; }
.wz { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid var(--bd); border-radius: 8px; }
.wz .wn { width: 26px; height: 26px; border-radius: 50%; background: #e2e8f0; color: #64748b; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.wz .wt { display: flex; flex-direction: column; line-height: 1.2; }
.wz .wt strong { font-size: 12.5px; color: #0f172a; }
.wz .wt span { font-size: 11px; color: #64748b; margin-top: 2px; }
.wz.dn { background: var(--primary-l); border-color: var(--primary-bd); }
.wz.dn .wn { background: var(--primary); color: #fff; }
.wz.act { background: #fff; border-color: var(--primary); border-width: 2px; padding: 9px 13px; }
.wz.act .wn { background: var(--primary); color: #fff; }
.wz.act .wt strong { color: var(--primary); }

/* ══════ SETTINGS HERO (shared by Companies, Users tabs) ══════ */
.settings-hero { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: #fff; border: 1px solid var(--bd); border-radius: 12px; margin-top: 18px; }
.settings-hero-info { display: flex; gap: 14px; align-items: center; flex: 1; }
.settings-hero-ico { width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.settings-hero h2 { font-size: 17px; font-weight: 700; color: #0f172a; letter-spacing: -0.3px; margin: 0 0 4px; }
.settings-hero p { font-size: 12.5px; color: #64748b; margin: 0; line-height: 1.5; }
body.dark .settings-hero { background: #1e293b; border-color: #334155; }
body.dark .settings-hero h2 { color: #f1f5f9; }
body.dark .settings-hero p { color: #94a3b8; }

/* ══════ EMPTY STATES ══════ */
.empty-state { background: #fff; border: 1px dashed var(--bd2); border-radius: 12px; padding: 48px 24px; text-align: center; }
.empty-state .empty-ico { font-size: 56px; margin-bottom: 12px; opacity: .5; }
.empty-state h3 { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0 0 6px; }
.empty-state p { font-size: 13px; color: #64748b; margin: 0 0 16px; }
body.dark .empty-state { background: #1e293b; border-color: #334155; }
body.dark .empty-state h3 { color: #f1f5f9; }
body.dark .empty-state p { color: #94a3b8; }

/* ══════ COMPANIES GRID (Settings/Companies) ══════ */
.co-grid-pro { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.co-card-pro { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 14px; transition: all .15s; }
.co-card-pro:hover { border-color: var(--primary-bd); box-shadow: 0 4px 14px rgba(10,92,46,.07); transform: translateY(-1px); }
.co-card-top { display: flex; gap: 12px; align-items: center; }
.co-avatar { width: 44px; height: 44px; border-radius: 11px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; letter-spacing: -0.5px; flex-shrink: 0; }
.co-card-name { font-size: 14.5px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-card-affilie { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.co-card-affilie code { background: #f1f5f9; padding: 2px 8px; border-radius: 4px; font-family: monospace; font-size: 11px; color: #334155; }
.co-card-meta { border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.co-meta-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.co-meta-lbl { color: #94a3b8; font-weight: 500; }
.co-meta-val { color: #334155; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.co-card-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

body.dark .co-card-pro { background: #1e293b; border-color: #334155; }
body.dark .co-card-pro:hover { border-color: rgba(52,211,153,.3); box-shadow: 0 4px 14px rgba(52,211,153,.1); }
body.dark .co-card-name { color: #f1f5f9; }
body.dark .co-card-affilie { color: #94a3b8; }
body.dark .co-card-affilie code { background: #0f172a; color: #94a3b8; }
body.dark .co-card-meta { border-color: #334155; }
body.dark .co-meta-lbl { color: #64748b; }
body.dark .co-meta-val { color: #cbd5e1; }

/* ══════ SUB-USERS GRID (Settings/Users) ══════ */
.sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; }
.sub-card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 18px; transition: all .15s; }
.sub-card:hover { border-color: var(--bd2); box-shadow: 0 2px 10px rgba(0,0,0,.03); }
.sub-card-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.sub-avatar { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.sub-name { font-size: 14.5px; font-weight: 700; color: #0f172a; display: flex; align-items: center; flex-wrap: wrap; }
.sub-email { font-size: 12px; color: #64748b; margin-top: 2px; }
.sub-card-body { display: flex; flex-direction: column; gap: 16px; padding: 14px 0; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.sub-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sub-section-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; }
.sub-count { font-size: 10.5px; color: #64748b; font-weight: 700; background: #f1f5f9; padding: 2px 8px; border-radius: 10px; letter-spacing: 0; }
.sub-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pill { display: inline-flex; align-items: center; gap: 4px; background: #f1f5f9; color: #334155; font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 20px; }
.pill-sub { background: #eff6ff; color: #1d4ed8; font-size: 11px; }
.pill-green { background: var(--primary-l); color: var(--primary); font-weight: 600; }
.sub-empty-note { font-size: 11.5px; color: #cbd5e1; font-style: italic; }

/* Module tiles */
.mod-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.mod-tile { background: #f8fafc; border: 1px solid var(--bd); border-radius: 10px; padding: 10px 12px; transition: all .12s; }
.mod-tile.on { background: var(--primary-l); border-color: var(--primary-bd); }
.mod-tile.off { opacity: .5; }
.mod-tile-main { display: flex; align-items: center; gap: 8px; }
.mod-tile-ico { font-size: 16px; }
.mod-tile-name { font-size: 12.5px; font-weight: 700; color: #0f172a; flex: 1; }
.mod-tile.on .mod-tile-name { color: var(--primary); }
.mod-tile-check { font-size: 13px; color: var(--primary); font-weight: 800; }
.mod-tile-check.off { color: #cbd5e1; }
.mod-tile-subs { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--primary-bd); }
.mod-tile-sub { font-size: 11px; color: var(--primary-d); font-weight: 600; }

body.dark .sub-count { background: #0f172a; color: #94a3b8; }
body.dark .mod-tile { background: #0f172a; border-color: #334155; }
body.dark .mod-tile.on { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); }
body.dark .mod-tile-name { color: #e2e8f0; }
body.dark .mod-tile.on .mod-tile-name { color: #34d399; }
body.dark .mod-tile-check { color: #34d399; }
body.dark .mod-tile-check.off { color: #475569; }
body.dark .mod-tile-subs { border-top-color: rgba(52,211,153,.2); }
body.dark .mod-tile-sub { color: #34d399; }

/* Access (sociétés) */
.access-all { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(135deg, var(--primary-l), #fff); border: 1px solid var(--primary-bd); border-radius: 10px; }
.access-all-ico { width: 36px; height: 36px; background: var(--primary); color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.access-all-title { font-size: 12.5px; font-weight: 700; color: var(--primary); }
.access-all-sub { font-size: 11px; color: #64748b; margin-top: 1px; }
.access-empty { font-size: 11.5px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; }
.access-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; padding-right: 2px; }
.access-row { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; background: #fafbfc; border: 1px solid transparent; transition: all .1s; }
.access-row:hover { background: #f1f5f9; }
.access-avatar { width: 28px; height: 28px; border-radius: 7px; color: #fff; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -0.5px; }
.access-info { flex: 1; min-width: 0; }
.access-name { font-size: 12px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.access-meta { font-size: 10.5px; color: #94a3b8; margin-top: 1px; }
.access-meta code { font-family: monospace; font-size: 10px; color: #64748b; }

body.dark .access-all { background: linear-gradient(135deg, rgba(52,211,153,.12), #1e293b); border-color: rgba(52,211,153,.3); }
body.dark .access-all-ico { background: #34d399; color: #0f172a; }
body.dark .access-all-title { color: #34d399; }
body.dark .access-all-sub { color: #94a3b8; }
body.dark .access-empty { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fbbf24; }
body.dark .access-row { background: #0f172a; }
body.dark .access-row:hover { background: #273449; }
body.dark .access-name { color: #f1f5f9; }
body.dark .access-meta { color: #64748b; }
body.dark .access-meta code { color: #94a3b8; }
.sub-card-actions { display: flex; gap: 6px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.sub-edit-panel { background: #f8fafc; margin-top: 14px; margin-left: -18px; margin-right: -18px; margin-bottom: -18px; padding: 16px 18px; border-top: 1px solid var(--bd); border-radius: 0 0 12px 12px; }

body.dark .sub-card { background: #1e293b; border-color: #334155; }
body.dark .sub-name { color: #f1f5f9; }
body.dark .sub-email { color: #94a3b8; }
body.dark .sub-card-body { border-color: #334155; }
body.dark .sub-section-lbl { color: #64748b; }
body.dark .pill { background: #0f172a; color: #cbd5e1; }
body.dark .pill-sub { background: rgba(96,165,250,.15); color: #60a5fa; }
body.dark .pill-green { background: rgba(52,211,153,.15); color: #34d399; }
body.dark .sub-edit-panel { background: #0f172a; border-color: #334155; }

/* ══════ CREATE SUB-USER CARD ══════ */
.create-card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 22px 24px; }
.create-card-hdr { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--bd); }
.create-card-ico { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.create-card h3 { font-size: 15.5px; font-weight: 700; color: #0f172a; margin: 0 0 4px; }
.create-card p { font-size: 12.5px; color: #64748b; margin: 0; }
body.dark .create-card { background: #1e293b; border-color: #334155; }
body.dark .create-card-hdr { border-bottom-color: #334155; }
body.dark .create-card h3 { color: #f1f5f9; }
body.dark .create-card p { color: #94a3b8; }

/* ══════ MODULE-SELECT TILES (create / edit sub-user) ══════ */
.mod-select-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mod-select-tile { display: block; background: #fff; border: 2px solid var(--bd); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all .15s; position: relative; }
.mod-select-tile:hover { border-color: var(--primary-bd); background: #fafbfc; }
.mod-select-tile:has(> input[type=checkbox]:checked) { border-color: var(--primary); background: var(--primary-l); }
.mod-select-tile > input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.mod-select-head { display: flex; align-items: center; gap: 12px; }
.mod-select-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.mod-select-meta { flex: 1; min-width: 0; }
.mod-select-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.mod-select-desc { font-size: 11.5px; color: #64748b; margin-top: 2px; line-height: 1.4; }
.mod-select-check { width: 22px; height: 22px; border: 2px solid var(--bd2); border-radius: 50%; flex-shrink: 0; position: relative; transition: all .12s; }
.mod-select-tile:has(> input[type=checkbox]:checked) .mod-select-check { background: var(--primary); border-color: var(--primary); }
.mod-select-tile:has(> input[type=checkbox]:checked) .mod-select-check::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.mod-select-tile:has(> input[type=checkbox]:checked) .mod-select-name { color: var(--primary); }

.mod-select-subs { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--primary-bd); display: none; }
.mod-select-tile:has(> input[type=checkbox]:checked) .mod-select-subs { display: block; }
.mod-select-subs-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); font-weight: 700; margin-bottom: 6px; }
.mod-sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.mod-sub-chip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--primary-bd); border-radius: 10px; padding: 8px 10px; font-size: 11.5px; cursor: pointer; user-select: none; position: relative; transition: all .12s; }
.mod-sub-chip:hover { background: #fafbfc; }
.mod-sub-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mod-sub-ico { width: 28px; height: 28px; background: var(--primary-l); color: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.mod-sub-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mod-sub-name { font-size: 12px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-sub-desc { font-size: 10.5px; color: #64748b; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-sub-check { width: 18px; height: 18px; border: 2px solid var(--bd2); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 10.5px; font-weight: 900; transition: all .12s; }
.mod-sub-chip:has(input:checked) { background: var(--primary-l); border-color: var(--primary); }
.mod-sub-chip:has(input:checked) .mod-sub-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.mod-sub-chip:has(input:checked) .mod-sub-name { color: var(--primary); }

body.dark .mod-select-tile { background: #1e293b; border-color: #334155; }
body.dark .mod-select-tile:hover { background: #273449; border-color: rgba(52,211,153,.3); }
body.dark .mod-select-tile:has(> input[type=checkbox]:checked) { background: rgba(52,211,153,.12); border-color: #34d399; }
body.dark .mod-select-name { color: #f1f5f9; }
body.dark .mod-select-desc { color: #94a3b8; }
body.dark .mod-select-check { border-color: #475569; }
body.dark .mod-select-tile:has(> input[type=checkbox]:checked) .mod-select-check { background: #34d399; border-color: #34d399; }
body.dark .mod-select-tile:has(> input[type=checkbox]:checked) .mod-select-check::after { color: #0f172a; }
body.dark .mod-select-tile:has(> input[type=checkbox]:checked) .mod-select-name { color: #34d399; }
body.dark .mod-select-subs { border-top-color: rgba(52,211,153,.3); }
body.dark .mod-select-subs-lbl { color: #34d399; }
body.dark .mod-sub-chip { background: #0f172a; border-color: rgba(52,211,153,.3); }
body.dark .mod-sub-chip:hover { background: #273449; }
body.dark .mod-sub-ico { background: rgba(52,211,153,.15); color: #34d399; }
body.dark .mod-sub-name { color: #f1f5f9; }
body.dark .mod-sub-desc { color: #94a3b8; }
body.dark .mod-sub-check { border-color: #475569; }
body.dark .mod-sub-chip:has(input:checked) { background: rgba(52,211,153,.12); border-color: #34d399; }
body.dark .mod-sub-chip:has(input:checked) .mod-sub-check { background: #34d399; border-color: #34d399; color: #0f172a; }
body.dark .mod-sub-chip:has(input:checked) .mod-sub-name { color: #34d399; }

/* ══════ ACCESS TOGGLE (All companies banner switch) ══════ */
.access-toggle { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #f8fafc; border: 2px solid var(--bd); border-radius: 12px; cursor: pointer; transition: all .15s; user-select: none; margin-bottom: 10px; }
.access-toggle:hover { border-color: var(--primary-bd); }
.access-toggle.on { background: linear-gradient(135deg, var(--primary-l), #fff); border-color: var(--primary); }
.access-toggle input { display: none; }
.access-toggle-ico { width: 40px; height: 40px; background: #e2e8f0; color: #64748b; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; transition: all .15s; }
.access-toggle.on .access-toggle-ico { background: var(--primary); color: #fff; }
.access-toggle-body { flex: 1; min-width: 0; }
.access-toggle-title { font-size: 13.5px; font-weight: 700; color: #334155; }
.access-toggle.on .access-toggle-title { color: var(--primary); }
.access-toggle-sub { font-size: 11.5px; color: #94a3b8; margin-top: 2px; line-height: 1.4; }
.access-toggle-switch { width: 42px; height: 24px; background: #cbd5e1; border-radius: 12px; position: relative; flex-shrink: 0; transition: all .15s; }
.access-toggle-switch span { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
.access-toggle.on .access-toggle-switch { background: var(--primary); }
.access-toggle.on .access-toggle-switch span { left: 20px; }

.access-or { font-size: 11.5px; color: #94a3b8; text-align: center; padding: 6px 0; position: relative; font-weight: 500; }
.access-or::before, .access-or::after { content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background: var(--bd); }
.access-or::before { left: 0; }
.access-or::after { right: 0; }

.access-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; }
.access-picker-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 1.5px solid var(--bd); border-radius: 8px; cursor: pointer; transition: all .12s; user-select: none; }
.access-picker-row:hover { border-color: var(--primary-bd); background: #fafbfc; }
.access-picker-row:has(input:checked) { border-color: var(--primary); background: var(--primary-l); }
.access-picker-row input { display: none; }
.access-picker-row .access-avatar { width: 30px; height: 30px; font-size: 11px; border-radius: 8px; }
.access-picker-row .access-info { flex: 1; min-width: 0; }
.access-picker-row .access-name { font-size: 12.5px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.access-picker-row .access-meta { font-size: 10.5px; color: #94a3b8; margin-top: 1px; }
.access-picker-row .access-meta code { font-family: monospace; font-size: 10px; color: #64748b; }
.access-picker-check { width: 20px; height: 20px; border: 2px solid var(--bd2); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: transparent; transition: all .12s; }
.access-picker-row:has(input:checked) .access-picker-check { background: var(--primary); border-color: var(--primary); color: #fff; }

body.dark .access-toggle { background: #0f172a; border-color: #334155; }
body.dark .access-toggle:hover { border-color: rgba(52,211,153,.3); }
body.dark .access-toggle.on { background: linear-gradient(135deg, rgba(52,211,153,.15), #1e293b); border-color: #34d399; }
body.dark .access-toggle-ico { background: #334155; color: #94a3b8; }
body.dark .access-toggle.on .access-toggle-ico { background: #34d399; color: #0f172a; }
body.dark .access-toggle-title { color: #cbd5e1; }
body.dark .access-toggle.on .access-toggle-title { color: #34d399; }
body.dark .access-toggle-switch { background: #475569; }
body.dark .access-toggle.on .access-toggle-switch { background: #34d399; }
body.dark .access-or { color: #64748b; }
body.dark .access-or::before, body.dark .access-or::after { background: #334155; }
body.dark .access-picker-row { background: #1e293b; border-color: #334155; }
body.dark .access-picker-row:hover { background: #273449; border-color: rgba(52,211,153,.3); }
body.dark .access-picker-row:has(input:checked) { background: rgba(52,211,153,.12); border-color: #34d399; }
body.dark .access-picker-row .access-name { color: #f1f5f9; }
body.dark .access-picker-check { border-color: #475569; }
body.dark .access-picker-row:has(input:checked) .access-picker-check { background: #34d399; color: #0f172a; border-color: #34d399; }

/* ══════ UPLOAD CARD (Preetabli/Upload) ══════ */
.upload-card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 28px 32px; max-width: 760px; margin: 0 auto; box-shadow: 0 2px 12px rgba(0,0,0,.03); }
.upload-hero { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--bd); }
.upload-hero-ico { width: 56px; height: 56px; background: var(--primary-l); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.upload-hero h2 { font-size: 18px; font-weight: 700; color: #0f172a; letter-spacing: -0.3px; margin: 0 0 4px; }
.upload-hero p { font-size: 12.5px; color: #64748b; margin: 0; line-height: 1.5; }

.co-pill-lock { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--primary-l); border: 1px solid var(--primary-bd); border-radius: 8px; font-size: 13.5px; }
.co-pill-lock .ico { font-size: 18px; }
.co-pill-lock .nm { font-weight: 700; color: var(--primary); flex: 1; }
.co-pill-lock .num { font-family: monospace; font-size: 12px; color: #64748b; background: #fff; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--primary-bd); }
.co-pill-lock .lock { color: #94a3b8; font-size: 14px; cursor: help; }

.dropzone { display: block; border: 2px dashed #cbd5e1; border-radius: 10px; padding: 32px 24px; text-align: center; cursor: pointer; transition: all .15s; background: #fafbfc; position: relative; }
.dropzone:hover { border-color: var(--primary-bd); background: var(--primary-l); }
.dropzone.drag { border-color: var(--primary); background: var(--primary-l); transform: scale(1.01); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-ico { font-size: 40px; margin-bottom: 8px; }
.dz-title { font-size: 13.5px; font-weight: 600; color: #334155; margin-bottom: 4px; }
.dz-sub { font-size: 11.5px; color: #94a3b8; }
.dz-sub code { background: #fff; border: 1px solid var(--bd); border-radius: 4px; padding: 1px 6px; font-family: monospace; font-size: 11px; color: #64748b; }

.dz-loaded { text-align: left; }
.dz-file { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--bd); border-radius: 8px; padding: 10px 14px; }
.dz-f-ico { font-size: 24px; }
.dz-f-meta { flex: 1; }
.dz-f-name { font-size: 13px; font-weight: 600; color: #0f172a; }
.dz-f-sub { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.dz-f-clear { background: transparent; border: none; color: #94a3b8; cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 4px; z-index: 1; position: relative; }
.dz-f-clear:hover { background: #fee2e2; color: #dc2626; }

.dz-parse { margin-top: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--bd); border-radius: 8px; font-size: 12px; }
.parse-row { padding: 3px 0; }
.parse-row.ok { color: #059669; }
.parse-row.bad { color: #b91c1c; font-weight: 600; }
.parse-row.warn { color: #d97706; }

body.dark .upload-card { background: #1e293b; border-color: #334155; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
body.dark .upload-hero { border-bottom-color: #334155; }
body.dark .upload-hero h2 { color: #f1f5f9; }
body.dark .upload-hero p { color: #94a3b8; }
body.dark .upload-hero-ico { background: rgba(52,211,153,.15); }
body.dark .co-pill-lock { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); }
body.dark .co-pill-lock .nm { color: #34d399; }
body.dark .co-pill-lock .num { background: #0f172a; border-color: rgba(52,211,153,.3); color: #94a3b8; }
body.dark .dropzone { background: #0f172a; border-color: #334155; }
body.dark .dropzone:hover, body.dark .dropzone.drag { background: rgba(52,211,153,.08); border-color: #34d399; }
body.dark .dz-title { color: #e2e8f0; }
body.dark .dz-sub { color: #64748b; }
body.dark .dz-sub code { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark .dz-file, body.dark .dz-parse { background: #1e293b; border-color: #334155; }
body.dark .dz-f-name { color: #f1f5f9; }
body.dark .parse-row.ok { color: #34d399; }
body.dark .parse-row.bad { color: #f87171; }
body.dark .parse-row.warn { color: #fbbf24; }

/* ══════ PICK BANNER (first-login with multiple companies) ══════ */
.pick-banner { background: var(--primary-l); border: 1px solid var(--primary-bd); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; color: var(--primary); font-size: 13px; }
body.dark .pick-banner { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); color: #34d399; }
body.dark .pick-banner div[style] { color: #94a3b8 !important; }

/* ══════ COMPANY BANNER ══════ */
.co-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; background: #fff; border: 1px solid var(--bd); border-radius: 8px; padding: 12px 16px; }
.co-banner-name { font-weight: 700; font-size: 14px; color: #0f172a; }
.co-banner-meta { font-size: 11px; color: #64748b; margin-top: 2px; }

/* ══════ STATUS STRIP ══════ */
.status-strip { background: #fff; border: 1px solid var(--bd); border-radius: 7px 7px 0 0; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-bottom: none; }
.status-strip .main { color: var(--primary); font-weight: 700; font-size: 13px; }
.status-strip .meta { font-size: 11px; color: #64748b; margin-left: 10px; }
.status-strip .right { display: flex; gap: 6px; font-size: 11px; color: #64748b; }
.status-strip .right strong { color: var(--primary); }
.status-strip .right .bad { color: var(--red); }

/* ══════ TOOLBAR ══════ */
.toolbar { background: #fff; border: 1px solid var(--bd); border-bottom: none; padding: 8px 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.toolbar .t-sep { width: 1px; height: 20px; background: var(--bd); margin: 0 4px; }
.btn-p { background: var(--primary-l); color: var(--primary); border: 1px solid var(--primary-bd); padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.btn-p:hover { background: var(--primary); color: #fff; }
.btn-b { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.btn-b:hover { background: #dbeafe; }
.btn-r { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.btn-r:hover { background: #fecaca; }
.btn-w { background: #fff; color: #334155; border: 1px solid var(--bd); padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.btn-w:hover { background: #f8fafc; }
.btn-lg { padding: 10px 18px; font-size: 13px; font-weight: 700; }

/* ══════ HINT BAR ══════ */
.hint-bar { background: #fef9c3; border: 1px solid #fde68a; border-top: none; padding: 7px 14px; font-size: 11.5px; color: #78350f; }
.hint-bar kbd { background: #fff; border: 1px solid #fde68a; border-radius: 3px; padding: 1px 5px; font-family: var(--mono, monospace); font-size: 10.5px; color: #92400e; }

/* ══════ SPREADSHEET ══════ */
.tbl-wrap { background: #fff; border: 1px solid var(--bd); border-top: none; border-radius: 0 0 7px 7px; overflow-x: auto; max-height: 60vh; }
table.sp { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.sp thead th { position: sticky; top: 0; background: #0f172a; color: #e2e8f0; padding: 8px 10px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; z-index: 1; border-right: 1px solid #334155; }
table.sp thead th.L { text-align: left; }
table.sp tbody td { padding: 4px 6px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; vertical-align: middle; }
table.sp tbody tr:hover td { background: #fafbfc; }
table.sp tbody tr.existant td.c0 { background: var(--primary-l); color: var(--primary); font-weight: 700; }
table.sp tbody tr.entrant td.c0 { background: #eff6ff; color: #1d4ed8; font-weight: 700; }
table.sp tbody tr.sortant td.c0 { background: #fef9c3; color: #92400e; font-weight: 700; }
table.sp tbody td.c0 { text-align: center; font-size: 11px; color: #64748b; font-weight: 600; min-width: 32px; }
table.sp .ci { width: 100%; border: 1px solid transparent; border-radius: 3px; padding: 4px 6px; font-size: 12.5px; background: transparent; outline: none; font-family: var(--sans); transition: all .08s; }
table.sp .ci:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 2px rgba(10,92,46,.12); }
table.sp .ci.ctr { text-align: center; }
table.sp .ci.up { text-transform: uppercase; }
table.sp .ci.mono { font-family: var(--mono, 'Courier New', monospace); }
table.sp .ci-sel { width: 100%; border: 1px solid transparent; border-radius: 3px; padding: 3px 4px; font-size: 12px; background: transparent; outline: none; cursor: pointer; }
table.sp .ci-sel:focus { border-color: var(--primary); background: #fff; }
table.sp .ci-del { background: transparent; border: none; color: #cbd5e1; font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; }
table.sp .ci-del:hover { color: var(--red); }
table.sp td.c-plaf { text-align: right; font-family: var(--mono, monospace); font-size: 12px; color: #64748b; padding: 4px 10px; }
table.sp td.c-plaf.orange { color: #d97706; font-weight: 700; background: #fffbeb; }
.cnss-wrap { display: flex; align-items: center; gap: 4px; }
.cnss-badge { font-size: 11px; flex-shrink: 0; }

.legend { font-size: 11px; color: #64748b; margin-top: 8px; padding: 6px 10px; }

/* Recap modal sections (inside SweetAlert) */
.recap-section { text-align: left; margin-bottom: 14px; }
.recap-section h4 { font-size: 13px; font-weight: 700; margin-bottom: 6px; color: #0f172a; }
.recap-section table { width: 100%; font-size: 11.5px; border-collapse: collapse; }
.recap-section th { background: #f8fafc; padding: 4px 6px; text-align: left; color: #64748b; font-weight: 600; font-size: 10.5px; }
.recap-section td { padding: 4px 6px; border-bottom: 1px solid #f1f5f9; }

/* Dark overrides for spreadsheet */
body.dark table.sp thead th { background: #0f172a; color: #cbd5e1; border-right-color: #334155; }
body.dark table.sp tbody td { border-bottom-color: #334155; border-right-color: #334155; }
body.dark table.sp tbody tr:hover td { background: #273449; }
body.dark .tbl-wrap { background: #1e293b; border-color: #334155; }
body.dark .status-strip, body.dark .toolbar, body.dark .co-banner, body.dark .wz { background: #1e293b; border-color: #334155; }
body.dark .hint-bar { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fde68a; }
body.dark .hint-bar kbd { background: #0f172a; border-color: rgba(245,158,11,.3); color: #fcd34d; }

/* Inputs inside the spreadsheet: force light text (browsers default <input> to fieldtext=black) */
body.dark table.sp .ci { color: #e2e8f0; background: transparent; }
body.dark table.sp .ci:focus { background: #0f172a; box-shadow: 0 0 0 2px rgba(52,211,153,.25); border-color: #34d399; }
body.dark table.sp .ci::placeholder { color: #64748b; }
body.dark table.sp .ci-sel { color: #e2e8f0; background: transparent; }
body.dark table.sp .ci-sel:focus { background: #0f172a; border-color: #34d399; }
body.dark table.sp .ci-sel option { background: #1e293b; color: #e2e8f0; }

/* Row-number tile tints */
body.dark table.sp tbody td.c0 { color: #94a3b8; }
body.dark table.sp tbody tr.existant td.c0 { background: rgba(52,211,153,.15); color: #34d399; }
body.dark table.sp tbody tr.entrant td.c0 { background: rgba(96,165,250,.15); color: #60a5fa; }
body.dark table.sp tbody tr.sortant td.c0 { background: rgba(251,191,36,.15); color: #fbbf24; }

/* Plafond cell */
body.dark table.sp td.c-plaf { color: #94a3b8; }
body.dark table.sp td.c-plaf.orange { background: rgba(217,119,6,.18); color: #fbbf24; }

/* Wizard + banners + status strip */
body.dark .co-banner-name { color: #f1f5f9; }
body.dark .co-banner-meta { color: #94a3b8; }
body.dark .wz .wt strong { color: #f1f5f9; }
body.dark .wz .wt span { color: #94a3b8; }
body.dark .wz.dn { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); }
body.dark .wz.dn .wn { background: #34d399; color: #0f172a; }
body.dark .wz.act { background: #1e293b; border-color: #34d399; }
body.dark .wz.act .wn { background: #34d399; color: #0f172a; }
body.dark .wz.act .wt strong { color: #34d399; }
body.dark .status-strip .main { color: #34d399; }
body.dark .status-strip .meta, body.dark .status-strip .right { color: #94a3b8; }
body.dark .status-strip .right strong { color: #34d399; }
body.dark .legend { color: #94a3b8; }
body.dark .ci-del { color: #64748b; }
body.dark .ci-del:hover { color: #ef4444; }

/* Récap modal */
body.dark .recap-section h4 { color: #f1f5f9; }
body.dark .recap-section th { background: #0f172a; color: #94a3b8; }
body.dark .recap-section td { border-bottom-color: #334155; color: #e2e8f0; }

/* Toolbar button variants need dark tints */
body.dark .btn-w { background: #1e293b; color: #cbd5e1; border-color: #334155; }
body.dark .btn-w:hover { background: #334155; }
body.dark .btn-p { background: rgba(52,211,153,.15); color: #34d399; border-color: rgba(52,211,153,.3); }
body.dark .btn-p:hover { background: #34d399; color: #0f172a; }
body.dark .btn-b { background: rgba(96,165,250,.15); color: #60a5fa; border-color: rgba(96,165,250,.3); }
body.dark .btn-b:hover { background: rgba(96,165,250,.25); }
body.dark .btn-r { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.3); }
body.dark .btn-r:hover { background: rgba(239,68,68,.25); }

/* Toolbar file-input (when visible) */
body.dark input[type="file"] { color: #e2e8f0; }

/* ══════ THEME SELECTOR (Apparence) ══════ */
.theme-grid { display: grid; grid-template-columns: repeat(2, 260px); gap: 14px; }
.theme-card { cursor: pointer; border: 2px solid var(--bd); border-radius: 10px; padding: 10px; transition: all .15s; background: #fff; }
.theme-card:hover { border-color: var(--primary-bd); }
.theme-card.sel { border-color: var(--primary); background: var(--primary-l); }
.theme-preview { width: 100%; height: 140px; border-radius: 8px; overflow: hidden; border: 1px solid var(--bd); }
.theme-preview.light { background: #fff; }
.theme-preview.light .bar { background: #fff; border-bottom: 1px solid #e2e8f0; height: 18px; }
.theme-preview.light .content { padding: 10px; display: flex; gap: 6px; }
.theme-preview.light .dot { width: 28px; height: 28px; background: #f1f5f9; border-radius: 5px; }
.theme-preview.dark { background: #0f172a; }
.theme-preview.dark .bar { background: #1e293b; border-bottom: 1px solid #334155; height: 18px; }
.theme-preview.dark .content { padding: 10px; display: flex; gap: 6px; }
.theme-preview.dark .dot { width: 28px; height: 28px; background: #334155; border-radius: 5px; }
.theme-lbl { text-align: center; font-weight: 600; font-size: 13px; margin-top: 8px; color: #0f172a; }

/* ══════ DARK MODE ══════ */
body.dark { background: #0f172a; color: #e2e8f0; }
body.dark .topbar { background: #1e293b; border-bottom-color: #334155; }
body.dark .tb-brand { color: #f1f5f9; }
body.dark .tb-brand span { color: #34d399; }
body.dark .tb-divider { background: #334155; }
body.dark .page-title { color: #94a3b8; }
body.dark .menu-btn span { background: #cbd5e1; }
body.dark .menu-btn:hover { background: #334155; }
body.dark .user-name { color: #f1f5f9; }
body.dark .user-pill { color: #cbd5e1; }
body.dark .logout-btn { color: #34d399; border-color: #334155; background: #1e293b; }
body.dark .logout-btn:hover { background: #334155; }

body.dark .menu-dropdown { background: #1e293b; border-right-color: #334155; }
body.dark .menu-user { border-bottom-color: #334155; }
body.dark .menu-user-name { color: #f1f5f9; }
body.dark .menu-user-email { color: #94a3b8; }
body.dark .menu-user-lic { background: rgba(52,211,153,.15); color: #34d399; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-top: 6px; display: inline-block; font-weight: 600; }
body.dark .menu-section { border-bottom-color: #334155; }
body.dark .menu-section-title { color: #64748b; }
body.dark .menu-collapsible > .menu-section-title:hover { background: #273449; color: #cbd5e1; }
body.dark .menu-item { color: #cbd5e1; }
body.dark .menu-item:hover { background: #334155; color: #f1f5f9; }

body.dark .card, body.dark .stat, body.dark .module-card, body.dark .co-card { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark .card-hdr { background: #1e293b; border-bottom-color: #334155; color: #cbd5e1; }
body.dark .stat .n, body.dark .m-name, body.dark .co-name { color: #f1f5f9; }
body.dark .stat .l, body.dark .m-desc { color: #94a3b8; }
body.dark table.tbl th { background: #0f172a; color: #94a3b8; border-bottom-color: #334155; }
body.dark table.tbl td { border-bottom-color: #334155; }
body.dark table.tbl tr:hover { background: #273449; }

body.dark .btn-sec { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark .btn-sec:hover { background: #334155; color: #f1f5f9; }

body.dark .fg input, body.dark .fg select, body.dark .fg textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark .period-bar select { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark .tab { color: #94a3b8; }
body.dark .tab:hover { color: #f1f5f9; }
body.dark .tab.active { color: #34d399; border-bottom-color: #34d399; }
body.dark .tabs-nav { border-bottom-color: #334155; }
body.dark .cal-tile { background: #0f172a; border-color: #334155; }
body.dark .cal-tile.done { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.35); }
body.dark .cal-tile.done .cal-m, body.dark .cal-tile.done .cal-v { color: #34d399; }
body.dark .co-num { background: #0f172a; color: #94a3b8; }
body.dark .breadcrumb, body.dark .breadcrumb a { color: #94a3b8; }
body.dark .breadcrumb b { color: #f1f5f9; }
body.dark .theme-card { background: #1e293b; border-color: #334155; }
body.dark .theme-card.sel { background: rgba(52,211,153,.1); border-color: #34d399; }
body.dark .theme-lbl { color: #f1f5f9; }

/* ══════ COMPANY CREATE / EDIT FORM ══════ */
.co-form-wrap { max-width: 960px; margin: 0 auto; }
.co-form-hero { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 20px 24px; margin-bottom: 16px; }
.co-form-hero-ico { width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex-shrink: 0; }
.co-form-hero h2 { font-size: 17px; font-weight: 700; color: #0f172a; margin: 0 0 4px; }
.co-form-hero p { font-size: 12.5px; color: #64748b; margin: 0; line-height: 1.5; }
.co-form-hero p code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-size: 11.5px; font-weight: 600; color: #0f172a; }

.co-form { display: flex; flex-direction: column; gap: 12px; }
.co-form-section { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 20px 24px; }
.co-form-section-hdr { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bd); }
.co-form-section-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.co-form-section h3 { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0; }
.co-form-section p { font-size: 11.5px; color: #64748b; margin: 2px 0 0; }
.co-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; padding: 16px 0; position: sticky; bottom: 0; background: linear-gradient(0deg, var(--bg) 65%, transparent); }
.fg-err { color: #b91c1c; font-size: 11.5px; margin-top: 4px; display: inline-block; }

body.dark .co-form-hero { background: #1e293b; border-color: #334155; }
body.dark .co-form-hero h2 { color: #f1f5f9; }
body.dark .co-form-hero p { color: #94a3b8; }
body.dark .co-form-hero p code { background: #0f172a; color: #e2e8f0; }
body.dark .co-form-section { background: #1e293b; border-color: #334155; }
body.dark .co-form-section-hdr { border-bottom-color: #334155; }
body.dark .co-form-section h3 { color: #f1f5f9; }
body.dark .co-form-section p { color: #94a3b8; }
body.dark .fg-err { color: #fca5a5; }

/* ══════ DASHBOARD — COMPANY HOME ══════ */
.co-infos-bar { display: flex; gap: 28px; flex-wrap: wrap; background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 14px 22px; margin-bottom: 16px; font-size: 12.5px; color: #475569; }
.co-infos-bar b { color: #0f172a; margin-right: 6px; font-weight: 600; }
.co-infos-bar code { background: #f1f5f9; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; color: #0f172a; font-weight: 600; }
body.dark .co-infos-bar { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark .co-infos-bar b { color: #f1f5f9; }
body.dark .co-infos-bar code { background: #0f172a; color: #e2e8f0; }

.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.dash-kpi { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 16px 18px; }
.dash-kpi .k-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.dash-kpi .k-l { font-size: 11.5px; color: #64748b; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.dash-kpi .k-n { font-size: 22px; font-weight: 700; color: #0f172a; margin-top: 2px; }
.dash-kpi .k-n .dh { font-size: 12px; color: #94a3b8; font-weight: 500; margin-left: 4px; }
.dash-kpi .k-n .k-sub { font-size: 13px; color: #94a3b8; font-weight: 500; margin-left: 6px; }
body.dark .dash-kpi { background: #1e293b; border-color: #334155; }
body.dark .dash-kpi .k-n { color: #f1f5f9; }
body.dark .dash-kpi .k-l { color: #94a3b8; }

.dash-ytd { background: linear-gradient(135deg, #0a5c2e 0%, #065f46 100%); color: #fff; border-radius: 14px; padding: 20px 24px; margin-top: 16px; }
.dash-ytd-hdr { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .85; margin-bottom: 12px; }
.dash-ytd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.dash-ytd .ytd-l { font-size: 11.5px; opacity: .75; }
.dash-ytd .ytd-n { font-size: 20px; font-weight: 700; margin-top: 2px; }
.dash-ytd .ytd-n .dh { font-size: 11.5px; opacity: .7; margin-left: 4px; }
.dash-ytd .ytd-n .k-sub { font-size: 13px; opacity: .65; margin-left: 4px; }
body.dark .dash-ytd { background: linear-gradient(135deg, #065f46 0%, #0f3d2e 100%); }

.dash-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .dash-columns { grid-template-columns: 1fr; } }

.paie-cal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 12px 14px; }
@media (max-width: 700px) { .paie-cal-grid { grid-template-columns: repeat(3, 1fr); } }
.paie-cal-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: #f8fafc; border: 1px solid var(--bd); border-radius: 8px; text-decoration: none; color: #64748b; transition: all .12s; }
.paie-cal-tile:hover { background: var(--primary-l); border-color: var(--primary); color: var(--primary); }
.paie-cal-tile .cal-m { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.paie-cal-tile .cal-v { font-size: 12px; font-weight: 600; }
.paie-cal-tile .cal-amt { font-size: 10.5px; font-weight: 500; opacity: .8; }
.paie-cal-tile.paie-draft { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); color: #b45309; }
.paie-cal-tile.paie-finalized { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.4); color: #065f46; }
body.dark .paie-cal-tile { background: #0f172a; border-color: #334155; color: #94a3b8; }
body.dark .paie-cal-tile:hover { background: rgba(52,211,153,.1); border-color: #34d399; color: #34d399; }

.dash-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; padding: 14px; }
.dash-action { display: flex; gap: 14px; align-items: center; background: #fff; border: 1.5px solid var(--bd); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit; transition: all .12s; }
.dash-action:hover { border-color: var(--primary); background: var(--primary-l); transform: translateY(-1px); }
.dash-action .da-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.dash-action .da-name { font-size: 13.5px; font-weight: 700; color: #0f172a; }
.dash-action .da-desc { font-size: 11.5px; color: #64748b; margin-top: 2px; }
body.dark .dash-action { background: #1e293b; border-color: #334155; }
body.dark .dash-action:hover { background: rgba(52,211,153,.1); border-color: #34d399; }
body.dark .dash-action .da-name { color: #f1f5f9; }
body.dark .dash-action .da-desc { color: #94a3b8; }

/* ══════ EMPLOYEE LIST ══════ */
.emp-filter { display: flex; align-items: center; gap: 14px; margin: 12px 0 14px; background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 10px 14px; }
.emp-search { flex: 1; border: 0; outline: none; font-size: 13px; padding: 8px; background: transparent; color: inherit; }
.emp-tabs { display: flex; gap: 4px; }
.emp-tab { padding: 6px 12px; background: #f1f5f9; border-radius: 16px; font-size: 12px; font-weight: 600; color: #64748b; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.emp-tab:hover { background: #e2e8f0; }
.emp-tab span { font-size: 10.5px; background: #fff; padding: 1px 6px; border-radius: 10px; color: #475569; }
.emp-tab.on { background: var(--primary); color: #fff; }
.emp-tab.on span { background: rgba(255,255,255,.2); color: #fff; }
body.dark .emp-filter { background: #1e293b; border-color: #334155; }
body.dark .emp-tab { background: #0f172a; color: #94a3b8; }
body.dark .emp-tab:hover { background: #273449; }
body.dark .emp-tab span { background: #1e293b; color: #cbd5e1; }

.emp-table-wrap { background: #fff; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
.emp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.emp-table th { background: #f8fafc; color: #475569; font-weight: 700; text-align: left; padding: 10px 14px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--bd); }
.emp-table td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.emp-table tbody tr:hover { background: #f8fafc; }
.emp-table tbody tr:last-child td { border-bottom: 0; }
.emp-table code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 11.5px; font-weight: 600; color: #1e40af; }
.emp-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; overflow: hidden; }
.emp-avatar.emp-avatar-img { background: #f1f5f9; }
.emp-avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.co-form-hero-img { padding: 0; overflow: hidden; }
.co-form-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.emp-pill { display: inline-block; padding: 1px 7px; font-size: 9.5px; font-weight: 700; border-radius: 8px; margin-left: 6px; }
.emp-pill-new { background: #dbeafe; color: #1e40af; }
.emp-pill-out { background: #fee2e2; color: #b91c1c; }
body.dark .emp-pill-new { background: rgba(96,165,250,.15); color: #93c5fd; }
body.dark .emp-pill-out { background: rgba(248,113,113,.15); color: #fca5a5; }

.emp-photo-section .co-form-section-hdr { padding-bottom: 14px; margin-bottom: 14px; }
.emp-photo-row { display: flex; align-items: center; gap: 24px; }
.emp-photo-preview { width: 110px; height: 110px; border-radius: 12px; background: #f1f5f9; border: 2px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.emp-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.emp-photo-placeholder { font-size: 38px; color: #cbd5e1; }
.emp-photo-controls { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.emp-photo-controls input[type=file] { padding: 6px 0; font-size: 12px; }
.emp-photo-remove { font-size: 12px; color: #b91c1c; display: flex; align-items: center; gap: 6px; cursor: pointer; }
body.dark .emp-photo-preview { background: #0f172a; border-color: #334155; }
body.dark .emp-photo-remove { color: #fca5a5; }

.row-muted td { opacity: 0.55; }
.row-muted td b { font-weight: 500; }

/* CALC */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: flex-start; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-card { background: #fff; border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; }
.calc-card-hdr { padding: 14px 20px; border-bottom: 1px solid var(--bd); font-weight: 700; color: #0f172a; background: #f8fafc; }
.calc-card-body { padding: 20px 22px; }
body.dark .calc-card { background: #1e293b; border-color: #334155; }
body.dark .calc-card-hdr { background: #0f172a; border-bottom-color: #334155; color: #f1f5f9; }

.calc-tabs { display: flex; gap: 8px; margin-bottom: 16px; padding: 4px; background: #f1f5f9; border-radius: 10px; }
.calc-tab { flex: 1; padding: 10px; border-radius: 8px; text-align: center; font-weight: 700; font-size: 13px; color: #64748b; cursor: pointer; user-select: none; transition: all .12s; }
.calc-tab:has(input:checked) { background: var(--primary); color: #fff; box-shadow: 0 2px 4px rgba(10,92,46,.2); }
.calc-tab input { display: none; }
body.dark .calc-tabs { background: #0f172a; }
body.dark .calc-tab { color: #94a3b8; }
body.dark .calc-tab:has(input:checked) { background: #34d399; color: #0f172a; }

.calc-amt { font-size: 22px; font-weight: 800; text-align: right; padding: 14px !important; font-family: var(--mono); }

.calc-section-hdr { margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--bd); font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
body.dark .calc-section-hdr { color: #94a3b8; border-bottom-color: #334155; }
.calc-check { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #f8fafc; border: 1px solid var(--bd); border-radius: 8px; font-weight: 600; font-size: 13px; color: #334155; cursor: pointer; user-select: none; }
.calc-check input { margin: 0; }
.calc-check:has(input:checked) { background: #ecfdf5; border-color: #34d399; color: #065f46; }
body.dark .calc-check { background: #0f172a; color: #cbd5e1; }
body.dark .calc-check:has(input:checked) { background: #064e3b; border-color: #34d399; color: #d1fae5; }

/* ══════ ORDRE DE VIREMENT ══════ */
.ov-bank-block { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding: 14px 16px; margin: 18px 0; background: #f8fafc; border: 1px solid var(--bd); border-radius: 8px; font-size: 12.5px; }
.ov-bank-row { display: flex; gap: 10px; align-items: baseline; }
.ov-bank-lbl { color: #64748b; font-weight: 600; min-width: 130px; }
.ov-bank-val { color: #0f172a; font-weight: 700; }
.ov-bank-val code { background: transparent; padding: 0; font-size: 12.5px; }
.ov-intro { margin: 16px 0 12px; padding: 10px 14px; font-size: 12.5px; line-height: 1.55; color: #334155; border-left: 3px solid var(--primary); background: #f8fafc; }
.ov-table th, .ov-table td { padding: 7px 10px !important; font-size: 11.5px !important; }
.ov-table th { background: var(--primary) !important; color: #fff !important; }
.ov-table tfoot td { background: #fef3c7 !important; font-size: 13px !important; padding: 10px 12px !important; }
.ov-amount-words { margin-top: 14px; padding: 12px 16px; background: #fffbeb; border: 1px solid #fbbf24; border-radius: 6px; font-size: 13px; color: #78350f; }
.ov-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin: 36px 0 24px; }
.ov-sig { text-align: center; font-size: 12px; color: #475569; }
.ov-sig-lbl { font-weight: 600; margin-bottom: 4px; }
.ov-sig-line { margin: 32px auto 8px; border-top: 1px solid #94a3b8; max-width: 220px; }
.ov-sig-cap { font-size: 10.5px; color: #94a3b8; font-style: italic; }
.alert-warn { padding: 10px 14px; background: #fef3c7; border: 1px solid #fbbf24; border-radius: 6px; margin: 12px 0; font-size: 13px; color: #78350f; }
@media print { .alert-warn { display: none; } }

/* Generic data table (Notes de frais, etc.) */
.data-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; font-size: 13px; }
.data-table th { background: #f8fafc; padding: 9px 12px; text-align: left; font-weight: 700; font-size: 11.5px; color: #475569; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--bd); }
.data-table td { padding: 9px 12px; border-top: 1px solid #f1f5f9; vertical-align: top; }
.data-table tr:hover td { background: #f8fafc; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tfoot td { background: #f8fafc; font-weight: 700; }
.data-table input, .data-table select { padding: 5px 8px; border: 1px solid var(--bd); border-radius: 4px; font-size: 12px; width: 100%; box-sizing: border-box; }
body.dark .data-table { background: #1e293b; border-color: #334155; }
body.dark .data-table th { background: #0f172a; color: #94a3b8; border-bottom-color: #334155; }
body.dark .data-table td { border-top-color: #334155; }
body.dark .data-table tr:hover td { background: #0f172a; }
body.dark .data-table tfoot td { background: #0f172a; }

/* Coloured status pill */
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }

/* Module switcher inside the side menu — pills to jump between Paie /
   Commercial / Paramètres while keeping the menu compact (only the active
   module's items are shown below). */
.module-switcher { padding: 8px 14px; border-bottom: 1px solid var(--bd); margin-bottom: 4px; }
.module-switcher-lbl { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.module-switcher-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-pill { padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #475569; background: #f1f5f9; text-decoration: none; transition: all .12s; border: 1px solid transparent; }
.ms-pill:hover { background: #e2e8f0; color: #0f172a; }
.ms-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
body.dark .module-switcher { border-bottom-color: #334155; }
body.dark .ms-pill { background: #0f172a; color: #cbd5e1; }
body.dark .ms-pill:hover { background: #1e293b; color: #f1f5f9; }
body.dark .ms-pill.active { background: #34d399; color: #0f172a; border-color: #34d399; }

/* Section divider on the home dashboard (separates Paie & Commercial blocks) */
.dash-section-divider { margin: 30px 0 14px; padding: 8px 0; border-top: 2px dashed var(--bd); position: relative; text-align: center; }
.dash-section-divider span { background: #fafbfc; padding: 0 16px; font-size: 13px; font-weight: 700; color: #475569; position: relative; top: -19px; }
body.dark .dash-section-divider span { background: #0f172a; color: #94a3b8; }
body.dark .dash-section-divider { border-top-color: #334155; }

/* Commercial dashboard tile grid */
.commercial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.commercial-tile { display: block; padding: 18px 20px; background: #fff; border: 1px solid var(--bd); border-radius: 12px; text-decoration: none; color: inherit; transition: all .15s; }
.commercial-tile:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.commercial-tile .ct-ico { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 10px; }
.commercial-tile h3 { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0 0 4px; }
.commercial-tile p { font-size: 12px; color: #64748b; margin: 0; line-height: 1.4; }
body.dark .commercial-tile { background: #1e293b; border-color: #334155; }
body.dark .commercial-tile h3 { color: #f1f5f9; }
body.dark .commercial-tile p { color: #94a3b8; }

/* Notes de frais — identification grid (employee · mission) */
.nf-id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; }
.nf-id-col { padding: 12px 14px; background: #f8fafc; border: 1px solid var(--bd); border-radius: 8px; }
.nf-id-h { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--bd); }
.nf-id-row { display: flex; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.nf-id-row > span { color: #64748b; min-width: 90px; }
.nf-id-row > b { color: #0f172a; flex: 1; }
body.dark .nf-id-col { background: #0f172a; border-color: #334155; }
body.dark .nf-id-row > b { color: #f1f5f9; }
.nf-policy { margin-top: 16px; padding: 12px 16px; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 8px; }
.nf-policy-h { font-weight: 700; color: #581c87; margin-bottom: 6px; font-size: 12.5px; }
.nf-policy-body { font-size: 11.5px; line-height: 1.55; color: #4c1d95; white-space: pre-wrap; }
body.dark .nf-policy { background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.3); }
body.dark .nf-policy-h { color: #c4b5fd; }
body.dark .nf-policy-body { color: #ddd6fe; }
.nf-table th, .nf-table td { padding: 6px 8px !important; font-size: 10.5px !important; }
.nf-table th { background: var(--primary) !important; color: #fff !important; }

/* Editable amount cell — shown on screen as input, replaced by static value in print */
.ov-amount-cell { position: relative; }
.ov-amount-print { display: none; }
.ov-amount-edit { display: inline-flex; align-items: center; gap: 4px; }
.ov-amount-input { width: 110px; padding: 4px 6px; text-align: right; border: 1px solid var(--bd); border-radius: 4px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--primary); background: #fff; }
.ov-amount-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(10,92,46,.15); }
.ov-amount-flag { color: #b45309; font-weight: 700; cursor: help; }
body.dark .ov-amount-input { background: #1e293b; color: #34d399; border-color: #334155; }
@media print {
    .ov-amount-edit { display: none !important; }
    .ov-amount-print { display: inline !important; }
}
.ov-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 18px; padding: 12px 16px; background: #f8fafc; border: 1px solid var(--bd); border-radius: 8px; }
.ov-actions-hint { font-size: 11.5px; color: #64748b; flex: 1 1 auto; min-width: 200px; font-style: italic; }
.ov-overridden-badge { background: #fef3c7; color: #78350f; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
body.dark .ov-actions { background: #0f172a; border-color: #334155; }
body.dark .ov-actions-hint { color: #94a3b8; }
@media print { .ov-actions { display: none !important; } }

.calc-result-grid { display: flex; flex-direction: column; gap: 6px; }
.calc-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 12.5px; border-radius: 6px; }
.calc-row .cl { color: #64748b; }
.calc-row .cv { font-family: var(--mono); font-weight: 600; color: #0f172a; }
.calc-row .cv .dh { font-size: 10.5px; color: #94a3b8; font-weight: 500; margin-left: 4px; }
.calc-row-big { background: #eff6ff; padding: 12px 14px; }
.calc-row-big .cl { font-size: 12px; font-weight: 700; color: #1e40af; text-transform: uppercase; letter-spacing: .04em; }
.calc-row-big .cv { font-size: 16px; color: #1e40af; }
.calc-row-mid { background: #f8fafc; padding: 12px 14px; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); margin: 4px 0; }
.calc-row-mid .cl { font-weight: 700; color: #475569; }
.calc-row-mid .cv { font-size: 14px; }
.calc-row-net { background: #0a5c2e; color: #fff; padding: 14px; border-radius: 8px; margin-top: 6px; }
.calc-row-net .cl, .calc-row-net .cv { color: #fff !important; font-size: 16px; }
.calc-row-net .cv .dh { color: rgba(255,255,255,.7) !important; }
body.dark .calc-row .cv { color: #f1f5f9; }
body.dark .calc-row-big { background: rgba(59,130,246,.1); }
body.dark .calc-row-big .cl, body.dark .calc-row-big .cv { color: #93c5fd; }
body.dark .calc-row-mid { background: #0f172a; border-color: #334155; }
body.dark .calc-row-mid .cl { color: #cbd5e1; }

.calc-pat { margin-top: 18px; padding: 12px 14px; background: #fef3c7; border-radius: 8px; border: 1px solid #fde68a; }
.calc-pat-title { font-size: 11.5px; font-weight: 700; color: #92400e; margin-bottom: 8px; }
.calc-pat-grid { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; }
.calc-pat-grid > div { display: flex; flex-direction: column; }
.calc-pat-grid .cl { color: #92400e; opacity: .7; }
.calc-pat-grid .cv { font-weight: 700; color: #92400e; font-family: var(--mono); }
body.dark .calc-pat { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }
body.dark .calc-pat-title, body.dark .calc-pat-grid .cl, body.dark .calc-pat-grid .cv { color: #fbbf24; }

/* STC */
.stc-row td.stc-cell { background: #fef3c7; padding: 12px 18px; border-bottom: 1px solid #fde68a; }
.stc-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.stc-tag { background: #b45309; color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.stc-help { font-size: 11.5px; color: #92400e; }
.stc-grid { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.stc-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #92400e; }
.stc-grid label .pt-in { width: 110px; }
.stc-info { font-size: 11px; color: #92400e; font-style: italic; margin-left: auto; }
body.dark .stc-row td.stc-cell { background: rgba(245,158,11,.1); border-bottom-color: rgba(245,158,11,.3); }
body.dark .stc-help, body.dark .stc-grid label, body.dark .stc-info { color: #fbbf24; }

.bul-tl-stc { color: #b45309 !important; }
.bul-stc-section td { background: #fef3c7; color: #92400e; padding: 8px 10px !important; }
body.dark .bul-stc-section td { background: rgba(245,158,11,.15); color: #fbbf24; }

.print-banner-top, .print-banner-bot { display: block; width: 100%; max-height: 120px; object-fit: contain; margin-bottom: 12px; }
.print-banner-bot { margin-top: 14px; margin-bottom: 0; }

/* ══════ BULLETIN TEMPLATES — visually distinct ══════ */

/* ── Détaillé (default) — pro green-accent ── */
.bulletin.bulletin-tmpl-default { padding: 28px 32px; }
.bulletin.bulletin-tmpl-default .bulletin-hdr { border-bottom: 3px solid #0a5c2e; padding-bottom: 14px; margin-bottom: 18px; }
.bulletin.bulletin-tmpl-default .bul-tl1 {
    background: #0a5c2e; color: #fff !important; padding: 8px 18px; border-radius: 6px;
    font-size: 13px; letter-spacing: .08em; font-weight: 800;
}
.bulletin.bulletin-tmpl-default .bulletin-emp {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px 16px;
}
.bulletin.bulletin-tmpl-default .bul-table thead th {
    background: #0a5c2e; color: #fff; text-transform: uppercase;
    letter-spacing: .04em; font-size: 9.5px; padding: 8px 10px;
}
.bulletin.bulletin-tmpl-default .bul-table td:nth-child(2),
.bulletin.bulletin-tmpl-default .bul-table td:nth-child(3),
.bulletin.bulletin-tmpl-default .bul-table td:nth-child(4),
.bulletin.bulletin-tmpl-default .bul-table td:nth-child(5) { font-variant-numeric: tabular-nums; }
.bulletin.bulletin-tmpl-default .bul-row-tot td { background: #ecfdf5; color: #065f46; }
.bulletin.bulletin-tmpl-default .bul-row-net td {
    background: #0a5c2e; color: #fff; font-size: 14px; padding: 14px;
    border-radius: 0;
}
.bulletin.bulletin-tmpl-default .bul-ir-box {
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
}
.bulletin.bulletin-tmpl-default .bul-pat {
    background: #fefce8; border: 1px solid #fde68a; border-radius: 8px;
}

/* ── Compact — single-page, minimal chrome ── */
.bulletin.bulletin-tmpl-compact { padding: 16px 22px; max-width: 800px; }
.bulletin.bulletin-tmpl-compact .bulletin-hdr {
    border-bottom: 1px solid #94a3b8; padding-bottom: 8px; margin-bottom: 10px;
}
.bulletin.bulletin-tmpl-compact .bul-co { font-size: 14px; }
.bulletin.bulletin-tmpl-compact .bul-co-meta { font-size: 9.5px; }
.bulletin.bulletin-tmpl-compact .bul-tl1 { font-size: 13px; color: #475569 !important; }
.bulletin.bulletin-tmpl-compact .bul-tl3 { display: none; }
.bulletin.bulletin-tmpl-compact .bul-emp-photo { display: none; }
.bulletin.bulletin-tmpl-compact .bulletin-emp {
    padding: 8px 12px; background: #f8fafc; border-radius: 4px;
    border: 1px solid #e2e8f0;
}
.bulletin.bulletin-tmpl-compact .bul-emp-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bulletin.bulletin-tmpl-compact .bul-l { font-size: 8px; }
.bulletin.bulletin-tmpl-compact .bul-v { font-size: 11px; }
.bulletin.bulletin-tmpl-compact .bul-table { font-size: 10.5px; }
.bulletin.bulletin-tmpl-compact .bul-table thead th { padding: 4px 8px; }
.bulletin.bulletin-tmpl-compact .bul-table td { padding: 3px 8px; }
.bulletin.bulletin-tmpl-compact .bul-row-tot td { padding: 5px 8px; }
.bulletin.bulletin-tmpl-compact .bul-row-net td { padding: 7px 8px; font-size: 12px; }
.bulletin.bulletin-tmpl-compact .bul-ir-box,
.bulletin.bulletin-tmpl-compact .bul-pat { display: none; }
.bulletin.bulletin-tmpl-compact .bul-footer { font-size: 9px; margin-top: 10px; }
.bulletin.bulletin-tmpl-compact .bul-sig { min-height: 36px; }

/* ── Classique — formal black & white bordereau ── */
.bulletin.bulletin-tmpl-classique { padding: 24px 28px; font-family: 'Times New Roman', Cambria, Georgia, serif; }
.bulletin.bulletin-tmpl-classique .bulletin-hdr { border-bottom: 2px solid #000; padding-bottom: 12px; margin-bottom: 14px; }
.bulletin.bulletin-tmpl-classique .bul-co { font-family: 'Times New Roman', serif; font-weight: 700; font-size: 16px; }
.bulletin.bulletin-tmpl-classique .bul-co-meta { font-family: 'Times New Roman', serif; }
.bulletin.bulletin-tmpl-classique .bul-tl1 {
    background: #000; color: #fff !important; padding: 6px 16px; letter-spacing: .12em;
    font-size: 14px; font-weight: 700;
}
.bulletin.bulletin-tmpl-classique .bul-tl2 { font-style: italic; color: #000; }
.bulletin.bulletin-tmpl-classique .bulletin-emp {
    background: #fff; border: 1.5px solid #000; padding: 12px 14px; border-radius: 0;
}
.bulletin.bulletin-tmpl-classique .bul-emp-photo { border-radius: 0; border: 1px solid #000; }
.bulletin.bulletin-tmpl-classique .bul-table { border: 1.5px solid #000; }
.bulletin.bulletin-tmpl-classique .bul-table thead th {
    background: #000; color: #fff; text-transform: uppercase;
    border: 1px solid #000; font-family: 'Times New Roman', serif;
}
.bulletin.bulletin-tmpl-classique .bul-table td {
    border: 1px solid #000; font-family: 'Courier New', monospace;
}
.bulletin.bulletin-tmpl-classique .bul-row-tot td {
    background: #f1f5f9; border-top: 2px solid #000; border-bottom: 2px solid #000;
}
.bulletin.bulletin-tmpl-classique .bul-row-net td {
    background: #fff; color: #000; border: 3px double #000;
    text-transform: uppercase; letter-spacing: .04em;
}
.bulletin.bulletin-tmpl-classique .bul-ir-box {
    background: #fff; border: 1.5px dashed #000; border-radius: 0;
}
.bulletin.bulletin-tmpl-classique .bul-pat {
    background: #fff; border: 1.5px solid #000; border-radius: 0;
}
.bulletin.bulletin-tmpl-classique .bul-footer { border-top: 1px solid #000; padding-top: 10px; }
.bulletin.bulletin-tmpl-classique .bul-sig { border-top: 1.5px solid #000; }

/* ── Moderne — gradient violet, rounded cards ── */
.bulletin.bulletin-tmpl-moderne {
    padding: 28px 30px;
    background: linear-gradient(135deg, #fdfaff 0%, #fff 60%);
    border-radius: 20px;
    border: 1px solid #e9d5ff;
}
.bulletin.bulletin-tmpl-moderne .bulletin-hdr { border-bottom: 0; padding-bottom: 0; align-items: center; }
.bulletin.bulletin-tmpl-moderne .bul-co { color: #581c87; font-size: 18px; }
.bulletin.bulletin-tmpl-moderne .bul-tl1 {
    background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff !important;
    padding: 10px 22px; border-radius: 14px;
    font-size: 14px; letter-spacing: .04em; font-weight: 700;
    box-shadow: 0 4px 12px rgba(124,58,237,.25);
}
.bulletin.bulletin-tmpl-moderne .bul-tl3 {
    background: #fef3c7; color: #92400e; padding: 2px 10px; border-radius: 12px;
    display: inline-block; font-size: 9.5px;
}
.bulletin.bulletin-tmpl-moderne .bulletin-emp {
    background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
    border: 0; border-radius: 18px; padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(124,58,237,.08);
    margin-top: 16px;
}
.bulletin.bulletin-tmpl-moderne .bul-emp-photo {
    width: 96px; height: 96px; border-radius: 50%;
    box-shadow: 0 4px 12px rgba(124,58,237,.2);
    border: 4px solid #fff;
}
.bulletin.bulletin-tmpl-moderne .bul-table {
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    margin-top: 18px;
}
.bulletin.bulletin-tmpl-moderne .bul-table thead th {
    background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
    padding: 10px 12px;
}
.bulletin.bulletin-tmpl-moderne .bul-table td { padding: 8px 12px; }
.bulletin.bulletin-tmpl-moderne .bul-row-tot td {
    background: #faf5ff; color: #581c87; font-weight: 700;
}
.bulletin.bulletin-tmpl-moderne .bul-row-net td {
    background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
    font-size: 16px; padding: 16px;
}
.bulletin.bulletin-tmpl-moderne .bul-ir-box {
    background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 14px; padding: 16px 20px;
}
.bulletin.bulletin-tmpl-moderne .bul-ir-title { color: #7c3aed; }
.bulletin.bulletin-tmpl-moderne .bul-pat {
    background: #fefce8; border: 1px solid #fde68a; border-radius: 14px; padding: 14px 18px;
}

/* ── Minimal — pure data, no chrome ── */
.bulletin.bulletin-tmpl-minimal { padding: 12px 16px; max-width: 700px; font-size: 10.5px; }
.bulletin.bulletin-tmpl-minimal .bulletin-hdr {
    border-bottom: 1px solid #cbd5e1; padding-bottom: 6px; margin-bottom: 8px;
}
.bulletin.bulletin-tmpl-minimal .bul-co { font-size: 13px; font-weight: 700; }
.bulletin.bulletin-tmpl-minimal .bul-co-meta { font-size: 9px; }
.bulletin.bulletin-tmpl-minimal .bul-tl1 {
    color: #475569 !important; font-size: 11px; font-weight: 600;
    border: 0; padding: 0;
}
.bulletin.bulletin-tmpl-minimal .bul-tl2 { font-size: 10px; }
.bulletin.bulletin-tmpl-minimal .bul-tl3 { display: none; }
.bulletin.bulletin-tmpl-minimal .bul-emp-photo { display: none; }
.bulletin.bulletin-tmpl-minimal .bulletin-emp {
    padding: 4px 0; background: transparent; border: 0; border-bottom: 1px dashed #cbd5e1;
    margin-bottom: 6px;
}
.bulletin.bulletin-tmpl-minimal .bul-emp-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.bulletin.bulletin-tmpl-minimal .bul-l { font-size: 8px; }
.bulletin.bulletin-tmpl-minimal .bul-v { font-size: 10.5px; }
.bulletin.bulletin-tmpl-minimal .bul-table { font-size: 10px; border-top: 1px solid #cbd5e1; }
.bulletin.bulletin-tmpl-minimal .bul-table thead th {
    background: transparent; color: #1e293b;
    border-bottom: 1px solid #94a3b8; padding: 4px 6px;
}
.bulletin.bulletin-tmpl-minimal .bul-table td {
    padding: 2px 6px; border-bottom: 1px solid #f1f5f9;
}
.bulletin.bulletin-tmpl-minimal .bul-row-tot,
.bulletin.bulletin-tmpl-minimal .bul-ir-box,
.bulletin.bulletin-tmpl-minimal .bul-pat { display: none; }
.bulletin.bulletin-tmpl-minimal .bul-row-net td {
    background: transparent; color: #0a5c2e; font-size: 12px; font-weight: 800;
    border-top: 2px solid #0a5c2e; padding: 6px;
}
.bulletin.bulletin-tmpl-minimal .bul-footer {
    font-size: 8.5px; grid-template-columns: 1fr 1fr; margin-top: 12px;
}
.bulletin.bulletin-tmpl-minimal .bul-sig { display: none; }
.bulletin.bulletin-tmpl-minimal .bul-stc-section,
.bulletin.bulletin-tmpl-minimal .print-banner-top,
.bulletin.bulletin-tmpl-minimal .print-banner-bot { display: none; }

/* Dark-mode adjustments for templates (screen only) */
body.dark .bulletin.bulletin-tmpl-moderne { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-color: rgba(124,58,237,.3); }
body.dark .bulletin.bulletin-tmpl-moderne .bul-co { color: #c4b5fd; }
body.dark .bulletin.bulletin-tmpl-moderne .bulletin-emp { background: rgba(124,58,237,.12); }
body.dark .bulletin.bulletin-tmpl-moderne .bul-ir-box { background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.3); }
body.dark .bulletin.bulletin-tmpl-classique { background: #1e293b; }
body.dark .bulletin.bulletin-tmpl-classique * { color: #f1f5f9 !important; border-color: #f1f5f9 !important; }
body.dark .bulletin.bulletin-tmpl-classique .bul-tl1,
body.dark .bulletin.bulletin-tmpl-classique .bul-table thead th { background: #f1f5f9 !important; color: #0f172a !important; }

/* ══════ JOURNAL / LIVRE / CONGÉS — TEMPLATES ══════ */

/* ── Standard (default) — pro green ── */
.print-tmpl-default .print-hdr { border-bottom: 3px solid #0a5c2e; padding-bottom: 14px; margin-bottom: 18px; }
.print-tmpl-default .pt-tl1 {
    background: #0a5c2e; color: #fff; padding: 8px 16px; border-radius: 6px;
    font-size: 14px; letter-spacing: .06em; display: inline-block;
}
.print-tmpl-default .print-table thead th {
    background: #0a5c2e; color: #fff; padding: 10px 8px;
    text-transform: uppercase; letter-spacing: .03em; font-size: 10px;
}
.print-tmpl-default .print-table tbody tr:nth-child(even) { background: #f8fafc; }
.print-tmpl-default .print-table tfoot td { background: #ecfdf5; color: #065f46; }

/* ── Compact ── */
.print-tmpl-compact { padding: 16px 22px !important; }
.print-tmpl-compact .print-hdr { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid #94a3b8; }
.print-tmpl-compact .print-co { font-size: 14px; }
.print-tmpl-compact .print-co-meta { font-size: 9.5px; }
.print-tmpl-compact .pt-tl1 { font-size: 12px; color: #475569; }
.print-tmpl-compact .pt-tl2 { font-size: 11px; }
.print-tmpl-compact .print-table { font-size: 9.5px; }
.print-tmpl-compact .print-table th { padding: 4px 6px; }
.print-tmpl-compact .print-table td { padding: 3px 6px; }
.print-tmpl-compact .print-summary { display: none; }
.print-tmpl-compact .print-foot { font-size: 9px; margin-top: 10px; }

/* ── Paysage ── */
.print-tmpl-landscape .print-hdr { border-bottom: 3px solid #0a5c2e; padding-bottom: 12px; margin-bottom: 14px; }
.print-tmpl-landscape .pt-tl1 {
    background: #0a5c2e; color: #fff; padding: 6px 14px; border-radius: 4px;
    font-size: 13px; display: inline-block;
}
.print-tmpl-landscape .print-table { font-size: 11px; }
.print-tmpl-landscape .print-table thead th {
    background: #0a5c2e; color: #fff; padding: 8px;
}
.print-tmpl-landscape .print-table tbody tr:nth-child(even) { background: #f8fafc; }
.print-tmpl-landscape .print-table tfoot td { background: #d1fae5; color: #065f46; }
.print-tmpl-landscape .livre-table { font-size: 10px; }

/* ── Minimal ── */
.print-tmpl-minimal { padding: 14px 18px !important; max-width: 720px; }
.print-tmpl-minimal .print-hdr { border-bottom: 1px solid #cbd5e1; padding-bottom: 6px; margin-bottom: 8px; }
.print-tmpl-minimal .print-logo { display: none; }
.print-tmpl-minimal .print-co { font-size: 13px; }
.print-tmpl-minimal .print-co-meta { font-size: 9px; }
.print-tmpl-minimal .pt-tl1 { font-size: 11px; color: #475569; }
.print-tmpl-minimal .print-table { font-size: 10px; border-top: 1px solid #cbd5e1; }
.print-tmpl-minimal .print-table thead th {
    background: transparent; color: #1e293b;
    border-bottom: 1px solid #94a3b8; padding: 4px 6px;
}
.print-tmpl-minimal .print-table td { padding: 2px 6px; border: 0; border-bottom: 1px solid #f1f5f9; }
.print-tmpl-minimal .print-table tfoot td {
    background: transparent; color: #0a5c2e; border-top: 2px solid #0a5c2e;
    font-size: 11px; padding: 5px 6px;
}
.print-tmpl-minimal .print-table tbody tr:nth-child(even) { background: transparent; }
.print-tmpl-minimal .print-summary { display: none; }
.print-tmpl-minimal .print-banner-top, .print-tmpl-minimal .print-banner-bot { display: none; }

/* For minimal of Journal: keep employee + net only */
.print-tmpl-minimal.j-minimal .print-table .col-pat { display: none; }

/* État des congés — hide month columns in compact / minimal */
.print-tmpl-compact .conges-table .c-monthly,
.print-tmpl-minimal .conges-table .c-monthly { display: none; }
/* In moderne, render as soft cells */
.print-tmpl-moderne .conges-table .c-monthly { font-size: 9px; opacity: .8; }

/* ── Moderne ── */
.print-tmpl-moderne {
    background: linear-gradient(135deg, #fdfaff 0%, #fff 60%);
    border-radius: 20px; border: 1px solid #e9d5ff;
}
.print-tmpl-moderne .print-hdr { border-bottom: 0; padding-bottom: 4px; align-items: center; }
.print-tmpl-moderne .print-co { color: #581c87; font-size: 18px; }
.print-tmpl-moderne .pt-tl1 {
    background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
    padding: 10px 22px; border-radius: 14px;
    font-size: 14px; letter-spacing: .04em; display: inline-block;
    box-shadow: 0 4px 12px rgba(124,58,237,.25);
}
.print-tmpl-moderne .pt-tl2 { font-style: italic; color: #6b21a8; }
.print-tmpl-moderne .print-table {
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    margin-top: 14px;
}
.print-tmpl-moderne .print-table thead th {
    background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
    padding: 10px 12px;
}
.print-tmpl-moderne .print-table tbody tr:nth-child(even) { background: #faf5ff; }
.print-tmpl-moderne .print-table tfoot td { background: #f3e8ff; color: #581c87; }
.print-tmpl-moderne .print-summary h3 { color: #7c3aed; }
.print-tmpl-moderne .print-table-mini th { background: #faf5ff; }
.print-tmpl-moderne .print-table-mini tr.big th,
.print-tmpl-moderne .print-table-mini tr.big td {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

body.dark .print-tmpl-moderne { background: linear-gradient(135deg, #1e1b4b 0%, #1e293b 100%); border-color: rgba(124,58,237,.3); }
body.dark .print-tmpl-moderne .print-co { color: #c4b5fd; }

/* Template picker */
.tpl-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: #fff; border: 1px solid var(--bd); border-radius: 10px; margin-bottom: 14px; }
.tpl-picker-lbl { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.tpl-picker-tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.tpl-tab { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #f1f5f9; border-radius: 16px; font-size: 12px; font-weight: 600; color: #475569; text-decoration: none; transition: all .12s; }
.tpl-tab:hover { background: #e2e8f0; color: #0f172a; transform: translateY(-1px); }
.tpl-tab.active { background: var(--primary); color: #fff; box-shadow: 0 2px 4px rgba(10,92,46,.2); }
.tpl-default { font-size: 9px; padding: 1px 5px; background: rgba(255,255,255,.25); border-radius: 6px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.tpl-tab:not(.active) .tpl-default { background: #fef3c7; color: #b45309; }
body.dark .tpl-picker { background: #1e293b; border-color: #334155; }
body.dark .tpl-picker-lbl { color: #94a3b8; }
body.dark .tpl-tab { background: #0f172a; color: #94a3b8; }
body.dark .tpl-tab:hover { background: #273449; color: #f1f5f9; }
body.dark .tpl-tab.active { background: #34d399; color: #0f172a; }
body.dark .tpl-tab:not(.active) .tpl-default { background: rgba(245,158,11,.2); color: #fbbf24; }

.bul-co-block, .print-co-block { display: flex; align-items: center; gap: 14px; }
.bul-logo { max-width: 90px; max-height: 70px; object-fit: contain; }
.print-logo { max-width: 110px; max-height: 80px; object-fit: contain; }
.bul-co-custom, .print-co-custom { font-size: 10.5px; color: #475569; margin-top: 4px; white-space: pre-wrap; line-height: 1.4; }
body.dark .bul-co-custom, body.dark .print-co-custom { color: #94a3b8; }

.bul-emp-photo { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; margin-right: 14px; float: left; }
.bul-emp-photo img { width: 100%; height: 100%; object-fit: cover; }
.bulletin-emp { display: flex; align-items: flex-start; }
.emp-name { font-weight: 700; color: #0f172a; font-size: 13px; }
.emp-meta { font-size: 11.5px; color: #64748b; margin-top: 1px; }
.emp-type { display: inline-block; padding: 2px 8px; font-size: 10.5px; font-weight: 700; border-radius: 4px; background: #eff6ff; color: #1d4ed8; }
.emp-type-po { background: #fef3c7; color: #b45309; }
.emp-type-stg { background: #f3e8ff; color: #7c3aed; }
.dh { font-size: 10.5px; color: #94a3b8; font-weight: 500; }
body.dark .emp-table-wrap { background: #1e293b; border-color: #334155; }
body.dark .emp-table th { background: #0f172a; color: #94a3b8; border-bottom-color: #334155; }
body.dark .emp-table td { border-bottom-color: #273449; }
body.dark .emp-table tbody tr:hover { background: #273449; }
body.dark .emp-table code { background: #0f172a; color: #93c5fd; }
body.dark .emp-name { color: #f1f5f9; }
body.dark .emp-meta { color: #94a3b8; }
body.dark .emp-type { background: rgba(59,130,246,.15); color: #60a5fa; }
body.dark .emp-type-po { background: rgba(245,158,11,.15); color: #fbbf24; }
body.dark .emp-type-stg { background: rgba(139,92,246,.15); color: #a78bfa; }

/* ══════ PAYROLL MONTHS INDEX ══════ */
.paie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.paie-tile { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1.5px solid var(--bd); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: inherit; transition: all .15s; min-height: 140px; }
.paie-tile:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(10,92,46,.1); }
.paie-tile.current { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-l); }
.paie-tile-hdr { display: flex; justify-content: space-between; align-items: center; }
.paie-tile-m { font-size: 14px; font-weight: 700; color: #0f172a; }
.paie-tile-pill { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
.paie-tile-pill.pill-empty  { background: #f1f5f9; color: #64748b; }
.paie-tile-pill.pill-draft  { background: #fef3c7; color: #b45309; }
.paie-tile-pill.pill-done   { background: #d1fae5; color: #065f46; }
.paie-tile-main { }
.paie-kpi { font-size: 11.5px; color: #64748b; }
.paie-kpi span { font-weight: 700; color: #0f172a; }
.paie-amt { font-size: 20px; font-weight: 800; color: #0f172a; margin-top: 6px; }
.paie-amt .dh { font-size: 11.5px; }
.paie-sub { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.paie-tile-ftr { display: flex; gap: 14px; font-size: 11px; color: #64748b; border-top: 1px dashed var(--bd); padding-top: 8px; margin-top: auto; }
.paie-tile-empty { display: flex; align-items: center; justify-content: center; flex: 1; color: #94a3b8; font-size: 12.5px; font-style: italic; }
.paie-tile.paie-finalized { background: linear-gradient(135deg, #d1fae5 0%, #fff 100%); border-color: #6ee7b7; }
.paie-tile.paie-future { background: #f8fafc; opacity: .6; }
body.dark .paie-tile { background: #1e293b; border-color: #334155; }
body.dark .paie-tile:hover { border-color: #34d399; box-shadow: 0 4px 12px rgba(52,211,153,.15); }
body.dark .paie-tile.current { border-color: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.15); }
body.dark .paie-tile-m, body.dark .paie-amt { color: #f1f5f9; }
body.dark .paie-kpi { color: #94a3b8; }
body.dark .paie-kpi span { color: #f1f5f9; }
body.dark .paie-sub { color: #64748b; }
body.dark .paie-tile-ftr { border-top-color: #334155; color: #94a3b8; }
body.dark .paie-tile-pill.pill-empty { background: #0f172a; color: #94a3b8; }
body.dark .paie-tile-pill.pill-draft { background: rgba(245,158,11,.2); color: #fbbf24; }
body.dark .paie-tile-pill.pill-done { background: rgba(52,211,153,.2); color: #34d399; }
body.dark .paie-tile.paie-finalized { background: linear-gradient(135deg, rgba(52,211,153,.15) 0%, #1e293b 100%); border-color: #34d399; }
body.dark .paie-tile.paie-future { background: #0f172a; opacity: .5; }

/* ══════ PAYROLL EDIT GRID ══════ */
.paie-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.paie-kpis .kpi-card { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; }
.paie-kpis .k-ico { font-size: 22px; }
.paie-kpis .k-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 600; }
.paie-kpis .k-n { font-size: 16px; font-weight: 800; color: #0f172a; margin-top: 2px; }
.paie-kpis .k-n .dh { font-size: 10.5px; }
body.dark .paie-kpis .kpi-card { background: #1e293b; border-color: #334155; }
body.dark .paie-kpis .k-n { color: #f1f5f9; }
body.dark .paie-kpis .k-l { color: #94a3b8; }

.paie-table-hint { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; font-size: 12.5px; }
.paie-table-hint-warning { background: #fef3c7; border-color: #fde68a; color: #92400e; }
body.dark .paie-table-hint { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); color: #93c5fd; }
body.dark .paie-table-hint-warning { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #fbbf24; }

.paie-table-wrap { background: #fff; border: 1px solid var(--bd); border-radius: 10px; overflow-x: auto; }
.paie-table { border-collapse: collapse; font-size: 11.5px; width: 100%; min-width: 1400px; }
.paie-table thead th { background: #f8fafc; font-weight: 700; color: #334155; padding: 8px 6px; border-bottom: 1px solid var(--bd); border-right: 1px solid #e2e8f0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; text-align: center; white-space: nowrap; }
.paie-table thead th:last-child { border-right: 0; }
.paie-table td { padding: 6px 6px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f8fafc; vertical-align: middle; white-space: nowrap; }
.paie-table td.col-n { text-align: center; color: #94a3b8; font-weight: 600; width: 34px; }
.paie-table td.col-calc { background: #f8fafc; color: #334155; font-family: var(--mono); font-size: 11.5px; text-align: right; padding-right: 10px; }
.paie-table td.col-net { background: #ecfdf5; color: #065f46; font-weight: 700; }
.paie-table tbody tr:hover td:not(.col-calc):not(.col-net) { background: #fafbfc; }
.paie-table tfoot td { background: #0a5c2e; color: #fff; font-weight: 700; padding: 12px 10px; font-size: 12.5px; }
.paie-table tfoot td.col-calc { background: #065f46; color: #fff; }
.paie-table tfoot td.col-net { background: #0a5c2e; color: #fff; font-size: 14px; }
.paie-emp-name { font-weight: 700; color: #0f172a; font-size: 12.5px; }
.paie-emp-meta { font-size: 10.5px; color: #64748b; margin-top: 1px; }
.pt-in { width: 68px; border: 1px solid var(--bd); border-radius: 4px; padding: 4px 6px; font-size: 11.5px; text-align: right; font-family: var(--mono); background: #fff; color: #0f172a; }
.pt-in:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-l); }
.pt-in:disabled { background: #f1f5f9; color: #94a3b8; }
body.dark .paie-table-wrap { background: #1e293b; border-color: #334155; }
body.dark .paie-table thead th { background: #0f172a; color: #cbd5e1; border-bottom-color: #334155; border-right-color: #273449; }
body.dark .paie-table td { border-bottom-color: #273449; border-right-color: #1e293b; }
body.dark .paie-table td.col-calc { background: #0f172a; color: #cbd5e1; }
body.dark .paie-table td.col-net { background: rgba(52,211,153,.15); color: #34d399; }
body.dark .paie-table tbody tr:hover td:not(.col-calc):not(.col-net) { background: #273449; }
body.dark .paie-emp-name { color: #f1f5f9; }
body.dark .paie-emp-meta { color: #94a3b8; }
body.dark .pt-in { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark .pt-in:focus { border-color: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,.2); }
body.dark .pt-in:disabled { background: #0f172a; color: #64748b; }

.paie-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 0; position: sticky; bottom: 0; background: linear-gradient(0deg, var(--bg) 65%, transparent); }

.menu-item-soon { opacity: .7; }
.menu-item-soon:hover { opacity: 1; }
.menu-soon { margin-left: auto; font-size: 9.5px; background: #fef3c7; color: #b45309; padding: 1px 6px; border-radius: 8px; font-weight: 700; letter-spacing: .03em; }
body.dark .menu-soon { background: rgba(245,158,11,.2); color: #fbbf24; }

/* ══════ PAYROLL SETTINGS ══════ */
.paie-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 14px 0 16px; border-bottom: 1px solid var(--bd); padding-bottom: 0; }
.paie-tab { padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: #64748b; text-decoration: none; border-bottom: 2px solid transparent; transition: all .12s; }
.paie-tab:hover { color: #0f172a; background: #f8fafc; }
.paie-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
body.dark .paie-tabs { border-bottom-color: #334155; }
body.dark .paie-tab { color: #94a3b8; }
body.dark .paie-tab:hover { color: #f1f5f9; background: #1e293b; }
body.dark .paie-tab.active { color: #34d399; border-bottom-color: #34d399; }

.paie-pane { display: none; }
.paie-pane.active { display: block; }

.paie-card { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 20px 24px; margin-bottom: 14px; }
.paie-card-hdr { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bd); }
.paie-card-hdr h3 { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; }
.paie-card-hdr p { margin: 4px 0 0; font-size: 12px; color: #64748b; line-height: 1.5; }
body.dark .paie-card { background: #1e293b; border-color: #334155; }
body.dark .paie-card-hdr { border-bottom-color: #334155; }
body.dark .paie-card-hdr h3 { color: #f1f5f9; }
body.dark .paie-card-hdr p { color: #94a3b8; }

.bracket-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.bracket-table th { background: #f8fafc; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #64748b; font-weight: 700; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--bd); }
.bracket-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.bracket-table td:first-child { color: #94a3b8; font-weight: 600; width: 40px; text-align: center; }
.bracket-table input { width: 100%; padding: 6px 8px; border: 1px solid var(--bd); border-radius: 6px; font-size: 12px; font-family: var(--mono); }
.bracket-table input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-l); }
body.dark .bracket-table th { background: #0f172a; color: #94a3b8; border-bottom-color: #334155; }
body.dark .bracket-table td { border-bottom-color: #273449; }
body.dark .bracket-table input { background: #0f172a; border-color: #334155; color: #e2e8f0; }

/* Configurer colonnes modal */
.cols-modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.6); z-index: 1000; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.cols-modal.show { display: flex; }
.cols-modal-bd { background: #fff; border-radius: 16px; max-width: 900px; width: 100%; padding: 24px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.cols-modal-hdr { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bd); }
.cols-modal-hdr h3 { margin: 0; font-size: 16px; }
.cols-modal-close { background: transparent; border: 0; font-size: 20px; cursor: pointer; color: #64748b; }
.cols-modal-close:hover { color: #0f172a; }
.cols-modal-section-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 700; margin: 18px 0 8px; }
.cols-modal-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--bd); margin-top: 16px; }
body.dark .cols-modal-bd { background: #1e293b; }
body.dark .cols-modal-hdr { border-bottom-color: #334155; }
body.dark .cols-modal-hdr h3 { color: #f1f5f9; }
body.dark .cols-modal-section-lbl { color: #94a3b8; }
body.dark .cols-modal-actions { border-top-color: #334155; }

.cols-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.col-toggle { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #f8fafc; border: 1.5px solid var(--bd); border-radius: 10px; cursor: pointer; user-select: none; transition: all .12s; }
.col-toggle:has(input:checked) { background: var(--primary-l); border-color: var(--primary); }
.col-toggle input { display: none; }
.col-toggle-body { flex: 1; min-width: 0; }
.col-toggle-name { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.col-toggle-desc { font-size: 11px; color: #64748b; margin-top: 1px; }
.col-toggle-sw { width: 32px; height: 18px; background: #cbd5e1; border-radius: 9px; position: relative; flex-shrink: 0; transition: all .12s; }
.col-toggle-sw span { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: all .12s; }
.col-toggle:has(input:checked) .col-toggle-sw { background: var(--primary); }
.col-toggle:has(input:checked) .col-toggle-sw span { left: 16px; }
body.dark .col-toggle { background: #0f172a; border-color: #334155; }
body.dark .col-toggle:has(input:checked) { background: rgba(52,211,153,.12); border-color: #34d399; }
body.dark .col-toggle-name { color: #f1f5f9; }
body.dark .col-toggle-desc { color: #94a3b8; }
body.dark .col-toggle:has(input:checked) .col-toggle-sw { background: #34d399; }

.comps-list { display: flex; flex-direction: column; gap: 6px; }
.comps-empty { font-size: 12px; color: #94a3b8; padding: 12px; background: #f8fafc; border: 1px dashed var(--bd); border-radius: 8px; line-height: 1.5; }
.comp-row { display: grid; grid-template-columns: 100px 1fr 110px 110px 100px; gap: 8px; align-items: center; }
.comp-row input, .comp-row select { width: 100%; padding: 7px 9px; border: 1px solid var(--bd); border-radius: 6px; font-size: 12px; }
.comp-row input:focus, .comp-row select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-l); }
.comp-del { font-size: 11px; color: #b91c1c; display: flex; align-items: center; gap: 4px; }
body.dark .comps-empty { background: #0f172a; color: #64748b; }
body.dark .comp-row input, body.dark .comp-row select { background: #0f172a; border-color: #334155; color: #e2e8f0; }
body.dark .comp-del { color: #fca5a5; }

/* ══════ PRINTABLE DOCUMENTS (Bulletin / Journal / Livre) ══════ */
.print-doc { background: #fff; padding: 28px 32px; border: 1px solid var(--bd); border-radius: 12px; max-width: 1200px; margin: 0 auto; }
.print-hdr { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 2px solid #0a5c2e; }
.print-co { font-size: 18px; font-weight: 800; color: #0f172a; }
.print-co-meta { font-size: 11px; color: #64748b; margin-top: 4px; }
.print-title { text-align: right; }
.pt-tl1 { font-size: 16px; font-weight: 800; color: #0a5c2e; letter-spacing: .04em; }
.pt-tl2 { font-size: 13px; color: #475569; margin-top: 4px; }
.print-foot { text-align: center; font-size: 10px; color: #94a3b8; margin-top: 18px; padding-top: 10px; border-top: 1px solid #e2e8f0; }

.print-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 14px; }
.print-table th, .print-table td { padding: 6px 8px; border: 1px solid #cbd5e1; }
.print-table thead th { background: #0a5c2e; color: #fff; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.print-table tbody tr:nth-child(even) { background: #f8fafc; }
.print-table .num { text-align: right; font-family: var(--mono); }
.print-table tfoot td { background: #ecfdf5; font-weight: 700; }

.print-summary { margin-top: 16px; }
.print-summary h3 { font-size: 12px; color: #0a5c2e; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-bottom: 8px; }
.print-table-mini { width: 60%; border-collapse: collapse; font-size: 11.5px; }
.print-table-mini th { background: #f8fafc; font-weight: 600; padding: 6px 10px; border: 1px solid #cbd5e1; text-align: left; }
.print-table-mini td { padding: 6px 10px; border: 1px solid #cbd5e1; }
.print-table-mini tr.big th, .print-table-mini tr.big td { background: #0a5c2e; color: #fff; }
.print-table-mini .num { text-align: right; font-family: var(--mono); }

.livre-table { font-size: 10px; }
.livre-table td, .livre-table th { padding: 4px 6px; }

body.dark .print-doc { background: #1e293b; border-color: #334155; }
body.dark .print-co { color: #f1f5f9; }
body.dark .print-co-meta { color: #94a3b8; }
body.dark .pt-tl2 { color: #cbd5e1; }
body.dark .print-table th, body.dark .print-table td { border-color: #334155; }
body.dark .print-table tbody tr:nth-child(even) { background: #0f172a; }
body.dark .print-table tfoot td { background: rgba(52,211,153,.15); color: #d1fae5; }
body.dark .print-table-mini th, body.dark .print-table-mini td { border-color: #334155; }
body.dark .print-table-mini th { background: #0f172a; color: #cbd5e1; }
body.dark .print-foot { color: #64748b; border-top-color: #334155; }

/* ── BULLETIN ── */
.bulletin-list { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 18px 22px; margin-bottom: 14px; }
.bulletin-list-info { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 10px 14px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
body.dark .bulletin-list-info { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.3); color: #a7f3d0; }
body.dark .bulletin-list { background: #1e293b; border-color: #334155; }
.bulletin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.bulletin-card { display: block; padding: 12px 14px; background: #f8fafc; border: 1.5px solid var(--bd); border-radius: 8px; text-decoration: none; color: inherit; transition: all .12s; }
.bulletin-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.bc-name { font-weight: 700; font-size: 13px; color: #0f172a; }
.bc-meta { font-size: 11px; color: #64748b; margin: 2px 0 6px; }
.bc-net { font-size: 14px; font-weight: 700; color: var(--primary); }
.bc-net .dh { font-size: 10.5px; color: #94a3b8; font-weight: 500; margin-left: 4px; }
body.dark .bulletin-card { background: #0f172a; border-color: #334155; }
body.dark .bulletin-card:hover { border-color: #34d399; }
body.dark .bc-name { color: #f1f5f9; }
body.dark .bc-meta { color: #94a3b8; }
body.dark .bc-net { color: #34d399; }

/* Bulletin search bar (filters cards by nom/CIN/matricule/fonction) */
.bulletin-search { display: flex; align-items: center; gap: 14px; margin: 8px 0 14px; padding: 10px 14px; background: #f8fafc; border: 1px solid var(--bd); border-radius: 10px; }
.bul-search-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.bul-search-ico { position: absolute; left: 12px; font-size: 14px; color: #94a3b8; pointer-events: none; }
.bul-search-wrap input { width: 100%; padding: 9px 36px 9px 36px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; font-size: 13px; transition: border-color .12s, box-shadow .12s; }
.bul-search-wrap input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10,92,46,.12); }
.bul-search-clear { position: absolute; right: 8px; width: 22px; height: 22px; border: none; background: #e2e8f0; color: #475569; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.bul-search-clear:hover { background: #cbd5e1; }
.bul-search-count { font-size: 12px; font-weight: 600; color: #64748b; white-space: nowrap; }
.bul-search-empty { padding: 24px; background: #fef3c7; border: 1px solid #fbbf24; border-radius: 8px; text-align: center; font-size: 13px; color: #78350f; margin-top: 8px; }
body.dark .bulletin-search { background: #0f172a; border-color: #334155; }
body.dark .bul-search-wrap input { background: #1e293b; border-color: #334155; color: #f1f5f9; }
body.dark .bul-search-wrap input:focus { border-color: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
body.dark .bul-search-clear { background: #334155; color: #cbd5e1; }
body.dark .bul-search-empty { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); color: #fde68a; }

.bulletin {
    background: #fff; border: 1px solid var(--bd); border-radius: 12px;
    padding: 22px 26px; margin-bottom: 14px;
    max-width: 900px; margin-left: auto; margin-right: auto;
    page-break-after: always;
    box-sizing: border-box;
    line-height: 1.45;
}
/* When in the screen frame layout — match A4 width for previewing the actual print size */
.bul-frame .bulletin { width: 210mm; padding: 14mm 14mm; border-radius: 0; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.bulletin-hdr { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid #0a5c2e; }
.bul-co { font-size: 14px; font-weight: 800; color: #0f172a; }
.bul-co-meta { font-size: 9.5px; color: #64748b; margin-top: 2px; }
.bul-co-meta span { margin-right: 12px; }
.bul-title { text-align: right; }
.bul-tl1 { font-size: 15px; font-weight: 800; color: #0a5c2e; letter-spacing: .04em; }
.bul-tl2 { font-size: 13px; color: #475569; margin-top: 3px; }
.bul-tl3 { font-size: 11px; color: #b45309; margin-top: 3px; font-weight: 600; }
.bulletin-emp { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.bul-emp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bul-l { font-size: 9px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.bul-v { font-size: 11px; color: #0f172a; margin-top: 1px; line-height: 1.3; }
.bul-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 10.5px; }
.bul-table thead th { background: #0a5c2e; color: #fff; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; padding: 5px 8px; text-align: left; }
.bul-table thead th:nth-child(2), .bul-table thead th:nth-child(3), .bul-table thead th:nth-child(4), .bul-table thead th:nth-child(5) { text-align: right; }
.bul-table td { padding: 4px 8px; border-bottom: 1px solid #f1f5f9; }
.bul-table td:nth-child(2), .bul-table td:nth-child(3), .bul-table td:nth-child(4), .bul-table td:nth-child(5) { text-align: right; font-family: var(--mono); }
.bul-row-tot td { background: #f1f5f9; font-weight: 700; padding: 6px 8px; }
.bul-row-net td { background: #0a5c2e; color: #fff; font-size: 12.5px; padding: 9px 8px; }
.bul-tag { font-size: 9px; opacity: .7; margin-left: 4px; }
/* Frame: bulletin (left, fixed-A4-width) + IR side info (right, on screen) */
.bul-frame { display: flex; gap: 18px; align-items: flex-start; max-width: 1200px; margin: 0 auto 24px; }
.bul-frame .bulletin { flex: 0 0 auto; width: 210mm; max-width: 100%; }
.bul-frame .bul-side-info { flex: 1 1 0; min-width: 240px; max-width: 340px; position: sticky; top: 80px; }
@media (max-width: 1100px) {
    .bul-frame { flex-direction: column; }
    .bul-frame .bul-side-info { max-width: none; position: static; width: 100%; }
    .bul-frame .bulletin { width: 100%; }
}

.bul-ir-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 14px 16px; }
.bul-ir-title { font-size: 12px; font-weight: 700; color: #1e40af; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.bul-ir-hint { font-size: 10px; font-weight: 500; color: #64748b; font-style: italic; margin-bottom: 10px; }
.bul-ir-list { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; }
.bir-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.bir-l { color: #475569; flex: 1; padding-right: 8px; }
.bir-v { font-family: var(--mono); color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bir-sep { height: 1px; background: #bfdbfe; margin: 4px 0; }
.bir-final { background: #dbeafe; padding: 6px 8px; border-radius: 6px; font-size: 11.5px; }
.bir-final .bir-l { color: #1e40af; font-weight: 600; }
.bir-final .bir-v b { color: #0a5c2e; font-size: 13px; }

body.dark .bul-ir-box { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); }
body.dark .bul-ir-title { color: #93c5fd; }
body.dark .bul-ir-hint { color: #94a3b8; }
body.dark .bir-l { color: #94a3b8; }
body.dark .bir-v { color: #e2e8f0; }
body.dark .bir-sep { background: rgba(59,130,246,.3); }
body.dark .bir-final { background: rgba(59,130,246,.2); }
body.dark .bir-final .bir-l { color: #93c5fd; }
body.dark .bir-final .bir-v b { color: #34d399; }
.bul-pat { background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.bul-pat-title { font-size: 10.5px; font-weight: 700; color: #92400e; margin-bottom: 6px; }
.bul-pat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-size: 10.5px; }
.bul-pat-grid .bul-l { font-size: 8.5px; }
.bul-pat-grid .bul-v { font-size: 11px; }
.bul-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; margin-top: 14px; font-size: 9.5px; color: #64748b; }
.bul-sig { border-top: 1px solid #cbd5e1; padding-top: 3px; text-align: center; min-height: 38px; }
.bul-edited { text-align: center; font-size: 9.5px; color: #94a3b8; margin-top: auto; padding-top: 14px; border-top: 1px dashed #e2e8f0; font-style: italic; }
body.dark .bul-edited { color: #64748b; border-top-color: #334155; }

/* « Édité le … » — anchored to the bottom of the document during PDF/print
   (the helper sets the parent to flex-column with full A4 height, so
   margin-top:auto pushes this line to the page bottom). On screen we just
   show it under the content as a normal footer line. */
.doc-edited { text-align: center; font-size: 9.5px; color: #94a3b8; margin-top: auto; padding-top: 14px; border-top: 1px dashed #e2e8f0; font-style: italic; }
body.dark .doc-edited { color: #64748b; border-top-color: #334155; }

body.dark .bulletin { background: #1e293b; border-color: #334155; }
body.dark .bul-co { color: #f1f5f9; }
body.dark .bul-co-meta { color: #94a3b8; }
body.dark .bulletin-emp { background: #0f172a; border-color: #334155; }
body.dark .bul-l { color: #64748b; }
body.dark .bul-v { color: #f1f5f9; }
body.dark .bul-table td { border-bottom-color: #273449; color: #cbd5e1; }
body.dark .bul-row-tot td { background: #0f172a; }
body.dark .bul-ir-box { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); }
body.dark .bul-pat { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }
body.dark .bul-footer { color: #94a3b8; }
body.dark .bul-sig { border-top-color: #334155; }

/* ══════ PRINT-MODE — pro-grade output for PDFs ══════ */
@media print {
    /* margin: 0 supprime aussi l'en-tête (URL/date) ajouté par Chrome,
       on rebuild les marges via padding sur le bulletin lui-même. */
    @page { size: A4 portrait; margin: 0; }
    .bul-frame, .print-doc { padding: 10mm !important; }

    /* Status badge "Brouillon / Finalisé" — info écran seulement */
    .bul-tl3, .badge { display: none !important; }

    /* Hide everything around the printable doc — agressif & robuste */
    .topbar, .menu-dropdown, .menu-backdrop, .no-print, .alert,
    .breadcrumb, .page-hdr, .tpl-picker, .settings-hero, .empty-state,
    .dash-kpis, .dash-actions, .dash-columns, .dash-ytd, .module-grid,
    .stats-grid, .cal-grid, .paie-cal-grid, .co-infos-bar, .period-bar,
    .bulletin-list, .bul-side-info, header, footer { display: none !important; }

    /* Bulletin: 1 page A4, centré pleine largeur, padding interne pour
       garantir une zone de sécurité (le contenu ne touche pas les bords). */
    .bul-frame {
        display: block !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .bul-frame .bulletin {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 14mm 12mm !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    /* Densités pour 1 page A4 */
    .bulletin .bulletin-hdr { padding-bottom: 6px !important; margin-bottom: 8px !important; }
    .bulletin .bulletin-emp { padding: 6px 10px !important; margin-bottom: 6px !important; }
    .bulletin .bul-table { margin-bottom: 6px !important; }
    .bulletin .bul-table thead th { padding: 4px 6px !important; }
    .bulletin .bul-table td { padding: 3px 6px !important; }
    .bulletin .bul-row-tot td { padding: 4px 6px !important; }
    .bulletin .bul-row-net td { padding: 7px 6px !important; }
    .bulletin .bul-pat { padding: 6px 10px !important; margin-bottom: 6px !important; }
    .bulletin .bul-footer { margin-top: 8px !important; }
    .bulletin .bul-sig { min-height: 32px !important; }

    html, body {
        background: #fff !important;
        color: #1a202c !important;
        font-family: var(--sans) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        font-size: 11px !important;
        line-height: 1.45;
    }
    /* Force light theme for printing even in dark mode */
    body.dark { background: #fff !important; color: #1a202c !important; }
    body.dark *:not([class*="bg-"]):not([style*="background"]) { background: transparent !important; }

    .topbar, .menu-dropdown, .menu-backdrop, .no-print, .alert,
    .breadcrumb, .page-hdr, .tpl-picker, .settings-hero, .empty-state,
    .dash-kpis, header { display: none !important; }
    .page-body { padding: 0 !important; margin: 0 !important; }

    /* Documents — flex column with full A4 height so .doc-edited
       (margin-top:auto) sticks to the page bottom in window.print(). */
    .bulletin, .print-doc {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
        box-shadow: none !important;
        border: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }
    .bulletin { page-break-after: always; }
    .bulletin:last-child { page-break-after: auto; }
    .bulletin-list { display: none !important; }

    /* Tables */
    .print-table, .bul-table {
        page-break-inside: auto;
        border-collapse: collapse !important;
    }
    .print-table thead, .bul-table thead { display: table-header-group; }
    .print-table tfoot, .bul-table tfoot { display: table-row-group; }
    .print-table tr, .bul-table tr { page-break-inside: avoid; page-break-after: auto; }
    .livre-table { font-size: 8px !important; }
    .livre-table th, .livre-table td { padding: 3px 4px !important; }

    /* Banners full-bleed */
    .print-banner-top, .print-banner-bot { width: 100% !important; }

    /* Avoid splitting key sections */
    .bulletin-hdr, .bulletin-emp, .bul-ir-box, .bul-pat,
    .print-hdr, .print-summary { page-break-inside: avoid; }

    h1, h2, h3 { page-break-after: avoid; }
}

/* ══════ POINTAGE ══════ */
.pt-leg { display: inline-block; width: 18px; height: 18px; border-radius: 4px; text-align: center; line-height: 18px; font-size: 10px; font-weight: 700; margin: 0 2px; }
.pt-leg.pt-N { background: #d1fae5; color: #065f46; }
.pt-leg.pt-A { background: #fee2e2; color: #b91c1c; }
.pt-leg.pt-C { background: #dbeafe; color: #1e40af; }
.pt-leg.pt-F { background: #fef3c7; color: #b45309; }
.pt-leg.pt-M { background: #f3e8ff; color: #7c3aed; }
.pt-leg.pt-J { background: #f1f5f9; color: #94a3b8; }

.pointage-wrap { background: #fff; border: 1px solid var(--bd); border-radius: 12px; overflow-x: auto; max-width: 100%; }
body.dark .pointage-wrap { background: #1e293b; border-color: #334155; }
.pointage-table { border-collapse: collapse; font-size: 11px; }
.pointage-table th { background: #f8fafc; padding: 4px 6px; border-bottom: 1px solid var(--bd); border-right: 1px solid #f1f5f9; font-weight: 700; color: #475569; text-align: center; vertical-align: middle; min-width: 28px; }
.pointage-table th.we { background: #eef2ff; color: #6366f1; }
.pointage-table th .dn { font-size: 9px; color: #94a3b8; text-transform: uppercase; }
.pointage-table th .dd { font-size: 12px; font-weight: 800; color: #0f172a; }
.pointage-table .emp-col { text-align: left; padding: 6px 12px; min-width: 220px; position: sticky; left: 0; background: #f8fafc; z-index: 2; }
.pointage-table .sum-col { text-align: center; padding: 6px 12px; min-width: 80px; background: #ecfdf5; font-weight: 700; color: #065f46; position: sticky; right: 0; z-index: 2; }
.pointage-table tbody td { padding: 5px 6px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; vertical-align: middle; }
.pointage-table tbody .emp-col { background: #fff; }
.pt-emp-name { font-weight: 700; font-size: 12px; color: #0f172a; }
.pt-emp-mat { font-size: 10px; color: #94a3b8; }
.pt-cell { text-align: center; cursor: pointer; font-size: 11px; font-weight: 700; user-select: none; transition: all .1s; min-width: 28px; height: 30px; }
.pt-cell:hover { transform: scale(1.05); box-shadow: 0 0 0 2px rgba(10,92,46,.4); }
.pt-cell.pt-N { background: #d1fae5; color: #065f46; }
.pt-cell.pt-A { background: #fee2e2; color: #b91c1c; }
.pt-cell.pt-C { background: #dbeafe; color: #1e40af; }
.pt-cell.pt-F { background: #fef3c7; color: #b45309; }
.pt-cell.pt-M { background: #f3e8ff; color: #7c3aed; }
.pt-cell.pt-J { background: #f1f5f9; color: #cbd5e1; }
.pt-cell.we { box-shadow: inset 0 0 0 1px #c7d2fe; }

.pt-mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .pt-mode-pick { grid-template-columns: 1fr; } }
.pt-mode-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 2px solid var(--bd); border-radius: 12px; cursor: pointer; transition: all .12s; user-select: none; }
.pt-mode-tile:hover { border-color: var(--primary-bd); }
.pt-mode-tile:has(input:checked) { border-color: var(--primary); background: var(--primary-l); }
.pt-mode-tile input { display: none; }
.pt-mode-ico { font-size: 28px; flex-shrink: 0; }
.pt-mode-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.pt-mode-desc { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.pt-mode-tile:has(input:checked) .pt-mode-name { color: var(--primary); }
body.dark .pt-mode-tile { background: #1e293b; border-color: #334155; }
body.dark .pt-mode-tile:has(input:checked) { background: rgba(52,211,153,.12); border-color: #34d399; }
body.dark .pt-mode-name { color: #f1f5f9; }
body.dark .pt-mode-desc { color: #94a3b8; }
body.dark .pt-mode-tile:has(input:checked) .pt-mode-name { color: #34d399; }

.pt-mode-badge { font-size: 11px; padding: 4px 10px; background: #f1f5f9; color: #475569; border-radius: 14px; font-weight: 600; }
.pt-mode-badge b { color: var(--primary); text-transform: uppercase; letter-spacing: .04em; }
body.dark .pt-mode-badge { background: #0f172a; color: #94a3b8; }
body.dark .pt-mode-badge b { color: #34d399; }

/* Hours mode cell */
.pointage-table.pt-hours .pt-cell.pt-h { padding: 2px; min-width: 42px; height: 38px; cursor: default; position: relative; }
.pointage-table.pt-hours .pt-cell.pt-h:hover { transform: none; box-shadow: none; }
.pt-h-input { width: 100%; height: 24px; border: 1px solid transparent; border-radius: 3px; font-size: 11px; text-align: center; background: transparent; color: inherit; padding: 0; font-family: var(--mono); }
.pt-h-input:focus { outline: 0; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-l); }
body.dark .pt-h-input:focus { background: #1e293b; border-color: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,.2); }
.pt-h-tag { position: absolute; bottom: 1px; right: 2px; font-size: 8.5px; font-weight: 800; padding: 0 3px; border-radius: 3px; cursor: pointer; line-height: 1.2; opacity: .7; }
.pt-h-tag:hover { opacity: 1; }
body.dark .pointage-table th { background: #0f172a; border-bottom-color: #334155; border-right-color: #273449; color: #94a3b8; }
body.dark .pointage-table th.we { background: rgba(99,102,241,.15); }
body.dark .pointage-table th .dd { color: #f1f5f9; }
body.dark .pointage-table .emp-col { background: #0f172a; }
body.dark .pointage-table tbody .emp-col { background: #1e293b; }
body.dark .pointage-table tbody td { border-bottom-color: #273449; border-right-color: #273449; }
body.dark .pt-emp-name { color: #f1f5f9; }
body.dark .pointage-table .sum-col { background: rgba(52,211,153,.15); color: #34d399; }
body.dark .pt-cell.pt-N { background: rgba(52,211,153,.2); color: #34d399; }
body.dark .pt-cell.pt-A { background: rgba(248,113,113,.2); color: #fca5a5; }
body.dark .pt-cell.pt-C { background: rgba(96,165,250,.2); color: #93c5fd; }
body.dark .pt-cell.pt-F { background: rgba(251,191,36,.2); color: #fbbf24; }
body.dark .pt-cell.pt-M { background: rgba(167,139,250,.2); color: #c4b5fd; }
body.dark .pt-cell.pt-J { background: #0f172a; color: #475569; }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding: 8px 0; font-size: 12.5px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f1f5f9; }
.check-list li:last-child { border-bottom: 0; }
.check-list .ok { color: #065f46; }
.check-list .ko { color: #b45309; }
.btn-link { margin-left: auto; font-size: 11px; color: var(--primary); text-decoration: underline; }
body.dark .check-list li { border-bottom-color: #273449; }
body.dark .check-list .ok { color: #34d399; }
body.dark .check-list .ko { color: #fbbf24; }

/* extras column subtle tint */
.paie-table td.extra-p { background: rgba(59,130,246,.04); }
.paie-table td.extra-i { background: rgba(52,211,153,.05); }
.paie-table td.extra-r { background: rgba(244,63,94,.04); }
.extra-kind { font-size: 9px; opacity: .65; font-weight: 500; text-transform: lowercase; }
body.dark .paie-table td.extra-p { background: rgba(59,130,246,.08); }
body.dark .paie-table td.extra-i { background: rgba(52,211,153,.08); }
body.dark .paie-table td.extra-r { background: rgba(244,63,94,.08); }

/* ══════ RESPONSIVE APPLICATION SHELL ══════ */
.table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.table-scroll > table { margin-bottom: 0; }
body.dark .menu-item.active { background: rgba(52,211,153,.14); color: #6ee7b7; border-left-color: #34d399; }
body.dark .table-scroll:focus-visible { outline-color: #34d399; }

@media (min-width: 1100px) {
    body.app-auth .menu-dropdown { transform: translateX(0); }
    body.app-auth .menu-backdrop { display: none; }
    body.app-auth .page-body {
        margin-left: max(var(--sidebar-w), calc(var(--sidebar-w) + (100vw - var(--sidebar-w) - 1400px) / 2));
        margin-right: auto;
    }
    body.app-auth.nav-collapsed .menu-dropdown { transform: translateX(-100%); }
    body.app-auth.nav-collapsed .page-body { margin-left: auto; margin-right: auto; }
}

@media (max-width: 1099px) {
    .page-body { max-width: none; }
}

@media (max-width: 820px) {
    .topbar { gap: 8px; padding: 0 12px; }
    .tb-divider, .page-title, .user-name, .user-pill .badge, .logout-btn { display: none; }
    .tb-actions { min-width: 0; gap: 4px; }
    .tb-context { height: 34px; max-width: 100%; flex-wrap: nowrap; }
    .tb-ctx-item { padding: 0 7px; }
    .tb-ctx-sel { max-width: 112px; padding-right: 16px !important; }
    .tb-co-name, .tb-ctx-co { max-width: 130px; }
}

@media (max-width: 640px) {
    .tb-brand { font-size: 0; }
    .tb-brand span { font-size: 14px; }
    .tb-ctx-ico { display: none; }
    .tb-co-btn { padding: 0 8px; }
    .tb-co-name, .tb-ctx-co { max-width: 100px; }
    .tb-co-menu { position: fixed; top: calc(var(--topbar-h) + 8px); left: 12px; right: 12px; min-width: 0; max-width: none; max-height: calc(100vh - var(--topbar-h) - 20px); }
    .page-body { padding: 20px 16px 40px; }
    .page-hdr { align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
    .page-hdr h1 { width: 100%; font-size: 21px; }
    .page-hdr .spacer { display: none; }
    .page-hdr > .btn-pri, .page-hdr > .btn-sec, .page-hdr > form { flex: 1 1 auto; }
    .stats-grid, .module-grid, .dash-kpis { grid-template-columns: 1fr; }
    .card-body { padding: 15px; }
    .fg-row { grid-template-columns: 1fr; }
    .theme-grid { grid-template-columns: 1fr; }
    .theme-card { max-width: none; }
}

@media (max-width: 420px) {
    .topbar { padding: 0 8px; }
    .tb-brand { display: inline-flex; }
    .topbar:has(.tb-context) .tb-brand { display: none; }
    .tb-ctx-item { padding: 0 5px; }
    .tb-ctx-sel { max-width: 96px; font-size: 12px !important; }
    .tb-co-name, .tb-ctx-co { max-width: 82px; }
    .tb-co-chev { display: none; }
}

/* ══════ METRONIC APPLICATION SYSTEM ══════ */
.auth-left { background: linear-gradient(145deg, #1b84ff 0%, #056ee9 58%, #0b3566 100%); }
.auth-left::before { background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 70%); }
.auth-fg input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(27,132,255,.1); }
.auth-submit { background: var(--primary); box-shadow: 0 4px 12px rgba(27,132,255,.24); }
.auth-submit:hover { background: var(--primary-d); box-shadow: 0 6px 18px rgba(27,132,255,.3); }

body.app-auth { background: var(--bg); color: var(--tx); }
.topbar { background: rgba(255,255,255,.98); border-bottom-color: var(--bd); box-shadow: none; backdrop-filter: none; }
.topbar .page-title { color: #252f4a; font-size: 14px; font-weight: 700; }
.menu-btn { background: #fff; border: 1px solid var(--bd); color: #99a1b7; box-shadow: 0 4px 12px rgba(76,87,125,.08); }
.menu-btn:hover { background: #f9f9f9; }
.menu-btn span { background: #78829d; }
.tb-brand { color: #071437; font-weight: 700; }
.tb-brand span { color: var(--primary); }
.tb-context { height: 36px; border: 0; border-radius: 7px; background: #f9f9f9; }
.tb-ctx-item { padding-inline: 11px; }
.tb-ctx-ico { color: #99a1b7; font-size: 16px; }
.tb-ctx-sel { height: 36px; color: #4b5675 !important; font-weight: 600 !important; }
.tb-ctx-sep { background: var(--bd); }
.tb-co-btn { height: 36px; border-radius: 7px; background: #eef6ff; color: var(--primary); }
.tb-co-btn:hover { background: #e1efff; }
.tb-co-chev { color: var(--primary); }
.tb-co-menu { border: 0; border-radius: 10px; box-shadow: 0 0 50px rgba(82,63,105,.14); }
.tb-co-menu-item { border-radius: 7px; }
.tb-co-menu-item.active { background: #eef6ff; }
.tb-co-menu-check { color: var(--primary); }
.tb-co-search-input { border-color: var(--bd2); border-radius: 7px; }
.tb-co-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,132,255,.1); }

.user-pill { gap: 9px; color: #4b5675; }
.user-avatar, .menu-user-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #eef6ff; color: var(--primary); font-weight: 700; }
.user-avatar { width: 36px; height: 36px; border-radius: 8px; font-size: 13px; }
.user-name { color: #252f4a; font-weight: 600; }
.logout-btn { min-height: 34px; display: inline-flex; align-items: center; border: 0; border-radius: 7px; padding: 0 12px; background: #f9f9f9; color: #78829d; }
.logout-btn:hover { background: #eef6ff; color: var(--primary); }

.menu-dropdown { background: #fff; border-right-color: var(--bd); box-shadow: 0 0 28px rgba(82,63,105,.05); }
.menu-brand { display: none; height: var(--topbar-h); flex: 0 0 var(--topbar-h); align-items: center; padding: 0 25px; background: #fff; position: sticky; top: 0; z-index: 3; }
.menu-brand-link { display: inline-flex; align-items: center; gap: 11px; color: #071437; text-decoration: none; }
.menu-brand-link:hover { color: #071437; }
.menu-brand-mark { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 5px 12px rgba(27,132,255,.22); }
.menu-brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.45px; }
.menu-brand-name span { color: var(--primary); }
.menu-user { display: flex; align-items: center; gap: 10px; margin: 10px 13px 6px; padding: 11px 12px; border: 0; border-radius: 9px; background: #f9f9f9; }
.menu-user-avatar { width: 36px; height: 36px; border-radius: 8px; font-size: 13px; }
.menu-user-copy { min-width: 0; }
.menu-user-name { color: #252f4a; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-user-email { color: #99a1b7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-user-lic { margin-top: 4px; color: #17c653; font-size: 10px; font-weight: 600; }
.menu-section { margin: 0 10px; padding: 5px 0; border: 0; }
.menu-section-title, .menu-collapsible > .menu-section-title { min-height: 42px; padding: 9px 11px; border-radius: 7px; color: #252f4a; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.menu-section-label { display: inline-flex; align-items: center; gap: 11px; }
.menu-section-label > .ki-outline { width: 20px; justify-content: center; color: #99a1b7; font-size: 19px; }
.menu-collapsible > .menu-section-title:hover { background: transparent; color: var(--primary); }
.menu-collapsible > .menu-section-title:hover .ki-outline { color: var(--primary); }
.menu-chev { color: #99a1b7; font-size: 9px; }
.menu-section-items { padding: 2px 0 4px; }
.menu-item { min-height: 36px; margin: 1px 0; padding: 7px 12px 7px 20px; gap: 11px; border: 0; border-radius: 7px; color: #4b5675; font-size: 12.5px; font-weight: 500; }
.menu-item:hover { background: transparent; color: var(--primary); }
.menu-item.active { background: #f1f6ff; color: var(--primary); border: 0; font-weight: 600; }
.menu-item-bullet { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: #c4cada; transition: background .15s, transform .15s; }
.menu-item:hover .menu-item-bullet, .menu-item.active .menu-item-bullet { background: var(--primary); transform: scale(1.25); }
.menu-item-danger { color: #f8285a; }
.menu-item-danger .menu-item-bullet { background: #fca9bd; }
.menu-item-danger:hover { background: #fff5f7; color: #f8285a; }
.module-switcher { margin: 5px 13px 8px; padding: 12px; border: 1px dashed var(--bd2); border-radius: 9px; }
.module-switcher-lbl { color: #99a1b7; }
.module-switcher-pills { gap: 5px; }
.ms-pill { padding: 6px 8px; border: 0; border-radius: 6px; background: #f9f9f9; color: #78829d; }
.ms-pill:hover { background: #f1f1f4; color: #252f4a; }
.ms-pill.active { border: 0; background: #eef6ff; color: var(--primary); }

.page-body { padding-top: 30px; }
.page-hdr { margin-bottom: 24px; }
.page-hdr h1 { color: #071437; font-size: 23px; font-weight: 700; letter-spacing: -.4px; }
.page-hdr h1 { display: inline-flex; align-items: center; gap: 11px; }
.page-heading-icon { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: #eef6ff; color: var(--primary); font-size: 20px; }
.breadcrumb { color: #99a1b7; }
.breadcrumb a { color: #78829d; }
.card, .stat, .module-card, .dash-kpi, .co-card, .commercial-tile { border-color: transparent; border-radius: 10px; box-shadow: var(--shadow-sm); }
.card-hdr { min-height: 58px; padding: 15px 20px; background: #fff; border-bottom: 1px dashed var(--bd2); color: #252f4a; font-size: 14px; font-weight: 700; }
.card-body { padding: 20px; }
.stat, .dash-kpi { padding: 20px; }
.stat .l, .dash-kpi .k-l { color: #99a1b7; letter-spacing: .02em; }
.stat .n, .dash-kpi .k-n { color: #071437; font-weight: 700; }
.k-ico > .ki-outline, .da-ico > .ki-outline, .ct-ico > .ki-outline, .m-ico > .ki-outline { font-size: 1em; }
.module-card:hover, .commercial-tile:hover, .dash-action:hover { border-color: transparent; box-shadow: 0 7px 24px rgba(76,87,125,.1); }
.onboarding-hero { padding: 62px 20px 30px; text-align: center; }
.onboarding-icon { width: 70px; height: 70px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #eef6ff; color: var(--primary); font-size: 34px; }
.onboarding-hero > h1 { margin: 0 0 9px; color: #071437; font-size: 27px; font-weight: 700; letter-spacing: -.55px; }
.onboarding-hero > p { max-width: 540px; margin: 0 auto 24px; color: #78829d; font-size: 14px; line-height: 1.6; }
.onboarding-cta { min-height: 48px; padding-inline: 28px; font-size: 14px; }
.onboarding-grid { max-width: 900px; margin: 48px auto 0; }
.onboarding-grid .module-card { text-align: left; }
.onboarding-grid .m-ico { width: 42px; height: 42px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #f1f6ff; color: var(--primary); font-size: 22px; }
.btn-pri { background: var(--primary); box-shadow: 0 3px 8px rgba(27,132,255,.18); }
.btn-pri:hover { background: var(--primary-d); box-shadow: 0 5px 12px rgba(27,132,255,.24); }
.btn-sec { border-color: transparent; background: #f1f1f4; color: #4b5675; }
.btn-sec:hover { background: #e9e9ed; color: #252f4a; }
.fg label { color: #4b5675; }
.fg input, .fg select, .fg textarea { min-height: 38px; border-color: var(--bd2); border-radius: 7px; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,132,255,.1); }
.data-table, table.tbl { border-color: var(--bd); }
.data-table th, table.tbl th { background: #f9f9f9; color: #78829d; border-bottom-color: var(--bd); }
.data-table td, table.tbl td { border-color: var(--bd); }
.data-table tr:hover td, table.tbl tr:hover { background: #f9f9f9; }
.badge-green { background: #e9f9ef; color: #17c653; }

body.dark { background: #15171c; color: #f5f5f5; }
body.dark .topbar, body.dark .menu-dropdown, body.dark .menu-brand { background: #1e2027; border-color: #26272f; }
body.dark .topbar .page-title, body.dark .menu-brand-link, body.dark .menu-brand-link:hover, body.dark .menu-brand-name, body.dark .user-name, body.dark .menu-user-name { color: #f5f5f5; }
body.dark .menu-btn { background: #1e2027; border-color: #363843; box-shadow: none; }
body.dark .menu-btn:hover, body.dark .logout-btn { background: #26272f; }
body.dark .tb-context, body.dark .menu-user, body.dark .ms-pill { background: #25272e; }
body.dark .tb-context { border-color: #26272f; }
body.dark .tb-co-btn { background: rgba(27,132,255,.14); color: #76b5ff; }
body.dark .tb-co-btn:hover { background: rgba(27,132,255,.22); }
body.dark .tb-co-chev { color: #76b5ff; }
body.dark .user-avatar, body.dark .menu-user-avatar { background: rgba(27,132,255,.14); color: #76b5ff; }
body.dark .menu-section { border: 0; }
body.dark .menu-section-title, body.dark .menu-collapsible > .menu-section-title { color: #dbdfe9; }
body.dark .menu-section-label > .ki-outline, body.dark .menu-chev { color: #78829d; }
body.dark .menu-collapsible > .menu-section-title:hover { background: transparent; color: #76b5ff; }
body.dark .menu-item { color: #c4cada; }
body.dark .menu-item:hover { background: transparent; color: #76b5ff; }
body.dark .menu-item.active { background: rgba(27,132,255,.13); color: #76b5ff; border: 0; }
body.dark .menu-item:hover .menu-item-bullet, body.dark .menu-item.active .menu-item-bullet { background: #76b5ff; }
body.dark .module-switcher { border-color: #363843; }
body.dark .ms-pill:hover { background: #30323a; color: #f5f5f5; }
body.dark .ms-pill.active { background: rgba(27,132,255,.13); color: #76b5ff; }
body.dark .card, body.dark .stat, body.dark .module-card, body.dark .dash-kpi, body.dark .co-card, body.dark .commercial-tile { background: #1e2027; border-color: transparent; box-shadow: none; }
body.dark .card-hdr { background: #1e2027; border-bottom-color: #363843; color: #f1f1f4; }
body.dark .page-hdr h1, body.dark .stat .n, body.dark .dash-kpi .k-n { color: #f5f5f5; }
body.dark .page-heading-icon { background: rgba(27,132,255,.14); color: #76b5ff; }
body.dark .tb-brand span, body.dark .menu-brand-name span { color: #76b5ff; }
body.dark .btn-sec { background: #26272f; border-color: transparent; color: #c4cada; }
body.dark .btn-sec:hover { background: #30323a; color: #f5f5f5; }
body.dark .badge-green { background: rgba(23,198,83,.14); color: #74dd98; }
body.dark .onboarding-icon, body.dark .onboarding-grid .m-ico { background: rgba(27,132,255,.14); color: #76b5ff; }
body.dark .onboarding-hero > h1 { color: #f5f5f5; }
body.dark .onboarding-hero > p { color: #99a1b7; }

@media (min-width: 1100px) {
    body.app-auth .topbar { width: calc(100% - var(--sidebar-w)); margin-left: var(--sidebar-w); padding-inline: 30px; }
    body.app-auth .topbar .tb-brand, body.app-auth .topbar .tb-divider { display: none; }
    body.app-auth .menu-dropdown { top: 0; height: 100vh; z-index: 101; }
    body.app-auth .menu-brand { display: flex; }
    body.app-auth .menu-btn { position: fixed; top: 22px; left: calc(var(--sidebar-w) - 15px); z-index: 102; width: 30px; height: 30px; border-radius: 50%; }
    body.app-auth.nav-collapsed .topbar { width: 100%; margin-left: 0; padding-left: 70px; }
    body.app-auth.nav-collapsed .menu-btn { left: 20px; }
}

@media (max-width: 1099px) {
    :root { --topbar-h: 60px; }
    .menu-brand { display: none; }
    body.app-auth .topbar { width: 100%; margin-left: 0; }
    .menu-dropdown { top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); }
}

@media (max-width: 640px) {
    .onboarding-hero { padding: 38px 0 20px; }
    .onboarding-hero > h1 { font-size: 23px; }
    .onboarding-grid { margin-top: 34px; }
}

/* ══════ ACCESSIBILITÉ ══════ */
/* Lien « Aller au contenu » : invisible jusqu'à ce qu'il reçoive le focus
   clavier (Tab depuis le haut de page). Permet d'éviter le menu à chaque page. */
.skip-link { position: fixed; top: -120px; left: 12px; z-index: 2000; background: var(--primary); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 8px; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: top .15s ease; }
.skip-link:focus, .skip-link:focus-visible { top: 0; color: #fff; outline: 2px solid #fff; outline-offset: -4px; }
body.dark .skip-link { background: #34d399; color: #0f172a; }
.page-body:focus { outline: none; }

/* Anneau de focus clavier homogène pour les contrôles personnalisés.
   :focus-visible ne se déclenche qu'au clavier — la souris garde le rendu net.
   Couvre boutons, items de menu, onglets, pilules et cartes cliquables. */
.btn-pri:focus-visible, .btn-sec:focus-visible, .btn-dan:focus-visible,
.btn-sm:focus-visible, .btn-p:focus-visible, .btn-b:focus-visible,
.btn-r:focus-visible, .btn-w:focus-visible, .btn-link:focus-visible,
.menu-btn:focus-visible, .menu-item:focus-visible, .menu-section-title:focus-visible,
.tab:focus-visible, .ms-pill:focus-visible, .logout-btn:focus-visible,
.tb-co-btn:focus-visible, .tb-co-menu-item:focus-visible, .co-card:focus-visible,
.co-card-pro:focus-visible, .module-card:focus-visible, .mod-select-tile:focus-visible,
.access-toggle:focus-visible, .access-picker-row:focus-visible, .dropzone:focus-visible,
.skip-link ~ * .btn-close:focus-visible, .alert .btn-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}
body.dark .btn-pri:focus-visible, body.dark .btn-sec:focus-visible, body.dark .btn-dan:focus-visible,
body.dark .btn-sm:focus-visible, body.dark .btn-p:focus-visible, body.dark .btn-b:focus-visible,
body.dark .btn-r:focus-visible, body.dark .btn-w:focus-visible, body.dark .btn-link:focus-visible,
body.dark .menu-btn:focus-visible, body.dark .menu-item:focus-visible, body.dark .menu-section-title:focus-visible,
body.dark .tab:focus-visible, body.dark .ms-pill:focus-visible, body.dark .logout-btn:focus-visible,
body.dark .tb-co-btn:focus-visible, body.dark .tb-co-menu-item:focus-visible, body.dark .co-card:focus-visible,
body.dark .co-card-pro:focus-visible, body.dark .module-card:focus-visible, body.dark .mod-select-tile:focus-visible,
body.dark .access-toggle:focus-visible, body.dark .access-picker-row:focus-visible, body.dark .dropzone:focus-visible,
body.dark .alert .btn-close:focus-visible {
    outline-color: #34d399;
}

/* Respecte « réduire les animations » du système : neutralise transitions et
   boucles (ex. le pulse du sélecteur de société) pour les utilisateurs sensibles
   au mouvement, sans casser la mise en page. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}