/* ===== THEME ===== */
:root { --bg:#0f1226; --bg-2:#141735; --card:#181b3f; --text:#e7e9ff; --text-weak:#b9bbd5; --muted:#9496ad; --hairline:rgba(255,255,255,.08); --table-stripe:rgba(255,255,255,.03); --brand:#7c5cff; --accent:#22d3ee; --ring:rgba(124,92,255,.35); }
[data-theme="light"] { --bg:#f6f7fb; --bg-2:#eef0f6; --card:#ffffff; --text:#0f1226; --text-weak:#5a5d76; --muted:#6b6f88; --hairline:rgba(10,12,30,.08); --table-stripe:rgba(10,12,30,.03); --ring:rgba(124,92,255,.2); }
html,body { height:100% }
body { background: radial-gradient(1000px 500px at 10% -10%, rgba(124,92,255,.15), transparent 60%), radial-gradient(600px 500px at 90% 10%, rgba(34,211,238,.12), transparent 60%), var(--bg); color:var(--text); }

/* ===== LAYOUT ===== */
.app { display:grid; grid-template-columns: 1fr; min-height:100%; }
.topbar { position:sticky; top:0; z-index:8; display:flex; gap:10px; align-items:center; padding:10px 12px; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent); border-bottom:1px solid var(--hairline); } 
.menu-btn,.mode-btn { border:1px solid var(--hairline); background:transparent; color:var(--text-weak); border-radius:12px; padding:.5rem .7rem; }
.brand { font-weight:800; letter-spacing:.2px; }
.search { flex:1; position:relative }
.search input { border:1px solid var(--hairline); background:var(--card); color:var(--text); padding-left:2.1rem; border-radius:12px; }
.search .bi { position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:var(--muted) }

/* Sidebar (drawer mobile) */
.drawer { position:fixed; inset:0 40% 0 0; max-width:280px; background:var(--bg-2); border-right:1px solid var(--hairline); transform:translateX(-105%); transition:.25s ease; z-index:10; padding:16px; }
.drawer.open { transform:none; box-shadow: 8px 0 24px rgba(0,0,0,.2); } 
.drawer .nav-link { color:var(--text-weak); border-radius:12px; padding:.6rem .8rem; }
.drawer .nav-link.active,.drawer .nav-link:hover { color:var(--text); background:var(--table-stripe); } 
.drawer-close { position:absolute; right:10px; top:10px; }

.content { padding:14px; }
.kpi { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--hairline); border-radius:16px; padding:14px; }
.kpi .title { color:var(--muted); font-size:.9rem; font-weight:600 }
.kpi .value { font-size:1.6rem; font-weight:800 }

.card-pro { background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:16px; }
.btn-brand { background:linear-gradient(135deg,var(--brand),#9f7bff); border:none; color:white }
.btn-ghost { background:transparent; border:1px solid var(--hairline); color:var(--text) }

/* ===== TABLE → CARDS en mobile ===== */
.table-wrap { overflow:auto; -webkit-overflow-scrolling:touch; }
table.table { color:var(--text); white-space:nowrap; }
.table thead th { position:sticky; top:0; background:var(--card); z-index:1 }
.table-striped>tbody>tr:nth-of-type(odd) { --bs-table-accent-bg: var(--table-stripe); } 
.pill { border-radius:999px; padding:.2rem .55rem; font-size:.8rem; border:1px solid var(--hairline); color:var(--muted) }
.badge-null { background:#6c757d }
@media (max-width: 575.98px){ .table{display:none;} .stacked{display:grid; gap:.6rem;} .stack{border:1px solid var(--hairline); background:var(--card); border-radius:12px; padding:12px;} .stack .row1{display:flex; justify-content:space-between; gap:.6rem; font-weight:700} .stack .row2{display:flex; gap:.4rem; flex-wrap:wrap; color:var(--text-weak)} .stack .row3{display:flex; justify-content:space-between; align-items:center; margin-top:.4rem} }
@media (min-width: 576px){ .stacked{display:none;} }

.ring { box-shadow:0 0 0 .25rem var(--ring) }
.form-control,.form-select { border-radius:12px; border:1px solid var(--hairline); background:var(--card); color:var(--text) }
label.form-label { font-weight:600; color:var(--text-weak); } 

@media (min-width: 768px){ .app{grid-template-columns: 240px 1fr;} .drawer{position:sticky; transform:none; inset:auto; max-width:none; height:100vh;} .drawer-close{display:none;} .content{padding:22px;} .kpi .value{font-size:1.8rem;} }
@media (min-width: 992px){ .kpi{padding:18px;} }

/* ===== Page connexion ===== */
.auth-card {
  grid-column: 1 / -1;  /* <--- AJOUTE CETTE LIGNE ICI */
  max-width: 450px;
  margin: 4rem auto;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px;
}