/* Shared app shell — student dashboard + admin panel.
   Same black & gold tokens as landing.css, laid out for functional UI
   (sidebar + content) rather than a marketing page. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #0B0A08;
  --bg-panel: #14120D;
  --bg-panel-2: #1C1913;
  --gold: #C6A15B;
  --gold-bright: #E8C77D;
  --gold-dim: rgba(198,161,91,0.14);
  --gold-line: rgba(198,161,91,0.28);
  --ivory: #F3EEE2;
  --muted: #9C9483;
  --muted-2: #6E6858;
  --danger: #D96B5A;
  --success: #7FBF8C;
  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }
body{
  margin:0; background: var(--bg); color: var(--ivory);
  font-family: var(--font-body); font-size:15px; line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }

.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:250px; flex-shrink:0;
  background: var(--bg-panel);
  border-right:1px solid var(--gold-line);
  padding: 28px 20px;
  position:sticky; top:0; height:100vh;
}
.sidebar .brand{ font-family: var(--font-display); font-size:19px; margin-bottom:36px; display:block; }
.sidebar nav a{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:4px; font-size:14px; color: var(--muted);
  margin-bottom:4px; transition: all .15s ease;
}
.sidebar nav a:hover, .sidebar nav a.active{ background: var(--gold-dim); color: var(--gold-bright); }
.sidebar .logout{ margin-top:30px; border-top:1px solid var(--gold-line); padding-top:20px; }

.main{ flex:1; padding: 36px 44px; max-width:1100px; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; flex-wrap:wrap; gap:14px; }
.page-head h1{ font-family: var(--font-display); font-size:28px; font-weight:600; }
.page-head p{ color: var(--muted); font-size:14px; margin-top:6px; }

.card{
  background: var(--bg-panel); border:1px solid var(--gold-line);
  border-radius:6px; padding:24px;
}
.card + .card{ margin-top:18px; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:28px; }
.stat-card{ background: var(--bg-panel); border:1px solid var(--gold-line); border-radius:6px; padding:20px; }
.stat-card .num{ font-family: var(--font-mono); font-size:26px; color: var(--gold-bright); }
.stat-card .label{ font-size:12.5px; color: var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:.05em; }

table{ width:100%; border-collapse:collapse; font-size:14px; }
th{ text-align:left; color: var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; padding:10px 12px; border-bottom:1px solid var(--gold-line); }
td{ padding:13px 12px; border-bottom:1px solid rgba(198,161,91,0.14); }
tr:last-child td{ border-bottom:none; }

.badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-family: var(--font-mono); }
.badge-pending{ background: rgba(230,180,80,0.15); color: var(--gold-bright); }
.badge-verified, .badge-active{ background: rgba(127,191,140,0.15); color: var(--success); }
.badge-rejected, .badge-revoked{ background: rgba(217,107,90,0.15); color: var(--danger); }

.btn{
  display:inline-block; border:1px solid var(--gold); color: var(--gold-bright);
  padding:9px 18px; border-radius:4px; font-size:13.5px; background:none; cursor:pointer;
  font-family:inherit; transition: all .15s ease;
}
.btn:hover{ background: var(--gold); color:#141005; }
.btn-danger{ border-color: var(--danger); color: var(--danger); }
.btn-danger:hover{ background: var(--danger); color:#141005; }
.btn-block{ display:block; width:100%; text-align:center; }

.form-group{ margin-bottom:18px; }
label{ display:block; font-size:13px; color: var(--muted); margin-bottom:7px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=datetime-local], input[type=file], textarea, select{
  width:100%; background: var(--bg); border:1px solid var(--gold-line); color: var(--ivory);
  padding:11px 13px; border-radius:4px; font-family:inherit; font-size:14px;
}
textarea{ min-height:110px; resize:vertical; }
input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--gold); }

.alert{ padding:13px 16px; border-radius:4px; font-size:14px; margin-bottom:20px; }
.alert-success{ background: rgba(127,191,140,0.12); border:1px solid rgba(127,191,140,0.4); color: var(--success); }
.alert-error{ background: rgba(217,107,90,0.12); border:1px solid rgba(217,107,90,0.4); color: var(--danger); }

.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ width:100%; max-width:400px; background: var(--bg-panel); border:1px solid var(--gold-line); border-radius:8px; padding:38px; }
.auth-card h1{ font-family: var(--font-display); font-size:24px; margin-bottom:8px; }
.auth-card p.sub{ color: var(--muted); font-size:13.5px; margin-bottom:26px; }
.auth-card .switch{ text-align:center; margin-top:20px; font-size:13.5px; color: var(--muted); }
.auth-card .switch a{ color: var(--gold-bright); }

.qr-box{ text-align:center; background:#fff; padding:20px; border-radius:6px; max-width:260px; margin:0 auto; }
.qr-box img{ width:100%; display:block; }

@media (max-width: 800px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:relative; }
  .main{ padding:26px 20px; }
}