:root{
  --navy:#0b2545;
  --navy-2:#13315c;
  --accent-2:#ffcc33;
  --bg:#f4f6f9;
  --card:#ffffff;
  --border:#dde3ea;
  --text:#1c2733;
  --muted:#6b7785;
  --radius:12px;
  --success:#1b8a5a;
  --success-bg:#e7f7ef;
  --danger:#c1352b;
  --danger-bg:#fbeaea;
  --info:#215a8c;
  --info-bg:#e8f1fb;
  --warn:#96690a;
  --warn-bg:#fff3d6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy-2);}

/* ---------- Topbar ---------- */
.topbar{
  background:linear-gradient(90deg,var(--navy),var(--navy-2));
  color:#fff;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  padding:0 20px;
}
.topbar .brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:1.05rem;
  padding:14px 16px 14px 0;
  white-space:nowrap;
}
.topbar .brand-mark{
  background:var(--accent-2);color:var(--navy);
  font-weight:800;border-radius:8px;padding:4px 9px;font-size:.82rem;
}
.topbar nav{display:flex;flex-wrap:wrap;gap:2px;margin-left:6px;}
.topbar nav a{
  color:#dfe8f5;
  text-decoration:none;
  padding:10px 14px;
  border-radius:8px 8px 0 0;
  font-size:.92rem;
  font-weight:500;
}
.topbar nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
.topbar nav a.active{background:var(--bg);color:var(--navy);font-weight:700;}
.topbar .spacer{flex:1;}
.topbar .user-area{
  display:flex;align-items:center;gap:12px;padding:10px 0;
}
.topbar .user-name{
  font-size:.85rem;
  background:rgba(255,255,255,.12);
  padding:6px 14px;
  border-radius:20px;
}
.topbar .logout{
  color:#fff;
  background:rgba(255,255,255,.14);
  padding:7px 14px;
  border-radius:20px;
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
}
.topbar .logout:hover{background:rgba(255,255,255,.26);}

/* ---------- Layout ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:28px 20px 60px;}
.wrap-wide{max-width:1320px;}
h1{font-size:1.55rem;margin:0 0 4px;color:var(--navy);}
h2{font-size:1.15rem;margin:0 0 10px;color:var(--navy);}
.subtitle{color:var(--muted);margin:0 0 22px;font-size:.92rem;}

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:20px;
}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:22px;}
.stat-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;
}
.stat-card .num{font-size:1.7rem;font-weight:700;color:var(--navy);line-height:1.1;}
.stat-card .label{color:var(--muted);font-size:.82rem;margin-top:4px;}

/* ---------- Forms ---------- */
label{display:block;font-size:.85rem;font-weight:600;color:var(--text);margin:14px 0 5px;}
input[type=text],input[type=password],input[type=date],input[type=number],
input[type=time],input[type=file],input[type=tel],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;
  font-size:.92rem;font-family:inherit;background:#fff;color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy-2);outline-offset:0;}
input[readonly]{background:#f3f5f7;color:var(--muted);}
.form-row{display:flex;gap:12px;flex-wrap:wrap;}
.form-row > div{flex:1;min-width:160px;}
.form-actions{margin-top:20px;display:flex;gap:10px;align-items:center;}
.btn{
  display:inline-block;background:var(--navy);color:#fff;border:none;
  padding:10px 22px;border-radius:8px;font-size:.92rem;font-weight:600;
  cursor:pointer;text-decoration:none;
}
.btn:hover{background:var(--navy-2);}
.btn-secondary{background:#fff;color:var(--navy);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--bg);}
.btn-danger{background:var(--danger);}
.btn-danger:hover{background:#9c2921;}
.btn-sm{padding:6px 14px;font-size:.8rem;}
.relative{position:relative;}
.eye-icon{
  position:absolute;right:12px;top:38px;cursor:pointer;color:var(--muted);
  font-size:1rem;user-select:none;
}
.eye-icon:hover{color:var(--navy-2);}

/* ---------- Alerts ---------- */
.alert{padding:11px 15px;border-radius:8px;margin-bottom:16px;font-size:.9rem;}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid #b9e6cf;}
.alert-danger{background:var(--danger-bg);color:var(--danger);border:1px solid #f0c4c0;}
.alert-info{background:var(--info-bg);color:var(--info);border:1px solid #c3dcf2;}
.alert-warn{background:var(--warn-bg);color:var(--warn);border:1px solid #f0dba0;}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);}
table{width:100%;border-collapse:collapse;font-size:.85rem;}
thead th{
  background:var(--navy);color:#fff;text-align:left;padding:10px 12px;
  white-space:nowrap;font-weight:600;font-size:.78rem;
}
tbody td{padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap;}
tbody tr:nth-child(even){background:#fafbfc;}
tbody tr:hover{background:#eef4fb;}
tbody tr.flagged{background:var(--danger-bg);}
tbody tr.flagged:hover{background:#f6d9d6;}
.search-box{
  width:100%;max-width:320px;padding:9px 12px;border:1px solid var(--border);
  border-radius:20px;font-size:.88rem;margin-bottom:14px;
}

/* ---------- Pills / badges ---------- */
.pill{display:inline-block;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;}
.pill-admin{background:var(--info-bg);color:var(--info);}
.pill-faculty{background:#eef1f5;color:var(--muted);}
.pill-flag{background:var(--danger-bg);color:var(--danger);}
.badge-count{background:var(--accent-2);color:var(--navy);border-radius:12px;padding:1px 9px;font-size:.75rem;margin-left:6px;font-weight:700;}

/* ---------- Auth pages ---------- */
body.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(120deg,var(--navy),var(--navy-2));margin:0;padding:20px;}
.auth-card{background:#fff;border-radius:var(--radius);padding:34px 30px;width:100%;max-width:400px;box-shadow:0 10px 30px rgba(0,0,0,.25);}
.auth-brand{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:6px;color:var(--navy);font-size:1.4rem;}
.auth-brand .brand-mark{background:var(--accent-2);color:var(--navy);font-weight:800;border-radius:8px;padding:4px 9px;font-size:.82rem;}
.auth-sub{color:var(--muted);font-size:.88rem;margin:0 0 22px;}
.auth-footer{margin-top:18px;text-align:center;font-size:.88rem;color:var(--muted);}
.code-input-group{display:flex;align-items:stretch;}
.code-prefix{display:flex;align-items:center;padding:0 12px;background:#eef1f5;border:1px solid var(--border);border-right:none;border-radius:6px 0 0 6px;font-weight:700;color:var(--navy);}
.code-input-group input{border-radius:0 6px 6px 0 !important;}
.auth-hint{color:var(--muted);font-size:.78rem;margin:6px 0 0;}
.strength{height:6px;border-radius:6px;background:#ddd;margin-top:6px;}
.strength span{display:block;height:100%;width:0;border-radius:6px;transition:.3s;}

/* ---------- Activity form specifics ---------- */
.field-other{margin-top:8px;}
.field-hidden{display:none;}
.hint{color:var(--muted);font-size:.78rem;margin-top:4px;}
.confirm-overlay{
  position:fixed;inset:0;background:rgba(11,37,69,.55);
  display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;
}
.confirm-overlay.show{display:flex;}
.confirm-box{
  background:#fff;border-radius:var(--radius);padding:22px;max-width:360px;width:100%;
  text-align:center;box-shadow:0 15px 40px rgba(0,0,0,.3);
}
.confirm-box p{font-size:.92rem;margin:0 0 18px;color:var(--text);}
.confirm-box .form-actions{justify-content:center;margin-top:0;}

/* ---------- Chart card ---------- */
.chart-card{text-align:center;}
.chart-box{position:relative;height:260px;display:flex;justify-content:center;align-items:center;}
.total-label{margin-top:10px;font-size:1.05rem;font-weight:700;color:var(--navy);}

.empty-state{color:var(--muted);text-align:center;padding:34px;}

@media print{
  .topbar,.no-print{display:none !important;}
  body{background:#fff;}
  .card,.table-scroll{border:1px solid #999 !important;box-shadow:none !important;}
}

@media(max-width:760px){
  .topbar{padding:0 12px;}
  .wrap{padding:20px 12px 40px;}
  table{font-size:.8rem;}
}