/* ==========================================================================
    Thème / Tokens (ne pas renommer)
    ========================================================================== */
:root {
    --bg:#0f172a; --card:#111827; --muted:#64748b; --text:#e5e7eb;
    --success:#16a34a; --warning:#d97706; --danger:#dc2626; --info:#0891b2;
    --border:#1f2937; --chip:#0b1222;
}

/* Reset léger et base typo */
* { box-sizing: border-box; }
body {
    margin:0;
    font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background:var(--bg);
    color:var(--text);
}

/* ==========================================================================
    En-tête (navbar) — design conservé
    ========================================================================== */
header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
header h1 { font-size:18px; margin:0; }
header a { color:var(--muted); text-decoration:none; }

/* Navbar structurée (gauche/droite) */
.navbar {
    padding:16px 20px;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.nav-left { display:flex; align-items:center; gap:12px; }
.nav-right .btn {
    background: var(--danger);
    border-color: var(--danger);
    color:#fff; font-weight:600;
}
.nav-right .btn:hover { filter:brightness(1.1); }

/* ==========================================================================
    Contenu principal
    ========================================================================== */
.wrap { max-width:1080px; margin:0 auto; padding:24px 20px; }

/* Grilles + cartes (KPI, tableaux) */
.grid { display:grid; gap:14px; }
.grid.kpi { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; }
.card h3 { margin:0 0 6px; font-size:13px; color:var(--muted); font-weight:600; }
.kpi-value { font-size:22px; font-weight:700; }
.kpi-sub { font-size:12px; color:var(--muted); }

/* ==========================================================================
    Tableaux (design conservé)
    ========================================================================== */
table { width:100%; border-collapse:separate; border-spacing:0 8px; }
thead th { text-align:left; font-size:12px; color:var(--muted); font-weight:600; padding:0 10px 6px; }
tbody tr { background:var(--card); border:1px solid var(--border); }
tbody td { padding:12px 10px; vertical-align:middle; }
tbody tr:first-child td { border-top-left-radius:10px; border-top-right-radius:10px; }
tbody tr:last-child  td { border-bottom-left-radius:10px; border-bottom-right-radius:10px; }

/* Couleurs de bordure intérieure selon statut (inchangé) */
tr.status-paid      { box-shadow: inset 3px 0 0 var(--success); }
tr.status-overdue   { box-shadow: inset 3px 0 0 var(--danger); }
tr.status-dueSoon   { box-shadow: inset 3px 0 0 var(--warning); }
tr.status-cancelled { box-shadow: inset 3px 0 0 var(--muted); opacity:.7; }

/* Badges */
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid transparent; }
.badge.success { background: rgba(22,163,74,.12);  border-color: rgba(22,163,74,.35);  color:#bbf7d0; }
.badge.warning { background: rgba(217,119,6,.12);  border-color: rgba(217,119,6,.35);  color:#fde68a; }
.badge.danger  { background: rgba(220,38,38,.12);  border-color: rgba(220,38,38,.35);  color:#fecaca; }
.badge.neutral { background: rgba(100,116,139,.12); border-color: rgba(100,116,139,.35); color:#cbd5e1; }
.pill { font-weight:600; }

/* Utilitaires */
.muted { color:var(--muted); }
.right { text-align:right; }

/* Boutons & liens (design conservé) */
.actions { display:flex; gap:8px; justify-content:flex-end; }
.btn {
    background:#0b1222; color:#e5e7eb; border:1px solid var(--border);
    padding:8px 10px; border-radius:8px; font-size:13px; cursor:pointer;
}
.btn:hover { border-color:#2b3547; }
.link { color:#93c5fd; text-decoration:none; }
.link:hover { text-decoration:underline; }

/* NOTE: tu utilises "btn btn-danger" dans le HTML.
    Ici le style "danger" est déjà couvert par ".nav-right .btn" → on ne rajoute
    PAS de classe ni ne change rien pour conserver le design exact.
    Si tu veux un style danger réutilisable partout, on pourrait ajouter:
    .btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
    (Mais on ne le fait pas pour ne rien modifier visuellement.) */