/* ============================================================
   B2Net — Charte « Suisse doré » (Direction II + touches dorées III)
   Blanc / gris / beige doré — Cabinet Ayoub Belahmaidi
   ============================================================ */
:root{
  --bg:        #f3f2ef;
  --surface:   #ffffff;
  --surface-2: #faf8f4;
  --sidebar:   #2b2b2e;
  --sidebar-2: #343437;
  --border:    #e6e3dd;
  --border-2:  #efece6;
  --text:      #1d1d1f;
  --text-mut:  #83807a;
  --gold:      #b08a46;
  --gold-d:    #8f6c2c;
  --gold-soft: #c8a664;
  --gold-tint: rgba(176,138,70,.10);
  --gold-grad: linear-gradient(135deg,#c8a664,#a9843f);
  --ok:        #4f7a44;
  --ok-bg:     #e9f0e4;
  --warn:      #b9822a;
  --danger:    #b23b3b;
  --radius:    12px;
  --sidebar-w: 250px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--gold-d); text-decoration:none; }
a:hover{ color:var(--gold); }

/* ---------- Layout ---------- */
.app{ display:flex; min-height:100vh; }
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--sidebar); color:#d8d6d0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar .brand{
  display:flex; align-items:center; gap:12px;
  padding:20px 22px; border-bottom:1px solid #3c3c3f;
}
.sidebar .brand img{ height:44px; width:auto; }
.sidebar .brand .t{ font-weight:700; letter-spacing:-.2px; font-size:17px; color:#fff; }
.sidebar .brand .t small{ display:block; color:#918e88; font-weight:500; font-size:10px; letter-spacing:.6px; text-transform:uppercase; margin-top:2px; }
.nav{ padding:14px 12px; flex:1; overflow-y:auto; }
.nav a{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; margin:2px 0; border-radius:10px;
  color:#a3a09a; font-weight:500; border-left:3px solid transparent;
}
.nav a .ico{ width:18px; text-align:center; opacity:.85; }
.nav a:hover{ background:var(--sidebar-2); color:#efeee9; }
.nav a.active{ background:var(--sidebar-2); color:#fff; border-left-color:var(--gold); }
.sidebar .foot{ padding:14px 20px; border-top:1px solid #3c3c3f; font-size:12px; color:#918e88; }
.sidebar .foot .u{ color:#efeee9; font-weight:600; }
.sidebar .foot a{ color:var(--gold-soft); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; border-bottom:1px solid var(--border); background:var(--surface);
}
.topbar h1{ font-size:19px; margin:0; font-weight:700; letter-spacing:-.4px; }
.content{ padding:24px 28px; flex:1; }

/* ---------- Cards / grid ---------- */
.grid{ display:grid; gap:16px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; box-shadow:0 1px 2px rgba(30,25,15,.03);
}
.card h3{ margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.2px; }
.stat .label{ color:var(--text-mut); font-size:10.5px; text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.stat .value{ font-size:26px; font-weight:700; margin-top:8px; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.stat .value.red{ color:var(--danger); }
.stat .value.ok{ color:var(--gold-d); }
/* KPI vedette (touche dorée III) : ajouter class "hero" à une .card.stat */
.card.stat.hero{ background:var(--gold-grad); border:0; color:#fff; box-shadow:0 10px 24px rgba(143,108,44,.3); }
.card.stat.hero .label{ color:rgba(255,255,255,.85); }
.card.stat.hero .value{ color:#fff; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-weight:600; font-size:13px;
  cursor:pointer; transition:.15s; font-family:inherit;
}
.btn:hover{ border-color:#d3cfc6; background:var(--surface-2); }
.btn-primary{ background:var(--gold-grad); border:0; color:#fff; box-shadow:0 5px 14px rgba(143,108,44,.28); }
.btn-primary:hover{ filter:brightness(1.05); color:#fff; }
.btn-ghost{ background:transparent; }
.btn-danger{ background:transparent; border-color:#e6cccc; color:var(--danger); }
.btn-danger:hover{ background:#fbeeee; border-color:#e0b4b4; }
.btn-sm{ padding:6px 11px; font-size:12px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------- Tables ---------- */
.table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 2px rgba(30,25,15,.03); }
table.data{ width:100%; border-collapse:collapse; }
table.data th, table.data td{ padding:12px 15px; text-align:left; border-bottom:1px solid var(--border-2); }
table.data th{ color:var(--text-mut); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; background:var(--surface-2); }
table.data tbody tr:hover{ background:var(--surface-2); }
table.data tbody tr:last-child td{ border-bottom:0; }
table.data td.num, table.data th.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.data .actions{ display:flex; gap:6px; justify-content:flex-end; }

/* ---------- Badges statut ---------- */
.badge{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:11.5px; font-weight:600; }
.badge-attente{ background:#f1efe9; color:var(--text-mut); border:1px solid var(--border); }
.badge-payee{ background:var(--ok-bg); color:var(--ok); }
.badge-retard{ background:#f6ecd8; color:var(--gold-d); }
.badge-annulee{ background:#f1efe9; color:var(--text-mut); text-decoration:line-through; }

/* ---------- Forms ---------- */
label{ display:block; font-size:11.5px; color:var(--text-mut); margin:0 0 6px; font-weight:600; letter-spacing:.2px; }
input, select, textarea{
  width:100%; padding:10px 12px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:14px;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-tint); }
.form-row{ margin-bottom:14px; }
.form-grid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
.toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.toolbar .spacer{ flex:1; }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(28,24,15,.42); display:none; align-items:flex-start; justify-content:center; z-index:100; overflow-y:auto; padding:40px 16px; }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:16px; width:min(760px,100%); box-shadow:0 24px 60px rgba(28,24,15,.25); }
.modal .m-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal .m-head h3{ margin:0; font-size:16px; }
.modal .m-body{ padding:22px; }
.modal .m-foot{ padding:16px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

/* ---------- Auth pages ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(1200px 600px at 50% -10%, #ffffff, var(--bg)); }
.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; width:min(400px,100%); padding:36px 32px; box-shadow:0 20px 50px rgba(28,24,15,.10); }
.auth-card .logo{ text-align:center; margin-bottom:20px; }
.auth-card .logo img{ height:64px; }
.auth-card h2{ text-align:center; margin:0 0 4px; font-size:20px; font-weight:700; letter-spacing:-.3px; }
.auth-card .sub{ text-align:center; color:var(--text-mut); font-size:13px; margin-bottom:22px; }
.auth-card .btn-primary{ width:100%; justify-content:center; margin-top:6px; padding:11px; }
.alert{ padding:11px 14px; border-radius:9px; font-size:13px; margin-bottom:16px; }
.alert-error{ background:#fbeeee; color:var(--danger); border:1px solid #eecaca; }
.alert-ok{ background:var(--ok-bg); color:var(--ok); border:1px solid #cfe0c8; }

/* ---------- Barre de copyright (pied d'app) ---------- */
.app-footer{ padding:14px 28px; border-top:1px solid var(--border); color:var(--text-mut); font-size:11px; text-align:center; }
.app-footer strong{ color:#6f6b63; font-weight:600; }

/* ---------- Dashboards (Facturation / Dépenses) ---------- */
.dash-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:18px; }
.kpi-card{ background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:var(--radius);
  padding:16px 18px; box-shadow:0 1px 2px rgba(30,25,15,.03); }
.kpi-card .value{ font-size:26px; font-weight:800; line-height:1; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.kpi-card .value small{ font-size:13px; font-weight:600; color:var(--text-mut); }
.kpi-card .label{ font-size:10px; text-transform:uppercase; letter-spacing:.9px; color:var(--text-mut); font-weight:700; margin-top:7px; }
.kpi-card.gold{ border-top-color:var(--gold); } .kpi-card.gold .value{ color:var(--gold-d); }
.kpi-card.green{ border-top-color:var(--ok); } .kpi-card.green .value{ color:var(--ok); }
.kpi-card.amber{ border-top-color:var(--warn); } .kpi-card.amber .value{ color:var(--warn); }
.kpi-card.red{ border-top-color:var(--danger); } .kpi-card.red .value{ color:var(--danger); }
.kpi-card.neutral{ border-top-color:#b9b5ac; }

.charts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
@media(max-width:900px){ .charts-grid{ grid-template-columns:1fr; } }
.chart-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:0 1px 2px rgba(30,25,15,.03); }
.chart-card h6{ font-size:12px; font-weight:700; margin:0 0 14px; color:var(--text); letter-spacing:.2px; display:flex; align-items:center; gap:7px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:12.5px; }
.bar-row .bar-label{ min-width:130px; max-width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.bar-row .bar-track{ flex:1; height:20px; background:var(--surface-2); border-radius:6px; overflow:hidden; }
.bar-row .bar-fill{ height:100%; border-radius:6px; transition:width .4s; }
.bar-row .bar-val{ min-width:88px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.chart-empty{ color:var(--text-mut); text-align:center; padding:14px 0; font-size:13px; }

.month-nav{ display:flex; align-items:center; gap:10px; }
.month-nav .lbl{ font-size:17px; font-weight:700; min-width:150px; text-align:center; }
.month-nav .btn{ padding:6px 13px; }

.muted{ color:var(--text-mut); }
.right{ text-align:right; }
.nowrap{ white-space:nowrap; }
.flash{ position:fixed; bottom:22px; right:22px; z-index:200; }
.flash .alert{ box-shadow:0 10px 30px rgba(28,24,15,.2); }