:root{
  --bg:#f6fbff; --paper:#fff; --ink:#0f172a; --muted:#64748b;
  --primary:#2563eb; --primary2:#10b981; --border:#e6eaf2;
  --shadow:0 10px 30px rgba(16,24,40,.06); --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:linear-gradient(180deg,#f6fbff,#f6fff9 45%,#fff)}
.container{max-width:1200px;margin:28px auto;padding:0 16px}
.nav{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow);margin-bottom:16px}
.nav a{text-decoration:none;color:#222;padding:10px 14px;border-radius:10px;border:1px solid transparent;font-weight:600}
.nav a:hover{background:#f7f9ff;border-color:#e7edff}
.nav a.active{background:linear-gradient(135deg,var(--primary),#1fa0ff);color:#fff}
.badge{margin-left:auto;background:#f1f5ff;color:#344ac9;padding:6px 10px;border-radius:999px;font-weight:700}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;cursor:pointer;font-weight:700;text-decoration:none}
.btn:hover{box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));border:0;color:#fff}
.btn.danger{border-color:#fecaca;background:#fff1f2;color:#991b1b}
h1,h2,h3{margin:.5em 0}
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.table{width:100%;border-collapse:collapse}
.table th{background:#f7f9fc;text-transform:uppercase;font-size:12px;letter-spacing:.3px;text-align:left;padding:12px}
.table td{padding:12px;border-top:1px solid var(--border)}
.table tr:hover td{background:#fafcff}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.form-grid .full{grid-column:1/-1}
input,select{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px}
.footer{text-align:center;color:#7a8699;font-size:12px;margin:24px 0}
.alert{padding:12px 14px;border-radius:12px;margin:10px 0;border:1px solid var(--border)}
.alert.error{background:#fff2f2;border-color:#ffd1d1;color:#b42318}

/* LOGIN */
.auth-container{max-width:1200px;padding:0 16px}
.auth-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;min-height:72vh;align-items:center;background:linear-gradient(180deg,#f2f9ff,#f2fffb 50%,#fff);border:1px solid #eaf1ff;border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.auth-brand h1{font-size:64px;margin:0;background:linear-gradient(135deg,var(--primary),#1fa0ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.auth-brand .subtitle{color:#334155;font-size:18px;font-weight:700;margin:6px 0 12px}
.features{list-style:none;padding:0;margin:0}
.features li{display:flex;gap:10px;margin:8px 0;color:#27324a}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot.blue{background:#3b82f6}.dot.green{background:#10b981}.dot.purple{background:#8b5cf6}
.icon-badge{width:72px;height:72px;border-radius:18px;background:linear-gradient(135deg,#16b0c9,#2e8bff);display:grid;place-items:center;box-shadow:0 10px 28px rgba(46,139,255,.28);margin-bottom:8px}
.panel-title{margin:0;font-weight:800}
.panel-subtitle{margin:4px 0 16px;color:#6b7280}
.auth-card{max-width:540px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid #e9eef9;border-radius:16px;padding:22px;box-shadow:0 16px 46px rgba(13,38,76,.10)}
.btn-admin{margin-top:10px;border:2px solid #a78bfa;color:#6d28d9;background:#faf5ff}

/* PATIENTS (style capture) */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
.kpi{border-radius:14px;padding:16px;color:#fff;box-shadow:var(--shadow)}
.kpi .title{font-size:12px;opacity:.9;text-transform:uppercase;margin-bottom:6px}
.kpi .value{font-weight:900;font-size:26px}
.kpi.blue{background:#2563eb}.kpi.green{background:#16a34a}.kpi.red{background:#dc2626}.kpi.purple{background:#7c3aed}
.toolbar{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.toolbar .group{display:flex;gap:8px;flex-wrap:wrap}
.btn-outline{background:#fff;border:1px solid var(--border)}
.btn-outline.green{border-color:#86efac;color:#166534;background:#f0fdf4}
.btn-outline.red{border-color:#fecaca;color:#991b1b;background:#fff1f2}
.btn-outline.blue{border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff}
.btn-outline.violet{border-color:#ddd6fe;color:#6d28d9;background:#f5f3ff}
.badge.ok{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0;padding:4px 8px;border-radius:999px;font-weight:700}
.cell-patient{display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:999px;color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.avatar.blue{background:#2563eb}.avatar.green{background:#16a34a}.avatar.cyan{background:#06b6d4}.avatar.purple{background:#7c3aed}
.amount{font-weight:800;color:#10b981}
.search-input{padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;min-width:320px}
.search-input:focus{border-color:#bfdbfe;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.table-wrap{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
 /* ===== Toolbar moderne ===== */
.toolbar-modern{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(16,24,40,.06);
  border:1px solid #eef2f7;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.filter-group,.action-group{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Switch filtres */
.btn-switch{
  padding:9px 14px;
  border-radius:10px;
  background:#f1f5f9;
  color:#334155;
  text-decoration:none;
  font-weight:600;
  border:1px solid #e2e8f0;
  transition:all .18s ease;
}
.btn-switch:hover{ background:#e2e8f0; }
.btn-switch.active{
  background:#6d28d9; color:#fff; border-color:#6d28d9;
  box-shadow:0 6px 20px rgba(109,40,217,.25);
}

/* Formulaire date */
.date-form{ display:flex; gap:8px; align-items:center; }
.date-input{
  padding:9px 10px; border:1px solid #cbd5e1; border-radius:10px;
  background:#fff; min-width: 170px;
}
.btn-black{
  background:#0f172a; color:#fff; border:0; cursor:pointer;
  padding:9px 14px; border-radius:10px; font-weight:700;
}
.btn-black:hover{ filter:brightness(1.08); }

/* Boutons actions */
.btn-download{
  padding:9px 14px; border-radius:10px; font-weight:700;
  text-decoration:none; border:1px solid transparent;
  transition:transform .1s ease, box-shadow .2s ease;
}
.btn-download:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); }
.btn-download.csv   { background:#eff6ff; color:#1d4ed8; border-color:#dbeafe; }
.btn-download.word  { background:#f0f9ff; color:#0284c7; border-color:#bae6fd; }
.btn-download.pdf   { background:#faf5ff; color:#7e22ce; border-color:#e9d5ff; }

.btn-primary{
  background:linear-gradient(90deg,#2563eb,#10b981);
  color:#fff; padding:10px 16px; border-radius:12px;
  text-decoration:none; font-weight:800;
  box-shadow:0 10px 22px rgba(16,185,129,.25);
}
.btn-primary:hover{ filter:brightness(1.05); }

/* Responsive */
@media (max-width: 920px){
  .toolbar-modern{ padding:12px }
  .date-input{ min-width: 0; width: 150px; }
}
/* ===== KPI dépenses ===== */
.metrics{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap:12px; margin:10px 0 16px;
}
.metric{
  background:#fff; border:1px solid #edf0f5; border-radius:12px;
  padding:14px; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.metric-icon{ width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:18px;margin-bottom:6px; }
.metric-icon.up{ background:#d1fae5; }
.metric-icon.down{ background:#fee2e2; }
.metric-icon.calc{ background:#e0f2fe; }
.metric-icon.money{ background:#ede9fe; }
.metric-title{ color:#475569; font-weight:600; font-size:13px; }
.metric-value{ font-weight:800; font-size:20px; margin-top:4px; }
.metric-value.green{ color:#059669; }
.metric-value.red{ color:#dc2626; }
.metric-value.blue{ color:#2563eb; }
.metric-value.violet{ color:#7c3aed; }

.btn-outline.danger{ color:#b91c1c; background:#fee2e2; border-color:#fecaca; }

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  display:none; align-items:center; justify-content:center; z-index:50;
}
.modal-overlay.show{ display:flex; }
.modal{
  width: 360px; max-width:92vw; background:#111827; color:#fff;
  border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.3); padding:0;
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08);
}
.modal-title{ font-weight:700; }
.modal-close{ background:transparent; border:0; color:#fff; font-size:20px; cursor:pointer; }
.modal form{ padding:14px; }
.modal .form-col{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.modal label{ font-size:13px; color:#e5e7eb; }
.modal input{
  background:#0b1220; color:#fff; border:1px solid #25324a; border-radius:8px; padding:10px;
}
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.modal .btn{ background:#e5e7eb; border:1px solid #d1d5db; border-radius:10px; padding:10px 14px; cursor:pointer; }
.modal .btn.primary{ background:#2563eb; color:#fff; border:0; }

.btn-modern {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.btn-modern i {
    margin-right: 6px;
}

.btn-red {
    background-color: #e74c3c;
    color: white;
}

.btn-red:hover {
    background-color: #c0392b;
    transform: translateY(-1px);
}

.btn-green {
    background-color: #2ecc71;
    color: white;
}

.btn-green:hover {
    background-color: #27ae60;
    transform: translateY(-1px);
}

/* ===== LOGIN PAGE REWORK ===== */
.login-shell{
  min-height: calc(100vh - 80px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background: radial-gradient(1000px 500px at 10% 0%, #eef6ff 0, #f7fbff 45%, #ffffff 100%);
}
.login-wrap{
  width:100%;max-width:1080px;
  display:grid;grid-template-columns: 1.1fr 1fr;gap:28px;
  align-items:center;
}
@media (max-width: 900px){
  .login-wrap{ grid-template-columns: 1fr; }
}

/* left side */
.login-brand{
  background:#fff;border:1px solid #eef2f7;border-radius:18px;
  padding:28px 26px;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
}
.brand-badge{
  width:62px;height:62px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;letter-spacing:.5px;
  background: linear-gradient(135deg,#2563eb,#0ea5e9);
  margin-bottom:12px;
}
.brand-title{margin:0;font-size:40px;line-height:1.05;color:#1d4ed8;}
.brand-sub{margin:6px 0 14px;color:#475569;font-weight:600;}
.brand-points{margin:0;padding-left:18px;color:#334155}
.brand-points li{margin:6px 0}

/* right side card */
.login-card{
  background:#ffffff;border:1px solid #eef2f7;border-radius:18px;
  padding:26px;max-width:460px;margin:0 auto;
  box-shadow:0 12px 40px rgba(2,6,23,.08);
}
.card-title{margin:0;color:#0f172a}
.card-sub{margin:4px 0 16px;color:#64748b}

.login-form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.form-label{font-size:14px;color:#0f172a;font-weight:600}
.form-input{
  height:44px;border:1px solid #e5e7eb;border-radius:10px;
  padding:0 12px;font-size:15px;background:#fff;outline:none;
  transition: box-shadow .15s, border-color .15s;
}
.form-input:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

.block{display:block;width:100%}
.btn-primary{
  margin-top:6px;height:46px;border:none;border-radius:12px;
  font-weight:700;color:#fff;cursor:pointer;
  background: linear-gradient(135deg,#2563eb,#10b981);
  box-shadow: 0 10px 22px rgba(16,185,129,.25);
  transition: transform .05s ease, box-shadow .15s ease;
}
.btn-primary:hover{box-shadow:0 14px 28px rgba(16,185,129,.32)}
.btn-primary:active{transform: translateY(1px)}

.btn-admin{
  margin-top:10px;height:44px;border:2px solid rgba(124,58,237,.35);
  color:#6d28d9;background:#faf5ff;border-radius:12px;
  font-weight:700;text-align:center;line-height:44px;text-decoration:none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-admin:hover{
  background:#f5f3ff;border-color:#7c3aed;
  box-shadow: 0 8px 18px rgba(124,58,237,.18);
}

/* tiny alert normalize */
.alert.error{
  max-width:460px;margin:16px auto;
  background:#fef2f2;border:1px solid #fecaca;color:#991b1b;
  padding:10px 12px;border-radius:10px;
}
/* Cellule d'actions alignée */
.actions-cell {
  white-space: nowrap;
}

.actions-cell .btn-action {
  display: inline-block;
  padding: 6px 12px;
  margin-right: 6px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}

/* Modifier */
.btn-edit {
  background: #ecfdf5;
  color: #065f46;
  border-color: #10b981;
}
.btn-edit:hover {
  background: #10b981;
  color: #fff;
}

/* Supprimer */
.btn-delete {
  background: #fef2f2;
  color: #991b1b;
  border-color: #ef4444;
  cursor: pointer;
}
.btn-delete:hover {
  background: #ef4444;
  color: #fff;
}

/* Imprimer */
.btn-print {
  background: #eff6ff;
  color: #1e40af;
  border-color: #3b82f6;
}
.btn-print:hover {
  background: #3b82f6;
  color: #fff;
}

.actions-cell {
  white-space: nowrap;
}

.btn-pill {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  margin-right: 5px;
}

/* Effet au survol */
.btn-pill:hover {
  transform: scale(1.05);
}

/* Couleurs */
.btn-green {
  background: #10b981;
  color: white;
}
.btn-green:hover {
  background: #059669;
}

.btn-red {
  background: #ef4444;
  color: white;
}
.btn-red:hover {
  background: #dc2626;
}

.btn-blue {
  background: #3b82f6;
  color: white;
}
.btn-blue:hover {
  background: #2563eb;
}