/* ============================
   styles.css — global layout
   ============================ */

/* Polices */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Montserrat:wght@700;800&display=swap');

/* -------- Thème / Variables -------- */
:root{
  --brand-primary: #173454;        /* bleu app */
  --brand-secondary: #c29a32;      /* doré */
  --bg: #0f141b;                   /* fond général */
  --panel: #121a23;                /* panneaux/cartes */
  --ink: #f3f7ff;                  /* texte principal */
  --muted: #b2c0d6;                /* texte secondaire */
  --radius: 12px;
  --shadow-1: 0 10px 24px rgba(0,0,0,.28);
  --shadow-2: 0 6px 16px rgba(0,0,0,.20);
  --topbar-h: 56px;
}

/* -------- Reset léger -------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ font-size:16px; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.4;
}
a{ color:#9ec7ff; text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,.h1{
  font-family: Montserrat, Inter, sans-serif;
  font-weight:800; margin:0 0 18px; letter-spacing:.2px;
}

/* ================= Topbar ================= */
.topbar{
  position:sticky; top:0; z-index:1000;
  height:var(--topbar-h); width:100%;
  display:flex; align-items:center; gap:16px;
  padding:0 16px;
  background:var(--brand-primary); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-2);
}
.topbar .brand{
  display:inline-flex; align-items:center; gap:10px;
  color:inherit; text-decoration:none; font-weight:700;
}
.topbar .brand img{ width:28px; height:28px; display:block; }
.topbar .spacer{ flex:1; }
.topbar .actions{ display:inline-flex; align-items:center; gap:10px; }
.topbar .avatar{
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  background: color-mix(in srgb, white 10%, var(--brand-primary));
  border:1px solid rgba(255,255,255,.18);
}
/* Ghost lisible UNIQUEMENT dans la topbar */
.topbar .btn--ghost{
  color:#fff;
  border-color:rgba(255,255,255,.22);
}

/* ================ Layout ================ */
.layout{
  display:grid;
  grid-template-columns: 220px 1fr;       /* sidebar | contenu */
  min-height: calc(100vh - var(--topbar-h));
}
.sidebar{
  background:var(--brand-primary); color:#fff;
  padding:8px 12px 16px;
  border-right:1px solid rgba(255,255,255,.08);
}
.sidebar .brand{ display:none; }
.sidebar .nav{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.sidebar .nav a{
  display:block; color:#eaf2ff; text-decoration:none;
  padding:10px 12px; border-radius:8px; font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.sidebar .nav a:hover{ background:rgba(255,255,255,.08); }
.sidebar .nav a.active{
  background:linear-gradient(135deg,#c29a32,#8a6c1e); color:#0e1b2a;
}

main{
  grid-column:2; padding:28px 32px;
  max-width:1400px; margin:0 auto;
}

/* ================ Cartes génériques ================ */
.card{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  border:1px solid rgba(255,255,255,.06);
}

/* ================ Boutons (globaux) ================ */
.btn{
  appearance:none; border:0; outline:0; cursor:pointer;
  padding:10px 14px; border-radius:10px; font-weight:700;
  color:#0d1220; background:#fff;
  transition:transform .04s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ filter:brightness(1.04); }
.btn:active{ transform:translateY(1px); }

.btn--primary{
  color:#111;
  background:linear-gradient(135deg, var(--brand-secondary), #e3c66a);
  box-shadow:0 6px 14px rgba(194,154,50,.25);
}
/* Ghost par défaut (pour fonds sombres clairs dans le contenu) */
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.18);
}
.btn--sm{ padding:8px 12px; border-radius:9px; }

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

/* Bouton "Se déconnecter" doré dans la topbar */
.topbar #logout-btn{
  /* override du style ghost de la topbar */
  background: linear-gradient(135deg, var(--brand-secondary), #e3c66a);
  color: #0e1b2a;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 70%, #000 30%);
  box-shadow: 0 6px 14px rgba(194,154,50,.25);
}

.topbar #logout-btn:hover{
  filter: brightness(1.06);
}

.topbar #logout-btn:active{
  transform: translateY(1px);
}

.topbar #logout-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-secondary) 50%, #fff 50%);
  border-color: transparent;
}

/* Bouton "Se déconnecter" doré dans la topbar */
.topbar #logout-btn{
  /* override du style ghost de la topbar */
  background: linear-gradient(135deg, var(--brand-secondary), #e3c66a);
  color: #ffffff;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 70%, #000 30%);
  box-shadow: 0 6px 14px rgba(194,154,50,.25);
}

.topbar #logout-btn:hover{
  filter: brightness(1.06);
}

.topbar #logout-btn:active{
  transform: translateY(1px);
}

.topbar #logout-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-secondary) 50%, #fff 50%);
  border-color: transparent;
}

/* --- Boutons dorés / danger --- */
.btn--gold{
  color:#111;
  background:linear-gradient(135deg, var(--brand-secondary), #e3c66a);
  border:1px solid rgba(194,154,50,.55);
  box-shadow:0 6px 14px rgba(194,154,50,.25);
}
.btn--danger{
  color:#fff;
  background:#c0392b;
  border:1px solid #a93226;
}
.btn--sm{ padding:8px 12px; border-radius:10px; }

/* --- Pagination compacte --- */
.pagination{
  display:flex; gap:8px; justify-content:flex-end;
  padding:12px;
}
.pagination .btn{ padding:6px 10px; }
.pagination .page{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; border-radius:10px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
}
.pagination .page.is-active{
  background:linear-gradient(135deg, var(--brand-secondary), #e3c66a);
  color:#111; font-weight:700;
}