/* ═══════════════════════════════════════════
   EduHub — Kenya School Management System
   Shared Stylesheet v2.1
   ═══════════════════════════════════════════ */

:root {
    --red: #c41e3a;
    --red-light: #fee2e2;
    --red-mid: #e63946;
    --blue: #1d4ed8;
    --blue-light: #dbeafe;
    --green: #15803d;
    --green-light: #dcfce7;
    --purple: #7c3aed;
    --purple-light: #ede9fe;
    --orange: #ea580c;
    --orange-light: #fed7aa;
    --teal: #0d9488;
    --teal-light: #ccfbf1;
    --pink: #db2777;
    --pink-light: #fce7f3;
    --yellow: #a16207;
    --yellow-light: #fef9c3;
    --gray-bg: #f4f6f9;
    --card-bg: #ffffff;
    --text-dark: #111827;
    --text-mid: #374151;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
    --radius: 16px;
    --radius-sm: 10px;
    --nav-height: 68px;
}

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

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--gray-bg);
    color: var(--text-dark);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── SCREENS ── */
.screen { display:none; min-height:100vh; padding-bottom: calc(var(--nav-height) + 8px); }
.screen.active { display:block; }

/* ── HEADER ── */
.app-header {
    position: sticky; top:0; z-index:30;
    padding: 14px 18px 12px;
    display:flex; align-items:center; justify-content:space-between;
    gap:10px;
}
.header-red    { background: linear-gradient(135deg,#b91c1c 0%,#e63946 100%); }
.header-blue   { background: linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%); }
.header-purple { background: linear-gradient(135deg,#5b21b6 0%,#8b5cf6 100%); }
.header-green  { background: linear-gradient(135deg,#14532d 0%,#16a34a 100%); }
.header-dark   { background: linear-gradient(135deg,#1f2937 0%,#374151 100%); }
.header-teal   { background: linear-gradient(135deg,#0f4c5c 0%,#0891b2 100%); }
.header-orange { background: linear-gradient(135deg,#7c2d12 0%,#ea580c 100%); }
.header-pink   { background: linear-gradient(135deg,#831843 0%,#db2777 100%); }

.header-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.header-title { color:#fff; font-size:17px; font-weight:700; letter-spacing:-.2px; }
.header-sub   { color:rgba(255,255,255,.75); font-size:11px; margin-top:2px; }
.header-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }

.header-icon-btn {
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.18); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:16px; transition:.2s; flex-shrink:0;
}
.header-icon-btn:active { background:rgba(255,255,255,.32); }

.header-avatar {
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.25); border:2px solid rgba(255,255,255,.5);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0;
}
.header-back {
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.18); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:16px; transition:.2s; flex-shrink:0;
}

/* ── BOTTOM NAV ── */
.bottom-nav {
    position:fixed; bottom:0; left:0; right:0;
    height: var(--nav-height);
    background:#fff;
    border-top:1px solid var(--border);
    display:flex; align-items:stretch;
    z-index:50; box-shadow:0 -2px 16px rgba(0,0,0,.07);
}
.nav-item {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
    cursor:pointer; color:var(--text-muted); font-size:10px; font-weight:600;
    padding:6px 2px 8px; transition:.2s; position:relative;
    -webkit-tap-highlight-color:transparent;
    text-align:center;
}
.nav-item i { font-size:20px; transition:.25s; }
.nav-item span { display:block; line-height:1.2; }
.nav-item.active { color: var(--red); }
.nav-item.active i { transform: translateY(-2px); }
.nav-pill {
    position:absolute; top:4px; right:calc(50% - 16px);
    background:var(--red); color:#fff;
    font-size:9px; font-weight:700;
    width:16px; height:16px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}

/* ── CARDS ── */
.card {
    background:var(--card-bg); border-radius:var(--radius);
    box-shadow: var(--shadow-sm); overflow:hidden;
}
.card-p { padding:16px; }
.card-gradient-red   { background:linear-gradient(135deg,#c41e3a,#e63946); color:#fff; }
.card-gradient-blue  { background:linear-gradient(135deg,#1e3a8a,#2563eb); color:#fff; }
.card-gradient-green { background:linear-gradient(135deg,#14532d,#16a34a); color:#fff; }
.card-gradient-purple{ background:linear-gradient(135deg,#5b21b6,#8b5cf6); color:#fff; }

/* ── STAT CARDS ── */
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat-card {
    background:#fff; border-radius:var(--radius-sm);
    padding:14px 12px; box-shadow:var(--shadow-sm);
    display:flex; align-items:center; gap:10px; overflow:hidden;
}
.stat-icon {
    width:44px; height:44px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; flex-shrink:0;
}
.stat-body { flex:1; min-width:0; }
.stat-val { font-size:18px; font-weight:800; color:var(--text-dark); line-height:1; }
.stat-lbl { font-size:10px; color:var(--text-muted); font-weight:600; margin-top:3px; }
.stat-trend { font-size:9px; font-weight:700; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trend-up   { color:#15803d; }
.trend-down { color:#dc2626; }

/* ── BADGE ── */
.badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 9px; border-radius:20px;
    font-size:11px; font-weight:700; white-space:nowrap;
    flex-shrink:0;
}
.badge-red    { background:var(--red-light);    color:var(--red); }
.badge-blue   { background:var(--blue-light);   color:var(--blue); }
.badge-green  { background:var(--green-light);  color:var(--green); }
.badge-purple { background:var(--purple-light); color:var(--purple); }
.badge-orange { background:var(--orange-light); color:var(--orange); }
.badge-teal   { background:var(--teal-light);   color:var(--teal); }
.badge-pink   { background:var(--pink-light);   color:var(--pink); }
.badge-yellow { background:var(--yellow-light); color:var(--yellow); }
.badge-gray   { background:#f3f4f6; color:#374151; }

/* ── SECTION TITLE ── */
.sec-title {
    font-size:14px; font-weight:800; color:var(--text-dark);
    margin:20px 0 12px;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.sec-more { font-size:12px; font-weight:600; color:var(--red); cursor:pointer; flex-shrink:0; }

/* ── TABS ── */
.tabs {
    display:flex; border-bottom:2px solid var(--border);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tab-item {
    padding:10px 14px; font-size:12px; font-weight:700;
    color:var(--text-muted); cursor:pointer;
    border-bottom:2px solid transparent; white-space:nowrap; transition:.2s;
    margin-bottom:-2px;
}
.tab-item.active { color:var(--red); border-bottom-color:var(--red); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ── LIST ITEM ── */
.list-item {
    display:flex; align-items:center; gap:12px; padding:12px 14px;
    border-bottom:1px solid #f3f4f6; transition:.15s;
    -webkit-tap-highlight-color:transparent;
}
.list-item:last-child { border-bottom:none; }
.list-item:active { background:#f8fafc; }
.list-item-body { flex:1; min-width:0; }
.list-item-title { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item-sub   { font-size:11px; color:var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── AVATAR ── */
.avatar {
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px; flex-shrink:0;
}
.avatar-lg {
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:16px; flex-shrink:0;
}
.avatar-xl {
    width:76px; height:76px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:24px; flex-shrink:0;
}

/* ── PROGRESS BAR ── */
.progress-bar { background:#f3f4f6; border-radius:99px; height:8px; overflow:hidden; }
.progress-fill { height:100%; border-radius:99px; transition:.6s; }

/* ── BUTTONS ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:12px 20px; border-radius:12px; font-weight:700; font-size:14px;
    cursor:pointer; border:none; transition:.2s; width:100%; font-family:inherit;
    white-space:nowrap; text-align:center; flex-shrink:0;
}
.btn-red    { background:var(--red); color:#fff; }
.btn-red:active   { background:#a31e30; }
.btn-blue   { background:var(--blue); color:#fff; }
.btn-blue:active  { background:#1e3a8a; }
.btn-green  { background:var(--green); color:#fff; }
.btn-green:active { background:#14532d; }
.btn-purple { background:var(--purple); color:#fff; }
.btn-orange { background:var(--orange); color:#fff; }
.btn-teal   { background:var(--teal); color:#fff; }
.btn-pink   { background:var(--pink); color:#fff; }
.btn-outline{ background:transparent; color:var(--red); border:2px solid var(--red); }
.btn-gray   { background:#f3f4f6; color:var(--text-mid); }
.btn-sm  { padding:7px 12px; font-size:12px; border-radius:8px; width:auto; gap:4px; }
.btn-xs  { padding:4px 9px; font-size:11px; border-radius:6px; width:auto; gap:3px; }
.btn-icon{ width:40px; height:40px; border-radius:10px; padding:0; width:40px; }

/* ── FORM ── */
.form-input {
    width:100%; border:1.5px solid var(--border); border-radius:10px;
    padding:11px 14px; font-size:14px; font-family:inherit;
    color:var(--text-dark); outline:none; transition:.2s; background:#fff;
    -webkit-appearance:none;
}
.form-input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(196,30,58,.1); }
select.form-input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.form-label { font-size:11px; font-weight:700; color:var(--text-mid); margin-bottom:5px; display:block; text-transform:uppercase; letter-spacing:.3px; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ── MODAL ── */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.52);
    z-index:80; display:none; align-items:flex-end;
}
.modal-overlay.active { display:flex; }
.modal-sheet {
    background:#fff; width:100%; max-height:92vh;
    border-radius:24px 24px 0 0; padding:20px;
    overflow-y:auto; animation:slideUp .28s cubic-bezier(.4,0,.2,1);
    position:relative;
}
@keyframes slideUp { from{transform:translateY(100%);opacity:.6} to{transform:translateY(0);opacity:1} }
.modal-handle {
    width:36px; height:4px; background:#d1d5db; border-radius:2px;
    margin:0 auto 16px;
}
.modal-title { font-size:18px; font-weight:800; color:var(--text-dark); margin-bottom:4px; }
.modal-sub   { font-size:12px; color:var(--text-muted); margin-bottom:16px; }
.modal-close-btn {
    position:absolute; top:16px; right:16px;
    background:#f3f4f6; border:none; font-size:14px;
    cursor:pointer; color:var(--text-muted);
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.modal-form { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }

/* ── ICON BOX ── */
.icon-box {
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; font-size:20px;
    flex-shrink:0;
}
.icon-box-sm {
    width:36px; height:36px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; font-size:16px;
    flex-shrink:0;
}
.icon-red    { background:var(--red-light);    color:var(--red); }
.icon-blue   { background:var(--blue-light);   color:var(--blue); }
.icon-green  { background:var(--green-light);  color:var(--green); }
.icon-purple { background:var(--purple-light); color:var(--purple); }
.icon-orange { background:var(--orange-light); color:var(--orange); }
.icon-teal   { background:var(--teal-light);   color:var(--teal); }
.icon-pink   { background:var(--pink-light);   color:var(--pink); }
.icon-yellow { background:var(--yellow-light); color:var(--yellow); }
.icon-gray   { background:#f3f4f6; color:#6b7280; }
.icon-dark   { background:#1f2937; color:#fff; }

/* ── FEATURE GRID ── */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.feat-grid-4 { grid-template-columns:repeat(4,1fr); }
.feat-item {
    background:#fff; border-radius:12px; padding:14px 6px;
    text-align:center; cursor:pointer; transition:.18s;
    box-shadow:var(--shadow-sm);
    -webkit-tap-highlight-color:transparent;
}
.feat-item:active { transform:scale(.95); box-shadow:none; }
.feat-icon {
    width:48px; height:48px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; margin:0 auto 8px;
}
.feat-lbl { font-size:10px; font-weight:700; color:var(--text-mid); line-height:1.3; }

/* ── QUICK ACTION BUTTONS (4-across row) ── */
.quick-actions { display:flex; gap:8px; }
.quick-btn {
    flex:1; min-width:0; background:#fff; border-radius:12px;
    padding:12px 4px; text-align:center; cursor:pointer;
    box-shadow:var(--shadow-sm); transition:.18s; border:none;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    -webkit-tap-highlight-color:transparent;
}
.quick-btn:active { transform:scale(.95); }
.quick-btn i    { font-size:20px; display:block; }
.quick-btn span { font-size:10px; font-weight:700; color:var(--text-mid); display:block; line-height:1.2; }

/* ── GRADE BOX ── */
.grade-box {
    width:40px; height:40px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:800; font-family:'DM Mono',monospace;
    flex-shrink:0;
}

/* ── ATTENDANCE DOTS ── */
.att-dot {
    width:28px; height:28px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; flex-shrink:0;
}
.att-p { background:#dcfce7; color:#15803d; }
.att-a { background:#fee2e2; color:#dc2626; }
.att-l { background:#fef3c7; color:#b45309; }
.att-h { background:#f3f4f6; color:#9ca3af; }

/* ── ALERT BARS ── */
.alert-bar {
    border-radius:10px; padding:12px 13px;
    display:flex; align-items:flex-start; gap:10px; margin-bottom:10px;
}
.alert-bar .alert-icon { font-size:15px; margin-top:1px; flex-shrink:0; }
.alert-bar .alert-body { flex:1; min-width:0; }
.alert-bar .alert-title { font-size:13px; font-weight:700; }
.alert-bar .alert-desc  { font-size:11px; color:#374151; margin-top:2px; }
.alert-bar.info    { background:#dbeafe; border-left:4px solid #2563eb; }
.alert-bar.warn    { background:#fef3c7; border-left:4px solid #d97706; }
.alert-bar.success { background:#dcfce7; border-left:4px solid #16a34a; }
.alert-bar.danger  { background:#fee2e2; border-left:4px solid #dc2626; }
.alert-bar.purple  { background:#ede9fe; border-left:4px solid #7c3aed; }

/* ── CHARTS ── */
.chart-wrap    { position:relative; height:170px; }
.chart-wrap-lg { position:relative; height:230px; }

/* ── SCHEDULE ── */
.sched-item {
    display:flex; gap:12px; padding:10px 14px;
    border-left:3px solid transparent; margin-bottom:1px;
    border-radius:0 8px 8px 0; transition:.2s; align-items:flex-start;
}
.sched-time { font-size:10px; font-weight:700; color:var(--text-muted); width:46px; flex-shrink:0; line-height:1.4; }
.sched-body { flex:1; min-width:0; }
.sched-sub  { font-size:13px; font-weight:700; color:var(--text-dark); }
.sched-info { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* ── MESSAGES ── */
.msg-bubble { padding:10px 13px; border-radius:16px; font-size:13px; max-width:80%; line-height:1.5; }
.msg-out { background:var(--red); color:#fff; border-radius:16px 16px 4px 16px; margin-left:auto; }
.msg-in  { background:#f3f4f6; color:var(--text-dark); border-radius:16px 16px 16px 4px; }

/* ── SEARCH ── */
.search-wrap { position:relative; }
.search-wrap i {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--text-muted); font-size:14px; pointer-events:none;
}
.search-input {
    width:100%; border:1.5px solid var(--border); border-radius:12px;
    padding:10px 14px 10px 36px; font-size:14px; font-family:inherit;
    background:#fff; outline:none; transition:.2s;
    -webkit-appearance:none;
}
.search-input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(196,30,58,.08); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:99px; }

/* ── NOTIFICATION DOT ── */
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--red); display:inline-block; }

/* ── TOAST ── */
#toast {
    position:fixed; top:80px; left:50%; transform:translateX(-50%) translateY(-16px);
    background:#1f2937; color:#fff;
    padding:10px 20px; border-radius:99px; font-size:13px; font-weight:600;
    z-index:999; opacity:0; transition:.28s; white-space:nowrap;
    box-shadow: var(--shadow-lg); pointer-events:none;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── STAGGER ANIMATION ── */
.stagger > * { opacity:0; transform:translateY(10px); }
.stagger.loaded > * { animation: fadeUp .32s ease forwards; }
.stagger.loaded > *:nth-child(1)  { animation-delay:.04s; }
.stagger.loaded > *:nth-child(2)  { animation-delay:.08s; }
.stagger.loaded > *:nth-child(3)  { animation-delay:.12s; }
.stagger.loaded > *:nth-child(4)  { animation-delay:.16s; }
.stagger.loaded > *:nth-child(5)  { animation-delay:.20s; }
.stagger.loaded > *:nth-child(6)  { animation-delay:.24s; }
.stagger.loaded > *:nth-child(7)  { animation-delay:.28s; }
.stagger.loaded > *:nth-child(8)  { animation-delay:.32s; }
.stagger.loaded > *:nth-child(9)  { animation-delay:.36s; }
.stagger.loaded > *:nth-child(10) { animation-delay:.40s; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

main { padding:14px; }
.px { padding-left:14px; padding-right:14px; }
.mb-sm { margin-bottom:10px; }
.mb { margin-bottom:14px; }
.divider { height:1px; background:var(--border); margin:12px 0; }
.divider-section { height:8px; background:var(--gray-bg); margin:0 -14px; }

/* ── INFO ROWS ── */
.info-row {
    display:flex; align-items:flex-start; gap:12px; padding:10px 0;
    border-bottom:1px solid #f3f4f6;
}
.info-row:last-child { border-bottom:none; }
.info-label { font-size:11px; color:var(--text-muted); font-weight:700; width:96px; flex-shrink:0; padding-top:1px; text-transform:uppercase; letter-spacing:.3px; }
.info-val   { font-size:13px; color:var(--text-dark); font-weight:600; flex:1; min-width:0; word-break:break-word; }

/* ── ONBOARDING WIZARD ── */
.step-indicator { display:flex; gap:6px; justify-content:center; margin-bottom:24px; align-items:center; }
.step-dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:.3s; }
.step-dot.active { background:var(--red); width:24px; border-radius:4px; }
.step-dot.done   { background:var(--green); }
.onboard-step { display:none; }
.onboard-step.active { display:block; }
.wizard-nav {
    display:flex; padding:12px 14px; border-top:1px solid var(--border);
    gap:10px; background:#fff;
    position:sticky; bottom:calc(var(--nav-height)); left:0; right:0; z-index:40;
}

/* ── MARKS TABLE ── */
.marks-table { width:100%; border-collapse:collapse; font-size:13px; }
.marks-table th {
    background:#f8fafc; color:var(--text-muted); font-weight:700;
    padding:9px 10px; text-align:left; border-bottom:2px solid var(--border);
    font-size:10px; white-space:nowrap; text-transform:uppercase; letter-spacing:.3px;
}
.marks-table td {
    padding:9px 10px; border-bottom:1px solid #f3f4f6;
    vertical-align:middle;
}
.marks-table tr:last-child td { border-bottom:none; }
.marks-input {
    width:58px; border:1.5px solid var(--border); border-radius:7px;
    padding:5px 6px; text-align:center; font-size:13px;
    font-family:'DM Mono',monospace; font-weight:700;
    outline:none; transition:.2s; display:block;
    -webkit-appearance:none;
}
.marks-input:focus { border-color:var(--red); }
.marks-pct   { font-size:12px; font-weight:700; font-family:'DM Mono',monospace; }
.marks-grade { font-size:13px; font-weight:800; font-family:'DM Mono',monospace; }

/* ── TIMETABLE ── */
.tt-grid { display:grid; grid-template-columns:50px repeat(5,1fr); gap:2px; font-size:11px; }
.tt-header { background:var(--red); color:#fff; font-weight:800; border-radius:6px; padding:6px 4px; text-align:center; font-size:10px; }
.tt-time   { background:#f8fafc; border-radius:6px; padding:6px 4px; text-align:right; color:var(--text-muted); font-weight:700; display:flex; align-items:center; justify-content:flex-end; font-size:10px; }
.tt-cell   { background:#fff; border-radius:6px; padding:4px; min-height:52px; border:1px solid var(--border); }
.tt-slot   { border-radius:7px; padding:5px 6px; font-size:10px; font-weight:700; cursor:pointer; transition:.15s; min-height:42px; display:flex; flex-direction:column; justify-content:center; }
.tt-slot:active { opacity:.8; }
.tt-break  { background:#f8fafc; border-radius:6px; min-height:32px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--text-muted); }
.tt-blue   { background:#dbeafe; color:#1d4ed8; }
.tt-green  { background:#dcfce7; color:#15803d; }
.tt-purple { background:#ede9fe; color:#7c3aed; }
.tt-orange { background:#fed7aa; color:#ea580c; }
.tt-teal   { background:#ccfbf1; color:#0d9488; }
.tt-pink   { background:#fce7f3; color:#db2777; }
.tt-yellow { background:#fef9c3; color:#a16207; }
.tt-empty  { background:#fafafa; border-radius:7px; min-height:42px; }

/* ── REPORT CARD ── */
.rc-header { background:linear-gradient(135deg,#b91c1c,#e63946); color:#fff; padding:20px; text-align:center; }
.rc-school-name { font-size:18px; font-weight:800; }
.rc-table { width:100%; border-collapse:collapse; font-size:12px; }
.rc-table th, .rc-table td { border:1px solid var(--border); padding:7px 10px; text-align:left; }
.rc-table th { background:#f8fafc; font-weight:700; font-size:10px; color:var(--text-muted); text-transform:uppercase; }
.rc-grade { font-family:'DM Mono',monospace; font-weight:800; font-size:13px; }

/* ── RESOURCE SHOP ── */
.resource-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.resource-card {
    background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:var(--shadow-sm); cursor:pointer; transition:.18s;
    display:flex; flex-direction:column;
}
.resource-card:active { transform:scale(.97); }
.resource-thumb { height:100px; display:flex; align-items:center; justify-content:center; font-size:36px; }
.resource-info  { padding:10px 12px; flex:1; }
.resource-name  { font-size:13px; font-weight:700; color:var(--text-dark); line-height:1.3; }
.resource-meta  { font-size:11px; color:var(--text-muted); margin-top:3px; }
.resource-price { font-size:14px; font-weight:800; color:var(--red); margin-top:6px; }
.resource-free  { color:var(--green); }

/* ── COMPETITION ── */
.comp-card { background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:14px; }
.comp-banner { height:80px; display:flex; align-items:center; justify-content:center; font-size:30px; }
.comp-body  { padding:14px; }
.comp-title { font-size:14px; font-weight:800; color:var(--text-dark); }
.comp-meta  { font-size:11px; color:var(--text-muted); margin-top:3px; }

/* ── CHECKLIST ── */
.checklist-item {
    display:flex; align-items:center; gap:12px; padding:13px 14px;
    border-bottom:1px solid #f3f4f6; cursor:pointer; transition:.15s;
}
.checklist-item:last-child { border-bottom:none; }
.check-circle {
    width:28px; height:28px; border-radius:50%; border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:12px; transition:.2s; color:transparent;
}
.check-circle.done { background:var(--green); border-color:var(--green); color:#fff; }
.checklist-item.done .check-text { text-decoration:line-through; color:var(--text-muted); }
.checklist-body { flex:1; min-width:0; }

/* ── DRAWER ── */
.drawer-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90; display:none;
}
.drawer-overlay.active { display:block; }
.drawer {
    position:fixed; top:0; right:-320px; width:300px; max-width:90vw;
    height:100vh; background:#fff; z-index:91;
    transition:.3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto; box-shadow:var(--shadow-lg);
}
.drawer.active { right:0; }
.drawer-header { padding:48px 20px 20px; color:#fff; }

/* ── TOGGLE SWITCH ── */
.toggle-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 0; border-bottom:1px solid #f3f4f6; gap:12px;
}
.toggle-row:last-child { border-bottom:none; }
.toggle-body { flex:1; min-width:0; }
.toggle-body .tg-title { font-size:13px; font-weight:700; }
.toggle-body .tg-sub   { font-size:11px; color:var(--text-muted); margin-top:2px; }
.toggle {
    width:44px; height:24px; border-radius:12px; background:#d1d5db;
    cursor:pointer; transition:.2s; position:relative; flex-shrink:0;
}
.toggle.on { background:var(--green); }
.toggle::after {
    content:''; position:absolute; width:18px; height:18px;
    border-radius:50%; background:#fff; top:3px; left:3px;
    transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle.on::after { left:23px; }

/* ── MORE MENU ── */
.more-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.more-menu-item {
    background:#fff; border-radius:12px; padding:16px 10px;
    text-align:center; cursor:pointer; transition:.18s;
    box-shadow:var(--shadow-sm); border:1px solid transparent;
    -webkit-tap-highlight-color:transparent;
}
.more-menu-item:active { transform:scale(.95); background:#f8fafc; }
.more-menu-icon {
    width:48px; height:48px; border-radius:12px; margin:0 auto 8px;
    display:flex; align-items:center; justify-content:center; font-size:22px;
}
.more-menu-lbl { font-size:12px; font-weight:700; color:var(--text-mid); line-height:1.2; }

/* ── FAB ── */
.fab {
    position:fixed; bottom:calc(var(--nav-height) + 14px); right:16px;
    width:50px; height:50px; border-radius:50%;
    background:var(--red); color:#fff; border:none;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; cursor:pointer; box-shadow:var(--shadow-lg);
    z-index:40; transition:.2s;
}
.fab:active { transform:scale(.9); }

/* ── PROFILE ── */
.profile-initials-huge {
    width:88px; height:88px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:28px; font-weight:800; flex-shrink:0;
    border:3px solid rgba(255,255,255,.35);
}

/* ── STAFF LIST ITEM ── */
.staff-item {
    display:flex; align-items:center; gap:12px; padding:12px 14px;
    border-bottom:1px solid #f3f4f6;
    -webkit-tap-highlight-color:transparent;
}
.staff-item:last-child { border-bottom:none; }
.staff-info { flex:1; min-width:0; }
.staff-name { font-size:13px; font-weight:700; }
.staff-role { font-size:11px; color:var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── LIBRARY ── */
.book-card {
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:var(--shadow-sm); display:flex; gap:0; cursor:pointer; transition:.18s;
    margin-bottom:10px;
}
.book-card:active { transform:scale(.98); }
.book-spine { width:8px; flex-shrink:0; }
.book-body { padding:12px 14px; flex:1; min-width:0; }
.book-title { font-size:13px; font-weight:800; color:var(--text-dark); }
.book-author{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.book-meta  { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }

/* ── DISCIPLINE ── */
.incident-card {
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:var(--shadow-sm); margin-bottom:10px; cursor:pointer;
    border-left:4px solid transparent;
}
.incident-body { padding:12px 14px; }
.incident-title{ font-size:13px; font-weight:800; }
.incident-meta { font-size:11px; color:var(--text-muted); margin-top:3px; }

/* ── CALENDAR / EVENTS ── */
.cal-day-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.cal-day-header { font-size:10px; font-weight:700; color:var(--text-muted); padding:4px 2px; }
.cal-day {
    padding:6px 2px; border-radius:7px; font-size:12px; font-weight:600;
    cursor:pointer; transition:.15s; position:relative;
}
.cal-day:hover { background:#f3f4f6; }
.cal-day.today { background:var(--red); color:#fff; font-weight:800; }
.cal-day.has-event::after {
    content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
    width:4px; height:4px; border-radius:50%; background:var(--orange);
}
.cal-day.today.has-event::after { background:#fff; }
.cal-day.other-month { color:#d1d5db; }
.event-pill {
    display:flex; align-items:center; gap:8px; padding:10px 14px;
    border-radius:10px; margin-bottom:8px; cursor:pointer;
}

/* ── PRINTOUT PAGE ── */
.print-page {
    background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:var(--shadow-sm); margin-bottom:12px;
    cursor:pointer; transition:.18s;
}
.print-page:active { transform:scale(.98); }
.print-page-header { padding:14px; display:flex; gap:12px; align-items:center; }
.print-page-preview {
    height:70px; margin:0 14px 14px;
    border-radius:8px; border:1px dashed var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); font-size:11px; font-weight:600;
}

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:40px 20px; }
.empty-state i { font-size:40px; color:var(--border); margin-bottom:12px; display:block; }
.empty-state-title { font-size:15px; font-weight:800; color:var(--text-dark); }
.empty-state-sub   { font-size:12px; color:var(--text-muted); margin-top:6px; }

/* ── CHIP / TAG ── */
.chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px; border-radius:7px; font-size:11px; font-weight:700;
    background:#f3f4f6; color:var(--text-mid); cursor:pointer; transition:.15s;
}
.chip.active { background:var(--red-light); color:var(--red); }

/* ── SUMMARY ROW ── */
.summary-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border-bottom:1px solid #f3f4f6;
}
.summary-row:last-child { border-bottom:none; }