/* ============================================================
   AIM+ — Global Stylesheet v4.0
   Diadaptasi dari AIS (Analisis Item)
   Warna utama #1565C0 (biru) kekal — dahulu UI dah teruji.
   ============================================================ */

:root {
  --primary: #1565C0;
  --primary-dark: #0D47A1;
  --primary-light: #42A5F5;
  --accent: #FF6F00;
  --success: #2E7D32;
  --danger: #C62828;
  --warning: #F57F17;
  --bg: #F0F4F8;
  --card: #FFFFFF;
  --text: #1A237E;
  --text-light: #546E7A;
  --border: #CFD8DC;
  --shadow: 0 4px 20px rgba(21, 101, 192, .12);
  --radius: 14px;
}

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

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Navbar ---------- */
.navbar {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #1976D2 100%);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(13, 71, 161, .3);
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-logo {
  height: 42px;
  border-radius: 6px;
  object-fit: contain;
}
.nav-logo-placeholder {
  width: 42px; height: 42px;
  background: rgba(255, 255, 255, .2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 20px;
}
.nav-title-main {
  display: block;
  color: white;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}
.nav-title-sub {
  display: block;
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  margin-top: 1px;
}
.nav-actions { display: flex; gap: 6px; align-items: center; }
.btn-nav {
  background: rgba(255, 255, 255, .15);
  color: white;
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  transition: .2s;
}
.btn-nav:hover { background: rgba(255, 255, 255, .25); }

/* ---------- Pages ---------- */
.page { display: none; animation: fadeIn .3s ease; }
.page.active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card-title { font-weight: 700; font-size: 15px; margin-bottom: 14px; }

/* ---------- Buttons ---------- */
.btn {
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: .15s;
  font-family: inherit;
}
.btn:hover { opacity: .9; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: white; }
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-success { background: #2E7D32; color: white; }
.btn-warning { background: #F57F17; color: white; }
.btn-danger  { background: #C62828; color: white; }
.btn-lg { padding: 12px 28px; font-size: 15px; border-radius: 10px; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
  color: var(--text);
  background: white;
}
.form-control:focus { border-color: var(--primary); }

/* ---------- Alerts ---------- */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}
.alert-info    { background: #E3F2FD; color: #0D47A1; border-left: 4px solid var(--primary); }
.alert-danger  { background: #FFEBEE; color: #C62828; border-left: 4px solid #C62828; }
.alert-success { background: #E8F5E9; color: #1B5E20; border-left: 4px solid #1B5E20; }
.alert-warning { background: #FFF8E1; color: #E65100; border-left: 4px solid #F57F17; }

/* ---------- Utilities ---------- */
.w-100 { width: 100%; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 20px; }
.mb-3 { margin-bottom: 20px; }
.text-muted { color: var(--text-light); }
.text-left { text-align: left; }
.text-center { text-align: center; }
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.page-body { padding: 24px 32px; max-width: 1100px; margin: 0 auto; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  background: #263238;
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transition: opacity .3s;
  max-width: 340px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.toast.show     { opacity: 1; pointer-events: auto; }
.toast.success  { background: #1B5E20; }
.toast.error    { background: #C62828; }
.toast.warning  { background: #E65100; }

/* ---------- Modal ---------- */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: white;
  border-radius: var(--radius);
  padding: 28px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .2);
  max-height: 90vh;
  overflow-y: auto;
}

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab-btn {
  padding: 9px 16px;
  border: none;
  background: transparent;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.tab-btn:hover {
  color: var(--primary);
  background: rgba(21, 101, 192, .05);
}

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table-wrap th {
  background: var(--primary-dark);
  color: white;
  padding: 9px 10px;
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.table-wrap td {
  padding: 8px 10px;
  border-bottom: 1px solid #F5F5F5;
}
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap tr:hover td { background: #F8FAFE; }

/* ---------- Loading ---------- */
.loading { text-align: center; padding: 48px; }
.spinner {
  width: 36px;
  height: 36px;
  border: 4px solid #E0E0E0;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Hero (Home page) ---------- */
.hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #1976D2 100%);
  padding: 32px 24px;
  text-align: center;
}
.hero-badge {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 4px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: .5px;
}
.hero-title {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: white;
  margin-bottom: 10px;
  line-height: 1.2;
}
.hero-subtitle {
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  margin: 0 auto 20px;
  max-width: 540px;
}

/* ---------- Stat bar (under hero) ---------- */
.stat-bar {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 14px 32px;
}
.stat-bar-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.stat-cell { text-align: center; min-width: 120px; }
.stat-value { font-size: 22px; font-weight: 800; }
.stat-label { font-size: 11px; color: var(--text-light); font-weight: 600; }
.stat-divider { width: 1px; height: 36px; background: var(--border); }

/* ---------- Login pages ---------- */
.login-wrapper {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E3F2FD, #F0F4F8);
  padding: 32px;
}
.login-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.login-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 28px;
}
.login-title {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.login-subtitle {
  color: var(--text-light);
  font-size: 13px;
  text-align: center;
  margin-bottom: 28px;
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
  .navbar { padding: 0 12px; }
  .btn-nav span { display: none; }
  .btn-nav { padding: 8px 10px; }
  .nav-title-main { font-size: 13px; }
  .nav-title-sub { display: none; }
  .page-body { padding: 16px; }
  .hero { padding: 24px 16px; }
  .hero-title { font-size: 22px; }
  .stat-bar-inner { gap: 8px; }
  .stat-divider { display: none; }
  .stat-cell { min-width: 90px; }
  .stat-value { font-size: 18px; }
}

/* ---------- App Footer (Fasa 9a) ---------- */
.app-footer {
  text-align: center;
  padding: 14px 16px 18px;
  font-size: 11px;
  color: var(--text-light);
  background: transparent;
  border-top: 1px solid var(--border);
  margin-top: 32px;
  letter-spacing: .2px;
}
.app-footer .dev-version {
  display: inline-block;
  background: #F0F4F8;
  color: var(--text-light);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
}

/* ---------- Sticky tab strip enhancement (Fasa 9a) ---------- */
/* Stronger shadow + ensure stays above content */
.tab-strip {
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, .98) !important;
}

/* Hero Badge 2-line variant (Fasa 9a hotfix) */
.hero-badge.hero-badge-2line {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  line-height: 1.25;
}
.hero-badge-line1 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}
.hero-badge-line2 {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .8px;
  opacity: .92;
}
@media (max-width: 480px) {
  .hero-badge-line1 { font-size: 11px; }
  .hero-badge-line2 { font-size: 8.5px; }
}

/* ============================================================
   Mobile-Friendly Polish (Fasa 9c)
   - Tablet:  768px - 1024px
   - Phone:   320px - 767px
   - Tiny:    < 360px (extra small phones)
   ============================================================ */

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  /* Page body: less side padding */
  .page-body { padding: 18px 16px; }

  /* Dashboard sticky head: keep sticky but lower stack */
  .dash-sticky-head { top: 64px; }

  /* Tetapan + Master tab strips: smaller on tablet */
  .tt-tabstrip, .master-tabstrip { padding: 4px 10px 0; }

  /* Modals: more breathing room */
  #hcModal > div, #stuModal > div, #exportAllModal > div { max-width: 96vw !important; max-height: 88vh !important; }
}

/* ---------- Mobile / Small Tablet (≤768px) ---------- */
@media (max-width: 768px) {
  /* === GENERAL === */
  body { font-size: 14px; }

  .page-body { padding: 12px 10px; }

  /* === NAVBAR === */
  .navbar { padding: 0 8px; height: 56px; gap: 4px; }
  .nav-brand { gap: 8px; flex: 1; min-width: 0; }
  .nav-logo-placeholder { width: 32px; height: 32px; font-size: 14px; }
  .nav-title-main { font-size: 12px; }
  .btn-nav { padding: 6px 8px; font-size: 11px; }
  .btn-nav i { font-size: 12px; }

  /* === HERO BANNER === */
  .hero { padding: 20px 14px; }
  .hero-title { font-size: 20px; line-height: 1.2; margin-bottom: 8px; }
  .hero-subtitle { font-size: 12px; margin-bottom: 14px; line-height: 1.4; }
  .hero-badge { padding: 6px 12px; font-size: 10px; margin-bottom: 14px; }
  .hero .btn-lg { padding: 10px 14px; font-size: 13px; flex: 1; min-width: 130px; justify-content: center; }

  /* === STAT BAR (homepage) === */
  .stat-bar-inner { flex-wrap: wrap; gap: 0; padding: 10px; }
  .stat-cell { flex: 1; min-width: 50%; padding: 8px 6px; border-bottom: 1px solid #F0F0F0; }
  .stat-cell:last-child, .stat-cell:nth-last-child(2) { border-bottom: none; }
  .stat-value { font-size: 16px; }
  .stat-label { font-size: 10px; }

  /* === HOMEPAGE CARDS === */
  .home-card { padding: 16px 12px; }
  .home-card-icon { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 10px; font-size: 18px; }

  /* === DASHBOARD === */
  /* Sticky head: navbar smaller (56px) so adjust */
  .dash-sticky-head { top: 56px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

  /* Filter bar: compact, allow wrap */
  .dash-filterbar { padding: 10px 12px; gap: 8px; }
  .dash-filterbar .filter-group { min-width: calc(50% - 4px); flex: 1; }
  .dash-filterbar label { font-size: 9px; margin-bottom: 2px; }
  .dash-filterbar select { padding: 5px 8px; font-size: 12px; width: 100%; }
  .dash-filterbar .scope-badge { font-size: 9px; padding: 4px 8px; flex-basis: 100%; text-align: center; }
  .dash-filterbar .refresh-btn { font-size: 11px; padding: 5px 8px; }
  .dash-filterbar .refresh-btn span,
  .dash-filterbar .btn-export { padding: 5px 8px; }

  /* Export buttons compact on mobile - hide labels, keep icons */
  .dash-filterbar .export-group .btn-export { font-size: 0; padding: 6px 9px; }
  .dash-filterbar .export-group .btn-export i { font-size: 13px; }

  /* Tab strip: tighter */
  .tab-strip { padding: 2px 8px 0; }
  .tab-btn { padding: 8px 10px; font-size: 11px; gap: 4px; }
  .tab-btn i { font-size: 11px; }

  /* === DASHBOARD GRIDS === */
  /* Force 1 col for cols-3/4/5 (cols-2 stays 2) */
  .dash-grid { gap: 10px; margin-bottom: 10px; }
  .dash-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .dash-grid.cols-3,
  .dash-grid.cols-4,
  .dash-grid.cols-5 { grid-template-columns: 1fr; }

  /* Stat cards: smaller numbers */
  .stat-card { padding: 12px; }
  .stat-card-num { font-size: 22px; }
  .stat-card-lbl { font-size: 11px; }
  .stat-card-icon { width: 30px; height: 30px; font-size: 13px; }

  /* Dash cards: less padding */
  .dash-card { padding: 14px; margin-bottom: 10px; border-radius: 8px; }
  .dash-card-title { font-size: 13px; margin-bottom: 10px; }

  /* === TABLES === */
  /* `min-width: max-content` DIBUANG dari sini — lihat blok B1 di hujung fail.
     Dalam CSS, min-width sentiasa mengatasi max-width, jadi peraturan lama
     menjadikan bekas skrol mustahil mengecil: jadual menolak seluruh halaman
     menjadi lebih lebar daripada skrin. */
  .dash-table, .m-table { font-size: 11px; }
  .dash-table th, .dash-table td,
  .m-table th, .m-table td { padding: 6px 8px; }
  .dash-card > div[style*="overflow-x"] { -webkit-overflow-scrolling: touch; }

  /* Bekas skrol jadual — lihat blok B1 di hujung fail. */

  /* === TETAPAN === */
  .tt-tabstrip { padding: 2px 8px 0; }
  .tt-table { font-size: 11px; }
  .tt-table th, .tt-table td { padding: 6px 8px; }
  .tt-card { padding: 14px; }

  /* === MASTER === */
  .master-tabstrip { padding: 2px 8px 0; }

  /* === MODALS === */
  /* Convert modals to full-screen on mobile */
  #hcModal, #stuModal, #exportAllModal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #hcModal > div, #stuModal > div, #exportAllModal > div {
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  /* === LOGIN === */
  .login-wrapper { padding: 16px; min-height: calc(100vh - 56px); }
  .login-card { padding: 24px 20px; max-width: 100%; }
  .login-icon { width: 52px; height: 52px; font-size: 22px; }
  .login-title { font-size: 17px; }

  /* === FOOTER === */
  .app-footer { font-size: 10px; padding: 10px 12px 14px; line-height: 1.5; }
  .app-footer .dev-version { display: block; margin: 4px auto 0; }

  /* === BUTTONS === */
  .btn { padding: 8px 12px; font-size: 12px; }
  .btn-lg { padding: 10px 16px; font-size: 13px; }

  /* === FORMS === */
  .form-control { font-size: 13px; padding: 7px 10px; }
}

/* ---------- Tiny phones (≤480px) ---------- */
@media (max-width: 480px) {
  .navbar { padding: 0 6px; gap: 2px; }
  .btn-nav { padding: 5px 6px; }
  .btn-nav i { font-size: 11px; }
  #navUserBadge { display: none !important; }

  .hero { padding: 14px 10px; }
  .hero-title { font-size: 17px; }
  .hero-subtitle { font-size: 11px; }
  .hero .btn-lg { font-size: 12px; padding: 8px 10px; }

  /* Filter bar — single column on tiny */
  .dash-filterbar .filter-group { min-width: 100%; }
  .dash-filterbar .scope-badge { width: 100%; }

  /* Cards: 1 col always */
  .dash-grid.cols-2 { grid-template-columns: 1fr; }

  /* Stat cards smaller */
  .stat-card-num { font-size: 18px; }
  .stat-card-lbl { font-size: 10px; }

  /* Smaller dash card title */
  .dash-card-title { font-size: 12px; }
}

/* ---------- Touch device adjustments ---------- */
@media (pointer: coarse) {
  /* Bigger tap targets for touch screens */
  .btn { min-height: 38px; }
  .tab-btn { min-height: 38px; }
  select, input.form-control { min-height: 36px; }
  .dash-filterbar select { min-height: 32px; }
}

/* ---------- Landscape phone hint ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { padding: 14px 16px; }
  .hero-title { font-size: 18px; margin-bottom: 6px; }
  .hero-subtitle { font-size: 11px; margin-bottom: 10px; }
  .navbar { height: 48px; }
}

/* ============================================================
   Print Mode (Fasa 9b HOTFIX) - native browser print
   - body.print-mode-tab: print current dashboard tab
   - body.print-mode-multi: print multiple tabs from #multiTabPrintContainer
   ============================================================ */

/* Hide multi-tab print container by default (only shown during print) */
#multiTabPrintContainer { display: none; }
#printRunningHeader { display: none; }

@media print {
  /* === COMMON: Page setup === */
  @page {
    size: A4;
    margin: 14mm;
  }

  body {
    background: white !important;
    color: #000 !important;
    font-size: 10pt;
  }

  /* Hide navbar, footer, modals always when printing */
  .navbar,
  .app-footer,
  .dash-sticky-head,
  .dash-filterbar,
  .tab-strip,
  .master-tabstrip,
  .tt-tabstrip,
  #hcModal,
  #stuModal,
  #printAllModal,
  [data-no-export],
  button.btn-export,
  .btn-nav,
  .scope-badge {
    display: none !important;
    visibility: hidden !important;
  }

  /* Avoid awkward breaks */
  .dash-card {
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc;
    margin-bottom: 8pt;
    padding: 10pt !important;
  }

  /* Tables: print-friendly */
  table {
    page-break-inside: auto;
    width: 100% !important;
    border-collapse: collapse;
    font-size: 9pt !important;
  }
  thead { display: table-header-group; } /* Repeat header on each page */
  tr { page-break-inside: avoid; }
  th, td {
    padding: 4pt 6pt !important;
    border: 1px solid #ddd !important;
  }

  /* Charts: SVG renders fine in print, just ensure no overflow */
  .apexcharts-svg {
    max-width: 100% !important;
  }

  /* Hide chart toolbars in print */
  .apexcharts-toolbar { display: none !important; }

  /* === MODE: Single tab print === */
  body.print-mode-tab .navbar,
  body.print-mode-tab .app-footer,
  body.print-mode-tab .dash-sticky-head {
    display: none !important;
  }
  body.print-mode-tab #dashContent {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Print running header bar (top of every page) */
  body.print-mode-tab #printRunningHeader,
  body.print-mode-multi #printRunningHeader {
    display: block !important;
    visibility: visible !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #1565C0;
    color: white;
    font-size: 8pt;
    padding: 3pt 8pt;
    z-index: 9999;
  }
  body.print-mode-tab #printRunningHeader .print-header-bar,
  body.print-mode-multi #printRunningHeader .print-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  body.print-mode-tab #printRunningHeader strong,
  body.print-mode-multi #printRunningHeader strong { color: white; }

  /* === MODE: Multi-tab print === */
  body.print-mode-multi #multiTabPrintContainer {
    display: block !important;
    visibility: visible !important;
  }
  body.print-mode-multi #multiTabPrintContainer * {
    visibility: visible !important;
  }
  body.print-mode-multi > *:not(#multiTabPrintContainer):not(#printRunningHeader) {
    display: none !important;
  }

  /* Cover page styling */
  .print-cover-page {
    page-break-after: always;
    min-height: 90vh;
    text-align: center;
    padding-top: 20mm;
  }
  .print-cover-banner {
    background: #1565C0;
    color: white !important;
    padding: 30pt 20pt;
    border-radius: 4pt;
    margin-bottom: 30pt;
  }
  .print-cover-banner h1 {
    font-size: 32pt;
    margin: 0 0 8pt;
    color: white !important;
    font-weight: 800;
  }
  .print-cover-banner p {
    color: rgba(255,255,255,.9) !important;
    margin: 4pt 0;
    font-size: 12pt;
  }
  .print-cover-body {
    text-align: left;
    max-width: 500pt;
    margin: 0 auto;
    padding: 20pt;
  }
  .print-cover-body h2 {
    font-size: 18pt;
    color: #1565C0 !important;
    border-bottom: 2pt solid #1565C0;
    padding-bottom: 4pt;
  }
  .print-cover-meta {
    width: 100%;
    margin-top: 16pt;
    font-size: 11pt;
  }
  .print-cover-meta td {
    padding: 6pt 4pt !important;
    border-bottom: 1px dotted #ddd !important;
    border: none !important;
  }
  .print-cover-meta td:first-child {
    width: 30%;
    color: #666;
  }
  .print-cover-footer {
    margin-top: 60pt;
    font-size: 9pt;
    color: #888;
    text-align: center;
    line-height: 1.5;
  }

  /* Tab section heading */
  .print-tab-section {
    page-break-before: always;
  }
  .print-tab-section:first-child {
    page-break-before: avoid;
  }
  .print-tab-heading {
    font-size: 16pt !important;
    color: #1565C0 !important;
    margin: 0 0 10pt !important;
    padding-bottom: 6pt;
    border-bottom: 2pt solid #1565C0;
    font-weight: 700;
  }

  /* Hide scrollbars in print */
  * { overflow: visible !important; }

  /* Reduce huge backgrounds for ink saving */
  .dash-card-title { color: #1565C0 !important; }

  /* Footer note on every page (for tab print) */
  body.print-mode-tab::after,
  body.print-mode-multi::after {
    content: "AIM+ · Sektor Pembelajaran JPN Kedah";
    position: fixed;
    bottom: 4mm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 7pt;
    color: #999;
  }

  /* Ensure chart colors print */
  .apexcharts-svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Apply color-adjust globally for accurate brand colors */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Hide elements not relevant for screen */
.print-cover-page,
.print-tab-section { display: none; }

/* Show them within print container */
#multiTabPrintContainer .print-cover-page,
#multiTabPrintContainer .print-tab-section {
  display: none; /* hidden until print mode */
}

@media print {
  #multiTabPrintContainer .print-cover-page,
  #multiTabPrintContainer .print-tab-section {
    display: block !important;
  }
}

/* ============================================================
   SENARAI PELAJAR — jadual padat bergridline  (prefix: sp-)
   ------------------------------------------------------------
   WHY: paparan lama guna `table{width:100%}` yang MEMAKSA setiap
   lajur memampat ke dalam lebar skrin — nama terpotong, angka
   berhimpitan. Di sini lajur diberi lebar kecil yang tetap supaya
   setiap soalan muat tanpa skrol mendatar pada kebanyakan skrin.

   Kelas ini BERASINGAN daripada `.m-table` (diguna belasan fail
   lain) — jangan gabungkan kedua-duanya.
   ============================================================ */

.sp-wrap {
  overflow: auto;
  max-height: 620px;
  border: 1px solid #B0BEC5;
  border-radius: 8px;
  background: #fff;
}

.sp-table {
  border-collapse: separate;   /* perlu supaya sempadan lajur melekat tidak hilang */
  border-spacing: 0;
  font-size: 11px;
  /* Kunci reka bentuk:
   *   width:100%            → isi bekas apabila ada ruang lebih
   *   min-width:max-content → JANGAN sesekali mampat di bawah lebar semula jadi
   * Jika semua lajur muat  → jadual isi penuh, tiada skrol.
   * Jika tidak muat        → skrol mendatar, lajur kekal boleh dibaca.
   * table-layout dibiar AUTO supaya lebar pada <th> baris kedua dihormati. */
  width: 100%;
  min-width: max-content;
}

/* ── Gridline penuh ── */
.sp-table th,
.sp-table td {
  border-right: 1px solid #CFD8DC;
  border-bottom: 1px solid #CFD8DC;
  padding: 2px 3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-table thead th {
  position: sticky;
  background: #ECEFF1;
  color: var(--text);
  font-weight: 700;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .2px;
  border-top: 1px solid #B0BEC5;
  z-index: 3;
}
.sp-table thead tr:first-child th  { top: 0; }
/* Nilai sandaran sahaja — spSetupTable() mengukur tinggi sebenar baris pertama
 * selepas render dan menulis semula `top` di sini. WHY: tinggi baris pertama
 * berubah ikut kandungan (<br>, rowspan), jadi nilai tetap tidak boleh dipercayai. */
.sp-table thead tr:nth-child(2) th { top: 21px; }

/* ── Zebra + sorotan baris ── */
.sp-table tbody tr:nth-child(even) { background: #FAFBFC; }
.sp-table tbody tr:hover td { background: #E3F2FD !important; }

/* ── Lajur kiri melekat ── */
.sp-stick {
  position: sticky;
  z-index: 2;
  background: #fff;
}
/* Jajaran KIRI untuk lajur melekat.
 * WHY spesifisiti `.sp-table .sp-stick` (0,2,1) dan bukan `.sp-stick` (0,1,0):
 * peraturan `.sp-table td { text-align:center }` ialah (0,1,1) — ia MENGATASI
 * pemilih satu-kelas, jadi nama pelajar terpapar di tengah. Nama, kelas dan
 * sekolah ialah teks, bukan angka — mesti rata kiri supaya kemas dan formal. */
.sp-table .sp-stick { text-align: left; }
.sp-table thead .sp-stick { z-index: 4; background: #ECEFF1; }
.sp-table tbody tr:nth-child(even) .sp-stick { background: #FAFBFC; }
.sp-table .sp-c-bil { width: 26px; left: 0; text-align: center; color: var(--text-light); }
.sp-c-kls { width: 46px;  left: 26px; font-size: 10px; color: var(--text-light); }
.sp-c-sek { width: 84px;  left: 72px; font-size: 10px; color: var(--text-light); }
.sp-c-nam { width: 132px; font-weight: 600; border-right: 2px solid #90A4AE !important; }
/* NAMA melekat pada offset berbeza bergantung lajur SEKOLAH wujud atau tidak */
.sp-has-sek .sp-c-nam { left: 156px; }
.sp-no-sek  .sp-c-nam { left: 72px; }
.sp-no-sek  .sp-c-sek { display: none; }
.sp-c-nam a { color: #1565C0; text-decoration: none; cursor: pointer; }

/* ── Sel soalan ── */
.sp-q { width: 26px; font-variant-numeric: tabular-nums; }
.sp-q.sp-zero { color: #B0BEC5; }
.sp-q.sp-tj   { color: #E65100; background: #FFF3E0; font-weight: 700; }
/* label sub-bahagian AIS/AIM+ lebih panjang — beri sedikit ruang */
.sp-q.sp-wide { width: 34px; }

/* Warna kumpulan bahagian */
.sp-g1 { background: #FFFDE7; }
.sp-g2 { background: #E0F7FA; }
.sp-g3 { background: #FCE4EC; }
.sp-g4 { background: #FFF3E0; }
.sp-g5 { background: #F3E5F5; }

/* ── Sel ringkasan ── */
.sp-sum { width: 36px; font-weight: 700; background: #ECEFF1; }
.sp-tot { width: 40px; font-weight: 800; background: #FFE0B2; }
.sp-pct { width: 40px; font-weight: 800; background: #C8E6C9; }
.sp-kat { width: 62px; }
.sp-kat span {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

/* ── Baris TH (tidak hadir) ── */
.sp-table tbody tr.sp-th td { background: #FAFAFA; color: #9E9E9E; font-style: italic; }

/* ── Tajuk jadual (AIS: dua jadual bertindan) ── */
.sp-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-title:first-child { margin-top: 0; }
.sp-title .sp-chip {
  background: #E3F2FD;
  color: #0D47A1;
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 10px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Skrin kecil: mampatkan sedikit, kekalkan lajur melekat ── */
@media (max-width: 1100px) {
  .sp-table { font-size: 10px; }
  .sp-q { width: 22px; }
  .sp-q.sp-wide { width: 30px; }
  .sp-c-nam { width: 112px; }
}

/* ============================================================
   JADUAL DALAM MODAL PROFIL PELAJAR  (prefix: mi-)
   ------------------------------------------------------------
   WHY kelas baharu dan bukan `.m-table`: `.m-table` hanya ditakrif di
   dalam @media (max-width:768px), jadi pada desktop ia LANGSUNG tiada
   gaya — itulah sebab jadual "Markah Setiap Item" nampak tidak sejajar.
   Menambah gaya asas pada `.m-table` akan menjejaskan belasan fail lain,
   jadi kita guna kelas berskop yang hanya dipakai dalam modal.
   ============================================================ */
.mi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.mi-table thead th {
  background: #ECEFF1;
  color: var(--text);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2px;
  padding: 6px 8px;
  border-bottom: 2px solid #B0BEC5;
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.mi-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid #ECEFF1;
  vertical-align: top;
}
.mi-table tbody tr:nth-child(even) { background: #FAFBFC; }
.mi-table tbody tr:hover td { background: #E3F2FD; }
/* Jajaran: teks kiri, angka tengah — spesifisiti (0,2,1) supaya
   mengatasi peraturan sel asas. */
.mi-table .mi-c { text-align: center; }
.mi-table .mi-num { text-align: center; font-variant-numeric: tabular-nums; }
.mi-wrap { max-height: 340px; overflow: auto; border: 1px solid #CFD8DC; border-radius: 6px; }


/* ══════════════════════════════════════════════════════════════════════════
   B1 — PAPARAN MUDAH ALIH (23 Julai 2026)
   --------------------------------------------------------------------------
   Punca asal masalah "jadual/carta terkeluar dari paparan":

     .dash-table, .m-table { min-width: max-content; }        <- lama
     .dash-card table      { max-width: 100%; overflow-x:auto } <- lama

   Dalam algoritma CSS, `min-width` DIGUNAKAN SELEPAS `max-width`, jadi
   min-width sentiasa menang. Bekas skrol itu tidak pernah boleh mengecil;
   jadual kekal selebar kandungannya, pecah keluar dari kad, dan menolak
   <body> lebih lebar daripada viewport. Itu sebabnya seluruh halaman
   (termasuk navbar melekat) tergeser ke tepi, bukan hanya jadualnya.

   Pembetulan: `width: max-content` + `max-width: 100%`. Kini max-width
   mengurung kotak, kandungan melimpah ke dalam, dan skrol berlaku DI DALAM
   jadual sahaja.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Akar: kelakuan seperti aplikasi ─────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;   /* halang iOS membesarkan teks sendiri */
}
body {
  overscroll-behavior-y: none;       /* buang lantunan rubber-band */
  touch-action: manipulation;        /* buang zum ketuk-dua-kali */
  -webkit-tap-highlight-color: transparent;
  /* `clip` BUKAN `hidden`: mengikut spesifikasi, `clip` TIDAK mencipta
     bekas skrol baharu, jadi .navbar dan .dash-sticky-head yang menggunakan
     position:sticky kekal berfungsi. `hidden` akan memecahkannya. */
  overflow-x: clip;
}

/* Media tidak boleh melebihi bekasnya */
img, video, canvas, svg { max-width: 100%; }

/* ── 2. Item grid/flex mesti DIBENARKAN mengecil ────────────────────────── */
/* Item grid/flex mempunyai min-width:auto secara lalai, bermakna ia enggan
   mengecil di bawah lebar min-content kandungannya. Satu SVG ApexCharts atau
   satu jadual lebar sudah cukup untuk memaksa keseluruhan grid melebihi skrin.
   Ini punca kedua yang paling kerap. */
.dash-grid > *,
.dash-card > *,
.dash-filterbar > *,
.m-card > * { min-width: 0; }

/* ── 3. Carta ───────────────────────────────────────────────────────────── */
/* ApexCharts menulis lebar sebaris (inline) selepas mengukur induknya. Jika
   pengukuran berlaku sebelum susun atur stabil (contoh: tukar orientasi),
   lebar itu boleh tersasar. Pengapit ini menghalangnya menolak halaman. */
.apexcharts-canvas { max-width: 100% !important; }
.apexcharts-legend { max-width: 100%; overflow: hidden; }

/* ── 4. Jadual: bekas skrol yang BETUL ──────────────────────────────────── */
@media (max-width: 768px) {
  .dash-table,
  .m-table,
  .dash-card table:not([data-no-scroll]):not(.sp-table):not(.mi-table),
  .m-card   table:not([data-no-scroll]):not(.sp-table):not(.mi-table) {
    display: block;
    width: max-content;      /* lebar semula jadi... */
    max-width: 100%;         /* ...tetapi tidak pernah melebihi bekas */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* `.sp-table` dan `.mi-table` DIKECUALIKAN dengan sengaja: kedua-duanya
     sudah berada di dalam bekas skrol sendiri (`.sp-wrap`, `.mi-wrap`) dan
     bergantung pada position:sticky untuk lajur/pengepala melekat. Menjadikan
     jadual itu sendiri bekas skrol akan mencipta skrol bersarang dan
     memecahkan sticky — pepijat yang sama sudah pernah berlaku sebelum ini. */
  .sp-wrap, .mi-wrap { max-width: 100%; }
}

/* ── 5. Grid pada telefon kecil ─────────────────────────────────────────── */
/* cols-2 sudah menjadi 1 lajur pada <=480px (peraturan sedia ada). Di sini
   kita hanya pastikan grid sebaris (inline) dalam fail tab turut mematuhinya. */
@media (max-width: 480px) {
  .dash-card > div[style*="grid-template-columns:repeat(3"],
  .dash-card > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 6. Kawasan selamat (notch / Dynamic Island / bar isyarat) ──────────── */
/* Dikunci kepada mod standalone sahaja. Dalam pelayar biasa, Safari sudah
   mengendalikan inset sendiri; menambah padding di sana akan menghasilkan
   jurang kosong di bawah bar alamat. */
@media (display-mode: standalone) {
  .navbar {
    height: calc(64px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
  .dash-sticky-head { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .app-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (display-mode: standalone) and (max-width: 768px) {
  .navbar {
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }
  .dash-sticky-head { top: calc(56px + env(safe-area-inset-top, 0px)); }
}

/* ── 7. Sasaran sentuh & medan borang ───────────────────────────────────── */
@media (pointer: coarse) {
  /* iOS mengezum masuk secara automatik apabila medan input bersaiz <16px
     difokus. Kita sudah mematikan zum pengguna, tetapi zum-fokus ini
     berasingan dan masih akan menggeser susun atur. */
  input, select, textarea { font-size: 16px; }
  .dash-filterbar select { font-size: 16px; }
  .tab-strip { -webkit-overflow-scrolling: touch; }
}

/* ── 8. Jalur tab boleh skrol mendatar tanpa menolak halaman ────────────── */
.tab-strip {
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.tab-strip::-webkit-scrollbar { display: none; }

/* ── 9. Cetak: pulihkan susun atur jadual penuh ─────────────────────────── */
@media print {
  .dash-table, .m-table,
  .dash-card table, .m-card table {
    display: table !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }
  body { overflow-x: visible !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   M1 — PEMBETULAN PAPARAN MUDAH ALIH (PUSINGAN KEDUA, 23 Julai 2026)
   Berdasarkan tangkapan skrin iPhone 15 Pro Max (lebar logik 430px).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Senarai Pelajar: kawasan melekat menelan seluruh skrin ──────────
   PUNCA: empat lajur melekat menjumlahkan 26+46+84+132 = 288px MINIMUM.
   Tetapi `.sp-table { min-width: max-content }` menyebabkan lajur NAMA
   berkembang mengikut nama TERPANJANG dalam senarai (kerap ~300px, contoh
   "MUHAMMAD AMSYAR 'ATHOULLAH BIN MOHD ..."). Jumlah kawasan melekat
   menjadi ~460px — LEBIH LEBAR daripada skrin 430px.

   Akibatnya kawasan melekat menutupi keseluruhan viewport: tiada ruang
   tinggal untuk lajur data, dan menatal ke kanan kelihatan seperti tidak
   berfungsi kerana lajur melekat sentiasa dicat semula di atasnya.

   PEMBETULAN: pada telefon, MATIKAN sifat melekat sepenuhnya. Seluruh baris
   menatal bersama, jadi setiap lajur boleh dicapai. Kita juga hadkan lebar
   NAMA supaya skrin pertama sudah menunjukkan beberapa lajur markah.

   Kenapa dimatikan sepenuhnya dan bukan "kekalkan NAMA melekat sahaja":
   pengapit lebar bergantung pada kandungan sel boleh dipotong, dan itu tidak
   dapat disahkan tanpa peranti sebenar. Mematikan sifat melekat berfungsi
   TANPA SYARAT. Kalau Hafiz mahu NAMA kekal melekat selepas mengesahkan
   pengapit lebar berkesan, buang blok `position: static` di bawah dan
   tambah `.sp-has-sek .sp-c-nam, .sp-no-sek .sp-c-nam { left: 0; }`. */
@media (max-width: 768px) {
  .sp-table .sp-stick { position: static; }

  /* Hadkan lebar. `max-width` pada <td> sahaja tidak mengikat apabila jadual
     `min-width:max-content`, jadi kita hadkan elemen KANDUNGAN juga —
     sumbangan max-content sel kemudian terikat kepada nilai itu. */
  .sp-c-nam { max-width: 150px; }
  .sp-c-nam a,
  .sp-c-nam > span,
  .sp-c-nam > div {
    display: block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sp-c-sek { max-width: 72px; font-size: 9px; }
  .sp-c-kls { max-width: 44px; }

  /* Petunjuk boleh tatal — tanpa lajur melekat, tepi kanan kelihatan mati. */
  .sp-wrap { position: relative; }
  .sp-wrap::after {
    content: '';
    position: sticky; float: right; top: 0; right: 0;
    width: 18px; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,.06));
    pointer-events: none;
  }
}

/* ── 2. Grid sebaris (inline) dalam fail tab ────────────────────────────
   Peraturan `.dash-grid.cols-2` tidak pernah terpakai kepada grid yang
   ditulis terus dalam atribut style pada fail tab — dan itulah majoriti
   susun atur dua-lajur dalam sistem ini (kad Headcount, Sasaran & Jurang,
   Kumpulan Intervensi, modal profil pelajar). Itulah sebabnya kad masih
   bersebelahan dan terpotong walaupun `.dash-grid.cols-2` sudah dibetulkan. */
@media (max-width: 700px) {
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 3fr"],
  [style*="grid-template-columns: 2fr 3fr"],
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns:280px 1fr"],
  [style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Kad statistik kecil: dua lajur masih boleh dibaca dan mengelak halaman
     menjadi terlalu panjang. */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 3. Carta pada skrin sempit ─────────────────────────────────────────
   Label paksi ApexCharts tidak mengecil sendiri; pada 430px label topik
   panjang bertindih sesama sendiri (lihat modal profil pelajar). */
@media (max-width: 700px) {
  .apexcharts-xaxis-label, .apexcharts-yaxis-label { font-size: 9px !important; }
  .apexcharts-legend-text { font-size: 10px !important; }
  .apexcharts-datalabel, .apexcharts-datalabels text { font-size: 9px !important; }
  .apexcharts-tooltip { max-width: 90vw; }
  /* Anotasi (contoh "Belum capai OTI1") boleh melebihi plot pada skrin kecil. */
  .apexcharts-xaxis-annotations text,
  .apexcharts-yaxis-annotations text { font-size: 9px !important; }
}

/* ── 4. Modal profil pelajar ────────────────────────────────────────────
   Modal menggunakan flex; tanpa `min-height:0` anak tidak boleh mengecil
   di bawah kandungannya dan `overflow-y:auto` tidak pernah aktif. */
@media (max-width: 700px) {
  .mi-modal, .m-modal, .sp-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh;
  }
  .mi-modal > *, .m-modal > *, .sp-modal > * { min-width: 0; }
}

/* ── 5. Tajuk kad tidak lagi pecah pelik ───────────────────────────────── */
@media (max-width: 700px) {
  .dash-card-title, .m-card h3 {
    font-size: 14px;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}