/* ============================================================
   student.css — styles page Chaos Étudiant
   PerfShop — SPDX-License-Identifier: AGPL-3.0-or-later
   ============================================================ */

:root {
  --bg:       #0d0d14;
  --surface:  #13131e;
  --surface2: #1c1c2e;
  --border:   #2a2a40;
  --accent:   #667eea;
  --danger:   #ff4757;
  --success:  #2ed573;
  --warning:  #ffa502;
  --text:     #e8e8f0;
  --text2:    #7878a0;
  --perf:     #38bdf8;
  --script:   #a78bfa;
  --business: #fb923c;
  --func:     #facc15;
  --security: #ef4444;
  --pedagogy: #34d399;
  --n1-color: #2ed573;
  --n2-color: #ffa502;
  --n3-color: #ff4757;
  --n4-color: #c084fc;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; padding: 24px;
}

/* ── Header ────────────────────────────────────────────────── */
header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 28px; margin-bottom: 20px;
}
.header-left h1 { font-size: 1.4rem; font-weight: 700; }
.header-left p  { font-size: 0.82rem; color: var(--text2); margin-top: 3px;
                  font-family: 'DM Mono', monospace; }
.header-right   { display: flex; gap: 10px; align-items: center; }

/* ── Boutons ────────────────────────────────────────────────── */
.btn {
  padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
  font-weight: 600; transition: opacity 0.2s;
}
.btn:hover    { opacity: 0.8; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-admin   { background: rgba(102,126,234,0.15); color: var(--accent);
               border: 1px solid rgba(102,126,234,0.35); }
.btn-licence { background: rgba(46,213,115,0.12); color: var(--success);
               border: 1px solid rgba(46,213,115,0.3); }

/* ── Banners ────────────────────────────────────────────────── */
.warning-bar {
  background: rgba(255,165,2,0.08); border: 1px solid rgba(255,165,2,0.25);
  border-radius: 10px; padding: 12px 18px; margin-bottom: 20px;
  font-size: 0.85rem; color: #ffc55a;
}
#blocked-banner {
  display: none; background: rgba(255,71,87,0.07);
  border: 1px solid rgba(255,71,87,0.25); border-radius: 12px;
  padding: 20px 24px; margin-bottom: 20px; text-align: center;
}
#blocked-banner.show { display: block; }
#blocked-banner h2 { font-size: 1.1rem; font-weight: 700; color: var(--danger); margin-bottom: 6px; }
#blocked-banner p  { font-size: 0.85rem; color: var(--text2); }

/* ── Licence banner ─────────────────────────────────────────── */
#licence-banner {
  display: none; background: rgba(102,126,234,0.07);
  border: 1px solid rgba(102,126,234,0.25); border-radius: 12px;
  padding: 18px 22px; margin-bottom: 20px;
}
#licence-banner.show { display: block; }
.lic-banner-title { font-size: 0.9rem; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.lic-banner-body  { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.lic-textarea {
  flex: 1; min-width: 260px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  font-family: 'DM Mono', monospace; font-size: 0.78rem;
  padding: 10px 12px; resize: vertical; min-height: 56px;
}
.lic-textarea:focus { outline: none; border-color: var(--accent); }
.btn-lic-activate {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: 10px 18px; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.btn-lic-activate:hover { opacity: 0.85; }
#lic-msg { margin-top: 8px; font-size: 0.82rem; display: none; }
#lic-msg.ok  { color: var(--success); display: block; }
#lic-msg.err { color: var(--danger);  display: block; }

/* ── Licence status bar ─────────────────────────────────────── */
#lic-status-bar {
  display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 18px; margin-bottom: 20px; font-size: 0.84rem;
}
.lic-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lic-dot.ok   { background: var(--success); box-shadow: 0 0 6px var(--success); }
.lic-dot.none { background: var(--text2); }
.lic-toggle-btn {
  margin-left: auto; padding: 5px 12px; border-radius: 6px;
  border: 1px solid rgba(102,126,234,0.25); cursor: pointer;
  font-size: 0.78rem; font-weight: 600;
  background: rgba(102,126,234,0.12); color: var(--accent);
}
.lic-toggle-btn:hover { opacity: 0.8; }