/* =====================================================
   Nigerian School Report System — Stylesheet
   Dashboard UI + Print-Ready Report Card
   ===================================================== */

:root {
  --pri: #1a237e;
  --pri-light: #e8eaf6;
  --sec: #c62828;
  --success: #2e7d32;
  --success-lt: #e8f5e9;
  --danger: #c62828;
  --danger-lt: #ffebee;
  --warn: #ef6c00;
  --warn-lt: #fff3e0;
  --info: #0277bd;
  --info-lt: #e1f5fe;
  --bg: #f5f5f5;
  --card: #fff;
  --text: #212121;
  --muted: #757575;
  --border: #e0e0e0;
  --shadow: 0 1px 4px rgba(0,0,0,.08);
  --radius: 8px;
  --sidebar-w: 250px;
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}
[data-theme="dark"] {
  --bg: #121212; --card: #1e1e1e; --text: #e0e0e0; --muted: #9e9e9e; --border: #333; --pri-light: #1a237e33;
  --success-lt: #1b5e2033; --danger-lt: #b7141433; --warn-lt: #e6510033; --info-lt: #01579b33;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--text); background: var(--bg); }
a { color: var(--pri); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; width: 100%; }

/* === LOGIN === */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a237e 0%,#283593 50%,#0d47a1 100%); padding:20px; }
.login-box { background:#fff; border-radius:var(--radius); box-shadow:0 8px 30px rgba(0,0,0,.2); width:100%; max-width:420px; padding:40px 32px; }
.login-box .logo { text-align:center; margin-bottom:24px; }
.login-box .logo h1 { font-size:1.4rem; color:var(--pri); margin-top:8px; }
.login-box .logo p { color:var(--muted); font-size:.85rem; }

/* === FORMS === */
.fg { margin-bottom:16px; }
.fg label { display:block; margin-bottom:4px; font-weight:600; font-size:.85rem; color:var(--text); }
.fc { width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:6px; font-size:.9rem; background:var(--card); color:var(--text); transition:border .2s; font-family:var(--font); }
.fc:focus { outline:none; border-color:var(--pri); box-shadow:0 0 0 3px rgba(26,35,126,.12); }
select.fc { appearance:none; cursor:pointer; }
textarea.fc { resize:vertical; min-height:70px; }
.form-row { display:flex; gap:14px; flex-wrap:wrap; }
.form-row .fg { flex:1; min-width:160px; }
.form-inline { display:flex; gap:8px; align-items:flex-end; }
.form-check { display:flex; align-items:center; gap:8px; margin:6px 0; }
.form-check input { width:16px; height:16px; accent-color:var(--pri); }

/* === BUTTONS === */
.btn { display:inline-flex; align-items:center; gap:5px; padding:8px 18px; border:none; border-radius:6px; font-size:.85rem; font-weight:600; cursor:pointer; transition:all .15s; text-decoration:none!important; font-family:var(--font); }
.btn-pri { background:var(--pri); color:#fff; } .btn-pri:hover { background:#0d47a1; }
.btn-suc { background:var(--success); color:#fff; } .btn-suc:hover { background:#1b5e20; }
.btn-dan { background:var(--danger); color:#fff; }
.btn-war { background:var(--warn); color:#fff; }
.btn-sec { background:var(--border); color:var(--text); }
.btn-out { background:transparent; border:1.5px solid var(--border); color:var(--text); }
.btn-out:hover { border-color:var(--pri); color:var(--pri); }
.btn-sm { padding:5px 12px; font-size:.8rem; }
.btn-lg { padding:10px 24px; font-size:.95rem; }
.btn-block { width:100%; justify-content:center; }

/* === ALERTS === */
.alert { padding:10px 14px; border-radius:6px; margin-bottom:14px; font-size:.88rem; display:flex; align-items:center; gap:8px; }
.alert-success { background:var(--success-lt); color:var(--success); }
.alert-danger { background:var(--danger-lt); color:var(--danger); }
.alert-warning { background:var(--warn-lt); color:var(--warn); }
.alert-info { background:var(--info-lt); color:var(--info); }

/* === LAYOUT === */
.app { display:flex; min-height:100vh; }
.sidebar { width:var(--sidebar-w); background:var(--pri); position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:100; transition:transform .3s; }
.sidebar .brand { padding:18px 20px; color:#fff; font-weight:800; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:10px; }
.sidebar .brand span { font-size:1.3rem; }
.sidebar nav a { display:flex; align-items:center; gap:10px; padding:10px 20px; color:rgba(255,255,255,.7); font-size:.88rem; font-weight:500; border-left:3px solid transparent; transition:all .15s; }
.sidebar nav a:hover, .sidebar nav a.active { color:#fff; background:rgba(255,255,255,.08); border-left-color:#fff; text-decoration:none; }
.sidebar nav a .ico { width:20px; text-align:center; }
.sidebar nav .divider { border-top:1px solid rgba(255,255,255,.1); margin:8px 0; }

.main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; }
.topbar { height:56px; background:var(--card); border-bottom:1px solid var(--border); padding:0 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; box-shadow:var(--shadow); }
.topbar h2 { font-size:1.05rem; font-weight:700; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.menu-btn { display:none; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--text); }
.user-pill { display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; background:var(--bg); font-size:.82rem; font-weight:600; }
.user-pill .av { width:28px; height:28px; border-radius:50%; background:var(--pri); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.78rem; }

.content { padding:24px; flex:1; }

/* === CARDS === */
.card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:20px; }
.card-h { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:.95rem; }
.card-b { padding:20px; }
.card-f { padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

/* Stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat { background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; }
.stat .ic { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.stat .ic.blue { background:var(--pri-light); } .stat .ic.green { background:var(--success-lt); }
.stat .ic.red { background:var(--danger-lt); } .stat .ic.orange { background:var(--warn-lt); }
.stat .val { font-size:1.5rem; font-weight:800; line-height:1.2; }
.stat .lbl { font-size:.78rem; color:var(--muted); }

/* === TABLES === */
.tw { overflow-x:auto; }
.dt { width:100%; }
.dt th { text-align:left; padding:10px 14px; font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); border-bottom:2px solid var(--border); font-weight:700; white-space:nowrap; }
.dt td { padding:10px 14px; border-bottom:1px solid var(--border); font-size:.88rem; vertical-align:middle; }
.dt tr:hover { background:rgba(26,35,126,.02); }
.dt .acts { white-space:nowrap; display:flex; gap:4px; }

.badge { display:inline-block; padding:2px 9px; border-radius:12px; font-size:.75rem; font-weight:600; }
.badge-s { background:var(--success-lt); color:var(--success); }
.badge-d { background:var(--danger-lt); color:var(--danger); }
.badge-w { background:var(--warn-lt); color:var(--warn); }
.badge-i { background:var(--info-lt); color:var(--info); }
.badge-p { background:var(--pri-light); color:var(--pri); }

/* === MODAL === */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; align-items:center; justify-content:center; padding:20px; }
.modal-bg.show { display:flex; }
.modal { background:var(--card); border-radius:var(--radius); width:100%; max-width:560px; max-height:90vh; overflow-y:auto; }
.modal-hd { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.modal-cl { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--muted); }
.modal-bd { padding:20px; }
.modal-ft { padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

/* Tabs */
.tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:16px; }
.tabs a { padding:10px 18px; font-size:.88rem; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .15s; }
.tabs a:hover, .tabs a.active { color:var(--pri); border-bottom-color:var(--pri); text-decoration:none; }

/* Score input table */
.score-table input[type="number"] { width:60px; padding:4px 6px; text-align:center; border:1px solid var(--border); border-radius:4px; font-size:.85rem; }
.score-table input[type="number"]:focus { border-color:var(--pri); outline:none; }

/* Empty */
.empty { text-align:center; padding:50px 20px; color:var(--muted); }
.empty .ico { font-size:2.5rem; margin-bottom:8px; }

/* Utils */
.mt-1 { margin-top:8px; } .mt-2 { margin-top:16px; } .mb-1 { margin-bottom:8px; } .mb-2 { margin-bottom:16px; }
.text-center { text-align:center; } .text-right { text-align:right; }
.text-success { color:var(--success); } .text-danger { color:var(--danger); } .text-muted { color:var(--muted); }
.hidden { display:none!important; }
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99; }
.overlay.show { display:block; }

@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); } .sidebar.open { transform:translateX(0); }
  .menu-btn { display:block; } .main { margin-left:0; }
  .content { padding:14px; } .form-row { flex-direction:column; gap:0; }
  .stats { grid-template-columns:repeat(2,1fr); gap:10px; }
}

/* =====================================================
   REPORT CARD PRINT STYLES — Nigerian School Format
   ===================================================== */
.report-card {
  width:210mm; max-width:100%; margin:0 auto; padding:8mm;
  background:#fff; color:#000; font-family:'Times New Roman',Times,serif; font-size:11pt;
  line-height:1.4;
}
.rc-header { text-align:center; border-bottom:3px double #000; padding-bottom:6px; margin-bottom:8px; }
.rc-header .school-logo { height:70px; margin-bottom:4px; }
.rc-header h1 { font-size:18pt; color:#1a237e; text-transform:uppercase; margin:0; letter-spacing:1px; }
.rc-header .motto { font-style:italic; font-size:10pt; color:#555; margin:2px 0; }
.rc-header .address { font-size:9pt; color:#333; }
.rc-term-title { text-align:center; background:#1a237e; color:#fff; padding:4px 0; font-size:12pt; font-weight:bold; margin:6px 0; text-transform:uppercase; letter-spacing:.5px; }

.rc-info { width:100%; margin-bottom:6px; }
.rc-info td { padding:3px 6px; font-size:10pt; vertical-align:top; }
.rc-info .lbl { font-weight:bold; width:130px; }

.rc-scores { width:100%; border:2px solid #000; margin-bottom:8px; }
.rc-scores th, .rc-scores td { border:1px solid #000; padding:4px 6px; text-align:center; font-size:9pt; }
.rc-scores th { background:#1a237e; color:#fff; font-size:8pt; text-transform:uppercase; padding:5px 4px; }
.rc-scores td:first-child { text-align:left; font-weight:600; }
.rc-scores tr:nth-child(even) { background:#f5f5f5; }
.rc-scores .total-row { background:#e8eaf6!important; font-weight:bold; }

.rc-summary { width:100%; margin-bottom:6px; }
.rc-summary td { padding:3px 8px; font-size:10pt; }
.rc-summary .lbl { font-weight:bold; }

.rc-grid { display:flex; gap:8px; margin-bottom:8px; }
.rc-grid .col { flex:1; }
.rc-grid h4 { background:#1a237e; color:#fff; padding:4px 8px; font-size:9pt; text-transform:uppercase; margin-bottom:0; }
.rc-grid table { border:1px solid #000; width:100%; }
.rc-grid table td, .rc-grid table th { border:1px solid #000; padding:3px 6px; font-size:9pt; }

.rc-remarks { margin-bottom:8px; }
.rc-remarks .remark-box { border:1px solid #000; padding:6px 10px; min-height:35px; margin-bottom:4px; font-size:10pt; }
.rc-remarks .remark-label { font-weight:bold; font-size:9pt; }
.rc-sign-row { display:flex; justify-content:space-between; margin-top:12px; }
.rc-sign-row .sign-block { text-align:center; }
.rc-sign-row .sign-line { border-top:1px solid #000; width:150px; margin:20px auto 2px; }
.rc-sign-row .sign-label { font-size:8pt; }

.rc-grade-key { margin-top:6px; font-size:8pt; text-align:center; color:#555; }
.rc-fee-box { border:2px solid var(--sec); padding:6px 10px; margin-top:8px; text-align:center; font-size:10pt; }
.rc-fee-box strong { color:var(--sec); }

.rc-rating { width:14px; height:14px; display:inline-block; border:1.5px solid #000; border-radius:50%; text-align:center; line-height:12px; font-size:8px; }
.rc-rating.filled { background:#1a237e; border-color:#1a237e; }

/* Print */
@media print {
  body * { visibility:hidden; }
  .report-card, .report-card * { visibility:visible; }
  .report-card { position:absolute; left:0; top:0; width:210mm; margin:0; padding:6mm; box-shadow:none; }
  .no-print { display:none!important; }
  @page { size:A4 portrait; margin:5mm; }
}

/* Receipt Print */
.receipt { width:210mm; max-width:100%; margin:0 auto; padding:10mm; background:#fff; font-family:'Courier New',monospace; font-size:10pt; }
.receipt h2 { text-align:center; border-bottom:2px solid #000; padding-bottom:4px; }
.receipt table { border:1px solid #000; }
.receipt table th, .receipt table td { border:1px solid #000; padding:4px 8px; }