:root{
  --bg:#0b0c0f;
  --surface:#111317;
  --elev:#161a20;
  --text:#e7eaf0;
  --muted:#9aa4b2;
  --primary:#6ea8fe;
  --primary-600:#4f8df6;
  --success:#46d39a;
  --danger:#ff6b6b;
  --warning:#ffd166;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,.08);
}

/* Light mode */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb;
    --surface:#ffffff;
    --elev:#ffffff;
    --text:#1b2430;
    --muted:#66748b;
    --primary:#2f6bff;
    --primary-600:#2250cc;
    --shadow:0 8px 28px rgba(2,8,20,.08);
    --border:1px solid rgba(2,8,20,.06);
  }
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Centered container + card */
.container-centered{min-height:100dvh;display:grid;place-items:center;padding:24px}
.card{
  width:min(420px,92vw);
  background:var(--surface);
  border-radius:var(--radius);
  border:var(--border);
  box-shadow:var(--shadow);
  padding:28px;
}
.card h1,.card h2{margin:0 0 10px}
.card p{margin:0 0 16px;color:var(--muted)}
.avatar{
  height:56px;width:56px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
  color:#fff;font-weight:700;margin:0 auto 14px;
}

/* Forms */
.form{display:grid;gap:14px}
.label{font-size:.9rem;color:var(--muted)}
.input{
  width:100%;padding:12px 14px;border-radius:12px;
  background:transparent;border:1px solid rgba(255,255,255,.12);
  color:var(--text);outline:0;transition:border-color .15s, box-shadow .15s;
}
.input::placeholder{color:color-mix(in oklab,var(--muted) 75%,transparent)}
.input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 30%,transparent);
}

/* Buttons */
.btn{appearance:none;border:0;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:600}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 16px color-mix(in oklab,var(--primary) 30%,transparent)}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.12)}
.btn-danger{background:var(--danger);color:#fff}
.btn-success{background:var(--success);color:#000}
.actions{display:flex;gap:10px;justify-content:center}
.helper{font-size:.85rem;color:var(--muted)}
.link{color:var(--primary);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}

/* Header */
.header{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:14px 18px;background:var(--surface);border-bottom:var(--border);box-shadow:var(--shadow)
}
.header h1{font-size:1.1rem;margin:0;flex:1}
.profile-menu{margin-left:auto;display:flex;align-items:center;gap:10px;position:relative;cursor:pointer}
.user-email{font-size:.95rem;color:var(--muted)}
.profile-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);
  background:var(--elev);border:var(--border);
  border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;min-width:220px;z-index:1000
}
.profile-dropdown a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none}
.profile-dropdown a:hover{background:rgba(255,255,255,.06)}
@media (max-width:768px){
  .header h1{display:none}
  .header{justify-content:flex-end}
  .profile-dropdown{min-width:80vw}
}

/* Tables (DataTables friendly) */
.table-wrap{padding:18px}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:0 12px}
.table tbody tr{background:var(--surface);border:var(--border)}
.table tbody td{padding:14px 12px;border-top:var(--border)}
.table .actions .btn{padding:8px 10px}

.datatable-center {
  width: 100%;
  display: flex;
  justify-content: center;
}

.datatable-center table {
  margin: 0 auto;
  text-align: left;
}

.datatable-center table thead th {
  text-align: center !important;
}

.datatable-center table tbody td {
  text-align: left !important;
}



/* Namespaced Modal to avoid conflicts with libs */
.x-modal{
  position:fixed;inset:0;
  display:none;place-items:center;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:2000;
}
.x-modal.open{display:grid}
.x-modal__content{
  background:var(--surface);border:var(--border);
  border-radius:16px;box-shadow:var(--shadow);
  width:min(640px,92vw);max-height:85dvh;overflow:auto;padding:18px;
}
.x-modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.x-modal__close{cursor:pointer;font-size:22px;color:var(--muted)}
.x-modal__body{text-align:center}
.x-modal__body table{margin:0 auto;text-align:left}

/* Mobile full-screen modal */
@media (max-width:768px){
  .x-modal__content{
    width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:16px;
  }
}

/* Snackbar */
.snackbar{
  position:fixed;left:50%;top:24px;transform:translateX(-50%);
  padding:12px 16px;border-radius:12px;background:var(--elev);
  border:var(--border);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s;z-index:3000;
}
.snackbar.show{opacity:1}
.snackbar.green{border-color:color-mix(in oklab,var(--success) 50%,transparent)}

/* Utilities */
.center{text-align:center}
.stack{display:grid;gap:6px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}

/* crédits/débits */
.t-green{color:var(--success)}
.t-red{color:var(--danger)}