/* common.css — NekoDesk — partagé entre login, control, dashboard */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ── */
:root {
  /* surfaces vitrées */
  --s1: rgba(10,10,13,0.55);
  --s2: rgba(18,18,22,0.50);
  --s3: rgba(28,28,34,0.52);
  --s4: rgba(34,34,40,0.48);
  /* bordures */
  --b1: rgba(255,255,255,0.07);
  --b2: rgba(255,255,255,0.10);
  --b3: rgba(255,255,255,0.16);
  /* accent vert */
  --g:  #00ff88; --g2: #00cc6a;
  --g3: rgba(0,255,136,.08); --g4: rgba(0,255,136,.18);
  /* accent violet */
  --v:  #7c3aed; --v2: #9d5cf5;
  --v3: rgba(124,58,237,.10); --v4: rgba(124,58,237,.20);
  /* accent cyan */
  --cy: #00d4ff; --cy2: rgba(0,212,255,.10);
  /* accent amber (alias --amb) */
  --amb: #ffb300; --amb2: rgba(255,179,0,.12);
  --a: var(--amb); --a2: var(--amb2);
  /* texte */
  --t1: rgba(255,255,255,0.88);
  --t2: rgba(255,255,255,0.50);
  --t3: rgba(255,255,255,0.28);
  --t4: rgba(255,255,255,0.13);
  /* états */
  --red:  #ff4757; --red2: rgba(255,71,87,.12);
  /* typo */
  --f: 'Space Grotesk', sans-serif;
  --m: 'JetBrains Mono', monospace;
  /* rayons */
  --r: 8px; --r2: 12px; --r3: 16px;
  /* verre */
  --glass:        rgba(10,10,13,0.55);
  --glass-border: rgba(255,255,255,0.09);
  --blur:         blur(20px) saturate(1.2);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b3); border-radius: 2px; }

select option { background: #0e0e12 !important; color: var(--t1) !important; }

/* ── Material Symbols Rounded ── */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--r);font-family:var(--f);font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid var(--b2);background:transparent;color:var(--t1);transition:all .15s}
.btn:hover{background:var(--s2)}
.btn.g{background:var(--g3);border-color:rgba(0,255,136,.2);color:var(--g)}
.btn.g:hover{background:var(--g4)}
.btn.v{background:var(--v3);border-color:rgba(124,58,237,.25);color:var(--v2)}
.btn.v:hover{background:var(--v4)}
.btn.r{background:var(--red2);border-color:rgba(255,71,87,.2);color:var(--red)}
.btn.r:hover{background:rgba(255,71,87,.2)}
.btn.cy{background:var(--cy2);border-color:rgba(0,212,255,.2);color:var(--cy)}
.btn.a{background:var(--a2);border-color:rgba(255,179,0,.2);color:var(--amb)}

/* ── Inline messages ── */
.smsg{font-size:12px;padding:8px 12px;border-radius:var(--r);margin-top:.75rem;display:none}
.smsg.on{display:block}
.smsg.ok{background:var(--g3);color:var(--g);border:1px solid rgba(0,255,136,.18)}
.smsg.err{background:var(--red2);color:var(--red);border:1px solid rgba(255,71,87,.18)}
.smsg.info{background:var(--v3);color:var(--v2);border:1px solid rgba(124,58,237,.18)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600}
.badge.active,.badge.online{background:var(--g3);color:var(--g)}
.badge.pending{background:var(--amb2);color:var(--amb)}
.badge.banned,.badge.offline{background:var(--red2);color:var(--red)}
.badge.admin{background:var(--v3);color:var(--v2)}

/* ── Modales ── */
.moverlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(2px)}
.moverlay.on{display:flex}
.mbox{
  background:rgba(10,10,14,0.85);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--r2);
  padding:1.5rem;
  width:400px;
  display:flex;flex-direction:column;gap:1rem;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  max-height:90vh;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mbox-title{font-size:.95rem;font-weight:600;display:flex;align-items:center;justify-content:space-between}
.mx{background:none;border:none;cursor:pointer;color:var(--t3);font-size:1.2rem;line-height:1;transition:color .15s}
.mx:hover{color:var(--t1)}
.mlbl{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.mi,.ms{width:100%;background:var(--s2);border:1px solid var(--b2);border-radius:var(--r);padding:9px 12px;font-family:var(--f);font-size:13px;color:var(--t1);outline:none}
.mi:focus,.ms:focus{border-color:var(--v)}
.mbts{display:flex;gap:.5rem;justify-content:flex-end}

/* ── Toast ── */
.toast-wrap{position:fixed;bottom:2rem;right:1.5rem;display:flex;flex-direction:column;gap:.5rem;z-index:3000;pointer-events:none}
.toast{background:rgba(10,10,14,0.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--b2);border-radius:var(--r);padding:.65rem 1rem;font-size:12.5px;color:var(--t1);box-shadow:0 4px 20px rgba(0,0,0,.4);animation:toastIn .2s ease;max-width:320px}
.toast.err{border-color:rgba(255,71,87,.3);color:var(--red)}
.toast.ok{border-color:rgba(0,255,136,.2);color:var(--g)}
.toast.info{border-color:rgba(0,212,255,.2);color:var(--cy)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Glassmorphism utilities ── */
.glass-card{
  background:var(--s1);
  border:1px solid var(--glass-border);
  border-radius:var(--r2);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
}
/* voile sombre générique — à appliquer sur la zone contenu de chaque page */
.app-veil{background:rgba(0,0,0,0.32) !important}