/* CIRI — Styles */
:root {
  --bg: #0f172a;
  --bg2: #1e293b;
  --bg3: #334155;
  --border: #475569;
  --text: #f1f5f9;
  --text2: #94a3b8;
  --accent: #3b82f6;
  --accent2: #1d4ed8;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --cir: #6366f1;
  --cii: #0ea5e9;
  --radius: 8px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[x-cloak] { display: none !important; }
body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, sans-serif; font-size: 14px; }

/* ─── LOGIN ─────────────────────────────────────────────────────────────── */
.login-overlay { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:100; }
.login-box { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:2.5rem; width:360px; text-align:center; }
.login-logo { font-size:3rem; margin-bottom:.5rem; }
.login-box h2 { font-size:1.1rem; margin-bottom:.25rem; color:var(--text); }
.login-subtitle { color:var(--text2); font-size:.85rem; margin-bottom:1.5rem; }
.login-box input { width:100%; padding:.75rem 1rem; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:1rem; margin-bottom:1rem; }
.login-box button { width:100%; padding:.75rem; background:var(--accent); color:#fff; border:none; border-radius:var(--radius); font-size:1rem; cursor:pointer; font-weight:600; }
.login-box button:hover { background:var(--accent2); }
.erreur-login { color:var(--danger); font-size:.85rem; margin-top:.5rem; }

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
.header { background:var(--bg2); border-bottom:1px solid var(--border); padding:.75rem 1.5rem; display:flex; align-items:center; gap:1rem; }
.header-left { display:flex; align-items:center; gap:.75rem; min-width:240px; }
.logo { font-size:1.5rem; }
.header-title { font-weight:600; color:var(--text); font-size:.95rem; }
.header-center { flex:1; display:flex; gap:.75rem; align-items:center; }
.select-header { background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:.4rem .75rem; border-radius:var(--radius); font-size:.9rem; min-width:200px; }
.header-right { display:flex; align-items:center; gap:1rem; min-width:240px; justify-content:flex-end; }
.date-heure { color:var(--text2); font-size:.8rem; }
.btn-deconnecter { background:transparent; border:1px solid var(--border); color:var(--text2); padding:.35rem .75rem; border-radius:var(--radius); cursor:pointer; font-size:.8rem; }
.btn-deconnecter:hover { border-color:var(--danger); color:var(--danger); }

/* ─── NAV ────────────────────────────────────────────────────────────────── */
.nav { background:var(--bg2); border-bottom:1px solid var(--border); padding:.5rem 1.5rem; display:flex; gap:.5rem; }
.nav button { background:transparent; border:none; color:var(--text2); padding:.5rem .9rem; border-radius:var(--radius); cursor:pointer; font-size:.875rem; transition:all .15s; }
.nav button:hover, .nav button.actif { background:var(--bg3); color:var(--text); }
.nav button.actif { border-bottom:2px solid var(--accent); }
.btn-calcul { background:var(--cir) !important; color:#fff !important; font-weight:600; }
.btn-calcul:hover { background:var(--accent2) !important; }

/* ─── MAIN ───────────────────────────────────────────────────────────────── */
.main { padding:1.5rem; max-width:1400px; margin:0 auto; }
h2 { font-size:1.3rem; margin-bottom:1.25rem; color:var(--text); }
h3 { font-size:1rem; margin-bottom:1rem; color:var(--text2); }

/* ─── INFO BOX ───────────────────────────────────────────────────────────── */
.info-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; color:var(--text2); text-align:center; }

/* ─── CARDS DASHBOARD ────────────────────────────────────────────────────── */
.dashboard-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem; margin-bottom:2rem; }
.card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; }
.card-cir { border-left:3px solid var(--cir); }
.card-cii { border-left:3px solid var(--cii); }
.card-personnel { border-left:3px solid var(--success); }
.card-fonct { border-left:3px solid var(--warning); }
.card-amortis { border-left:3px solid var(--text2); }
.card-st { border-left:3px solid var(--accent); }
.card-label { font-size:.8rem; color:var(--text2); margin-bottom:.5rem; }
.card-value { font-size:1.4rem; font-weight:700; color:var(--text); }
.card-sub { font-size:.75rem; color:var(--text2); margin-top:.25rem; }

/* ─── SYNTHÈSE TABLE ─────────────────────────────────────────────────────── */
.synthese-table-wrap { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; margin-bottom:1.5rem; }
.synthese-table { width:100%; border-collapse:collapse; }
.synthese-table td { padding:.6rem .75rem; border-bottom:1px solid #1e293b; }
.synthese-table td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.sous-ligne td { color:var(--text2); font-size:.85rem; }
.total-ligne td { border-top:2px solid var(--border); font-weight:600; background:rgba(255,255,255,.03); }
.deduction-ligne td { color:var(--danger); }
.assiette-ligne td { border-top:2px solid var(--border); font-weight:700; font-size:1rem; }
.taux-ligne td { color:var(--text2); }
.resultat-ligne td { background:rgba(99,102,241,.15); font-weight:700; font-size:1.1rem; color:var(--cir); }
.montant { font-family: 'Courier New', monospace; }
.grand { font-size:1.25rem !important; }
.cii-block { margin-top:1.5rem; }
.cii-block .resultat-ligne td { background:rgba(14,165,233,.15); color:var(--cii); }
.export-actions { margin-top:1.5rem; display:flex; gap:.75rem; }

/* ─── ALERTES ────────────────────────────────────────────────────────────── */
.alertes-box, .alerte-box { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); border-radius:var(--radius); padding:1rem 1.25rem; margin-top:1rem; color:var(--warning); font-size:.875rem; }
.alertes-box ul { padding-left:1.25rem; margin-top:.5rem; }
.alertes-box li { margin-bottom:.25rem; }

/* ─── TABLES ─────────────────────────────────────────────────────────────── */
.section-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.section-header h2, .section-header h3 { margin-bottom:0; }
.data-table { width:100%; border-collapse:collapse; background:var(--bg2); border-radius:var(--radius); overflow:hidden; }
.data-table th { background:var(--bg3); padding:.6rem .75rem; text-align:left; font-weight:600; font-size:.8rem; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; }
.data-table td { padding:.6rem .75rem; border-bottom:1px solid var(--bg3); font-size:.875rem; }
.data-table tr:hover td { background:rgba(255,255,255,.02); }
.data-table tr.actif td { background:rgba(99,102,241,.1); }

/* ─── BADGES ─────────────────────────────────────────────────────────────── */
.badge-oui { background:rgba(34,197,94,.15); color:var(--success); padding:.2rem .5rem; border-radius:4px; font-size:.75rem; font-weight:600; }
.badge-non { background:rgba(239,68,68,.15); color:var(--danger); padding:.2rem .5rem; border-radius:4px; font-size:.75rem; font-weight:600; }
.badge-jd { background:rgba(245,158,11,.2); color:var(--warning); padding:.15rem .4rem; border-radius:4px; font-size:.75rem; font-weight:700; }
.badge-type-cir { background:rgba(99,102,241,.2); color:var(--cir); padding:.2rem .5rem; border-radius:4px; font-size:.75rem; font-weight:600; }
.badge-type-cii { background:rgba(14,165,233,.2); color:var(--cii); padding:.2rem .5rem; border-radius:4px; font-size:.75rem; font-weight:600; }
.badge-statut-brouillon { background:var(--bg3); color:var(--text2); padding:.2rem .5rem; border-radius:4px; font-size:.75rem; }
.badge-statut-valide { background:rgba(34,197,94,.15); color:var(--success); padding:.2rem .5rem; border-radius:4px; font-size:.75rem; }
.badge-statut-depose { background:rgba(99,102,241,.2); color:var(--cir); padding:.2rem .5rem; border-radius:4px; font-size:.75rem; }

/* ─── BOUTONS ────────────────────────────────────────────────────────────── */
.btn-primary { background:var(--accent); color:#fff; border:none; padding:.5rem 1rem; border-radius:var(--radius); cursor:pointer; font-size:.875rem; font-weight:600; }
.btn-primary:hover { background:var(--accent2); }
.btn-secondary { background:var(--bg3); color:var(--text); border:1px solid var(--border); padding:.5rem 1rem; border-radius:var(--radius); cursor:pointer; font-size:.875rem; text-decoration:none; display:inline-block; }
.btn-secondary:hover { background:var(--border); }
.btn-export { background:rgba(34,197,94,.2); color:var(--success); border:1px solid rgba(34,197,94,.3); padding:.5rem 1rem; border-radius:var(--radius); cursor:pointer; font-size:.875rem; font-weight:600; }
.btn-export:hover { background:rgba(34,197,94,.3); }
.btn-sm { background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:.25rem .5rem; border-radius:4px; cursor:pointer; font-size:.75rem; }
.btn-sm:hover { background:var(--border); }
.btn-add { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.3); color:var(--success); }
.btn-danger { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.3); color:var(--danger); }

/* ─── SOUS-ONGLETS ───────────────────────────────────────────────────────── */
.sous-onglets { display:flex; gap:.5rem; border-bottom:1px solid var(--border); margin-bottom:1rem; }
.sous-onglets button { background:transparent; border:none; color:var(--text2); padding:.6rem .9rem; cursor:pointer; font-size:.875rem; border-bottom:2px solid transparent; margin-bottom:-1px; }
.sous-onglets button.actif { color:var(--text); border-bottom-color:var(--accent); }

/* ─── MODALS ─────────────────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:50; padding:1rem; }
.modal { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; width:480px; max-height:90vh; overflow-y:auto; }
.modal-large { width:640px; }
.modal h3 { margin-bottom:1.25rem; font-size:1.1rem; }
.modal label { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.75rem; font-size:.875rem; color:var(--text2); }
.modal input, .modal select, .modal textarea { background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:.5rem .75rem; border-radius:6px; font-size:.875rem; }
.modal input:focus, .modal select:focus, .modal textarea:focus { outline:none; border-color:var(--accent); }
.modal textarea { resize:vertical; }
.checkbox-label { flex-direction:row !important; align-items:center; gap:.5rem; }
.checkbox-label input { width:auto; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.modal-actions { display:flex; justify-content:flex-end; gap:.75rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--border); }

/* ─── IMPORT ─────────────────────────────────────────────────────────────── */
.import-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; margin-bottom:1.25rem; }
.import-section h3 { margin-bottom:.5rem; }
.import-section p { color:var(--text2); font-size:.85rem; margin-bottom:.75rem; }
.import-section code { background:var(--bg3); padding:.1rem .3rem; border-radius:3px; font-size:.8rem; }
.import-form { display:flex; gap:.75rem; align-items:center; margin-top:.75rem; }
.import-form input[type=file] { color:var(--text2); font-size:.85rem; }
.msg-import { margin-top:.75rem; font-size:.85rem; color:var(--success); }

.import-baserow { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.05); }
.import-baserow h3 { color: var(--success); }
.apercu-baserow { display:flex; gap:1rem; margin-bottom:1rem; }
.apercu-stat { background:var(--bg3); border-radius:var(--radius); padding:.6rem 1rem; font-weight:700; font-size:1.1rem; }
.apercu-stat span { color:var(--success); }
.apercu-liste { display:flex; flex-wrap:wrap; gap:.4rem; }
.apercu-tag { background:var(--bg3); padding:.2rem .5rem; border-radius:4px; font-size:.75rem; }
.apercu-cir { background:rgba(99,102,241,.2); color:var(--cir); }
.apercu-cii { background:rgba(14,165,233,.2); color:var(--cii); }
.import-veille { border-color: rgba(99,102,241,.4); background: rgba(99,102,241,.05); }
.import-veille h3 { color: var(--cir); }

/* ─── CALCUL DÉTAIL ──────────────────────────────────────────────────────── */
.calcul-detail { display:flex; flex-direction:column; gap:1.5rem; }