/* Tema Biru & Emas */
:root {
  --navy: #0B2A5B;
  --navy-2: #123A7A;
  --blue: #1F4E9E;
  --blue-2: #5B8DEF;
  --gold: #C9A227;
  --gold-2: #E8C766;
  --gold-soft: #FBF3D6;
  --bg: #F3F6FC;
  --card: #fff;
  --line: #DCE3F0;
  --ink: #16233f;
  --muted: #6A7794;
  --side-w: 248px;
  --bs-primary: #1F4E9E;
  --bs-primary-rgb: 31, 78, 158;
  --bs-link-color: #1F4E9E;
}

body { background: var(--bg); color: var(--ink); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
a { color: var(--blue); }
.text-gold { color: var(--gold) !important; }
.text-warn { color: #B07A00; }
.bg-navy { background: var(--navy) !important; }
.bg-warning-gold { background: var(--gold-2) !important; color: var(--navy) !important; }

/* Butang */
.btn-navy { background: var(--navy); color: #fff; border: 0; }
.btn-navy:hover { background: var(--navy-2); color: #fff; }
.btn-outline-navy { color: var(--navy); border-color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-outline-gold { color: #8A6A0B; border-color: var(--gold); }
.btn-outline-gold:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.form-select:focus, .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(201, 162, 39, .25); }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }

/* Sidebar */
#sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 1040;
  background: linear-gradient(180deg, var(--navy) 0%, #081d42 100%);
  color: #cdd8ee; display: flex; flex-direction: column; border-right: 3px solid var(--gold);
  transition: transform .25s;
}
.brand { display: flex; gap: .75rem; align-items: center; padding: 1.25rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.brand i { font-size: 1.8rem; color: var(--gold-2); }
.brand b { display: block; color: #fff; letter-spacing: .04em; }
.brand small { color: var(--gold-2); font-size: .75rem; }
#sidebar .nav { padding: .75rem .5rem; gap: .15rem; }
#sidebar .nav-link { color: #cdd8ee; border-radius: .5rem; padding: .6rem .85rem; display: flex; gap: .7rem; align-items: center; border-left: 3px solid transparent; }
#sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
#sidebar .nav-link.active { background: rgba(232, 199, 102, .15); color: var(--gold-2); border-left-color: var(--gold-2); font-weight: 600; }
.side-foot { margin-top: auto; padding: 1rem; font-size: .8rem; color: #9fb0d3; border-top: 1px solid rgba(255, 255, 255, .1); }
.side-foot .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); margin-right: .3rem; }

#main { margin-left: var(--side-w); min-height: 100vh; }
#topbar {
  position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); padding: .6rem 1.25rem; border-bottom: 1px solid var(--line); min-height: 54px;
}
#topbar .form-select { width: auto; min-width: 130px; }
#view { padding: 1.25rem 1.25rem 3rem; max-width: 1500px; }

@media (max-width: 991.98px) {
  #sidebar { transform: translateX(-100%); }
  .side-open #sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .4); }
  #main { margin-left: 0; }
  #view { padding: 1rem .75rem 3rem; }
}

/* Tajuk halaman */
.page-head { margin-bottom: 1rem; padding-left: .85rem; border-left: 4px solid var(--gold); }
.page-head h1 { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin: 0; }
.page-head p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.gp-note { display: inline-block; background: var(--gold-soft); color: #7a5f08; border-radius: 1rem; padding: .05rem .6rem; font-size: .78rem; }

/* Kad */
.card { border: 1px solid var(--line); border-radius: .75rem; background: var(--card); box-shadow: 0 1px 3px rgba(11, 42, 91, .06); overflow: hidden; }
.card-header { background: #fff; font-weight: 600; color: var(--navy); border-bottom: 2px solid var(--gold-2); padding: .65rem 1rem; }
.card-footer { background: #fafcff; border-top: 1px solid var(--line); }
.chart-box { position: relative; width: 100%; }

/* KPI */
.kpi { position: relative; background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); color: #fff; border-radius: .75rem; padding: .9rem 1rem; height: 100%; overflow: hidden; border-bottom: 4px solid var(--gold-2); }
.kpi > i { position: absolute; right: .8rem; top: .7rem; font-size: 1.6rem; opacity: .28; }
.kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #cbd9f5; }
.kpi-val { font-size: 1.85rem; font-weight: 700; line-height: 1.15; }
.kpi-sub { font-size: .78rem; color: #cbd9f5; }
.kpi.gold { background: linear-gradient(135deg, #8A6A0B 0%, var(--gold) 100%); border-bottom-color: var(--navy); }
.kpi.gold .kpi-label, .kpi.gold .kpi-sub { color: #fff3c9; }
.kpi.sm { padding: .5rem; } .kpi.sm .kpi-val { font-size: 1.3rem; }
.kpi .delta { background: rgba(255, 255, 255, .92); border-radius: 1rem; padding: 0 .45rem; font-size: .75rem; }

/* Jadual */
.tbl thead th { background: #EEF3FC; color: var(--navy); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; border-bottom: 2px solid var(--gold-2); }
.tbl td, .tbl th { padding: .4rem .65rem; }
.tbl tbody tr[role=button] { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--gold-soft); }
.heat-tbl td.heat { font-weight: 600; font-variant-numeric: tabular-nums; }
.heat-tbl td.heat:hover { outline: 2px solid var(--gold); outline-offset: -2px; }
.legend-heat { font-size: .72rem; font-weight: 400; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; }
.legend-heat i { display: inline-block; width: 90px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #1F4E9E, #fff, #E8C766); border: 1px solid var(--line); }

/* Delta */
.delta { font-weight: 600; font-size: .85em; white-space: nowrap; }
.delta.up { color: #1F6B3A; } .delta.down { color: #B0451A; } .delta.flat { color: var(--muted); }
.kpi-sub .delta.up, .kpi-sub .delta.down, .kpi-sub .delta.flat { color: var(--navy); }

/* Gred */
.gred { display: inline-block; min-width: 1.5rem; text-align: center; border-radius: .35rem; font-size: .72rem; font-weight: 700; padding: .05rem .3rem; color: #fff; }
.g1 { background: #0B2A5B; } .g2 { background: #1F4E9E; } .g3 { background: #5B8DEF; }
.g4 { background: #E8C766; color: #4a3b05; } .g5 { background: #C9A227; } .g6 { background: #8A6A0B; }

/* Matriks peralihan */
.mat td { width: 3.2rem; font-variant-numeric: tabular-nums; }
.mat td.diag { background: #EEF3FC; font-weight: 600; }
.mat td.naik { background: rgba(31, 78, 158, .14); }
.mat td.turun { background: rgba(232, 199, 102, .35); }
.mat th { background: #EEF3FC; color: var(--navy); font-size: .8rem; }

/* Import */
.dropzone { border: 2px dashed var(--gold); border-radius: .75rem; background: var(--gold-soft); text-align: center; padding: 1.75rem 1rem; cursor: pointer; transition: .15s; }
.dropzone i { font-size: 2.4rem; color: var(--blue); }
.dropzone:hover, .dropzone.over { background: #fff1bd; border-color: var(--navy); }
.log { max-height: 220px; overflow: auto; font-size: .85rem; background: #0b1d3d; color: #cfe0ff; border-radius: .5rem; padding: .6rem .8rem; font-family: Consolas, monospace; }
.log:empty { display: none; }

.kosong { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.kosong i { font-size: 3rem; color: var(--gold-2); }

/* Modal */
.modal-header { background: var(--navy); color: #fff; border-bottom: 3px solid var(--gold); }
.modal-header .text-muted { color: var(--gold-2) !important; }
.modal-header .btn-close { filter: invert(1); }
.modal-header .btn-outline-gold { color: var(--gold-2); border-color: var(--gold-2); }
.modal-header .btn-outline-gold:hover { background: var(--gold-2); color: var(--navy); }

/* Cetak */
.school-logo { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.brand > div { min-width: 0; overflow-wrap: anywhere; }
.school-preview { width: 100px; height: 100px; object-fit: contain; }
.school-print-header { display: none; }
@media print {
  .school-print-header { display: flex; align-items: center; gap: 1rem; padding: 0 0 1rem; margin-bottom: 1rem; border-bottom: 2px solid #0B2A5B; }
  .school-print-header img { width: 64px; height: 64px; object-fit: contain; }
  #sidebar, #topbar, .toast-container, .btn, .pagination, .card-footer { display: none !important; }
  #main { margin: 0; }
  body { background: #fff; }
  .card, .kpi { box-shadow: none; break-inside: avoid; }
  .kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tbl thead th, .heat-tbl td, .gred { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-modal #main > :not(.modal), body.print-modal #main { display: none !important; }
  body.print-modal .modal { position: static; display: block !important; overflow: visible; }
  body.print-modal .modal-dialog { max-width: 100%; margin: 0; }
  body.print-modal .modal-backdrop { display: none; }
}