/* ====== Design System (tokens) ====== */
:root{
  /* palette - Thème clair avec bleu comme couleur secondaire */
  --bg: #ffffff;
  --bg-2: #f8f9fa;
  --panel: #ffffff;
  --panel-2: #f8f9fa;
  --glass: rgba(92, 124, 255, 0.04);
  --border: #e1e5e9;
  --muted: #6c757d;
  --text: #212529;

  --brand: #5c7cff;
  --brand-2: #4a6cff;
  --ok: #198754;
  --warn: #ffc107;
  --danger: #dc3545;

  /* effects */
  --radius: 14px;
  --shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.02);
  --ring: 0 0 0 3px rgba(92, 124, 255, 0.15);

  /* spacing system (8px grid) */
  --s-1: 4px; --s0: 8px; --s1: 12px; --s2: 16px; --s3: 20px;
  --s4: 24px; --s5: 28px; --s6: 32px; --s8: 40px;
}

/* ===========================
 *  Thème sombre (toggle JS)
 * ======================== */
body.theme-dark{
  --bg: #020617;
  --bg-2: #0f172a;
  --panel: #020817;
  --panel-2: #020617;
  --glass: rgba(148, 163, 255, 0.07);
  --border: #1f2937;
  --muted: #9ca3af;
  --text: #e5e7eb;

  --brand: #818cf8;
  --brand-2: #a5b4fc;

  background: var(--bg);
  color: var(--text);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
  color:var(--text);
  background: var(--bg);
}

/* ====== Layout ====== */
#app-main{margin-left:280px; min-height:100vh; display:flex; flex-direction:column;}
.view{padding: var(--s4); background: var(--bg-2); flex:1;}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--s3) var(--s4);
  background: var(--panel);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.title{margin:0; font-size:28px; font-weight:800; letter-spacing:.2px; color: var(--text);}

.toolbar{display:flex; gap:10px; align-items:center}
.chip{
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background: var(--panel);
  color:var(--muted); font-weight:700;
}

/* ====== Sidebar ====== */
.sidebar.fixed{
  position:fixed; left:0; top:0; bottom:0; width:280px; z-index:20;
  display:flex; flex-direction:column; gap:var(--s2);
  padding: var(--s3) var(--s3);
  background: var(--panel);
  border-right:1px solid var(--border);
  box-shadow: 2px 0 8px rgba(0,0,0,.04);

  /* 👉 pour pouvoir scroller quand la liste est longue */
  overflow-y: auto;
}

.brand{display:flex; align-items:center; gap:12px; padding:6px 4px}
.logo{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; font-weight:900;
  color:#ffffff; background:linear-gradient(180deg,#87a3ff,#5c7cff); box-shadow:var(--shadow)
}
.brand-text h1{margin:0; font-size:16px; font-weight:800; color: var(--text);}
.brand-text small{color:var(--muted)}

.nav{display:flex; flex-direction:column; gap:6px; margin-top:var(--s2)}
.nav-section{margin:10px 8px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.nav-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; color:var(--text); text-decoration:none;
  border:1px solid transparent; transition:.15s;
  background:transparent;
}
.nav-link:hover{background:var(--glass); border-color:var(--border)}
.nav-link.active{
  background: rgba(92, 124, 255, 0.08);
  border-color: var(--brand);
  color: var(--brand-2);
  box-shadow: inset 0 0 0 1px rgba(92, 124, 255, 0.1);
}

.sidebar-footer{margin-top:auto; padding-top:var(--s2); border-top:1px dashed var(--border)}

/* ====== Cards / Panels ====== */
.card{
  background: var(--panel);
  border:1px solid var(--border); border-radius: var(--radius);
  padding: var(--s3); box-shadow: var(--shadow);
}
.grid-auto{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s2)}

/* ====== Buttons / Inputs ====== */
.btn{
  appearance:none; border:none; cursor:pointer; color:#fff;
  border-radius:12px; padding:10px 14px;
  background:linear-gradient(180deg,#315bff,#2449de);
  transition:transform .06s ease, box-shadow .15s ease, opacity .15s;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(49,91,255,.2)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text)}
.btn.outline{background:transparent; border:1px solid var(--brand); color:var(--brand)}
.only-mobile{display:none}

input, select, textarea{
  width:100%; padding:10px 12px; border-radius:12px;
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{ border-color:var(--brand); box-shadow: var(--ring); }
::placeholder{color:var(--muted)}

/* ====== Tables ====== */
.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border-radius:14px; border:1px solid var(--border);
  background: var(--panel);
}
.table thead th{
  background:var(--bg-2); color:var(--muted); padding:12px; text-align:left;
  position:sticky; top:0; z-index:1; border-bottom:1px solid var(--border)
}
.table tbody td{ padding:12px; background:var(--panel); border-bottom:1px solid var(--border)}
.table tbody tr:nth-child(even) td{ background:var(--bg-2) }
.table .td-actions{width:1%; white-space:nowrap}

/* ====== Utilities ====== */
.muted{color:var(--muted)}
.center{display:grid; place-items:center}
.hide{display:none}

/* ====== Accessibilité / Icônes menu ====== */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

#btn-menu{ display:inline-flex; align-items:center; gap:8px; }
#btn-menu .icon{ display:inline; }
#btn-menu .icon-close{ display:none; }
#btn-menu[aria-expanded="true"] .icon-menu{ display:none; }
#btn-menu[aria-expanded="true"] .icon-close{ display:inline; }

/* ====== Overlay ====== */
.overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:19;
}
.overlay.show{ opacity:1; pointer-events:auto; }

/* ====== Body scroll lock ====== */
.no-scroll{ overflow:hidden; }

/* ====== Bouton "X" pour fermer la sidebar (mobile) ====== */
.sidebar-close{
  position:absolute;
  top:12px; right:12px;
  display:none;               /* visible seulement en mobile */
  align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
  z-index: 21;                /* au-dessus de la sidebar (20) et de l’overlay (19) */
  cursor: pointer;
}
.sidebar-close:hover{ background:#f7f8fb; }

/* ====== Responsive ====== */
@media (max-width:900px){
  #app-main{margin-left:0}
  .only-mobile{display:inline-flex}

  .sidebar.fixed{
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 84vw; max-width: 320px;
    box-shadow: 12px 0 30px rgba(0,0,0,.12);
  }
  .sidebar.fixed.open{ transform: translateX(0); }

  #btn-menu.btn.ghost{ background:#fff; border:1px solid var(--border); }
  .sidebar-close{ display:inline-flex; }
}

/* ====== Forcer le bon comportement en desktop ====== */
@media (min-width:901px){
  .overlay{ display:none !important; }      /* ← jamais d’overlay en desktop */
  .sidebar.fixed{ transform:none !important; }
  body.no-scroll{ overflow:auto !important; }
}
/* =========================================================
 *  SPLASH SCREEN
 * ======================================================= */
.splash-screen{
  position:fixed;
  inset:0;
  background: radial-gradient(circle at top left, #dde5ff 0, #ffffff 40%, #f5f7ff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:30;
}

.splash-inner{
  text-align:center;
  padding:var(--s5) var(--s6);
  background:rgba(255,255,255,0.9);
  border-radius:28px;
  box-shadow:var(--shadow);
  max-width:420px;
  width:90%;
}

.splash-logo{
  width:70px;
  height:70px;
  margin:0 auto var(--s3);
  border-radius:22px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:26px;
  color:#fff;
  background:linear-gradient(145deg,#5c7cff,#2449de);
  box-shadow:0 18px 40px rgba(36,73,222,.35);
}

.splash-title{
  margin:0 0 var(--s1);
  font-size:26px;
  font-weight:900;
  letter-spacing:0.03em;
}

.splash-subtitle{
  margin:0 0 var(--s3);
  color:var(--muted);
}

/* petits points de chargement */
.splash-loader{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:var(--s2);
}
.splash-loader .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--brand);
  opacity:.3;
  animation:bounce 0.9s infinite alternate;
}
.splash-loader .dot:nth-child(2){ animation-delay:.15s; }
.splash-loader .dot:nth-child(3){ animation-delay:.3s; }

@keyframes bounce{
  from{ transform:translateY(0); opacity:.2; }
  to{ transform:translateY(-6px); opacity:1; }
}

.splash-hint{
  margin:0;
  font-size:12px;
  color:var(--muted);
}

/* =========================================================
 *  LOGIN / AUTH SCREEN
 * ======================================================= */
.auth-screen{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s4);
  background:linear-gradient(135deg,#eef1ff,#ffffff);
  z-index:25;
}

.auth-card{
  width:100%;
  max-width:420px;
  border-radius:24px;
  background:var(--panel);
  padding:var(--s4);
  box-shadow:var(--shadow);
}

.auth-brand{
  display:flex;
  align-items:center;
  gap:var(--s2);
  margin-bottom:var(--s3);
}

.auth-logo{
  width:52px;
  height:52px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:22px;
  color:#fff;
  background:linear-gradient(145deg,#5c7cff,#2449de);
}

.auth-brand h2{
  margin:0;
  font-size:22px;
  font-weight:800;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:var(--s2);
}

.auth-form .field label{
  display:block;
  margin-bottom:4px;
  font-size:13px;
  font-weight:600;
}

.auth-form .field input{
  width:100%;
}

.auth-error{
  padding:8px 10px;
  border-radius:10px;
  background:rgba(220,53,69,0.08);
  color:#a52834;
  border:1px solid rgba(220,53,69,0.35);
  font-size:13px;
}

.auth-submit{
  width:100%;
  margin-top:var(--s1);
}

.auth-footnote{
  font-size:11px;
  margin:4px 0 0;
}

/* Mobile ajustement */
@media (max-width:600px){
  .auth-card{
    border-radius:18px;
    padding:var(--s3);
  }
  .splash-inner{
    padding:var(--s4);
    border-radius:22px;
  }
}
/* Toujours en dernier : forcer le masquage */
.splash-screen.hide,
.auth-screen.hide,
#app-shell.hide{
  display:none !important;
}
/* Topbar layout */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--s3) var(--s4);
  background: var(--panel);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:var(--s2);
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:var(--s2);
}

/* Boutons icônes (thème + profil) */
.icon-btn{
  border:none;
  background: var(--panel-2);
  border-radius:999px;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 3px 8px rgba(15,23,42,0.06);
  border:1px solid var(--border);
  color:var(--text);
  padding:0;
  transition:
    background .15s ease,
    box-shadow .15s ease,
    transform .06s ease,
    border-color .15s ease;
}

.icon-btn:hover{
  background:var(--bg-2);
  box-shadow:0 6px 16px rgba(15,23,42,0.12);
  transform:translateY(-1px);
}

.icon-btn:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(15,23,42,0.08);
}

/* Avatar profil */
.avatar-btn{
  width:40px;
  height:40px;
  padding:0;
}

.avatar-initials{
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Icônes thème : par défaut lune visible, soleil caché */
#btn-theme .icon-sun{ display:none; }
#btn-theme .icon-moon{ display:inline; }

/* En mode sombre : inverser soleil / lune */
body.theme-dark #btn-theme .icon-sun{ display:inline; }
body.theme-dark #btn-theme .icon-moon{ display:none; }