/* ============================================================
   KHS-MIS26 v2.0 | Stylesheet
   Theme: Deep Navy + Gold — Institutional Academic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    --navy:       #0D1B2A;
    --navy-mid:   #1B2D42;
    --navy-light: #243752;
    --gold:       #C9A84C;
    --gold-light: #E2C47A;
    --gold-pale:  #F5EDDA;
    --cream:      #FAFAF7;
    --white:      #FFFFFF;
    --text:       #1A1A2E;
    --text-mid:   #4A5568;
    --text-light: #718096;
    --border:     #D1D9E0;
    --border-dark:#B0BEC5;
    --success:    #2E7D32; --success-bg: #E8F5E9;
    --warning:    #F57C00; --warning-bg: #FFF3E0;
    --danger:     #C62828; --danger-bg:  #FFEBEE;
    --info:       #01579B; --info-bg:    #E3F2FD;
    --sidebar-w:  260px;
    --header-h:   64px;
    --radius:     6px;
    --radius-lg:  10px;
    --shadow:     0 2px 8px rgba(13,27,42,0.10);
    --shadow-md:  0 4px 16px rgba(13,27,42,0.15);
    --shadow-lg:  0 8px 32px rgba(13,27,42,0.20);
    --transition: 0.2s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; scroll-behavior:smooth; }
body { font-family:'IBM Plex Sans',sans-serif; color:var(--text); background:#EEF1F5; line-height:1.6; min-height:100vh; }
a { color:var(--gold); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--gold-light); }
img { max-width:100%; display:block; }

/* ── Layout ─────────────────────────────────────────────────── */
.app-wrapper { display:flex; min-height:100vh; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar { width:var(--sidebar-w); background:var(--navy); color:var(--white); display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh; z-index:1000; overflow-y:auto; overflow-x:hidden; transition:transform var(--transition); }
.sidebar-brand { padding:20px 20px 16px; border-bottom:1px solid rgba(201,168,76,0.25); display:flex; align-items:center; gap:12px; }
.sidebar-brand .brand-logo { width:44px; height:44px; background:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--navy); flex-shrink:0; }
.sidebar-brand .brand-text h2 { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--white); line-height:1.2; }
.sidebar-brand .brand-text span { font-size:0.68rem; color:var(--gold); letter-spacing:1.5px; text-transform:uppercase; font-weight:500; }
.sidebar-nav { flex:1; padding:12px 0; }
.nav-section-label { padding:10px 20px 4px; font-size:0.62rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(201,168,76,0.6); }
.nav-link { display:flex; align-items:center; gap:10px; padding:10px 20px; color:rgba(255,255,255,0.75); font-size:0.875rem; font-weight:400; transition:all var(--transition); border-left:3px solid transparent; cursor:pointer; }
.nav-link:hover { background:rgba(201,168,76,0.08); color:var(--gold-light); border-left-color:var(--gold); }
.nav-link.active { background:rgba(201,168,76,0.12); color:var(--white); border-left-color:var(--gold); font-weight:500; }
.nav-link .nav-icon { width:18px; height:18px; opacity:0.8; flex-shrink:0; }
.nav-sub { display:none; } .nav-sub.open { display:block; }
.nav-sub .nav-link { padding-left:48px; font-size:0.82rem; }
.sidebar-footer { padding:14px 20px; border-top:1px solid rgba(255,255,255,0.08); font-size:0.75rem; color:rgba(255,255,255,0.35); }

/* ── Main Content ───────────────────────────────────────────── */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.top-header { height:var(--header-h); background:var(--white); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:900; box-shadow:var(--shadow); }
.header-left,.header-right { display:flex; align-items:center; gap:16px; }
.page-title { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:600; color:var(--navy); }
.breadcrumb { font-size:0.78rem; color:var(--text-light); }
.breadcrumb span { color:var(--gold); }
.header-badge { background:var(--gold-pale); border:1px solid var(--gold); color:var(--navy); border-radius:20px; padding:3px 12px; font-size:0.72rem; font-weight:600; }
.user-chip { display:flex; align-items:center; gap:8px; padding:6px 14px; background:var(--navy); border-radius:30px; cursor:pointer; transition:background var(--transition); }
.user-chip:hover { background:var(--navy-mid); }
.user-chip .avatar { width:28px; height:28px; background:var(--gold); border-radius:50%; font-size:0.75rem; font-weight:700; color:var(--navy); display:flex; align-items:center; justify-content:center; }
.user-chip .uname { font-size:0.8rem; color:var(--white); font-weight:500; }
.user-chip .urole { font-size:0.68rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.5px; }
.page-body { padding:28px; flex:1; }

/* ── Cards ──────────────────────────────────────────────────── */
.card { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; margin-bottom:24px; }
.card-header { padding:16px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--cream); }
.card-title { font-family:'Playfair Display',serif; font-size:1rem; font-weight:600; color:var(--navy); display:flex; align-items:center; gap:8px; }
.card-body { padding:22px; }

/* ── Stats ──────────────────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; margin-bottom:28px; }
.stat-card { background:var(--white); border-radius:var(--radius-lg); padding:20px; border:1px solid var(--border); box-shadow:var(--shadow); position:relative; overflow:hidden; transition:box-shadow var(--transition),transform var(--transition); }
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold); }
.stat-card.navy::before { background:var(--navy); }
.stat-card.success::before { background:var(--success); }
.stat-card.warning::before { background:var(--warning); }
.stat-value { font-family:'IBM Plex Mono',monospace; font-size:2rem; font-weight:500; color:var(--navy); line-height:1.1; }
.stat-label { font-size:0.78rem; color:var(--text-light); margin-top:4px; text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.stat-icon { position:absolute; top:18px; right:18px; opacity:0.08; font-size:3.5rem; line-height:1; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-responsive { overflow-x:auto; }
table.mis-table { width:100%; border-collapse:collapse; font-size:0.875rem; }
.mis-table thead tr { background:var(--navy); color:var(--white); }
.mis-table thead th { padding:12px 14px; font-weight:600; font-size:0.78rem; letter-spacing:0.5px; text-align:left; white-space:nowrap; }
.mis-table tbody tr { border-bottom:1px solid var(--border); transition:background var(--transition); }
.mis-table tbody tr:hover { background:var(--gold-pale); }
.mis-table tbody td { padding:10px 14px; vertical-align:middle; }
.mis-table .actions { display:flex; gap:6px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--radius); border:none; cursor:pointer; font-family:'IBM Plex Sans',sans-serif; font-size:0.875rem; font-weight:500; transition:all var(--transition); text-decoration:none; line-height:1; }
.btn-primary  { background:var(--navy);    color:var(--white); } .btn-primary:hover  { background:var(--navy-mid); color:var(--white); }
.btn-gold     { background:var(--gold);    color:var(--navy);  } .btn-gold:hover     { background:var(--gold-light); color:var(--navy); }
.btn-outline  { background:transparent; border:1px solid var(--navy); color:var(--navy); } .btn-outline:hover { background:var(--navy); color:var(--white); }
.btn-danger   { background:var(--danger);  color:var(--white); } .btn-danger:hover   { background:#b71c1c; color:var(--white); }
.btn-success  { background:var(--success); color:var(--white); } .btn-success:hover  { background:#1b5e20; color:var(--white); }
.btn-sm  { padding:5px 12px; font-size:0.78rem; }
.btn-lg  { padding:12px 24px; font-size:1rem; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:0.8rem; font-weight:600; color:var(--navy); margin-bottom:6px; letter-spacing:0.3px; }
.form-label .required { color:var(--danger); margin-left:2px; }
.form-control { width:100%; padding:9px 13px; border:1px solid var(--border-dark); border-radius:var(--radius); font-family:'IBM Plex Sans',sans-serif; font-size:0.875rem; color:var(--text); background:var(--white); transition:border-color var(--transition),box-shadow var(--transition); outline:none; }
.form-control:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,0.15); }
.form-control.is-invalid { border-color:var(--danger); }
.form-error { font-size:0.75rem; color:var(--danger); margin-top:4px; }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }
.form-row { display:grid; gap:16px; }
.form-row.cols-2 { grid-template-columns:1fr 1fr; }
.form-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.form-row.cols-4 { grid-template-columns:1fr 1fr 1fr 1fr; }

/* Radio basis selector */
.basis-selector { display:flex; gap:8px; }
.basis-option { flex:1; }
.basis-option input[type=radio] { display:none; }
.basis-option label { display:block; text-align:center; padding:8px; border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; font-weight:600; font-size:0.82rem; transition:all var(--transition); }
.basis-option input[type=radio]:checked + label { border-color:var(--gold); background:var(--gold-pale); color:var(--navy); }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:var(--radius); font-size:0.875rem; margin-bottom:16px; display:flex; align-items:flex-start; gap:10px; border-left:4px solid; }
.alert-success { background:var(--success-bg); border-color:var(--success); color:var(--success); }
.alert-danger  { background:var(--danger-bg);  border-color:var(--danger);  color:var(--danger);  }
.alert-warning { background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
.alert-info    { background:var(--info-bg);    border-color:var(--info);    color:var(--info);    }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { display:inline-block; padding:3px 9px; border-radius:12px; font-size:0.72rem; font-weight:600; }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-danger  { background:var(--danger-bg);  color:var(--danger);  }
.badge-warning { background:var(--warning-bg); color:var(--warning); }
.badge-info    { background:var(--info-bg);    color:var(--info);    }
.badge-navy    { background:var(--navy);        color:var(--white);   }
.badge-gold    { background:var(--gold-pale);   color:var(--navy);    }

/* ── CBA Labels ─────────────────────────────────────────────── */
.cba-outstanding { background:#E8F5E9; color:#1B5E20; font-weight:700; border-radius:4px; padding:2px 7px; font-size:0.75rem; }
.cba-moderate    { background:#FFF3E0; color:#E65100; font-weight:700; border-radius:4px; padding:2px 7px; font-size:0.75rem; }
.cba-basic       { background:#E3F2FD; color:#01579B; font-weight:700; border-radius:4px; padding:2px 7px; font-size:0.75rem; }
.cba-belowbasic  { background:#FFEBEE; color:#B71C1C; font-weight:700; border-radius:4px; padding:2px 7px; font-size:0.75rem; }

/* ── Grade display ──────────────────────────────────────────── */
.grade-pill { display:inline-block; min-width:36px; height:36px; border-radius:50%; font-weight:700; font-size:0.85rem; text-align:center; line-height:36px; }
.grade-ap,.grade-a   { background:#1B5E20; color:#fff; }
.grade-am,.grade-bp  { background:#2E7D32; color:#fff; }
.grade-b,.grade-bm   { background:#01579B; color:#fff; }
.grade-c             { background:#0277BD; color:#fff; }
.grade-d             { background:#E65100; color:#fff; }
.grade-e             { background:#BF360C; color:#fff; }
.grade-f             { background:#B71C1C; color:#fff; }

/* ── Login ──────────────────────────────────────────────────── */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy); position:relative; overflow:hidden; }
.login-page::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(201,168,76,0.03) 40px,rgba(201,168,76,0.03) 80px); }
.login-box { background:var(--white); border-radius:var(--radius-lg); padding:44px 40px; width:100%; max-width:420px; box-shadow:var(--shadow-lg); position:relative; z-index:1; }
.login-logo { width:72px; height:72px; background:var(--navy); border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; border:3px solid var(--gold); }
.login-logo span { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--gold); }
.login-title { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--navy); text-align:center; margin-bottom:4px; }
.login-subtitle { font-size:0.8rem; color:var(--text-light); text-align:center; margin-bottom:28px; letter-spacing:0.5px; }

/* ── Modals ─────────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(13,27,42,0.6); z-index:2000; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; }
.modal-overlay.open { display:flex; }
.modal { background:var(--white); border-radius:var(--radius-lg); width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:modalIn 0.2s ease; }
@keyframes modalIn { from{opacity:0;transform:translateY(-20px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-header { padding:18px 22px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:600; color:var(--navy); }
.modal-close { cursor:pointer; font-size:1.4rem; color:var(--text-light); background:none; border:none; padding:0 4px; }
.modal-close:hover { color:var(--danger); }
.modal-body { padding:22px; }
.modal-footer { padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination { display:flex; align-items:center; gap:4px; margin-top:16px; flex-wrap:wrap; }
.pagination a,.pagination span { padding:6px 12px; border-radius:var(--radius); font-size:0.82rem; border:1px solid var(--border); color:var(--text-mid); background:var(--white); transition:all var(--transition); }
.pagination a:hover { background:var(--navy); color:var(--white); border-color:var(--navy); }
.pagination span.active { background:var(--navy); color:var(--white); border-color:var(--navy); font-weight:600; }

/* ── Marks entry table ──────────────────────────────────────── */
.marks-input { width:80px; text-align:center; padding:6px 8px; font-family:'IBM Plex Mono',monospace; font-weight:600; }
.marks-input.out-of-range { border-color:var(--danger) !important; background:#fff5f5; }
.marks-input.valid { border-color:var(--success); }

/* ── Report Card (screen) ───────────────────────────────────── */
.report-card-wrap { max-width:860px; margin:0 auto; }
.rc-header { background:var(--navy); color:#fff; padding:18px 28px; }
.rc-student-bar { background:var(--gold-pale); padding:12px 28px; border-bottom:2px solid var(--gold); display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.rc-info-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-light); display:block; }
.rc-info-value { font-weight:700; color:var(--navy); font-size:0.95rem; }
.rc-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.rc-table th { background:var(--navy); color:#fff; padding:8px 6px; text-align:center; font-size:0.7rem; letter-spacing:0.3px; white-space:nowrap; }
.rc-table th.left { text-align:left; }
.rc-table td { padding:7px 6px; border-bottom:1px solid var(--border); text-align:center; vertical-align:middle; }
.rc-table td.subject-name { text-align:left; font-weight:600; font-size:0.82rem; }
.rc-table tbody tr:hover { background:var(--gold-pale); }
.rc-table .avg-row td { background:var(--navy); color:#fff; font-weight:700; }
.rc-section-heading { background:var(--navy); color:var(--gold); padding:6px 28px; font-size:0.72rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; }
.rc-comments { display:flex; gap:0; border-top:2px solid var(--navy); }
.rc-comment-box { flex:1; padding:16px 20px; border-right:1px solid var(--border); }
.rc-comment-box:last-child { border-right:none; }
.rc-footer-key { padding:12px 28px; background:var(--cream); border-top:1px solid var(--border); font-size:0.72rem; display:flex; gap:24px; flex-wrap:wrap; }

/* ── PRINT STYLES ───────────────────────────────────────────── */
@media print {
    .sidebar,.top-header,.no-print,.btn { display:none !important; }
    .main-content { margin-left:0 !important; }
    .page-body { padding:0 !important; }
    body { background:#fff; font-size:11px; }
    .report-card-wrap { max-width:100%; margin:0; box-shadow:none; }
    .card { box-shadow:none; border:none; }
    @page { margin:1cm; }
    .page-break { page-break-after:always; }
}

/* ── Utilities ──────────────────────────────────────────────── */
.text-center { text-align:center; } .text-right { text-align:right; }
.text-gold { color:var(--gold); } .text-navy { color:var(--navy); } .text-muted { color:var(--text-light); }
.text-sm { font-size:0.82rem; } .text-xs { font-size:0.72rem; }
.fw-bold { font-weight:600; }
.d-flex { display:flex; } .align-center { align-items:center; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; }
.mt-1{margin-top:6px} .mb-1{margin-bottom:6px}
.mt-2{margin-top:12px} .mb-2{margin-bottom:12px}
.mt-3{margin-top:18px} .mb-3{margin-bottom:18px}
.mt-4{margin-top:24px} .mb-4{margin-bottom:24px}
.p-0 { padding:0 !important; } .w-100 { width:100%; }
.divider { border:none; border-top:1px solid var(--border); margin:16px 0; }
.mono { font-family:'IBM Plex Mono',monospace; }

/* ── Desktop sidebar collapse ──────────────────────────────── */
.sidebar.collapsed { transform:translateX(-100%); }
.main-content.expanded { margin-left:0; }

@media (max-width:900px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main-content { margin-left:0; }
    .form-row.cols-3,.form-row.cols-4 { grid-template-columns:1fr 1fr; }
    .stat-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
    .form-row.cols-2,.form-row.cols-3,.form-row.cols-4 { grid-template-columns:1fr; }
    .stat-grid { grid-template-columns:1fr; }
    .page-body { padding:16px; }
}

/* ── User Dropdown (top bar) ─────────────────────────────── */
.user-dropdown { position:relative; }

.user-menu {
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,0.14);
  min-width:220px;
  z-index:1000;
  overflow:hidden;
  animation:dropIn 0.15s ease;
}

@keyframes dropIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* User info header at top of menu */
.user-menu-header {
  padding:14px 16px 10px;
  border-bottom:1px solid var(--border);
  background:var(--cream);
}
.user-menu-header .menu-name {
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:0.92rem;
  color:var(--navy);
}
.user-menu-header .menu-role {
  font-size:0.72rem;
  color:var(--text-light);
  margin-top:2px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.user-menu-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 16px;
  font-size:0.84rem;
  color:var(--text-dark);
  text-decoration:none;
  transition:background 0.12s;
  border:none;
  width:100%;
  background:none;
  cursor:pointer;
}
.user-menu-item:hover { background:var(--cream); color:var(--navy); }
.user-menu-item i {
  width:18px;
  text-align:center;
  font-size:0.9rem;
  color:var(--text-light);
  flex-shrink:0;
}
.user-menu-item:hover i { color:var(--navy); }
.user-menu-divider { border-top:1px solid var(--border); margin:4px 0; }
.user-menu-logout { color:var(--danger) !important; }
.user-menu-logout i { color:var(--danger) !important; }
.user-menu-logout:hover { background:#fff5f5 !important; }