/* ============================================
   RESET & VARIABLES
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- Brand palette (HOME: blue/pink/orange/green) — redesign 2026 ---- */
  --ink:       #1E2235;
  --ink-soft:  #5F6573;   /* polish 2026-10-18: was #6B7280 (3.99:1 on --bg) */
  --ink-faint: #737A89;   /* polish 2026-10-18: was #9CA3AF (2.5:1 on white) */
  /* --bg was #F5F6FC — barely a shade off pure white, so the page canvas,
     the desktop rail/topbar and every white card all read as one
     undifferentiated white mass ("terlalu putih... boleh sakit mata").
     Deepened to a real, visible grey-lavender so cards actually pop off the
     page instead of blending into it. --line darkened to match — a border
     lighter than the canvas it sits on would otherwise disappear. */
  --bg:        #E7E9F2;
  --surface:   #FFFFFF;
  --line:      #DBDEEA;

  --blue:        #2BBCFF; --blue-deep:   #0B84C4; --blue-bg:   #E6F7FF; --blue-text:   #0B7BB8;
  --pink:        #FF4DB8; --pink-deep:   #D6299A; --pink-bg:   #FFEAF6; --pink-text:   #C22C86;
  --orange:      #F6A623; --orange-deep: #C97A00; --orange-bg: #FFF4E0; --orange-text: #9A5B00;
  --green:       #3FC94B; --green-deep:  #238A31; --green-bg:  #E8FBEA; --green-text:  #1F8A2C;
  --purple:      #8B5CF6; --purple-deep: #6D3FD1; --purple-bg: #F1EBFF; --purple-text: #6534C4;
  --red:         #EF4444; --red-deep:    #C62828; --red-bg:    #FDEBEC; --red-text:    #C62828;
  --grey-bg:     #F1F1F5; --grey-text:   #7A7E8C;

  /* Legacy --g-* aliases — this codebase used one universal "g" (green)
     color for nearly every primary button/active-state/focus-ring across
     every file. The redesign's brand uses blue for that "primary action"
     role and reserves green specifically for money/paid/success — so these
     alias to BLUE (not green) to flip every untouched primary-button/active-
     tab/selected-state rule at once; genuinely money/success spots (yuran
     paid, elaun totals, msg-box.success, submitted badges) are overridden
     back to explicit green further down instead of relying on this alias. */
  --g-dark:   var(--blue-deep);
  --g-main:   var(--blue-deep);
  --g-mid:    var(--blue);
  --g-light:  var(--blue-bg);
  --g-pale:   var(--blue-bg);
  --g-border: var(--blue);

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-full: 999px;
  --shadow-sm: 0 2px 10px rgba(30,34,53,0.06);
  --shadow-md: 0 10px 26px rgba(30,34,53,0.10);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

h1, h2, h3, .card-title, .page-title, .section-title, .home-title,
.auth-form-title, .auth-brand-name, .modal-title, .lb-card-nama, .lp-summary-name,
.student-name, .tmpl-student-name {
  font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif;
}

.app {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

#page-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
}

/* ============================================
   SCREENS
   ============================================ */
.screen { display: none; flex-direction: column; flex: 1; }
.screen.active { display: flex; }

/* ============================================
   AUTH
   ============================================ */
.auth-header {
  background: linear-gradient(160deg, var(--blue) 0%, var(--green) 100%);
  padding: 32px 24px 28px;
  border-radius: 0 0 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.auth-header::before {
  content: ''; position: absolute; top: -46px; right: -30px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  z-index: -1;
}
.auth-header::after {
  content: ''; position: absolute; bottom: -60px; left: -26px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
  z-index: -1;
}
.auth-logo-icon {
  width: 80px; height: 80px;
  background: white;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  box-shadow: var(--shadow-md);
  position: relative;
}
/* Same problem as the home header's wordmark: the H is brand blue and the E is
   brand green, and this panel is a blue→green gradient, so both letters were
   dissolving into it. A white plate behind the lockup gives every letter its
   full colour back. */
.auth-brand-name {
  font-family: 'Baloo 2', sans-serif;
  font-size: 38px; font-weight: 800; letter-spacing: 3px;
  line-height: 1; margin-bottom: 10px;
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 8px 22px 10px;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(30,34,53,0.18);
}
.auth-brand-full {
  font-size: 13px; color: rgba(255,255,255,0.92);
  font-weight: 600; margin-bottom: 4px;
}
.auth-brand-tagline {
  font-size: 10px; color: rgba(255,255,255,0.72);
  letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 18px;
}
.auth-sys-label {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85);
  font-size: 11px; padding: 5px 16px;
  border-radius: 20px; letter-spacing: 0.2px;
}
.auth-body {
  background: white;
  border-radius: 24px 24px 0 0;
  margin-top: -22px;
  padding: 32px 24px 44px;
  flex: 1;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.07);
}
.auth-form-inner   { /* no extra styling needed on mobile */ }
.auth-form-header  { margin-bottom: 20px; }
.auth-form-title   { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.auth-form-sub     { font-size: 13px; color: var(--ink-soft); }
.tab-row {
  display: flex;
  background: #f2f4f2;
  border-radius: var(--r-sm);
  padding: 4px;
  margin-bottom: 22px;
}
.tab-btn {
  flex: 1; padding: 10px; font-size: 14px; font-weight: 600;
  border: none; background: transparent; cursor: pointer;
  border-radius: 6px; color: var(--ink-soft); transition: all 0.2s;
}
.tab-btn.active {
  background: white; color: var(--g-dark);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   FORMS
   ============================================ */
.form-group  { margin-bottom: 16px; }
.form-label  { font-size: 13px; font-weight: 500; color: #555; margin-bottom: 5px; display: block; }
.form-input  {
  width: 100%; padding: 12px 14px; font-size: 15px;
  border: 2px solid #e8e8e8; border-radius: var(--r-sm);
  background: white; color: #1a1a1a; outline: none; transition: border 0.2s;
  appearance: none;
}
.form-input:focus { border-color: var(--blue-deep); box-shadow: 0 0 0 3px rgba(11,132,196,0.12); }

.btn-green {
  width: 100%; padding: 14px; font-size: 15px; font-weight: 600;
  background: var(--g-main); color: white; border: none;
  border-radius: var(--r-sm); cursor: pointer; transition: all 0.2s;
  margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-green:active { transform: scale(0.97); background: var(--g-dark); }
.btn-green:disabled { opacity: 0.5; cursor: not-allowed; }

.msg-box {
  font-size: 13px; text-align: center; padding: 10px 14px;
  border-radius: var(--r-sm); margin-top: 12px; display: none;
}
.msg-box.error   { background: var(--red-bg); color: var(--red-text); display: block; }
.msg-box.success { background: var(--green-bg); color: var(--green-text); display: block; }
.msg-box.info    { background: var(--blue-bg); color: var(--blue-text); display: block; }

/* ============================================
   HOME HEADER
   ============================================ */
.home-header {
  background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.home-header-left { display: flex; align-items: center; gap: 12px; }
/* "Hi, MT X!" is now the header's main text (the "Jadual Generator" title above
   it was removed 2026-09-30), so it's sized up from the old small subtitle. */
.home-sub   { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }

/* Icon-only round logout button (was a "Logout" text pill). */
.btn-logout {
  background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.55);
  color: white; width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0;
}
.btn-logout:hover  { background: rgba(255,255,255,0.3); border-color: #fff; }
.btn-logout:active { background: rgba(255,255,255,0.35); }

/* ============================================
   STATS STRIP
   ============================================ */
.stats-strip {
  background: var(--g-main);
  display: grid; grid-template-columns: repeat(3, 1fr);
  flex-shrink: 0;
}
.stat-box {
  padding: 14px 10px; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.stat-box:last-child { border-right: none; }
.stat-num   { font-size: 26px; font-weight: 700; color: white; line-height: 1.2; }
.stat-label { font-size: 10px; color: rgba(255,255,255,0.8); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.3px; }

/* ============================================
   ELAUN STRIP — monthly MT pay summary (replaces stats-strip on the Murid tab)
   ============================================ */
/* MOBILE: a flat, square, full-bleed band butted straight up against the
   gradient .home-header above it — the same shape the old .stats-strip had.
   As a rounded card with side margins and a coloured glow it read as a
   detached tile hovering in the gap under the header ("masih terapung").
   Full-bleed and square, it and the header become one solid masthead.
   Desktop keeps the rounded inset bar — see the MT desktop section at the
   bottom of this file, which restores the radius and margins. */
/* Deliberately NOT the header's blue→green — welded directly under a header
   running the exact same gradient, the two read as one undifferentiated
   block with no visible boundary ("confius dgn header"). Purple is already
   the app's colour for personal/detail info (Profil Murid buttons, waktu
   tags), so it stays inside the brand palette while being unmistakably a
   different section from the header above it. */
.elaun-strip {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  border-radius: 0;
  margin: 0;
  box-shadow: none;
  overflow: hidden;
  flex-shrink: 0; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}
.elaun-strip:active { opacity: 0.88; }
.elaun-strip-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px 0;
}
.elaun-strip-heading { min-width: 0; }
.elaun-strip-title {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.92);
  display: flex; align-items: center; gap: 6px; letter-spacing: 0.2px;
}
.elaun-strip-chevron { font-size: 14px; color: rgba(255,255,255,0.6); }
/* One compact row — "Sendiri RM.. Ganti RM.. Total RM.." (2026-09-30, direct
   request, was three tall label-under-value columns). Wraps rather than
   overflowing on a very narrow phone. */
.elaun-strip-figures {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 2px 10px; padding: 6px 16px 10px;
}
.elaun-fig { display: flex; align-items: baseline; gap: 5px; text-align: left; }
.elaun-fig-label { font-size: 11px; color: rgba(255,255,255,0.8); }
.elaun-fig-val   { font-size: 13px; font-weight: 800; color: white; line-height: 1.2; }
.elaun-fig-total .elaun-fig-val { color: #FFF59D; }

/* ============================================
   MURID TAB — layout shell
   .murid-layout / .murid-side-rail are plain, unstyled blocks on mobile —
   elaun-strip and mt-today-strip simply stack in source order, identical to
   before this wrapper existed. Desktop turns .murid-layout into a real
   two-column dashboard grid; see the MURID TAB — DESKTOP DASHBOARD section
   near the end of this file.
   ============================================ */
.murid-layout     { display: block; }
.murid-side-rail  { display: block; }

/* ============================================
   KELAS HARI INI — today's classes widget
   Mobile: a horizontal-scroll strip of small cards, floating with no card
   chrome of its own (transparent — matches the original design exactly).
   Desktop restyles this into a real vertical list inside a bordered widget
   card — see MURID TAB — DESKTOP DASHBOARD.
   ============================================ */
.today-widget      { margin-bottom: 14px; }
.today-widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.today-widget-head-left { display: flex; align-items: center; gap: 6px; }
.today-widget-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-deep), #42A5F5);
  display: flex; align-items: center; justify-content: center;
}
.today-widget-icon i { font-size: 14px; color: white; }
.today-widget-title  { font-size: 13px; font-weight: 700; color: var(--blue-deep); }
.today-widget-sub    { font-size: 10px; color: var(--ink-soft); margin-top: 1px; }
.today-widget-list   { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.today-item {
  flex: 0 0 auto; width: 140px; border-radius: 12px; padding: 10px 12px; cursor: pointer;
  border: 1.5px solid #e8e8e8; box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: relative;
  border-left-width: 3px; border-left-style: solid;
  transition: box-shadow 0.15s, transform 0.15s;
}
.today-item-baki {
  position: absolute; top: 6px; right: 6px; background: var(--red); color: white;
  border-radius: 8px; font-size:10px; font-weight: 800; min-width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1;
}
.today-item-name  { font-size: 12px; font-weight: 700; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-item-timerow { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 2px; }
.today-item-time  { font-size: 10px; color: var(--ink-soft); white-space: nowrap; }
.today-item-foot  { margin-top: 5px; display: flex; align-items: center; gap: 4px; min-width: 0; }
.today-item-dot   { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.today-item-pakej { font-size: 10px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-item-badge { font-size:10px; font-weight: 800; border-radius: 5px; padding: 2px 5px; flex-shrink: 0; }
#mt-today-strip:empty { display: none; }
#mt-today-strip { padding: 14px 14px 0; }

/* Elaun detail modal */
/* Every RM figure across the elaun screens (strip, per-student card total,
   row list, mini-row breakdowns, grand total) — tabular-nums so digit widths
   are consistent (2026-09-28, direct request: "RM dia... nak semua selari" —
   keeps a column of amounts lining up instead of drifting per-value with
   proportional-width digits). Right-alignment for the actual list contexts
   was already in place on most of these; only added where missing. */
.elaun-fig-val, .elaun-row-rm, .elaun-student-rm, .elaun-detail-title span,
.elaun-mini-row span:last-child, .elaun-grand-total span:last-child {
  font-variant-numeric: tabular-nums;
}
.elaun-mini-row span:last-child, .elaun-grand-total span:last-child { text-align: right; }
.elaun-row {
  display: grid; grid-template-columns: 88px 1fr 32px 56px; gap: 6px; align-items: center;
  padding: 6px 2px; font-size: 12px; border-bottom: 1px solid #f7f7f7;
}
.elaun-row-date  { color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.elaun-row-name  { color: #333; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elaun-row-pakej { color: var(--ink-soft); font-size: 11px; text-align: center; }
.elaun-row-rm    { color: var(--green-deep); font-weight: 700; text-align: right; }
.elaun-empty     { color: var(--ink-faint); font-size: 12px; text-align: center; padding: 10px 0; }
.elaun-grand-total {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--green-bg); border-radius: var(--r-sm);
  padding: 12px 14px; margin-top: 4px;
  font-size: 14px; font-weight: 800; color: var(--green-text);
}

/* Elaun per-student card (collapsible) */
.elaun-student-card {
  border: 1px solid #eee; border-radius: var(--r-sm);
  margin-bottom: 8px; overflow: hidden;
}
.elaun-student-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.elaun-student-info { flex: 1; min-width: 0; }
.elaun-student-nama {
  font-size: 13px; font-weight: 700; color: #222;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.elaun-student-meta { font-size: 10.5px; color: var(--ink-soft); margin-top: 1px; }
.elaun-student-rm { font-size: 14px; font-weight: 800; color: var(--green-deep); flex-shrink: 0; }
.elaun-student-chevron { font-size: 14px; color: var(--ink-faint); transition: transform 0.15s; flex-shrink: 0; }
.elaun-student-card.open .elaun-student-chevron { transform: rotate(180deg); }
.elaun-student-detail {
  display: none; padding: 0 12px 12px; border-top: 1px solid #f5f5f5;
}
.elaun-student-card.open .elaun-student-detail { display: block; padding-top: 10px; }
.elaun-detail-block { margin-bottom: 10px; }
.elaun-detail-block:last-child { margin-bottom: 0; }
.elaun-detail-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: #555; text-transform: uppercase;
  letter-spacing: 0.2px; margin-bottom: 4px;
}
.elaun-detail-title span { color: var(--green-deep); font-weight: 800; text-transform: none; letter-spacing: 0; }
.elaun-mini-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: #444; padding: 3px 0;
}
.elaun-mini-row span:last-child { color: var(--ink-soft); }
.elaun-half-tag, .elaun-full-tag {
  display: inline-block; font-size:10px; font-weight: 800;
  border-radius: 4px; padding: 1px 4px; margin-left: 3px; white-space: nowrap;
}
.elaun-half-tag { color: var(--orange-text); background: var(--orange-bg); }
.elaun-full-tag { color: var(--green-deep); background: var(--green-bg); }

/* ============================================
   HOME CONTENT
   ============================================ */
.home-content { padding: 14px 14px 24px; }

.section-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.section-title { font-size: 14px; font-weight: 700; color: #333; text-transform: uppercase; letter-spacing: 0.4px; }

.btn-add-student {
  display: flex; align-items: center; gap: 6px;
  background: var(--g-main); color: white; border: none;
  padding: 8px 16px; border-radius: 20px; font-size: 13px;
  font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.btn-add-student:active { opacity: 0.8; }

/* ============================================
   STUDENT SECTIONS
   ============================================ */
.student-section { margin-bottom: 16px; }
.pending-section { margin-top: 12px; padding-top: 12px; border-top: 2px dashed #ddd; }

.student-section-label {
  font-size: 12px; font-weight: 700; color: #666;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.pending-label { color: #E65100; }
.label-hint { font-size: 11px; font-weight: 400; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }

/* ============================================
   STUDENT CARDS
   ============================================ */
.empty-state {
  text-align: center; padding: 48px 20px;
  background: white; border-radius: var(--r-md);
  border: 2px dashed #c8e6c9;
}
.empty-icon  { font-size: 48px; color: #c8e6c9; margin-bottom: 12px; }
.empty-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 6px; }
.empty-text  { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

/* Outline on all four sides (not just the coloured left accent) — the card
   was a white block on a near-white page with only a soft shadow to define
   it, so its edge, and everything sitting on it, washed out. */
/* Single row: avatar column on the left, info column (name row + actions
   row, stacked) on the right — the actions row sits directly under the
   name because both live inside .student-info, not because of a manual
   offset. Compact/padat: the card is only as tall as avatar-column vs
   (name+actions) needs, no separate full-width row for either. */
.student-card {
  background: var(--surface); border-radius: var(--r-md);
  border: 1.5px solid var(--line); padding: 13px 14px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm); transition: all 0.15s;
  border-left: 4px solid var(--green);
}
.student-card.is-pending { border-left-color: var(--orange); }
.student-card:active { transform: scale(0.985); }

/* Avatar column: sesi-count badge stacked ABOVE the pakej-code avatar, both
   the SAME fixed width (54px) so they read as one clean two-row block
   instead of a badge floating off-center over a differently-sized box
   below it. The modul tag used to sit here too, but its width varies with
   the module name's length, which widened this column unevenly card to
   card and threw off the name/buttons alignment next to it — moved into
   .student-actions instead (see that rule below), which doesn't have this
   problem since it's already a flexible row. */
.student-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.student-avatar {
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--blue-bg); border: 1.5px solid var(--blue); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--blue-text); flex-shrink: 0;
  font-family: 'Baloo 2', sans-serif; padding: 0 3px; text-align: center; line-height: 1.05;
}
.student-avatar.avatar-pending { background: var(--orange-bg); border-color: var(--orange); color: var(--orange-text); }
/* Fixed width matching .student-avatar exactly (see comment above) and a
   rounded-rect shape (not the old pill/r-full) so it reads as a matching
   box stacked on top of the avatar, not an unrelated badge. */
.student-sesi-count {
  width: 54px; box-sizing: border-box; text-align: center;
  font-size:10px; letter-spacing: -0.2px; font-weight: 700; color: var(--purple-text);
  background: var(--purple-bg); border: 1px solid #D2C2FB;
  border-radius: 8px; padding: 2px 0; white-space: nowrap; flex-shrink: 0;
}

.student-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.student-name { font-size: 15px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.badge-pending { font-size: 10px; background: var(--orange-bg); color: var(--orange-text); padding: 2px 7px; border-radius: 8px; font-weight: 700; }
.badge-mt      { font-size: 10px; background: var(--blue-bg); color: var(--blue-text); padding: 2px 7px; border-radius: 8px; font-weight: 700; }

.student-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.tag {
  font-size: 10px; padding: 2px 9px; border-radius: var(--r-full);
  background: var(--grey-bg); color: var(--grey-text); font-weight: 700;
  border: 1px solid #DFE1EC;
}
.tag.modul   { background: var(--blue-bg);   color: var(--blue-text);   border-color: #A9E2FF; }
.tag.sibling { background: var(--pink-bg);   color: var(--pink-text);   border-color: #FFC0E4; }
.tag.waktu   { background: var(--purple-bg); color: var(--purple-text); border-color: #D2C2FB; }

/* ============================================
   STUDENT ACTIONS - BUTTONS
   ============================================ */
/* align-items:center keeps everything in this row (icon buttons AND the
   modul-box below) vertically centered on the same line. The modul-box
   carries margin-left:auto (see buildStudentCard in js/mt/student.js) to
   hug the right edge of this row regardless of how many buttons come
   before it. */
.student-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-start; }

/* Every icon button sits on a WHITE card, so a pale tinted fill alone left
   them reading as flat blobs melting into the card ("dh blend dgn background").
   Each variant now carries a real 1.5px outline in its own colour family —
   that outline is what gives the button a visible edge at rest; the tinted
   fill only carries the meaning. Hover inverts to the solid colour. */
.btn-icon {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1.5px solid #D7D9E7;
  background: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-soft); font-size: 15px; transition: all 0.15s;
}
.btn-icon:hover { border-color: var(--ink-faint); background: var(--grey-bg); color: var(--ink); }

/* Modul indicator — same visual weight/size family as the card's action
   buttons (.btn-icon.btn-card-action is 40x40px, NOT the generic 34px
   .btn-icon) so it aligns consistently in the actions row regardless of
   which student's card this is, but it is NOT a button (plain <div>, no
   cursor/hover/onclick — purely informational). Two stacked lines (label +
   value) fit inside that 40px height. A FIXED width (rather than growing
   with a long module name) is the whole point here — long values
   ellipsize instead of resizing the box, which is exactly the bug this
   replaced (a variable-width modul tag misaligning the rest of the card
   next to it, card to card). */
.modul-box {
  width: 70px; height: 40px; border-radius: 10px;
  border: 1.5px solid #A9E2FF; background: var(--blue-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; box-sizing: border-box; padding: 4px 6px;
}
.modul-box-label {
  font-size:10px; font-weight: 700; color: var(--blue-text); opacity: 0.75;
  line-height: 1.1; text-transform: uppercase; letter-spacing: 0.3px;
}
.modul-box-value {
  font-size: 10.5px; font-weight: 800; color: var(--blue-text); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.btn-icon:active { transform: scale(0.88); }

/* Student-card action buttons (Generate/Profile/Ganti Track/Yuran) all share
   this size so none of the 4 reads as bigger/smaller than the rest — was
   previously only applied to Generate, leaving the other three visibly
   smaller. Colour stays per-button (btn-generate's own rule, or inline
   style for the others). */
.btn-icon.btn-card-action {
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-radius: 12px;
}

/* Generate Button */
.btn-icon.btn-generate {
  background: var(--blue-bg);
  border-color: var(--blue);
  color: var(--blue-text);
}
.btn-icon.btn-generate:hover {
  background: var(--blue);
  border-color: var(--blue-deep);
  color: white;
  transform: scale(1.05);
}
.btn-icon.btn-generate:active {
  transform: scale(0.92);
}

/* Edit & Delete buttons - appear only in edit mode */
.btn-icon.edit {
  background: var(--blue-bg);
  border-color: var(--blue);
  color: var(--blue-text);
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.btn-icon.edit:hover {
  background: var(--blue);
  border-color: var(--blue-deep);
  color: white;
}

.btn-icon.del {
  background: var(--red-bg);
  border-color: #F3A6A6;
  color: var(--red-text);
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.btn-icon.del:hover {
  background: var(--red);
  border-color: var(--red-deep);
  color: white;
}

/* Claim button for pending students */
.btn-icon.claim {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green-text);
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-radius: 12px;
}
.btn-icon.claim:hover {
  background: var(--green);
  border-color: var(--green-deep);
  color: white;
}

/* WhatsApp button - DISABLED / HIDDEN */
.btn-icon.wa {
  display: none !important;
}

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.btn-back {
  width: 36px; height: 36px; border-radius: 11px;
  background: #fff; border: 1.5px solid #D7D9E7; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; flex-shrink: 0; transition: all 0.15s;
}
.btn-back:hover { background: var(--blue-bg); border-color: var(--blue); color: var(--blue-text); }
.page-title { font-size: 15px; font-weight: 700; color: var(--ink); font-family: 'Baloo 2', sans-serif; }
.page-sub   { font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }

/* ============================================
   STEP BAR
   ============================================ */
.step-bar {
  background: var(--surface);
  padding: 18px 34px 4px;
  display: flex; align-items: center;
  flex-shrink: 0;
}
.step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0;
  transition: all 0.2s;
  background: var(--grey-bg); color: var(--ink-faint);
}
.step-dot.done    { background: var(--green-deep); color: white; }
.step-dot.active  { background: var(--blue-deep); color: white; box-shadow: 0 0 0 4px var(--blue-bg); }
.step-dot.pending { background: var(--grey-bg); color: var(--ink-faint); }
.step-line      { flex: 1; height: 3px; background: var(--grey-bg); border-radius: 2px; margin: 0 6px; transition: background 0.3s; }
.step-line.done { background: var(--green-deep); }

.add-content { padding: 14px; flex: 1; width: 100%; overflow-y: auto; }

/* ============================================
   CARDS
   ============================================ */
/* Outlined, not just shadowed — a white card on a near-white page needs a real
   edge, or it (and everything sitting on it) washes into the background. */
.card {
  background: var(--surface); border-radius: var(--r-md);
  border: 1.5px solid var(--line); padding: 16px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.card-title {
  font-size: 13px; font-weight: 700; color: var(--ink);
  letter-spacing: 0; margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}

/* ============================================
   PACKAGE SELECTOR
   ============================================ */
.school-toggle, .mtype-row {
  display: flex; background: #f2f4f2;
  border-radius: var(--r-sm); padding: 4px; margin-bottom: 12px;
}
.school-btn, .mtype-btn {
  flex: 1; padding: 9px 8px; font-size: 13px; font-weight: 500;
  border: none; background: transparent; cursor: pointer;
  border-radius: 6px; color: var(--ink-soft); transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.school-btn.active, .mtype-btn.active {
  background: white; color: var(--g-dark);
  box-shadow: var(--shadow-sm);
}

.pkg-list { display: flex; flex-direction: column; gap: 7px; }
.pkg-card {
  border: 2px solid #ebebeb; border-radius: var(--r-sm);
  padding: 12px 14px; cursor: pointer; transition: all 0.2s; background: white;
}
.pkg-card:hover    { border-color: var(--g-border); }
.pkg-card.selected { border-color: var(--g-main); background: var(--g-pale); }
.pkg-card-header   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pkg-name          { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.pkg-hours {
  font-size: 11px; padding: 3px 10px; border-radius: 12px;
  background: var(--g-light); color: var(--g-dark); font-weight: 600;
}
.pkg-card.selected .pkg-hours { background: var(--g-main); color: white; }
.pkg-stats  { display: flex; gap: 10px; flex-wrap: wrap; }
.pkg-stat   { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-soft); }

/* ============================================
   MODULE SELECTORS
   ============================================ */
.terapi-list { display: flex; flex-direction: column; gap: 6px; }
.terapi-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--r-sm);
  border: 2px solid #ebebeb; cursor: pointer; transition: all 0.2s; background: white;
}
.terapi-item:hover    { border-color: var(--green); }
.terapi-item.selected { border-color: var(--green-deep); background: var(--green-bg); }
.terapi-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #ccc; flex-shrink: 0; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.terapi-item.selected .terapi-radio { border-color: var(--green-deep); background: var(--green-deep); }
.terapi-item.selected .terapi-radio::after { content:''; width:6px; height:6px; border-radius:50%; background:white; }
.terapi-code { font-size: 14px; font-weight: 800; color: var(--ink); }
.terapi-name { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }

.konsult-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.konsult-item {
  padding: 11px 10px; border-radius: var(--r-sm);
  border: 2px solid #ebebeb; cursor: pointer; text-align: center;
  font-size: 13px; font-weight: 500; color: #1a1a1a;
  transition: all 0.2s; background: white;
}
.konsult-item:hover    { border-color: var(--green); }
.konsult-item.selected { border-color: var(--green-deep); background: var(--green-bg); color: var(--green-text); }

/* ============================================
   WAKTU
   ============================================ */
.waktu-placeholder {
  text-align: center; padding: 20px; color: var(--ink-faint);
  background: #f8f9f8; border-radius: var(--r-sm); font-size: 13px;
}
.waktu-block {
  background: #f8f9f8; border-radius: var(--r-sm);
  padding: 12px; margin-bottom: 8px; border: 1px solid #ebebeb;
}
.waktu-label { font-size: 12px; font-weight: 600; color: #666; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.waktu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.waktu-grid select, .waktu-grid input { padding: 8px 10px; font-size: 12px; }
.waktu-tamat-label { font-size: 11px; color: var(--ink-soft); margin-top: 5px; }

/* ============================================
   SIBLING SECTION
   ============================================ */
.sib-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
}
.sib-toggle-label { font-size: 15px; font-weight: 500; color: #1a1a1a; }
.sib-toggle-sub   { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

.toggle-switch {
  width: 50px; height: 30px; border-radius: 15px;
  background: #ccc; border: none; cursor: pointer;
  position: relative; transition: background 0.25s; flex-shrink: 0;
}
.toggle-switch.on { background: var(--green-deep); }
.toggle-switch::after {
  content: ''; position: absolute;
  width: 24px; height: 24px; border-radius: 50%;
  background: white; top: 3px; left: 3px;
  transition: left 0.25s; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.toggle-switch.on::after { left: 23px; }

.sib-body { margin-top: 14px; display: none; }
.sib-body.show { display: block; }

.search-wrap { position: relative; margin-bottom: 10px; }
.search-icon-abs {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); font-size: 16px; pointer-events: none;
}
.search-input {
  width: 100%; padding: 10px 14px 10px 38px; font-size: 14px;
  border: 2px solid #ebebeb; border-radius: var(--r-sm);
  background: #fafafa; color: #1a1a1a; outline: none;
}
.search-input:focus { border-color: var(--g-main); background: white; }

.sib-result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 2px solid #ebebeb; background: #fafafa;
  margin-bottom: 6px; cursor: pointer; transition: all 0.2s;
}
.sib-result-item:hover { border-color: var(--g-border); background: var(--g-pale); }
.sib-no-result { text-align: center; padding: 12px; font-size: 13px; color: var(--ink-faint); }

.sib-avatar {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--g-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--g-main); flex-shrink: 0;
}
.sib-result-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.sib-result-meta { font-size: 11px; color: var(--ink-faint); }

.btn-add-new-sib {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-sm);
  border: 2px dashed #ccc; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--ink-soft); width: 100%; transition: all 0.2s;
  margin-top: 4px;
}
.btn-add-new-sib:hover { border-color: var(--g-main); color: var(--g-main); background: var(--g-pale); }

.sib-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sib-tag {
  display: flex; align-items: center; gap: 5px;
  background: var(--pink-bg); border: none;
  border-radius: var(--r-full); padding: 7px 12px 7px 10px;
  font-size: 12px; color: var(--pink-text); font-weight: 700;
}
.sib-tag-remove {
  background: none; border: none; cursor: pointer;
  color: var(--pink-deep); font-size: 16px; padding: 0 2px; line-height: 1;
}

/* ============================================
   BOTTOM BAR
   ============================================ */
.bottom-bar {
  padding: 14px; background: white;
  border-top: 1px solid #ebebeb;
  display: flex; gap: 8px; flex-shrink: 0;
}
.btn-next {
  flex: 1; padding: 14px; background: var(--g-main); color: white;
  border: none; border-radius: var(--r-sm); font-size: 15px;
  font-weight: 600; cursor: pointer; transition: background 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-next:active { background: var(--g-dark); }
.btn-prev {
  flex: 0 0 74px; padding: 14px; background: #f5f5f5;
  color: #555; border: 1px solid #ddd;
  border-radius: var(--r-sm); font-size: 14px; cursor: pointer;
}

/* ============================================
   REVIEW
   ============================================ */
.review-row {
  display: flex; padding: 9px 0;
  border-bottom: 1px solid #f2f2f2; font-size: 14px;
  align-items: flex-start;
}
.review-row:last-child { border-bottom: none; }
.review-key { color: var(--ink-faint); width: 42%; flex-shrink: 0; font-size: 12px; padding-top: 2px; }
.review-val { color: #1a1a1a; font-weight: 500; flex: 1; line-height: 1.5; }
.review-edit-note {
  margin-top: 12px; color: #E65100; font-size: 12px;
  background: #FFF3E0; padding: 10px; border-radius: var(--r-sm);
}

/* ============================================
   TOAST & MODAL
   ============================================ */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: white; padding: 12px 24px;
  border-radius: var(--r-full); font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 999;
  white-space: nowrap;
}
.toast.show { opacity: 1; }

/* Logout confirmation dialog (auth.js confirmLogout) */
.lo-overlay {
  position: fixed; inset: 0; background: rgba(20,24,40,0.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 5000; padding: 20px;
  animation: lo-fade 0.15s ease;
}
.lo-box {
  background: #fff; border-radius: 20px; padding: 26px 22px 20px; width: 100%; max-width: 320px;
  text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.25); animation: lo-pop 0.18s ease;
}
.lo-icon {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
  background: #fdecec; color: var(--red, #e5484d); font-size: 26px;
  display: flex; align-items: center; justify-content: center;
}
.lo-title { font-size: 18px; font-weight: 800; color: #222; }
.lo-msg   { font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }
.lo-actions { display: flex; gap: 10px; margin-top: 20px; }
.lo-btn {
  flex: 1; border: none; border-radius: 12px; padding: 12px 10px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.lo-cancel { background: #f1f2f5; color: #555; }
.lo-ok     { background: var(--red, #e5484d); color: #fff; }
@keyframes lo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lo-pop  { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: white; border-radius: var(--r-lg);
  max-width: 400px; width: 100%; max-height: 90vh;
  padding: 24px; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-title    { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.modal-msg {
  background: #f5f5f5; padding: 16px; border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.7; white-space: pre-wrap;
  margin: 12px 0; max-height: 300px; overflow-y: auto;
  font-family: 'Courier New', monospace;
}
.modal-actions      { display: flex; gap: 8px; margin-top: 12px; }
.modal-actions .btn-green { flex: 1; margin: 0; }
.btn-outline {
  flex: 1; padding: 14px; background: #f5f5f5;
  color: #555; border: 1px solid #ddd;
  border-radius: var(--r-sm); font-size: 14px; cursor: pointer;
}

hr.light { border: none; border-top: 1px solid #f0f0f0; margin: 12px 0; }

/* ============================================
   JADUAL
   ============================================ */
.jadual-preview {
  background: #f8f9fa; padding: 16px; border-radius: var(--r-sm);
  font-family: 'Courier New', monospace;
  font-size: 13px; line-height: 1.8; white-space: pre-wrap;
  max-height: 500px; overflow-y: auto;
  border: 1px solid #ebebeb;
}
.jadual-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jadual-table th { background: #E8F5E9; padding: 8px 6px; text-align: left; border: 1px solid #ddd; }
.jadual-table td { padding: 6px 8px; border: 1px solid #ddd; }
.jadual-table tr:nth-child(even) { background: #fafafa; }

/* ============================================
   SIBLING MODAL
   ============================================ */
#sibling-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  backdrop-filter: blur(4px);
}

#sibling-modal-overlay .modal-box {
  background: white;
  border-radius: 16px;
  max-width: 420px;
  width: 100%;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: modalSlideIn 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* ============================================
   UTILITY
   ============================================ */
.hidden      { display: none !important; }
.text-center { text-align: center; }
.text-muted  { color: var(--ink-soft); }
.home-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.home-logo-icon {
  filter: drop-shadow(0 4px 12px rgba(255,77,184,0.4));
  margin-bottom: 4px;
}

.home-logo-text {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.home-logo-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 1px;
  font-weight: 500;
}

.home-logo-tagline {
  background: #FF4DB8;
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 20px;
  border-radius: 20px;
  margin-top: 2px;
  text-transform: uppercase;
}

/* ============================================
   HOME HEADER LOGO
   ============================================ */
/* The wordmark's four letters ARE the four brand colours, so on the blue→green
   gradient header the H (blue) and E (green) were disappearing straight into
   the background. A solid white plate behind it restores full contrast for
   every letter and reads as a proper logo lockup rather than loose text. */
.home-header-logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
  margin-right: 4px;
  background: #fff;
  padding: 7px 13px 8px;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(30,34,53,0.18);
  flex-shrink: 0;
}

/* ============================================
   JADUAL DONE CARD
   ============================================ */
.student-card.jadual-done {
  border-left: 3px solid #2E7D32;
  background: linear-gradient(to right, #F1F8E9, white);
}

.tag.jadual-done-tag {
  background: #E8F5E9;
  color: #1B5E20;
  border: 1px solid #A5D6A7;
}
.tag.jadual-next-tag {
  background: #E3F2FD;
  color: #0D47A1;
  border: 1px solid #90CAF9;
}

/* ============================================
   PENDING SECTION COLLAPSIBLE
   ============================================ */
.pending-section .student-section-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s;
}
.pending-section .student-section-label:active { opacity: 0.7; }

/* ============================================
   WAKTU TAMAT LABEL
   ============================================ */
.waktu-tamat-label {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 6px;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================
   BOTTOM TAB BAR
   ============================================ */
.bottom-tabs {
  display: flex;
  border-top: 1px solid #e0e0e0;
  background: white;
  padding: 4px 0 env(safe-area-inset-bottom, 4px);
  z-index: 50;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
.btab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 600;
  transition: all 0.2s;
  letter-spacing: 0.3px;
  position: relative;
}
.btab i { font-size: 20px; transition: color 0.2s; }
.btab.active { color: var(--blue-deep); }
.btab.active i { color: var(--blue-deep); }
.btab:active { opacity: 0.7; }
.btab-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  background: var(--red);
  color: white;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
}

/* Tab content */
.tab-content { flex: 1; overflow-y: auto; padding-bottom: 64px; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ============================================
   EDIT MODE BUTTON
   ============================================ */
.btn-edit-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  border: 1.5px solid #D7D9E7;
  background: #fff;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-edit-toggle:hover { border-color: var(--blue); color: var(--blue-text); background: var(--blue-bg); }
.btn-edit-toggle.on {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: white;
}
.btn-edit-toggle.on:hover { background: var(--blue-deep); color: white; }
.edit-badge {
  font-size: 10px;
  background: rgba(255,255,255,0.25);
  color: white;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 2px;
}

/* ============================================
   TEMPLATE CARDS
   ============================================ */
.template-card { transition: all 0.15s; }
.template-card:active { transform: scale(0.97); opacity: 0.8; }

/* ============================================
   JADUAL MT DAY CARD
   ============================================ */
.jadual-mt-day { transition: all 0.15s; }

/* ============================================
   ADMIN PANEL — Stats
   ============================================ */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat-card-admin {
  background: white;
  border-radius: var(--r-md);
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid #ebebeb;
}
.stat-card-num   { font-size: 26px; font-weight: 700; color: #222; }
.stat-card-label { font-size: 10px; color: var(--ink-soft); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.4px; }

/* ============================================
   JADUAL MT GRID TABLE
   ============================================ */
/* Mobile: one day per full-width table, swipeable. Desktop swaps to a single
   combined week grid (all 7 days side by side) — see the ≥1100px override below. */
.mt-week-desktop { display: none; }
.mt-week-mobile  { display: block; }
.mt-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.mt-grid-table th,
.mt-grid-table td {
  border: 1px solid #EEEEEE;
  padding: 0;
  vertical-align: top;
}
.mt-time-col {
  width: 64px;
  min-width: 64px;
  font-size: 10px;
  font-weight: 700;
  color: #555;
  padding: 6px 4px !important;
  text-align: center;
  white-space: nowrap;
}
.mt-day-header {
  font-size: 11px;
  font-weight: 700;
  color: #333;
  padding: 8px 4px 6px !important;
  text-align: center;
  letter-spacing: 0.3px;
  min-width: 84px;
  border-bottom: 2px solid rgba(0,0,0,0.06) !important;
}
.mt-time-cell {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 3px 4px !important;
  text-align: center;
  background: #F8F8F8;
  white-space: nowrap;
  min-width: 64px;
  line-height: 1.4;
  /* height set via inline style per row (ROW_H constant) */
}
.mt-dur-badge {
  display: inline-block;
  font-size:10px;
  font-weight: 600;
  color: var(--ink-soft);
  background: #E8E8E8;
  padding: 1px 5px;
  border-radius: 8px;
  margin-top: 2px;
}
.mt-slot-cell {
  padding: 3px 4px !important;
  min-width: 84px;
  /* height set via inline style per cell */
}
.mt-slot-cell.mt-empty {
  background: #FAFAFA;
}
.mt-grid-table tbody tr:nth-child(even) .mt-time-cell {
  background: #F0F0F0;
}
.mt-grid-table tbody tr:nth-child(even) .mt-slot-cell.mt-empty {
  background: #F5F5F5;
}
.mt-student-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
  display: block;
  margin-bottom: 1px;
}
.mt-ganti-chip {
  background: var(--purple-bg) !important;
  color: var(--purple-text) !important;
  border: 1px solid var(--purple);
  border-radius: 4px;
  font-size:10px;
}

/* Ganti student option */
.ganti-student-opt:has(input:checked) {
  border-color: #F57F17 !important;
  background: #FFF8E1 !important;
}

/* ============================================
   REAL-TIME JADUAL MT — New Elements
   ============================================ */

/* Week navigation banner */
.mt-week-banner {
  background: var(--surface);
  border: none;
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mt-week-label {
  flex: 1;
  text-align: center;
  line-height: 1.4;
}

/* Week prev/next navigation button */
.mt-nav-btn {
  background: var(--grey-bg);
  border: none;
  border-radius: var(--r-full);
  padding: 5px 10px;
  font-size: 11px;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  transition: background 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.mt-nav-btn:hover { background: var(--blue-bg); color: var(--blue-text); }

/* Today column highlight */
.mt-today-col {
  background: #FFFDE7 !important;
  border-color: #FFF176 !important;
}

/* Template chip — student with no generated jadual */
.mt-template-chip {
  background: #F5F5F5 !important;
  color: var(--ink-soft) !important;
  border: 1px dashed #BDBDBD !important;
  border-radius: 4px;
  font-size:10px;
}

/* ============================================
   ADMIN SIDEBAR & NAV
   ============================================ */
.admin-sidebar {
  background: linear-gradient(160deg, #3d0d7a 0%, #4A148C 40%, #6A1B9A 100%);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.admin-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}
.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-sidebar-logo-icon {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.14);
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.admin-sidebar-title { font-size: 16px; font-weight: 700; color: white; }
.admin-sidebar-sub   { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 1px; }
.admin-logout-mobile {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.admin-sidebar-nav {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 0 12px 14px;
}
.admin-nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.admin-nav-btn.active           { background: rgba(255,255,255,0.16); color: white; }
.admin-nav-btn:hover:not(.active) { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
.admin-nav-btn i { font-size: 15px; }
.admin-sidebar-footer { display: none; }
/* Sidebar-collapse toggle only makes sense once the sidebar is its own fixed
   column (desktop/tablet, ≥768px) — mobile's horizontal nav bar has no
   "narrow main content" problem to solve. Shown in that media query below. */
.admin-sidebar-toggle-btn { display: none; }
.admin-logout-full {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.admin-logout-full:hover { background: rgba(255,255,255,0.15); color: white; }
.admin-main       { flex: 1; overflow-y: auto; background: #eef0ee; }
.admin-pane-inner { padding: 16px; }

/* ============================================
   RESPONSIVE — DESKTOP (≥ 768px)
   ============================================ */
@media (min-width: 768px) {

  /* ---- GLOBAL ---- */
  body {
    justify-content: flex-start;
    align-items: stretch;
  }
  .app {
    max-width: 100%;
  }

  /* ---- AUTH PAGE ---- */
  #screen-auth {
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
  }
  /* Proportional rather than a fixed 420px: on a 1440px+ monitor a narrow
     fixed panel left the right-hand side reading as one small card adrift in
     a huge empty field. */
  .auth-header {
    flex: 0 0 42%;
    min-width: 400px;
    max-width: 620px;
    border-radius: 0;
    margin: 0;
    padding: 60px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 45%, var(--green-deep) 100%);
  }
  .auth-logo-icon  { width: 90px; height: 90px; border-radius: 26px; margin-bottom: 22px; }
  .auth-brand-name { font-size: 44px; letter-spacing: 7px; }
  .auth-brand-full { font-size: 14px; margin-bottom: 6px; }
  .auth-brand-tagline { font-size: 11px; margin-bottom: 22px; }
  .auth-sys-label  { font-size: 12px; padding: 7px 20px; }
  .auth-body {
    flex: 1;
    border-radius: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 5%;
    background: var(--bg);
    box-shadow: none;
  }
  .auth-form-inner {
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: var(--r-lg);
    padding: 36px 36px 40px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .auth-form-title { font-size: 24px; }
  .auth-form-sub   { font-size: 14px; }

  /* ---- HOME PAGE — sidebar layout ---- */
  /* Scoped to .active: an ID selector setting `display` unconditionally would beat
     .screen{display:none} even when this screen isn't the active one (ID > class
     specificity), leaving it stuck full-height on top of whatever screen navigates
     next (e.g. Edit/Claim Murid, Generate Jadual) — the "can't claim on desktop" bug. */
  #screen-home.active {
    display: grid;
    grid-template-columns: 230px 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
    overflow: hidden;
  }

  /* Sidebar top: brand + logout */
  .home-header {
    grid-column: 1;
    grid-row: 1;
    background: linear-gradient(180deg, var(--blue) 0%, var(--green) 100%);
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 18px 18px;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .home-header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }
  .home-header-logo { font-size: 24px; letter-spacing: 3px; }
  .home-sub { font-size: 13px; }
  .btn-logout { margin-top: 14px; }

  /* Sidebar bottom: nav tabs */
  .bottom-tabs {
    grid-column: 1;
    grid-row: 2;
    /* un-fix from mobile */
    position: static;
    left: unset;
    bottom: unset;
    transform: none;
    z-index: auto; /* reset mobile z-index:50 — grid items with z-index block sibling pointer events */
    width: 230px;
    max-width: none;
    /* vertical layout */
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 10px;
    background: linear-gradient(180deg, var(--ink) 0%, #2A2F45 100%);
    border-top: none;
    border-right: 1px solid rgba(255,255,255,0.05);
    box-shadow: none;
    height: 100%;
  }
  .btab {
    /* Reset the mobile flex:1 (equal-width row tabs) — inside the vertical desktop
       sidebar that would instead stretch each tab to 1/5 of the full page height,
       pushing everything past the 2nd tab off-screen below the fold. */
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.2px;
    transition: all 0.18s;
  }
  .btab i { font-size: 18px; width: 22px; flex-shrink: 0; text-align: center; }
  .btab span { font-size: 13px; }
  .btab.active {
    color: white;
    background: rgba(255,255,255,0.12);
  }
  .btab:hover:not(.active) {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
  }

  /* Main content area — remove mobile bottom-padding, enable scroll */
  .tab-content {
    grid-column: 2;
    grid-row: 1 / 3;
    padding-bottom: 0;
    min-height: 0;      /* required so overflow-y:auto actually creates a scroll container */
    overflow-y: auto;
    background: #eef0ee;
  }
  .home-content { padding: 24px 28px; }

  /* Stats strip */
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
  .stat-box { padding: 18px 12px; }

  /* Student cards — 2-column grid */
  .student-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
    align-items: start;
  }
  .student-section-label { grid-column: 1 / -1; }
  .student-card { margin-bottom: 0; }
  .pending-section {
    margin-top: 16px;
    padding-top: 16px;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
    align-items: start;
  }
  .pending-section .student-section-label { grid-column: 1 / -1; }

  /* ---- ADMIN PAGE ---- */
  /* Scoped to .active — see #screen-home.active note above; same bug. */
  #screen-admin.active {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: 100vh;
    overflow: hidden;
  }
  .admin-sidebar {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: linear-gradient(180deg, #3d0d7a 0%, #4A148C 45%, #6A1B9A 100%);
  }
  .admin-sidebar-head {
    padding: 28px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    justify-content: flex-start;
  }
  .admin-sidebar-brand { gap: 14px; }
  .admin-logout-mobile { display: none; }
  .admin-sidebar-nav {
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    flex: 1;
  }
  .admin-nav-btn {
    flex-direction: row;
    justify-content: flex-start;
    padding: 11px 14px;
    border-radius: 10px;
  }
  .admin-nav-btn i { font-size: 18px; width: 22px; flex-shrink: 0; text-align: center; }
  .admin-sidebar-footer {
    display: block;
    padding: 10px 10px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  /* Restore text labels and badge on desktop */
  .admin-nav-btn { gap: 10px; padding: 11px 14px; }
  .admin-nav-btn span { display: inline; }
  .admin-nav-badge { display: inline-flex; margin-left: auto; }
  .admin-main {
    grid-column: 2;
    grid-row: 1;
    overflow-y: auto;
    height: 100vh;
    background: #eef0ee;
  }
  .admin-pane-inner  { padding: 24px 28px; max-width: 1100px; }
  /* Jadual Outlet is a deliberately wide sheet (15 columns mirroring the
     outlet's printed schedule) — the usual 1100px reading cap just forces
     constant horizontal scrolling, so this one pane gets the full width. */
  .admin-pane-inner#admin-pane-jadualOutlet { max-width: none; }
  .admin-stats-grid  { grid-template-columns: repeat(4, 1fr); }

  /* Collapsible sidebar (desktop/tablet only — mobile's horizontal nav bar
     doesn't have the "narrow main content" problem this solves) — a fixed
     240px column feels cramped on smaller laptop/tablet widths, especially
     against wider grid content. Toggled by _adminToggleSidebar (js/main.js),
     state remembered in localStorage across reloads. */
  .admin-sidebar-toggle-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    flex-shrink: 0;
    transition: transform 0.2s;
  }
  #screen-admin.active.sidebar-collapsed {
    grid-template-columns: 68px 1fr;
  }
  .sidebar-collapsed .admin-sidebar-head {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 8px 14px;
  }
  .sidebar-collapsed .admin-sidebar-brand { flex-direction: column; gap: 8px; }
  .sidebar-collapsed .admin-sidebar-text { display: none; }
  .sidebar-collapsed .admin-sidebar-toggle-btn { transform: rotate(180deg); }
  .sidebar-collapsed .admin-nav-btn { justify-content: center; padding: 12px 6px; position: relative; }
  .sidebar-collapsed .admin-nav-btn span:not(.admin-nav-badge) { display: none; }
  .sidebar-collapsed .admin-nav-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 9px; height: 9px;
    font-size: 0; padding: 0; border-radius: 50%;
    margin-left: 0;
  }
  .sidebar-collapsed .admin-sidebar-footer-avatar-row { justify-content: center; padding: 8px !important; }
  .sidebar-collapsed .admin-logout-full { justify-content: center; }

  /* ---- ADD STUDENT & CHOICE PAGES ---- */
  #screen-add,
  #screen-add-choice {
    min-height: 100vh;
    background: #eef0ee;
  }
  .add-content {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 24px;
  }
  .step-bar {
    padding-left: max(20px, calc(50% - 350px));
    padding-right: max(20px, calc(50% - 350px));
  }
  .bottom-bar {
    padding: 14px 28px;
    background: white;
    border-top: 1px solid #ebebeb;
  }

  /* ---- JADUAL PAGE ---- */
  #screen-jadual {
    min-height: 100vh;
    background: #eef0ee;
  }
  #screen-jadual .add-content {
    max-width: 880px;
    margin: 0 auto;
    padding: 20px 28px;
  }
  #jadual-content { max-width: 100%; }

  /* Jadual MT table — wider cells on desktop */
  .mt-day-header { min-width: 110px; font-size: 12px; }
  .mt-slot-cell  { min-width: 110px; }
  .mt-grid-table { font-size: 12px; }
  .mt-student-chip { font-size: 11px; padding: 3px 6px; }
  .mt-time-col   { width: 72px; min-width: 72px; }

  /* Week banner wider */
  .mt-week-banner { padding: 10px 14px; font-size: 13px; }
  .mt-nav-btn { padding: 6px 12px; font-size: 12px; }

  /* ---- MODALS ---- */
  .modal-box { max-width: 520px; }

  /* ---- PAGE HEADER (secondary screens) ---- */
  .page-header { padding: 18px 28px; }

  /* ---- JADUAL PREVIEW ---- */
  .jadual-preview {
    max-height: none;
    font-size: 14px;
  }

  /* ---- TOAST position ---- */
  .toast { bottom: 32px; }
}

/* ============================================
   ADMIN DASHBOARD — 2-column grid on wide desktop
   The branch selector sits full-width above the grid (not a grid cell itself);
   Ranking Modul + Yuran Tracking pair on row 1 (top), Order Tracking + Meja
   Booking on row 2 (bottom) — see js/admin.js _dashLoadForBranch's DOM order.
   align-items:start keeps each card sized to its own content instead of
   stretching to match its row partner's height. dash-scroll-area caps Order
   Tracking's own list at a fixed MAX height with internal scroll — Meja's
   floor plan is intentionally excluded, it needs to stay fully visible.
   A genuinely FIXED height (tried briefly for Ranking Modul + Yuran Tracking
   to force them to always match) backfired badly — most widgets only have a
   couple of rows, so a rigid 420px box left a huge dead void underneath and
   the page looked broken. dash-scroll-area is max-height only: cards size to
   their own content and the scrollbar only appears once a list genuinely
   gets long.
   ============================================ */
@media (min-width: 1100px) {
  .admin-pane-inner#admin-pane-dashboard { max-width: 1400px; }
}
.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
@media (min-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
}
.dash-grid > div { margin: 0; }
.dash-scroll-area { max-height: 420px; overflow-y: auto; }

/* ============================================
   ADMIN — REMAINING TABS on wide desktop
   Compact per-item cards (Orders, Pengguna MT, Kelas Ganti) were stacking
   full-width one after another; auto-fill grid lets them sit side by side without
   a fixed column count, so it still degrades gracefully with few/many items.
   Form-heavy tabs (Pengumuman, Tetapan) get a narrower reading/editing width
   instead — a single-line input or a submit button stretched to 1000px+ just
   looks oversized, it doesn't gain anything from the extra width.
   ============================================ */
@media (min-width: 1100px) {
  #admin-orders-list,
  #admin-pengguna-list,
  #admin-murid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 12px;
    align-items: start;
  }
  #admin-orders-list > div,
  #admin-pengguna-list > div,
  #admin-murid-list > div {
    margin: 0;
  }
  #admin-murid-list > .admin-list-fullspan,
  #admin-orders-list > .admin-list-fullspan {
    grid-column: 1 / -1;
  }

  /* MT-grouped cards inside Murid were stacking full-width one per row
     (stretched thin across the whole desktop width) — an explicit 2-column
     grid instead of auto-fill, since the user asked for exactly 2 columns
     rather than however-many-fit. Each MT's expanded student list is capped
     to roughly 5 rows tall with its own internal scroll for the rest, so one
     MT with many students doesn't push every other MT's card far down. */
  #admin-murid-mt-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  #admin-murid-mt-cards > .lb-card { margin: 0; }

  /* Desktop only (mobile keeps the normal collapsible accordion, per direct
     feedback — "mobile okay"): each MT panel becomes a FIXED, always-open
     dropdown that can't be closed — no click needed, nothing to toggle.
     A genuinely fixed `height` (tried initially, so every panel matched
     regardless of student count) backfired: an MT with 1-2 students left a
     huge dead void under a mostly-empty 300px box. `max-height` instead:
     panels size to their own content, capping and scrolling only once a
     list actually gets long. Only the outer MT-level card/detail is
     targeted via direct-child combinators; the nested sibling-group
     dropdown one level in stays genuinely toggleable with its own natural
     height either way. */
  #admin-murid-mt-cards > .lb-card > .lb-card-detail {
    display: block;
    max-height: 300px;
    overflow-y: auto;
  }
  #admin-murid-mt-cards > .lb-card > .lb-card-head {
    cursor: default;
  }
  #admin-murid-mt-cards > .lb-card > .lb-card-head .lb-chevron {
    display: none;
  }

  /* Orders' 4 status sections get the same fixed/no-dropdown treatment,
     desktop only, per direct follow-up feedback ("mcm style card list kat
     tab murid — takde dropdown, just fix length, lepastu kena scroll") —
     same max-height (not fixed height) reasoning as above. */
  #admin-orders-list > .lb-card > .lb-card-detail {
    display: block;
    max-height: 300px;
    overflow-y: auto;
  }
  #admin-orders-list > .lb-card > .lb-card-head {
    cursor: default;
  }
  #admin-orders-list > .lb-card > .lb-card-head .lb-chevron {
    display: none;
  }

  .admin-pane-inner#admin-pane-tetapan {
    max-width: 700px;
  }

  /* ---- JADUAL SEMUA MT — MT-columns table, wants full width to fit more
     MTs before scrolling; each day's card should hug its table instead of
     stretching into empty space when there are few MTs / no sessions. ---- */
  .admin-pane-inner#admin-pane-jadualSemua {
    max-width: none;
  }
  #jadual-semua-sections .card:has(table) {
    width: fit-content;
    max-width: 100%;
  }

  /* ---- LAPORAN BULANAN — spreadsheet table wants full width to flex with
     the screen instead of being trapped in the default 1100px pane cap. ---- */
  .admin-pane-inner#admin-pane-laporanBulanan {
    max-width: none;
  }

}

/* Cap each MT's expanded student list at ~5 rows tall with its own scroll —
   applies at every width, not just wide desktop, since a long list is just as
   unwieldy on mobile. */
#admin-murid-mt-cards .lb-card-detail { max-height: 300px; overflow-y: auto; }

/* ============================================
   MT HOME — Profil tab on wide desktop
   Account-settings form gets a narrower width instead of stretching its
   inputs/button to the full content column. (Order's own desktop layout —
   now a real table, not a card grid — lives in the MT SIDE — DESKTOP, FULL
   PASS section further down, alongside its .pf-field-grid 2-column pairing.
   The Profil tab's own width is now owned by .profil-layout's sidebar+main
   grid — see the PROFIL TAB — DESKTOP REDESIGN section — not by this ID.)
   ============================================ */

/* ============================================================================
   JADUAL MT — desktop: every day listed, no click-to-reveal
   ----------------------------------------------------------------------------
   Went through two earlier shapes for this: all 7 days crammed side by side
   in one wide table (unreadable — that's what buildDayGroup's lane-count fix
   patched but couldn't fully save), then a day-picker where clicking a day
   swapped which one showed ("mobile version lagi better" was the hint that
   one-day-at-a-time was the right idea). Direct feedback on the picker:
   "taknak kene bukak satu2, biar list semua hari terus" — don't want to have
   to open each one, just list every day straight down the page.

   This is that: mobile and desktop now render the EXACT SAME markup (one
   heading + table per day, all of them, Isnin→Ahad) via the shared
   _dayBlockHtml() in js/shared/jadual-mt.js — desktop only differs in scale
   (bigger text, more breathing room per day, since there's width for it).
   ============================================================================ */
.mt-day-block-head {
  font-size: 12px; font-weight: 700;
  margin: 10px 0 5px; display: flex; align-items: center; gap: 4px;
}
.mt-day-block-head i { font-size: 14px; }

@media (min-width: 768px) {
  .mt-week-mobile  { display: none; }
  .mt-week-desktop { display: block; }

  .mt-week-desktop .mt-day-block-head { font-size: 15px; margin: 22px 0 8px; }
  .mt-week-desktop .mt-day-block-head:first-child { margin-top: 0; }
  .mt-week-desktop .mt-day-block-head i { font-size: 17px; }

  .mt-week-desktop .mt-grid-table { min-width: 100%; }
  .mt-week-desktop .mt-day-header { min-width: 0; }

  /* Each day gets the FULL content width instead of sharing it with 6
     others — worth real visual polish over the tight mobile spreadsheet
     grid. Session blocks get rounded corners + a small margin so they read
     as floating event cards on a calendar (Google Calendar/Outlook-style),
     not cells filled edge-to-edge in a spreadsheet. */
  .mt-week-desktop .mt-slot-cell > div {
    border-radius: 10px;
    margin: 3px 8px;
    box-shadow: 0 1px 4px rgba(30,34,53,0.10);
  }
  .mt-week-desktop .mt-student-chip { font-size: 13px; line-height: 1.6; }
  .mt-week-desktop .mt-day-header   { font-size: 14px; padding: 12px 6px 10px !important; }
  .mt-week-desktop .mt-time-cell    { font-size: 11.5px; }
  .mt-week-desktop .mt-time-col     { font-size: 11.5px; width: 76px; min-width: 76px; }
  /* Softer grid lines — tight per-30-min spreadsheet borders read fine on a
     busy single day, but every horizontal line across a mostly-empty one
     just looks noisy once the table is this much wider. */
  .mt-week-desktop .mt-grid-table td,
  .mt-week-desktop .mt-grid-table th { border-color: #F2F2F2; }
}

/* ======================================
   JADUAL OUTLET (admin tab) — wide per-branch client schedule sheet.
   Inherently wide (15 columns mirroring the outlet's printed sheet), so it
   keeps its own horizontal scroll at every width rather than collapsing to
   mobile cards like the Laporan Bulanan sheet does.
   ====================================== */
.jo-table {
  border-collapse: collapse;
  font-size: 11.5px;
  white-space: nowrap;
}
.jo-table th,
.jo-table td {
  border: 1px solid #E8E4F0;
  padding: 7px 9px;
  vertical-align: middle;
}
.jo-table td { color: #333; }
.jo-table tbody tr:hover td { background: rgba(74, 20, 140, 0.04); }
.jo-sticky-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #4A148C;
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.25;
}
.jo-sticky-head-2 { top: 33px; z-index: 2; }

/* ======================================
   INNER TABS (Jadual / Booking Meja)
   ====================================== */

.inner-tab-bar {
  display: flex;
  background: #EBEBEB;
  border-radius: 11px;
  padding: 3px;
  margin: 8px 12px 12px;
  gap: 0;
}

.inner-tab-btn {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  line-height: 1;
}

.inner-tab-btn.active {
  background: white;
  color: #6A1B9A;
  box-shadow: 0 1px 4px rgba(0,0,0,0.14);
}

/* ======================================
   FLOOR PLAN — Booking Meja (Teluk Pulai)
   ====================================== */

.floor-plan {
  border: none;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--grey-bg);
  margin-bottom: 10px;
}

.fp-room { padding: 10px 10px 12px; }

.fp-room-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fp-menengah { background: #FFF5F5; border-bottom: 3px solid #37474F; }
.fp-rendah   { background: #F0F8FF; }
.fp-label-menengah { color: #B71C1C; }
.fp-label-rendah   { color: #0D47A1; }

/* ---- MENENGAH: [left: M1+M2] [right: M3+M4+M5] ---- */
.fp-menengah-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: start;
}

.fp-men-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-men-right {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ---- DIAGNOS: centered at top of Rendah room ---- */
.fp-diagnos-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  background: #FFFDE7;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid #F9E3A0;
}

.fp-diagnos-lbl {
  font-size:10px;
  font-weight: 800;
  color: #6D4C41;
  letter-spacing: 0.8px;
  text-align: center;
}

/* ---- RENDAH: two columns (L: R1/R2/R3, R: R4/R5/R6) ---- */
.fp-rendah-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fp-rendah-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ---- Desk cards ---- */
.fp-desk {
  border-radius: 9px;
  padding: 6px 4px 5px;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  position: relative;
  border: 2px solid transparent;
  transition: transform 0.12s, box-shadow 0.12s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.fp-desk[style*="cursor:pointer"]:active { transform: scale(0.94); }

/* Menengah available */
.fp-desk-menengah.fp-avail         { background: #fff; border-color: #EF9A9A; }
.fp-desk-menengah.fp-avail:active  { background: #FFF5F5; }
.fp-desk-menengah.fp-tetap-free    { background: #FFF3E0; border-color: #FFCC80; border-style: dashed; }
.fp-desk-menengah.fp-auto-other    { background: #C62828; border-color: #B71C1C; }

/* Rendah available */
.fp-desk-rendah.fp-avail           { background: #fff; border-color: #90CAF9; }
.fp-desk-rendah.fp-avail:active    { background: #F0F8FF; }
.fp-desk-rendah.fp-tetap-free      { background: #E3F2FD; border-color: #64B5F6; border-style: dashed; }
.fp-desk-rendah.fp-auto-other      { background: #1565C0; border-color: #0D47A1; }

/* Diagnos */
.fp-desk-diagnos.fp-avail          { background: #fff; border-color: #FDD835; }
.fp-desk-diagnos.fp-tetap-free     { background: #FFFDE7; border-color: #FDD835; border-style: dashed; }
.fp-desk-diagnos.fp-auto-other     { background: #F57F17; border-color: #E65100; }

/* Occupied desks — auto-detected from jadual: green ONLY when it's your own
   occupancy; another MT's auto-detected slot keeps the vivid per-zone color
   above (the same look "-me" used to have). A manual booking is purple
   regardless of who made it. */
.fp-desk.fp-auto-me { background: var(--green-deep); border-color: var(--green-deep); }
.fp-desk.fp-manual-me, .fp-desk.fp-manual-other { background: var(--purple-deep); border-color: var(--purple-deep); }

/* Desk text */
.fp-dcode  { font-size: 11px; font-weight: 800; color: #555; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-dicon  { font-size: 18px; color: var(--ink-faint); line-height: 1; }
.fp-dname  { font-size:10px; font-weight: 700; color: #333; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.fp-dstatus { font-size:10px; color: var(--ink-soft); line-height: 1; }

/* Text color overrides for dark-filled desks */
.fp-auto-me .fp-dcode,    .fp-auto-me .fp-dicon,    .fp-auto-me .fp-dname,    .fp-auto-me .fp-dstatus,
.fp-auto-other .fp-dcode, .fp-auto-other .fp-dicon, .fp-auto-other .fp-dname, .fp-auto-other .fp-dstatus,
.fp-manual-me .fp-dcode,    .fp-manual-me .fp-dicon,    .fp-manual-me .fp-dname,    .fp-manual-me .fp-dstatus,
.fp-manual-other .fp-dcode, .fp-manual-other .fp-dicon, .fp-manual-other .fp-dname, .fp-manual-other .fp-dstatus { color: #fff !important; }

/* Home icon badge for meja tetap */
.fp-home-badge {
  position: absolute;
  top: 2px; right: 3px;
  font-size:10px;
  background: rgba(0,0,0,0.15);
  color: rgba(255,255,255,0.9);
  border-radius: 3px;
  padding: 1px 2px;
  line-height: 1;
}

.fp-avail .fp-home-badge,
.fp-tetap-free .fp-home-badge {
  background: #F3E5F5;
  color: #7B1FA2;
}

/* Date navigation bar */
.fp-date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F9F5FF;
  border-radius: 12px;
  padding: 6px 8px;
  border: 1px solid #EDE7F6;
  margin-bottom: 8px;
}

.fp-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #7B1FA2;
  font-size: 20px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  flex-shrink: 0;
}

.fp-nav-btn:hover { background: #EDE7F6; }

.fp-date-center { flex: 1; text-align: center; }

.fp-date-label {
  font-size: 12px;
  font-weight: 700;
  color: #4A148C;
}

.fp-date-input {
  border: none;
  background: none;
  font-size: 10px;
  color: #9C27B0;
  cursor: pointer;
  width: 100%;
  text-align: center;
  outline: none;
  margin-top: 2px;
}

/* Teluk Pulai badge pill */
.fp-badge {
  font-size: 10px;
  background: #EDE7F6;
  color: #6A1B9A;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 700;
}

/* First-time setup banner */
.fp-setup-banner {
  background: #F3E5F5;
  border: 1px solid #CE93D8;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.fp-setup-title {
  font-size: 13px;
  font-weight: 700;
  color: #6A1B9A;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fp-setup-desc { font-size: 11px; color: #7B1FA2; line-height: 1.5; }

/* Legend */
.fp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  padding: 6px 0 4px;
}

.fp-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #666;
}

.fp-ldot {
  width: 10px; height: 10px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.fp-ldot-avail   { background: #fff; border-color: #bbb; }
.fp-ldot-me-auto { background: var(--green-deep); }
.fp-ldot-other   { background: #E0E0E0; border-color: #BDBDBD; }
.fp-ldot-manual  { background: var(--purple-deep); }

/* Setup-selected desk (during meja_tetap first-time setup) */
.fp-desk-menengah.fp-setup-sel { background: #C62828; border-color: #B71C1C; }
.fp-desk-rendah.fp-setup-sel   { background: #1565C0; border-color: #0D47A1; }
.fp-desk-diagnos.fp-setup-sel  { background: #F57F17; border-color: #E65100; }

.fp-setup-sel .fp-dcode,
.fp-setup-sel .fp-dicon,
.fp-setup-sel .fp-dname,
.fp-setup-sel .fp-dstatus { color: #fff !important; }

/* Selection summary row (shows chosen desks + Simpan button) */
.fp-sel-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  background: #EDE7F6;
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px solid #CE93D8;
}

.fp-sel-label {
  font-size: 11px;
  color: #6A1B9A;
  font-weight: 700;
}

.fp-sel-chip {
  background: #7B1FA2;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
}

.fp-save-btn {
  margin-left: auto;
  background: #6A1B9A;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.fp-save-btn:hover { background: #4A148C; }

/* Time label on auto-occupied desks */
.fp-dtime {
  font-size:10px;
  color: rgba(255,255,255,0.88);
  font-weight: 700;
  text-align: center;
  margin-top: 2px;
  letter-spacing: 0.1px;
}

/* Days row on taken-other desks (setup mode) */
.fp-ddays {
  font-size:10px;
  color: var(--ink-soft);
  font-weight: 700;
  text-align: center;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

/* Desk taken by another MT (setup mode only) */
.fp-taken-other {
  background: #eeeeee;
  border-color: #bdbdbd;
  opacity: 0.8;
  cursor: default !important;
}
.fp-taken-other .fp-dcode,
.fp-taken-other .fp-dicon  { color: var(--ink-faint) !important; }
.fp-taken-other .fp-dstatus { color: var(--ink-faint) !important; font-size:10px; }
.fp-taken-other .fp-dname   { color: var(--ink-soft); }

/* Tempah Meja button */
.fp-book-btn {
  width: 100%;
  padding: 11px 12px;
  background: #6A1B9A;
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  transition: background 0.15s;
}
.fp-book-btn:hover { background: #4A148C; }

/* Sesi Hari Ini panel */
.fp-sesi-panel {
  background: #F8F4FF;
  border: 1px solid #E1BEE7;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.fp-sesi-title {
  font-size: 10px;
  font-weight: 700;
  color: #6A1B9A;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.fp-sesi-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  border-top: 1px solid rgba(106,27,154,0.08);
  font-size: 11px;
  flex-wrap: wrap;
}
.fp-sesi-row:first-of-type { border-top: none; }
.fp-sesi-me { background: rgba(106,27,154,0.06); border-radius: 6px; padding: 3px 5px; margin: 1px -5px; }
.fp-sesi-name { font-weight: 600; color: #333; min-width: 80px; }
.fp-sesi-badge {
  font-size:10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  color: white;
  flex-shrink: 0;
}
.fp-sesi-badge.fp-sesi-rendah   { background: #1565C0; }
.fp-sesi-badge.fp-sesi-menengah { background: #2E7D32; }
.fp-sesi-time { font-size: 10px; color: #555; }

/* MT Preference list (setup screen) */
.fp-mt-pref-list {
  background: #F3E5F5;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.fp-mt-pref-title {
  font-size: 10px;
  font-weight: 700;
  color: #7B1FA2;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fp-mt-pref-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 11px;
}
.fp-mt-pref-row:first-of-type { border-top: none; }
.fp-mt-pref-name { font-weight: 600; color: #333; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-mt-pref-desk { background: #6A1B9A; color: white; border-radius: 5px; padding: 1px 6px; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.fp-mt-pref-days { color: var(--ink-soft); font-size: 10px; flex-shrink: 0; }

/* Multiple bookings count badge */
.fp-count-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #E91E63;
  color: white;
  border-radius: 99px;
  font-size:10px;
  font-weight: 700;
  padding: 0 4px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
}

/* Booking modal existing booking rows */
.fp-mbook-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 5px 8px;
  background: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 4px;
  color: #333;
}
.fp-mbook-row b { color: #1a1a1a; }
.fp-mbook-row span { color: var(--ink-soft); font-size: 10px; }
.fp-mbook-auto { background: #FFF3E0; }
.fp-mbook-auto b { color: #E65100; }
.fp-mbook-me { background: #EDE7F6; }
.fp-mbook-me b { color: #6A1B9A; }

/* Modal fade-in animation */
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================
   ADMIN — SHARED COMPONENTS
   ============================================ */
/* Mobile: admin sidebar nav scrollable, always show labels */
.admin-sidebar-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-sidebar-nav::-webkit-scrollbar { display: none; }
.admin-nav-btn span { display: inline; font-size: 10px; }
.admin-nav-btn { gap: 3px; padding: 7px 11px; flex-direction: column; }

/* Notification badge on nav items */
.admin-nav-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: #E65100;
  color: white;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  margin-left: 6px;
}

/* ============================================
   BOOKING MEJA
   ============================================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(229,57,53,0.5); transform: scale(1); }
  50%       { box-shadow: 0 2px 8px rgba(229,57,53,0.75); transform: scale(1.15); }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 6-tab bar: allow horizontal scroll on very small screens */
@media (max-width: 380px) {
  .bottom-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
  .btab { flex: 0 0 60px; }
}

/* Shared action button for admin tables */
.admin-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.admin-act-btn:active { opacity: 0.7; }

/* Branch selector — Dashboard/Orders/Pengguna's plain pill row and Murid's
   bubble-with-counts variant share this base; Murid adds .admin-branch-pill-count. */
.admin-branch-selector { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.admin-branch-pill {
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 2px solid #ddd; background: white; color: #666;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-branch-pill:active { opacity: 0.8; }
.admin-branch-pill.active { border-color: #4A148C; background: #EDE7F6; color: #4A148C; }
.admin-branch-pill-count { font-size: 11px; font-weight: 700; opacity: 0.85; }
.admin-branch-pill-count-active { color: #2E7D32; }
.admin-branch-pill.active .admin-branch-pill-count-active { color: #2E7D32; }

/* Student profile modal tabs */
.sp-tab {
  flex: 1; padding: 8px 4px; border: none; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-soft); border-bottom: 3px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: color 0.15s, border-color 0.15s;
}
.sp-tab-active { color: var(--blue-deep); border-bottom-color: var(--blue-deep); }
.sp-tab:hover:not(.sp-tab-active) { color: var(--blue); }

/* ============================================
   ORDER TAB
   ============================================ */
.ord-section-label {
  font-size: 10px; font-weight: 700; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin: 16px 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid #f0f0f0;
}
.ord-student-btn {
  padding: 6px 14px; border-radius: var(--r-full);
  border: 1.5px solid var(--line); background: white;
  font-size: 13px; font-weight: 500; color: #333;
  cursor: pointer; transition: all 0.15s;
}
.ord-student-btn:hover   { border-color: var(--blue); background: var(--blue-bg); }
.ord-student-btn.selected {
  border-color: var(--blue-deep); background: var(--blue-bg);
  color: var(--blue-deep); font-weight: 700;
}
.ord-choice-btn {
  flex: 1; padding: 10px; border-radius: var(--r-sm);
  border: 2px solid #e8e8e8; background: white;
  cursor: pointer; text-align: center; transition: all 0.15s;
}
.ord-choice-btn:hover   { border-color: var(--blue); background: var(--blue-bg); }
.ord-choice-btn.selected {
  border-color: var(--blue-deep); background: var(--blue-bg);
}

/* Template student selector cards (Yuran / Peralihan Modul) */
.tmpl-student-card {
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 8px; overflow: hidden; transition: border-color 0.15s;
}
.tmpl-student-card.selected { border-color: var(--green-deep); border-width: 2px; }
.tmpl-student-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; cursor: pointer; gap: 8px;
  background: white; transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tmpl-student-row:hover { background: var(--bg); }
.tmpl-student-card.selected .tmpl-student-row { background: var(--green-bg); }
.tmpl-student-name { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 5px; }
.tmpl-student-badge { font-size: 12px; font-weight: 800; color: var(--green-text); background: var(--green-bg); padding: 3px 9px; border-radius: var(--r-full); flex-shrink: 0; white-space: nowrap; }
.tmpl-badge-muted { color: var(--ink-faint); font-weight: 600; font-size: 11px; background: var(--grey-bg); }

.tmpl-student-dropdown { padding: 2px 12px 12px; border-top: 1px dashed rgba(35,138,49,0.25); background: var(--green-bg); }
.tmpl-dropdown-note { font-size: 11px; color: var(--green-text); padding: 8px 0 2px; display: flex; align-items: center; gap: 4px; }
.tmpl-dropdown-label { font-size: 10px; font-weight: 800; color: var(--green-text); text-transform: uppercase; letter-spacing: 0.4px; margin: 8px 0 4px; }
.tmpl-module-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.tmpl-module-row input { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; accent-color: var(--green-deep); }
.tmpl-module-name { flex: 1; font-size: 12px; color: #444; }
.tmpl-module-fee { font-size: 12px; font-weight: 700; color: var(--green-deep); }
.tmpl-module-empty { font-size: 12px; color: var(--ink-faint); padding: 6px 0; }
.tmpl-dropdown-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(35,138,49,0.3);
  font-size: 13px; font-weight: 800; color: var(--green-text);
}

/* ============================================
   LAPORAN PERSESI
   ============================================ */
.lp-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--blue-bg); border-radius: var(--r-md);
  margin-bottom: 14px; gap: 10px; flex-wrap: wrap;
}
.lp-summary-name  { font-size: 14px; font-weight: 700; color: var(--ink); font-family: 'Baloo 2', sans-serif; }
.lp-summary-pakej { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
.lp-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-full);
  white-space: nowrap;
}
.lp-pill-neutral { background: var(--grey-bg); color: var(--grey-text); }
.lp-pill-ok      { background: var(--green-bg); color: var(--green-text); }
.lp-pill-green   { background: var(--green-bg); color: var(--green-text); }
.lp-pill-yellow  { background: var(--orange-bg); color: var(--orange-text); }
.lp-pill-red     { background: var(--red-bg); color: var(--red-text); }
.lp-pill-grey    { background: var(--grey-bg); color: var(--grey-text); }

.lp-section { margin-bottom: 16px; }
.lp-section-card { background: white; border: none; box-shadow: var(--shadow-sm); border-radius: var(--r-md); padding: 14px; }
.lp-section-title {
  font-size: 11px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.lp-record-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--bg); border-radius: var(--r-sm); margin-bottom: 6px;
}
.lp-record-rm    { font-weight: 800; color: var(--green-deep); font-size: 14px; min-width: 70px; }
.lp-record-date  { font-size: 12px; color: #666; }
.lp-record-resit { font-size: 12px; color: var(--ink-soft); }
.lp-record-mot   { font-size: 11px; padding: 2px 7px; background: var(--blue-bg); color: var(--blue-text); border-radius: var(--r-full); }
.lp-record-admin { font-size: 11px; color: var(--ink-faint); }
.lp-record-del   { margin-left: auto; background: var(--red-bg); border: none; border-radius: 6px; color: var(--red-text); cursor: pointer; font-size: 11px; padding: 3px 8px; }
.lp-empty        { font-size: 13px; color: var(--ink-faint); margin-bottom: 8px; }
.lp-add-btn {
  width: 100%; padding: 9px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 13px; font-weight: 700; border: 1.5px dashed; background: white;
}
.lp-add-btn-pendaftaran { color: var(--green-deep); border-color: var(--green); }
.lp-add-btn-yuran       { color: var(--purple-deep); border-color: var(--purple); }

.lp-report-btn {
  width: 100%; margin-bottom: 14px; padding: 10px; background: var(--blue-deep); color: white;
  border: none; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; font-weight: 700;
}
.lp-month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lp-month-nav-btn { background: var(--grey-bg); color: var(--ink-soft); border: none; border-radius: var(--r-full); padding: 6px 14px; cursor: pointer; font-size: 13px; }

.lp-day-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.lp-day-cell           { border-radius: var(--r-sm); padding: 8px 10px; border: 1.5px solid; }
.lp-day-cell-upcoming  { border-color: var(--line); background: var(--bg); }
.lp-day-cell-attended  { border-color: var(--green); background: var(--green-bg); }
.lp-day-cell-cancelled { border-color: #FECACA; background: var(--red-bg); }
/* Cancelled + ganti, split by whether the makeup has actually happened yet —
   red above stays reserved for "cancelled, no makeup at all". */
.lp-day-cell-ganti-done    { border-color: var(--green); background: var(--green-bg); }
.lp-day-cell-ganti-pending { border-color: var(--orange); background: var(--orange-bg); }
.lp-day-num            { font-weight: 700; font-size: 13px; color: var(--ink); }
.lp-day-num-cancelled  { color: var(--red); text-decoration: line-through; }
.lp-day-status         { font-size: 11px; margin-top: 2px; }
.lp-tukar-mt-btn {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 4px;
  font-size: 10px; color: var(--green-text); background: var(--green-bg); border: none;
  border-radius: 5px; padding: 2px 6px; cursor: pointer;
}

/* ============================================
   PROFILE TAB
   ============================================ */
.profile-info-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid #f5f5f5;
}
.profile-info-key { font-size: 13px; color: var(--ink-soft); }
.profile-info-val { font-size: 13px; font-weight: 600; color: #222; text-align: right; }
/* Single column on mobile (unchanged — already fine there); 2 columns on
   desktop (see the 1024px override below) so the 3 cards settle into 2 rows
   instead of one long narrow stack with empty space to the right. */
.profile-cards-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 480px; }
/* Must come AFTER the base rule above — same selector/specificity, so
   source order (not the media condition) decides the winner; declaring this
   override earlier in the file (as originally done, inside the shared
   768px block near the top of the stylesheet) silently lost to the later
   base rule despite the media query matching. */
@media (min-width: 768px) {
  .profile-cards-grid { grid-template-columns: 1fr 1fr; max-width: 820px; }
}

/* ============================================
   LAPORAN BULANAN — monthly report cards
   Purple family, matching the Progres tab / Sejarah Modul this report is
   built on top of (js/profile.js's #4A148C/#9333ea) — kept distinct from
   elaun's green and Laporan Persesi's blue report button.
   ============================================ */
/* White fill (pastel fills read as "takde beza" — too subtle to tell apart)
   with a visibly darker outline instead — Order status sections and Murid's
   per-MT cards override the border color further down for semantic/rotating
   colour-coding; this is just the neutral default for contexts without one
   (Laporan Bulanan/Persesi, sibling cards). */
.lb-card { border: none; box-shadow: var(--shadow-sm); border-radius: var(--r-md); margin-bottom: 8px; overflow: hidden; background: white; }
.lb-admin-grid .lb-card { margin-bottom: 0; }
.lb-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.lb-card-nama { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* where a past month's student is now (moved MT / Berhenti / waiting list) — 2026-11-01 */
.lb-kini { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: var(--orange-bg); color: var(--orange-text); font-size: 10px; font-weight: 700; white-space: nowrap; }
.lb-card-umur { font-size: 10.5px; color: var(--ink-faint); font-weight: 600; }
.lb-card-modul { font-size: 11px; color: var(--purple-text); margin-top: 2px; }
.lb-chevron { font-size: 14px; color: var(--ink-faint); transition: transform 0.15s; flex-shrink: 0; }
/* Direct-child combinators (not descendant) — a .lb-card can now nest another
   .lb-card inside its own .lb-card-detail (Murid's sibling-group dropdown
   inside an MT card). A plain descendant selector would match the NESTED
   card's head/detail too as soon as the OUTER card opens, regardless of the
   nested card's own .open state — .lb-card-head/.lb-card-detail are always
   direct children of .lb-card in every usage, so `>` is exact, not a hack. */
.lb-card.open > .lb-card-head .lb-chevron { transform: rotate(180deg); }

.lb-pill {
  font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: var(--r-full);
  white-space: nowrap; flex-shrink: 0;
}
.lb-pill-ok  { background: var(--green-bg); color: var(--green-text); }
.lb-pill-bad { background: var(--red-bg); color: var(--red-text); }
.lb-pill-na  { background: var(--grey-bg); color: var(--ink-faint); }

.lb-card-detail { display: none; padding: 0 12px 14px; border-top: 1px solid #f5f5f5; }
.lb-card.open > .lb-card-detail { display: block; padding-top: 10px; }
/* .lb-detail-grid: block on mobile (each row stacks full-width, unchanged
   look) — desktop reflows the same rows into a 2-col grid so they don't run
   down a single narrow column inside an otherwise wide dialog. Baki Jam Kelas
   moved out to its own .lb-baki-block below (2026-09-28) since it's no longer
   a single-line value — it needed room for a bulleted item list. */
.lb-detail-grid { display: block; }
.lb-detail-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: #555; padding: 5px 0; border-bottom: 1px solid #f9f9f9;
}
.lb-detail-row:last-of-type { border-bottom: none; }
.lb-detail-row span:last-child { font-weight: 600; color: #333; }

/* .lb-baki-block / .baki-* — the shared "Total baki X: N" + bullet-list
   block (js/ganti.js's renderBakiListHTML), used here (Laporan Bulanan's own
   MT card), in the admin table/mobile-card (.lbt-baki), and in elaun.js's
   Baki Sesi detail block. One set of rules so all three look consistent. */
.lb-baki-block { padding: 8px 0; border-top: 1px solid #f9f9f9; font-size: 12px; color: #555; }
.baki-total-line { font-weight: 600; color: #333; margin-bottom: 3px; }
.baki-total-line strong { color: var(--purple-deep, #4A148C); }
.baki-bullet-list { margin-top: 2px; }
.baki-bullet-line { line-height: 1.5; }
.baki-bullet-line + .baki-bullet-line { margin-top: 1px; }
.baki-bullet-empty { color: var(--ink-soft); font-style: italic; margin-top: 2px; }

/* .lb-fields / .lb-field: wrap each Isu / Tindakan / Perubahan label+textarea
   (or label+locked-text) pair as one unit. Mobile: a plain flex column with
   gap doing the vertical rhythm the old `label:first-child{margin-top:0}`
   hack used to handle — desktop turns the same markup into a real 2-column
   form with Perubahan spanning full width below. */
.lb-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.lb-field label {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--purple-text);
  text-transform: uppercase; letter-spacing: 0.3px; margin: 0 0 4px;
}
.lb-field textarea {
  width: 100%; min-height: 52px; padding: 9px 11px; font-size: 12.5px;
  font-family: inherit; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); resize: vertical; box-sizing: border-box;
}
.lb-notes textarea:focus { outline: none; border-color: var(--purple); }
.lb-save-btn {
  width: 100%; margin-top: 10px; padding: 11px; background: var(--blue-deep); color: white;
  border: none; border-radius: var(--r-md); cursor: pointer; font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.lb-save-btn:active { opacity: 0.85; }

/* Submitted state — green head tint + badge, sunk to the bottom of the list
   by the caller's sort (see js/laporan_bulanan.js's _lbLoadMonth). */
.lb-card-submitted .lb-card-head { background: var(--green-bg); }
.lb-pill-submitted {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-full);
  white-space: nowrap; flex-shrink: 0; background: white; color: var(--green-deep);
  border: 1px solid var(--green); display: inline-flex; align-items: center; gap: 3px;
}

/* Ada Isu / Tiada Isu segmented toggle */
.lb-isu-toggle { display: flex; gap: 8px; margin-top: 12px; }
.lb-isu-toggle-btn {
  flex: 1; padding: 9px; border: 1.5px solid var(--line); border-radius: var(--r-full);
  background: white; font-size: 11px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; transition: all 0.15s;
}
.lb-isu-toggle-btn.active { border-color: var(--orange-deep); background: var(--orange-deep); color: white; }

/* Locked state — once submitted, Isu/Tindakan/Perubahan become read-only
   text (not disabled textareas — a disabled textarea still visually
   resembles an editable field, plain text reads unambiguously as "final"). */
.lb-locked-banner {
  display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 11px;
  background: var(--green-bg); border: none; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 700; color: var(--green-text);
}
.lb-locked-field label {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px;
}
.lb-locked-text {
  padding: 9px 11px; font-size: 12.5px; line-height: 1.5; color: #444;
  background: var(--bg); border: none; border-radius: var(--r-sm); white-space: pre-wrap;
}
.lb-save-btn-locked { background: var(--grey-bg); color: var(--ink-faint); cursor: not-allowed; }
.lb-save-btn-locked:active { opacity: 1; }

/* ============================================
   LAPORAN BULANAN — ADMIN TABLE + FOLDER TABS
   Folder-tab strip "merges" visually into the table surface below it
   (active tab shares the table's white background + shadow, sits flush).
   ============================================ */
.lbt-folder-row { display: flex; align-items: flex-end; gap: 4px; padding: 0 2px; flex-wrap: wrap; }
.lbt-folder-tab {
  appearance: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 9px 16px 8px; background: #F5F3FA; color: #8A85A0; border: 1px solid #E7E4EF; border-bottom: none;
  border-radius: 10px 10px 0 0; position: relative; top: 1px; display: flex; align-items: center; gap: 7px;
  transition: background 0.15s, color 0.15s;
}
.lbt-folder-tab:hover { background: #EDE7F6; color: #4A148C; }
.lbt-folder-tab .lbt-folder-count {
  font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  background: white; color: var(--ink-soft); border: 1px solid #E7E4EF;
}
.lbt-folder-tab.active {
  background: white; color: #4A148C; border-color: #E7E4EF; z-index: 2;
  box-shadow: 0 1px 2px rgba(33,20,60,0.04), 0 6px 16px rgba(33,20,60,0.08);
}
.lbt-folder-tab.active .lbt-folder-count { background: #EDE7F6; color: #4A148C; border-color: #D8CCED; }
/* Badge reads submitted/total (e.g. "2/13") — amber whenever anything's
   still outstanding, so a folder with unsubmitted reports stands out even
   before it's opened. */
.lbt-folder-count-pending { background: #FFF3E0 !important; color: #E65100 !important; border-color: #FFCC80 !important; }
.lbt-folder-tab.active .lbt-folder-count-pending { background: #FFF3E0 !important; color: #E65100 !important; border-color: #FFCC80 !important; }
/* Fully submitted, not yet verified — "noti" cue admin/PPC scan for. */
.lbt-folder-count-ready { background: #E3F2FD !important; color: #1565C0 !important; border-color: #90CAF9 !important; }
.lbt-folder-tab.active .lbt-folder-count-ready { background: #E3F2FD !important; color: #1565C0 !important; border-color: #90CAF9 !important; }
/* Verified by admin/PPC — final state, nothing left to do. */
.lbt-folder-count-verified { background: #E8F5E9 !important; color: #2E7D32 !important; border-color: #A5D6A7 !important; }
.lbt-folder-tab.active .lbt-folder-count-verified { background: #E8F5E9 !important; color: #2E7D32 !important; border-color: #A5D6A7 !important; }

/* Verify banner — admin's "ready to sign off" prompt (blue) / confirmation
   (green) above the table, and the matching read-only banner on the MT's
   own modal once verified. */
.lb-verify-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px;
  font-size: 13px; margin-bottom: 12px;
}
.lb-verify-bar-ready { background: #E3F2FD; border: 1px solid #90CAF9; color: #0D47A1; }
.lb-verify-bar-ready i { font-size: 20px; color: #1565C0; }
.lb-verify-bar-done { background: #E8F5E9; border: 1px solid #A5D6A7; color: #1B5E20; }
.lb-verify-bar-done i { font-size: 20px; color: #2E7D32; }
.lb-verify-btn {
  appearance: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 9px 16px; border-radius: 8px; background: #1565C0; color: white; border: none;
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap;
}
.lb-verify-btn:hover { background: #0D47A1; }

/* Desktop shows the spreadsheet table; mobile shows a stacked card list
   instead (see .lbt-mobile-cards further down) — squeezing 12 fixed columns
   onto a phone width made the table unreadable ("sgtlah rosak dan takleh nk
   baca"). Both render into the DOM; `display` here is the only thing
   deciding which one is visible, mirroring this codebase's existing mobile-
   first convention (base styles = mobile, @media min-width 768px =
   desktop). Kept as ONE rule block per selector (not split across two) —
   splitting it burned us once already this session (Round 10's profile grid
   bug): same-specificity rules resolve by SOURCE ORDER regardless of which
   media query "sounds" more specific, so a later plain rule silently wins
   over an earlier @media override even when the media condition matches. */
.lbt-sheet {
  display: none;
  background: white; border: 1px solid #E7E4EF; border-radius: 0 12px 12px 12px;
  box-shadow: 0 1px 2px rgba(33,20,60,0.04), 0 6px 16px rgba(33,20,60,0.08); overflow: hidden;
}
.lbt-mobile-cards { display: block; }
@media (min-width: 768px) {
  .lbt-sheet { display: block; }
  .lbt-mobile-cards { display: none; }
}
/* overflow-x kept as a defensive fallback only — with table-layout:fixed +
   the <colgroup> percentages below, the table is constrained to 100% of the
   pane's width and should never actually need to scroll ("takde scroll kiri
   ke kanan" — one page, no left-right scroll, per explicit request). */
.lbt-sheet-scroll { overflow-x: auto; }
/* table-layout:fixed makes the <colgroup> percentages (see the table markup
   in adminLoadLaporanBulanan) the actual column widths, independent of
   content length — cells wrap instead of pushing the table wider than its
   container. This is what removes the horizontal scroll entirely. */
.lbt-table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 12.5px; }
/* white-space:normal (not nowrap) on EVERY header, not just the 3 opted
   into an explicit 2-line label below — with table-layout:fixed + a strict
   no-scroll requirement, any header text wider than its fixed column MUST
   be able to wrap, or its overflow leaks into the scroll container's
   scrollWidth and reintroduces exactly the horizontal scroll this was meant
   to remove (confirmed: "Laporan Persesi" alone needed 96px in a 80px
   column at nowrap — that overflow at the LAST column was the entire 16px
   scroll gap). Columns wide enough for their label just render on one line
   as before; this only changes behavior for the ones that don't fit. */
.lbt-table thead th {
  position: sticky; top: 0; z-index: 3; background: #4A148C; color: white; text-align: left;
  padding: 10px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  white-space: normal; line-height: 1.3; overflow-wrap: break-word;
}
.lbt-table thead th.num { text-align: center; }
.lbt-table thead th:first-child { padding-left: 16px; }
/* The 3 columns with an explicit 2-line label (Peralihan Modul / On-track /
   Yuran Bulan Semasa) get a controlled break point via label2's literal
   line break, rather than leaving where-to-wrap up to the browser. */
.lbt-table thead th.lbt-th-wrap { line-height: 1.35; }
.lbt-caret { font-size:10px; opacity: 0.7; }
.lbt-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid #F0EEF5; color: #21232B; vertical-align: middle;
  overflow-wrap: break-word;
}
.lbt-table tbody td:first-child { padding-left: 16px; }
.lbt-table tbody tr:nth-child(even) td { background: #FAF9FC; }
.lbt-row { cursor: pointer; }
.lbt-row:hover td { background: #F3EEFA; }
.lbt-row-submitted td { background: #F1F8E9; }
.lbt-idx, .lbt-idx-head { color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: center; }
.lbt-name { font-weight: 700; }
.lbt-num-cell { font-variant-numeric: tabular-nums; text-align: center; }
.lbt-module-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #EDE7F6; color: #4A148C; border: 1px solid #D8CCED; }
.lbt-peralihan-yes { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; color: #E65100; background: #FFF3E0; padding: 2px 8px; border-radius: 6px; }
.lbt-peralihan-no { color: var(--ink-soft); }
.lbt-ontrack-cell { text-align: center; }
.lbt-ontrack { font-weight: 800; font-variant-numeric: tabular-nums; }
.lbt-ontrack-y { color: #2E7D32; }
.lbt-ontrack-n { color: #C62828; }
.lbt-muted, .lbt-muted-cell { color: var(--ink-soft); }
/* Isu/Tindakan/Perubahan Selepas Tindakan — width now comes purely from the
   colgroup's 14% share each (~42% combined) rather than a pixel min-width,
   since a min-width would fight table-layout:fixed's "never wider than the
   container" guarantee. Long entries wrap across multiple lines instead. */
.lbt-text-cell { color: #6B6F7B; }
.lbt-yuran-box { display: flex; justify-content: center; }
.lbt-yuran-check { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; }
.lbt-yuran-check.on { background: #2E7D32; color: white; }
.lbt-yuran-check.off { background: #FAF9FC; border: 1.5px solid #E7E4EF; color: transparent; }
.lbt-baki { font-size: 11.5px; color: #21232B; line-height: 1.5; }

.lbt-persesi-cell { text-align: center; padding-left: 4px; padding-right: 4px; }
/* Kept deliberately compact — this is the narrowest data column (colgroup
   9%) and the button's own nowrap content is what was leaking a few px past
   the fixed column at narrower desktop widths (~1280px); tighter padding,
   no icon, and a smaller font keep it comfortably inside its column. */
.lbt-persesi-btn {
  appearance: none; cursor: pointer; font-family: inherit; font-size: 10.5px; font-weight: 700;
  padding: 4px 8px; border-radius: 6px; background: white; color: #4A148C; border: 1.5px solid #D8CCED;
  white-space: nowrap;
}
.lbt-persesi-btn:hover { background: #EDE7F6; }

/* ============================================
   LAPORAN BULANAN ADMIN — mobile card view (< 768px)
   One stacked card per student, same data as the table row. Reuses the
   .lbt-module-chip / .lbt-peralihan-* / .lbt-ontrack-* / .lbt-yuran-check /
   .lbt-baki* / .lbt-muted-cell / .lbt-persesi-btn tokens above so both views
   stay visually consistent.
   ============================================ */
.lbt-mcard {
  background: white; border: 1.5px solid #D8D4E6; border-radius: 12px;
  padding: 14px; margin-bottom: 12px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(33,20,60,0.05);
}
.lbt-mcard-submitted { background: #F1F8E9; border-color: #A5D6A7; }
.lbt-mcard-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.lbt-mcard-nama { font-size: 14px; font-weight: 700; color: #21232B; }
.lbt-mcard-umur { font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.lbt-mcard-modul { margin-top: 4px; }
/* Boxed sub-sections — "kotak dan garis, supaya lagi nampak clear" (boxes
   and lines, so it's clearer) — a bare list of rows read as one jumbled
   block ("bercampur-campur"); a bordered box per section plus a real
   divider line between rows inside it gives each piece of data a clear
   edge, on top of the card's own outer border. */
.lbt-mcard-box {
  background: #FAF9FC; border: 1px solid #E7E4EF; border-radius: 9px;
  padding: 2px 12px; margin-bottom: 10px;
}
.lbt-mcard-box-notes { background: white; border-color: #E0DCEF; }
.lbt-mcard-box-label {
  font-size: 10px; font-weight: 800; color: #9B7FCC; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 10px 0 2px;
}
.lbt-mcard-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #E7E4EF; font-size: 12px;
}
.lbt-mcard-row:last-child { border-bottom: none; }
.lbt-mcard-row > span:first-child { color: var(--ink-soft); flex-shrink: 0; padding-top: 1px; }
.lbt-mcard-row-block {
  padding: 9px 0; border-bottom: 1px solid #E7E4EF; font-size: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.lbt-mcard-row-block:last-child { border-bottom: none; }
.lbt-mcard-row-block > span:first-child { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }
.lbt-mcard-row-block > div { color: #444; line-height: 1.5; }

/* ============================================
   EDIT HISTORY (audit log) filter pills
   ============================================ */
.eh-filter-pill {
  appearance: none; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; background: #f5f5f5; color: var(--ink-soft); border: 1px solid #eee;
  white-space: nowrap;
}
.eh-filter-pill:hover { background: #eee; }
.eh-filter-pill.active { background: #4A148C; color: white; border-color: #4A148C; }

/* ============================================================================
   MT SIDE — DESKTOP REDESIGN
   ----------------------------------------------------------------------------
   A full replacement for the MT home shell at >=768px. The old desktop view was
   the phone layout stretched sideways: a two-tone rail (gradient block sitting
   on a dark navy block), no indication of which tab you were on once you had
   scrolled, and a content column with no maximum width.

   The new shell is a four-zone grid:

        +--------------+--------------------------------+
        | .home-header | .mt-topbar                     |  row 1 (fixed)
        +--------------+--------------------------------+
        | .bottom-tabs | .tab-content                   |  row 2 (scrolls)
        +--------------+--------------------------------+
          col 1 (rail)   col 2 (content)

   Column 1 is now ONE continuous white rail — brand plate on top, nav below,
   identity + log out pinned to the bottom. Column 2 gains a topbar that names
   the current tab, so the page always says where you are.

   Everything here is scoped to #screen-home / MT-only classes; the admin shell
   (#screen-admin, .admin-sidebar, .admin-nav-btn) is untouched.

   Placed at the END of the file on purpose: same-specificity rules resolve by
   source order, so these win over the earlier @media (min-width:768px) block
   without having to edit it in place. (Same reasoning as the .lbt-sheet note
   further up.)
   ============================================================================ */

/* ---- Mobile defaults for the two desktop-only elements. Both live in the DOM
        at every width; `display` is the only thing gating them. ---- */
.mt-topbar    { display: none; }
.sidebar-foot { display: none; }

@media (min-width: 768px) {

  /* ---- SHELL ---- */
  #screen-home.active {
    display: grid;
    grid-template-columns: 258px 1fr;
    grid-template-rows: 76px 1fr;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
  }

  /* ---- RAIL TOP — brand plate ----
     Rail + topbar + bottom-tabs now share the page's own --bg tone instead
     of white — that's the fix for "terlalu putih": white is reserved for
     actual content cards, so it reads as a deliberate surface instead of
     being everywhere. Every small element that used to sit on a WHITE rail
     and borrow --bg for contrast (logo plate, nav hover, user card, date
     pill) flips the other way below — onto --surface — so it still stands
     out against its now-tinted container. */
  .home-header {
    grid-column: 1;
    grid-row: 1;
    background: var(--bg);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
    gap: 0;
  }
  .home-header-left {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
  }
  .home-header-logo {
    font-size: 21px;
    letter-spacing: 2px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    box-shadow: none;
    padding: 7px 11px 8px;
    border-radius: 13px;
    margin-right: 0;
  }
  /* "Hi, MT X!" is redundant here — the rail's own user card below carries the
     identity, and it stays visible no matter how far the content scrolls. */
  .home-sub   { display: none; }
  .btn-logout { display: none; }

  /* ---- RAIL BODY — vertical nav ---- */
  .bottom-tabs {
    grid-column: 1;
    grid-row: 2;
    /* un-fix from mobile */
    position: static;
    left: unset;
    bottom: unset;
    transform: none;
    z-index: auto;
    width: 100%;
    max-width: none;
    height: 100%;
    /* vertical layout */
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 14px 12px;
    background: var(--bg);
    border-top: none;
    border-right: 1px solid var(--line);
    box-shadow: none;
    overflow-y: auto;
  }
  .btab {
    /* Reset the mobile flex:1 — inside a vertical rail that would stretch each
       tab to 1/5 of the page height and push the last ones below the fold. */
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1.5px solid transparent;
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-soft);
    letter-spacing: 0.1px;
    transition: all 0.16s;
  }
  .btab i    { font-size: 19px; width: 24px; flex-shrink: 0; text-align: center; }
  .btab span { font-size: 13.5px; }
  .btab:hover:not(.active) {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
  }
  .btab.active {
    background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(43,188,255,0.30);
  }
  .btab.active i { color: #fff; }
  .btab:active   { opacity: 1; transform: scale(0.98); }
  /* Badge moves from the mobile icon corner to the end of the row, where a
     horizontal nav item actually has room for it. */
  .btab-badge {
    position: static;
    top: auto;
    right: auto;
    margin-left: auto;
    flex-shrink: 0;
  }
  .btab.active .btab-badge { background: #fff; color: var(--red-deep); }

  /* ---- RAIL FOOT — identity + log out ---- */
  .sidebar-foot {
    display: block;
    margin-top: auto;          /* pins to the bottom of the rail */
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 13px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    margin-bottom: 8px;
    min-width: 0;
  }
  .sidebar-user-avatar {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
    color: #fff; font-weight: 800; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Baloo 2', sans-serif;
  }
  .sidebar-user-meta { min-width: 0; text-align: left; }
  .sidebar-user-name {
    font-size: 13px; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sidebar-user-role { font-size: 10.5px; color: var(--ink-soft); margin-top: 1px; }
  .sidebar-logout {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px;
    border-radius: 12px;
    border: 1.5px solid #F3A6A6;
    background: var(--red-bg);
    color: var(--red-text);
    font-family: inherit;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    transition: all 0.16s;
  }
  .sidebar-logout i { font-size: 16px; }
  .sidebar-logout:hover {
    background: var(--red);
    border-color: var(--red-deep);
    color: #fff;
  }

  /* ---- CONTENT TOPBAR ---- */
  .mt-topbar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    min-width: 0;
  }
  .mt-topbar-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
  .mt-topbar-icon {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
    color: #fff; font-size: 21px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 14px rgba(43,188,255,0.30);
  }
  .mt-topbar-head  { min-width: 0; }
  .mt-topbar-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mt-topbar-sub {
    font-size: 12px; color: var(--ink-soft); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mt-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .mt-topbar-date {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
    background: var(--surface);
    border: 1.5px solid var(--line);
    padding: 8px 14px;
    border-radius: var(--r-full);
    white-space: nowrap;
  }
  .mt-topbar-date i { font-size: 15px; color: var(--blue-deep); }

  /* ---- CONTENT COLUMN ---- */
  .tab-content {
    grid-column: 2;
    grid-row: 2;
    padding-bottom: 0;
    min-height: 0;             /* required for overflow-y:auto to scroll */
    overflow-y: auto;
    background: var(--bg);
  }
  .tab-content::-webkit-scrollbar { width: 12px; }
  .tab-content::-webkit-scrollbar-track { background: transparent; }
  .tab-content::-webkit-scrollbar-thumb {
    background: #D3D7E8;
    border-radius: 8px;
    border: 3.5px solid var(--bg);
  }
  .tab-content::-webkit-scrollbar-thumb:hover { background: #B9BFD6; }

  /* No outer reading-width cap any more — every tab's own content now
     handles wide screens itself (auto-fill grids that gain columns, a real
     table, the Jadual MT week-grid that gives each day more breathing room,
     a sidebar+main split) rather than being one column that needs an
     artificial ceiling. The cap used to be the actual cause of empty gutters
     down both sides on ordinary desktop widths ("ade ruang sgt kat tepi2
     tu... tak kemas") even though nothing inside was overflowing. */
  .home-content { padding: 22px 28px 44px; }
  /* The Murid tab's own elaun-strip/mt-ann-strip positioning is fully
     superseded by the MURID TAB — DESKTOP DASHBOARD section further down
     (they become sidebar-widget / in-column elements there, not full-width
     bars owned by this generic desktop pass). */

  /* ---- MURID TAB — card grid ---- */
  .section-row   { margin-bottom: 14px; }
  .section-title { font-size: 15px; }
  .student-section-label { font-size: 12.5px; }
  .student-card {
    margin-bottom: 0;
    padding: 15px 16px;
  }
  /* Desktop has a pointer, so every card gets a real hover affordance. Only
     the shadow/lift change — touching `border-color` here would also overwrite
     the coloured left accent that encodes the student's status. */
  .student-card:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .student-card:active { transform: translateY(-1px) scale(0.995); }
  .pending-section {
    margin-top: 18px;
    padding-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 12px;
    align-items: start;
    border-top: 2px dashed #D9DCEC;
  }
  .pending-section .student-section-label { grid-column: 1 / -1; }

  /* ---- Shared polish across every MT tab ---- */
  .card                { transition: box-shadow 0.16s, transform 0.16s; }
  .template-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .empty-state         { border-color: #D9DCEC; }

  /* Keyboard users get a visible ring — the app is now genuinely navigable
     with Tab on desktop, where before focus was invisible. */
  .btab:focus-visible,
  .btn-icon:focus-visible,
  .btn-edit-toggle:focus-visible,
  .sidebar-logout:focus-visible,
  .btn-back:focus-visible {
    outline: 3px solid rgba(43,188,255,0.45);
    outline-offset: 2px;
  }
}


/* ============================================================================
   MURID TAB — toolbar (label / search / add) + card grid
   ----------------------------------------------------------------------------
   One wrapping flex row instead of three stacked ones. On a phone the search
   field carries order:3 so it wraps onto its own full-width line under the
   label and the add button; from 768px up it drops back into the flow and
   sits between them, which is what the extra width is actually good for.
   ============================================================================ */
.ms-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ms-toolbar .student-section-label { margin-bottom: 0; flex: 0 0 auto; }

.ms-search { position: relative; flex: 1 1 100%; order: 3; min-width: 0; }
.ms-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); font-size: 15px; pointer-events: none;
}
.ms-search input {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px 9px 35px;
  border: 1.5px solid #D7D9E7;
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: inherit; font-size: 13px; color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ms-search input::placeholder { color: var(--ink-faint); }
.ms-search input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43,188,255,0.18);
}

.ms-add-btn {
  display: flex; align-items: center; gap: 5px;
  margin-left: auto;                     /* pushed to the right edge on mobile */
  padding: 8px 14px;
  border: 1.5px solid #D7D9E7;
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--r-full);
  font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: all 0.16s;
}
.ms-add-btn:hover { border-color: var(--blue); background: var(--blue-bg); color: var(--blue-text); }
/* There are unclaimed students waiting — this is the one state that should
   actively pull the eye, so it goes solid instead of outlined. */
.ms-add-btn.has-pending {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: #fff;
}
.ms-add-btn.has-pending:hover { background: #B36B00; border-color: #B36B00; color: #fff; }

.ms-toolbar .btn-edit-toggle { flex: 0 0 auto; }

.ms-no-result {
  text-align: center; padding: 34px 20px;
  color: var(--ink-faint); font-size: 13px;
  background: var(--surface); border: 2px dashed #D9DCEC; border-radius: var(--r-md);
}

@media (min-width: 768px) {
  .ms-search   { flex: 1 1 240px; order: 0; max-width: 460px; }
  .ms-add-btn  { margin-left: 0; order: 0; }
  .ms-toolbar  { margin-bottom: 14px; }

  /* The cards live inside #student-filtered-list, not directly inside
     .student-section — so the grid has to go on the list, or the toolbar and
     the whole card list end up as two columns beside each other (the list
     squeezed into half the width with every card stacked inside it).

     auto-fill + a 400px floor rather than a fixed column count: a hard
     `repeat(2, 1fr)` at 768px gave ~290px cards, which broke every name onto
     one word per line and stacked the tags vertically. The floor means the
     grid only takes a second (or third) column once a card can actually hold
     its contents — one column on a narrow laptop, two around 1150px, three
     on a wide monitor, with no breakpoint to keep in sync. */
  .student-section       { display: block; }
  .student-section-label { grid-column: auto; }
  #student-filtered-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 12px;
    align-items: start;
  }
  #student-filtered-list > .ms-no-result { grid-column: 1 / -1; }
}

/* ============================================================================
   MURID TAB — DESKTOP DASHBOARD
   ----------------------------------------------------------------------------
   Everything before this section (the earlier @media 768px pass) took the
   mobile column — hero elaun banner, then a horizontal-scroll "today" strip,
   then the list — and just regridded it wider. That's a resize, not a
   redesign: the giant coloured banner and the swipe-to-scroll carousel are
   both mobile-native patterns that don't belong on a screen with a mouse and
   room to spare ("mcm hybrid mobile design").

   This section replaces that for the Murid tab specifically: a real
   two-column dashboard, sidebar of glanceable widgets next to a dense main
   list — closer to how a proper desktop app (Linear, Notion, an admin panel)
   actually lays out a "your stuff" home screen.

        +--------------------+---------------------------------+
        | Kelas Hari Ini      |  Murid Saya toolbar             |
        | (vertical list)      |  ---------------------------   |
        +--------------------+  student grid                    |
        | Elaun (KPI card)    |                                 |
        +--------------------+---------------------------------+
          300px sidebar          remaining width

   Both widgets keep the exact same underlying markup/data as mobile
   (#elaun-strip, #mt-today-strip) — only their shape changes here. Mobile is
   untouched: no rule in this block has any effect below 768px.
   ============================================================================ */
@media (min-width: 768px) {
  .murid-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    align-items: start;
    gap: 20px;
    padding: 22px 28px 44px;
  }
  .murid-side-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Widgets travel with the scroll instead of scrolling away — they stay
       reachable no matter how far down the student grid you've scrolled. */
    position: sticky;
    top: 22px;
  }
  /* .murid-layout now owns the outer padding that .home-content used to
     provide on its own; scoped to the Murid tab only — Template/Jadual
     MT/Order/Profil's own .home-content keeps its normal desktop padding
     from the earlier @media pass. */
  .murid-layout .home-content { padding: 0; }
  #mt-ann-strip { padding: 0 !important; margin-bottom: 14px; }
  #mt-ann-strip:empty { margin-bottom: 0; }
  /* .ms-toolbar's own margin-bottom is already set by the MURID TAB —
     toolbar section above; nothing further needed here. */

  /* ---- Elaun widget: a compact KPI card, not a stretched banner ---- */
  .elaun-strip {
    display: block;
    margin: 0;
    border-radius: var(--r-lg);
    padding: 16px 18px 18px;
    box-shadow: 0 4px 14px rgba(30,34,53,0.10);
    transition: box-shadow 0.16s, filter 0.16s;
  }
  .elaun-strip:hover { box-shadow: 0 6px 18px rgba(30,34,53,0.14); filter: brightness(1.03); }
  .elaun-strip-header { padding: 0; }
  .elaun-strip-title  { font-size: 12.5px; }
  .elaun-strip-chevron { font-size: 15px; align-self: flex-start; margin-top: 1px; }
  /* One column instead of one row — this card is ~260px wide, not a
     900px bar, so the figures stack as label:value rows under a big hero
     total instead of trying to fit three numbers side by side. */
  .elaun-strip-figures { display: grid; grid-template-columns: 1fr; gap: 0; padding: 14px 0 0; }
  .elaun-fig {
    display: flex; align-items: baseline; justify-content: space-between;
    text-align: left; border-left: none; padding: 7px 0;
    border-top: 1px dashed rgba(255,255,255,0.22);
  }
  .elaun-fig:first-child { border-top: none; padding-top: 0; }
  .elaun-fig-val   { font-size: 14px; }
  .elaun-fig-label { font-size: 11px; }
  /* The total is reordered to the TOP via CSS `order` (grid items honour it
     same as flex) and restyled as the card's hero number — biggest, boldest
     thing in the widget — with the two breakdown figures as plain rows
     underneath it. No markup change needed to move it. */
  .elaun-fig-total {
    order: -1;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    border-top: none; border-bottom: 1px solid rgba(255,255,255,0.25);
    padding: 0 0 12px; margin-bottom: 4px;
  }
  .elaun-fig-total .elaun-fig-val   { font-size: 27px; }
  .elaun-fig-total .elaun-fig-label { margin-bottom: 2px; }

  /* ---- Kelas Hari Ini widget: a real vertical list, not a swipe carousel ---- */
  .today-widget {
    margin-bottom: 0;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
  }
  .today-widget-list {
    flex-direction: column;
    overflow-x: visible;
    padding-bottom: 0;
    /* Caps the sidebar's height on a busy day — internal scroll instead of
       pushing the elaun widget further down the rail. */
    max-height: 340px;
    overflow-y: auto;
  }
  .today-item { width: 100%; }
  .today-item:hover { box-shadow: 0 4px 12px rgba(30,34,53,0.10); transform: translateY(-1px); }
}

/* ============================================================================
   MT TABS — desktop layout for Template / Order / Profil
   ----------------------------------------------------------------------------
   These three panes were laid out for a 430px phone and inherited nothing from
   the shell redesign: Template's cards were a hard-coded `1fr 1fr`, which on a
   1400px column meant two 700px tiles holding a 40px icon and one line of text.
   ============================================================================ */
.tmpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.tmpl-note {
  padding: 12px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
}

@media (min-width: 768px) {
  /* auto-fill + a 230px floor: the tiles keep a sane size and simply gain
     columns as the window widens, instead of two tiles stretching forever. */
  .tmpl-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
  }
  .tmpl-grid .template-card { padding: 18px !important; }
  .tmpl-note { max-width: 560px; }

  /* Order's own desktop layout is a real table now (MT SIDE — DESKTOP, FULL
     PASS section, further down) rather than a card grid. Profil's own width
     is owned by .profil-layout (PROFIL TAB — DESKTOP REDESIGN, further
     down) — no cap needed on #profile-content itself any more. */
}

/* ============================================================================
   MT — modals on desktop
   .modal-box was capped for a phone; on desktop the taller viewport lets the
   same modals show more before they start scrolling internally.
   ============================================================================ */
@media (min-width: 768px) {
  .modal-box { max-width: 560px; }
}

/* ============================================================================
   MT SIDE — DESKTOP, FULL PASS (Template / Jadual MT / Order / Profil +
   shared modals)
   ----------------------------------------------------------------------------
   The first desktop pass only reworked the Murid landing tab. Everything
   else was still the mobile column reflowed wider — full-width banners,
   swipe carousels, and modals pinned at their phone width in the middle of a
   huge screen ("hybrid mobile design"). This section covers the rest of the
   MT side: Order becomes a real table on desktop (the data — student /
   module / date / status / action — always was tabular, a phone just has no
   room for a table), Booking Meja's zones sit side by side like an actual
   floor plan instead of stacking, Profil's account form uses real width for
   paired fields, and the shared data-heavy modals (Student Profile, Kelas
   Ganti Track, Laporan Bulanan, Laporan Persesi) get real desktop width
   instead of staying phone-width in a sea of empty backdrop.

   No feature, function or data changed anywhere in this pass — only how the
   existing markup is laid out at ≥768px. Every rule here is additive on top
   of the mobile styles already in the file; nothing below has any effect
   under 768px.
   ============================================================================ */

/* ----------------------------------------------------------------------
   ORDER TAB — real table on desktop
   Both an .order-mobile-view (existing cards) and .order-desktop-view
   (new <table>) render into the DOM for every month group; CSS `display`
   is the only thing choosing which one shows — same convention as the
   admin Laporan Bulanan sheet (.lbt-sheet / .lbt-mobile-cards).
   ---------------------------------------------------------------------- */
.order-desktop-view { display: none; }
.order-mobile-view  { display: block; }

.ordt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ordt-table thead th {
  text-align: left; padding: 8px 14px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1.5px solid var(--line);
}
.ordt-row td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ordt-row:last-child td { border-bottom: none; }
.ordt-row:hover td { background: var(--bg); }
.ordt-student { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ordt-avatar {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--blue-bg); color: var(--blue-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.ordt-modul-chip { background: var(--purple-bg); color: var(--purple-text); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ordt-jenis { font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }
.ordt-muted { color: var(--ink-soft); white-space: nowrap; }
.ordt-status { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-full); white-space: nowrap; }
.ordt-action { text-align: right; }
.ordt-cancel-btn {
  font-size: 11px; font-weight: 700; color: var(--red-text);
  background: none; border: 1.5px solid transparent; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  font-family: inherit; transition: all 0.15s;
}
.ordt-cancel-btn:hover { background: var(--red-bg); border-color: #F3A6A6; }

@media (min-width: 768px) {
  .order-mobile-view  { display: none; }
  .order-desktop-view { display: block; }

  /* Order Modul's own list doesn't need the 400px-floor auto-fill grid the
     Murid tab uses — a table already IS the dense desktop layout here. */
  #order-list { display: block; }
  #order-list > div { margin: 0 0 10px; }
}

/* ----------------------------------------------------------------------
   BOOKING MEJA — floor plan zones side by side on desktop
   A floor plan is inherently 2D; stacking every zone in one column was
   throwing away exactly the width that would let it look like a real room
   layout instead of a phone list of boxes.
   ---------------------------------------------------------------------- */
@media (min-width: 768px) {
  .floor-plan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    align-items: start;
    background: transparent;
  }
  .fp-room { margin-bottom: 0; border-radius: var(--r-md); border: 1px solid rgba(0,0,0,0.05); }
}

/* ----------------------------------------------------------------------
   JADUAL MT — inner segmented tab (Jadual / Booking Meja)
   A 2-option iOS-style segmented control stretched full-width across a
   1200px content column looks like a mobile control blown up, not a
   desktop one — desktop ones stay compact.
   ---------------------------------------------------------------------- */
@media (min-width: 768px) {
  .inner-tab-bar { max-width: 360px; margin-left: 0; margin-right: 0; }
}

/* ----------------------------------------------------------------------
   PROFIL TAB — paired fields + a real week row for Hari Tutup
   ---------------------------------------------------------------------- */
.pf-field-grid { display: block; }
.pf-save-btn {
  width: 100%; padding: 11px; border: none; border-radius: var(--r-sm);
  color: white; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* Hari Tutup — mobile list row (unchanged look, just class-driven instead of
   inline styles so the same markup can be restyled entirely for desktop). */
.day-check-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--line); cursor: pointer; user-select: none;
}
.day-check-row input { width: 17px; height: 17px; accent-color: var(--red); cursor: pointer; flex-shrink: 0; }
.day-check-name { font-size: 13px; color: var(--ink); font-weight: 400; }
.day-check-row.is-closed .day-check-name { font-weight: 700; }
.day-check-short { display: none; }
.day-check-badge { display: none; font-size: 10px; color: var(--red-text); margin-left: auto; font-weight: 700; }
.day-check-row.is-closed .day-check-badge { display: inline; }

@media (min-width: 768px) {
  .pf-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .pf-field-full { grid-column: 1 / -1; }
  .pf-save-btn { width: auto; padding: 10px 26px; }

  /* Desktop: the 7-day vertical list becomes one row of toggle chips —
     a week of on/off switches reads as one glance instead of 7 lines. */
  #close-days-list { display: flex; gap: 8px; flex-wrap: wrap; }
  .day-check-row {
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 72px; padding: 12px 6px; border: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line);
    border-radius: var(--r-md); background: var(--surface); transition: all 0.15s;
  }
  .day-check-row:hover { border-color: var(--red); }
  .day-check-row input { width: 15px; height: 15px; }
  .day-check-name { display: none; }
  .day-check-short { display: block; font-size: 12px; font-weight: 700; color: var(--ink); }
  .day-check-badge { display: none !important; }
  .day-check-row.is-closed {
    background: var(--red-bg); border-color: var(--red);
  }
  .day-check-row.is-closed .day-check-short { color: var(--red-text); }
}

/* ----------------------------------------------------------------------
   TEMPLATE COMPOSE MODALS — Peralihan Modul / Yuran / Laporan Harian
   Mobile keeps its existing 460px width unchanged (moved from an inline
   style to this ID rule, same value). Desktop widens the dialog and turns
   the student picker from a single scrolling column into a short grid, so
   choosing from many students doesn't mean scrolling past a dozen full-
   width rows first.
   ---------------------------------------------------------------------- */
#peralihan-modal-box, #yuran-modal-box, #lh-modal-box { max-width: 460px; }

.tmpl-picker-list { margin-bottom: 16px; }

@media (min-width: 768px) {
  #peralihan-modal-box, #yuran-modal-box, #lh-modal-box { max-width: 640px; }

  .tmpl-picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    align-items: start;
  }
  /* Yuran's dropdown detail renders INSIDE the selected card, making it much
     taller than its unselected siblings — let it claim the full row instead
     of leaving a tall card awkwardly boxed into one grid cell. */
  .tmpl-picker-list .tmpl-student-card.selected { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------------
   SHARED DATA MODALS — Student Profile / Kelas Ganti Track / Laporan
   Bulanan / Laporan Persesi
   All four used to be pinned at their mobile width (380–480px) at every
   screen size — correct for a phone, but a small dialog marooned in the
   middle of a 1600px monitor on desktop. Mobile values are unchanged (moved
   from inline styles to these ID rules); desktop widens each to fit its
   actual content, and the two card-list modals (Laporan Bulanan/Persesi)
   gain a real multi-column grid instead of one long scrolling column.
   ---------------------------------------------------------------------- */
#sp-modal-box { max-width: 480px; }
#jt-modal-box { max-width: 380px; }
#lb-modal-box, #lp-modal-box { max-width: 480px; }

.lb-cards-grid { display: block; }
.lb-cards-grid .elaun-empty { text-align: center; padding: 30px 0; }

@media (min-width: 768px) {
  #sp-modal-box { max-width: 760px; }
  #jt-modal-box { max-width: 560px; }
  #lb-modal-box, #lp-modal-box { max-width: 860px; }

  .lb-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    align-items: start;
  }
  .lb-cards-grid .lb-card { margin-bottom: 0; }
  .lb-cards-grid .elaun-empty { grid-column: 1 / -1; }

  /* No extra rule needed for the Jadual tab's calendar itself — it's already
     a `grid-template-columns:repeat(7,1fr)`, so widening #sp-modal-box alone
     makes every day cell proportionally bigger for free. */
}

/* ============================================================================
   SHARED DATA MODALS — DESKTOP INTERIOR REDESIGN
   ----------------------------------------------------------------------------
   Widening the dialog boxes (previous pass) only fixed the OUTER box — every
   tab/pane INSIDE them (Student Profile's Maklumat tab, Laporan Persesi's day
   grid, Laporan Bulanan's detail rows and Isu/Tindakan/Perubahan form) was
   still the exact same single mobile-width column, just floating in more
   empty space around it ("macam mobile punya design"). This section actually
   reflows that inner content for desktop. Mobile markup/behaviour is
   unchanged — every mobile rule here reproduces the old inline styles
   exactly; only the @media blocks change anything.
   ============================================================================ */

/* ---- Student Profile — Maklumat tab: label:value rows ---- */
.sp-info-grid { margin-top: 4px; }
.sp-info-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #f5f5f5;
}
.sp-info-row:last-child { border-bottom: none; }
.sp-info-key { font-size: 12px; color: var(--ink-soft); font-weight: 600; width: 110px; flex-shrink: 0; }
.sp-info-val { font-size: 13px; color: #333; flex: 1; }

/* ---- Laporan Bulanan card — detail rows + Isu/Tindakan/Perubahan form ---- */
.lb-detail-grid { display: block; }
.lb-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }

@media (min-width: 768px) {
  /* Maklumat tab: 2 columns of label:value pairs instead of one long list —
     Waktu Kelas can hold several lines, so it spans both columns. */
  .sp-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .sp-info-row-full { grid-column: 1 / -1; }

  /* Laporan Persesi's Sesi grid: was a hard-coded 2 columns at every width —
     now genuinely fills the dialog's width instead of leaving most of it
     empty on desktop. */
  .lp-day-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* Laporan Bulanan detail rows: Peralihan/Yuran/Sesi reflow into 2 columns
     (Baki Jam Kelas moved out to its own full-width .lb-baki-block below). */
  .lb-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

  /* Isu/Tindakan side by side, Perubahan spanning the full row below it —
     a real 2-column form instead of 3 full-width textareas stacked one atop
     the other down a 760px-wide dialog. */
  .lb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .lb-field-full { grid-column: 1 / -1; }
}

/* ---- Student Profile — Progres tab (module history timeline) ----
   A chronological history reads top-to-bottom by nature, so this stays a
   single column rather than being forced into a grid — but on a 760px
   dialog a phone-width timeline just floats in the middle with dead space
   either side. Capping it at a comfortable reading width and centering it
   (like the rest of a well-set document) fixes that without breaking the
   reading order. */
@media (min-width: 768px) {
  #spp-progres { max-width: 560px; margin: 0 auto; }
}

/* ---- Laporan Persesi "Excel-style" report — toolbar polish ----
   The table itself keeps its literal Excel colours/borders untouched (it's
   printed/exported 1:1) — only the surrounding chrome (buttons, spacing)
   is redesigned to match the app's own pill-button language instead of the
   flat, ad-hoc-styled bar it had before. */
.lpr-toolbar {
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 1;
}
.lpr-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-full); border: none;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s;
}
.lpr-btn:active { opacity: 0.85; }
.lpr-btn-print  { background: var(--green-deep); color: white; }
.lpr-btn-excel  { background: #1D6F42; color: white; }
.lpr-btn-close  { background: var(--grey-bg); color: var(--ink-soft); margin-left: auto; }
.lpr-body { padding: 20px; overflow-x: auto; }
.lpr-sheet {
  background: white; padding: 24px; border-radius: var(--r-md);
  box-shadow: var(--shadow-md); display: inline-block; min-width: 100%;
  box-sizing: border-box;
}

/* ============================================================================
   PROFIL TAB (MT's own account settings) — DESKTOP REDESIGN
   ----------------------------------------------------------------------------
   Everything below the account-edit form (identity block, PPC banner, the
   read-only Maklumat Akaun list) was left completely untouched in the
   earlier "Profil" pass — still one long single-file column of full-width
   cards, each row stretching label-far-left/value-far-right across a 700px
   card with a huge dead gap in between. That's the "design ni still design
   mobile" complaint: only the two edit FORMS got desktop treatment, the page
   shell around them didn't.

   Real fix: an actual two-column settings layout, same sidebar-widget
   pattern as the Murid tab (Elaun/Kelas Hari Ini) — identity + read-only
   summary in a sticky left rail, the editable sections in the main column.
   The read-only rows (.profile-info-row) don't need their OWN grid rewrite
   — they were never wrong at their native ~280px width, they only looked
   broken stretched across 700px. Narrowing their container back down is
   the actual fix.

   Mobile: .profil-layout / .profil-side-rail are plain blocks, so every
   card still stacks in the exact same order as before — no visual change.
   ============================================================================ */
.profil-layout     { display: block; }
.profil-side-rail  { display: block; }
.profil-form-row   { display: block; }

.profil-identity-card { text-align: center; padding: 26px 16px 20px; }
.profil-avatar {
  width: 72px; height: 72px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: white; letter-spacing: 1px;
  font-family: 'Baloo 2', sans-serif; margin: 0 auto 14px;
}
.profil-identity-name { font-size: 19px; font-weight: 700; color: var(--ink); font-family: 'Baloo 2', sans-serif; }
.profil-identity-caw  { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.profil-role-badge {
  font-size: 10px; background: var(--orange-bg); color: var(--orange-text);
  padding: 2px 10px; border-radius: var(--r-sm); font-weight: 700;
  letter-spacing: 0.5px; display: inline-block; margin-top: 8px;
}
.profil-ppc-card { border: 2px solid var(--orange); background: var(--orange-bg); cursor: pointer; }

@media (min-width: 768px) {
  .profil-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: start;
    gap: 20px;
  }
  .profil-side-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 22px;
  }
  .profil-side-rail .card { margin-bottom: 0; }

  /* No max-width here any more — .profil-main-col fills the grid's own 1fr
     track (whatever that is once the 280px sidebar is accounted for), same
     "let the layout you already built own the width" fix as removing
     .tab-pane's cap. An arbitrary 640px ceiling here was its own source of
     dead space to the right of the column. */
  .profil-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    align-items: start;
  }
  .profil-form-row > .card { margin-bottom: 0; }
}

/* ============================================================================
   ADMIN / PPC / DEVELOPER — REDESIGN 2026-10
   ----------------------------------------------------------------------------
   The admin side was the last part of the app still on its own pre-redesign
   look (purple gradient panel, phone-style cards stretched across a desktop,
   content capped at 1100px with dead space beside it). This block puts it on
   the same design system as the MT side: HOME logo plate, a rail tinted with
   --bg, the blue->green active pill, a content topbar that names the current
   tab, white cards on the tinted canvas, and full-width content.

   Markup: js/shared/main.js loadAdminPage (shell) + _ADMIN_TAB_META (topbar).
   Every id/onclick is unchanged; this section only restyles. It sits at the
   very end of the file on purpose so it wins over the older admin rules above
   by source order (same convention as the MT redesign blocks).
   Role accents: .role-admin = blue->green (same as MT), .role-ppc = orange->pink,
   .role-dev = orange.
   ============================================================================ */

/* ---------- MOBILE (base) ---------- */
#screen-admin { background: var(--bg); }
#screen-admin.active { display: flex; flex-direction: column; min-height: 100vh; }
/* Desktop admin renders at 90% scale by default (2026-10-09, direct request — the owner found the admin
   looks tidier below 100% zoom; tried 80%, then zoomed back in 10% → 90%). Phones/tablets (<1024px)
   untouched. `zoom` doesn't rescale vh units, so min-height is raised 1/0.9 to still fill the viewport.
   To revert: delete this block. */
@media (min-width: 1024px) {
  #screen-admin.active { zoom: 0.9; min-height: 111.2vh; }
}

#screen-admin .admin-sidebar {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(30,34,53,0.05);
}
#screen-admin .admin-sidebar-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px 8px;
}
#screen-admin .admin-sidebar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-logo {
  font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif;
  font-size: 19px; font-weight: 900; letter-spacing: 2px; line-height: 1;
  padding: 7px 10px 8px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  flex-shrink: 0;
}
#screen-admin .admin-sidebar-title { font-size: 14.5px; font-weight: 800; color: var(--ink); font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; line-height: 1.1; }
#screen-admin .admin-sidebar-sub   { font-size: 11px; color: var(--ink-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-head-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.admin-icon-btn {
  width: 36px; height: 36px; border-radius: 11px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; cursor: pointer; transition: all .15s;
}
.admin-icon-btn:hover { border-color: var(--blue); color: var(--blue-deep); background: var(--blue-bg); }

/* nav: one horizontal row of pills on a phone */
#screen-admin .admin-sidebar-nav {
  display: flex; flex-direction: row; gap: 6px;
  padding: 4px 14px 12px;
  overflow-x: auto; scrollbar-width: none;
}
#screen-admin .admin-sidebar-nav::-webkit-scrollbar { display: none; }
.admin-nav-group { display: contents; }
.admin-nav-group-label { display: none; }
#screen-admin .admin-nav-btn {
  flex: 0 0 auto;
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; cursor: pointer; transition: all .15s;
}
#screen-admin .admin-nav-btn i    { font-size: 16px; width: auto; }
#screen-admin .admin-nav-btn span { display: inline; font-size: 12.5px; }
#screen-admin .admin-nav-btn:hover:not(.active) { border-color: var(--blue); color: var(--ink); }
#screen-admin .admin-nav-btn.active {
  background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(43,188,255,0.28);
}
#screen-admin .admin-nav-badge {
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800;
  align-items: center; justify-content: center;
}
#screen-admin .admin-nav-btn.active .admin-nav-badge { background: #fff; color: var(--red-deep); }

#screen-admin .admin-sidebar-footer,
#screen-admin .admin-sidebar-toggle-btn,
#screen-admin .admin-topbar { display: none; }

#screen-admin .admin-main { flex: 1; background: var(--bg); overflow: visible; }
#screen-admin .admin-pane-inner { padding: 14px 14px 90px; max-width: none; }

/* role accents */
#screen-admin.role-ppc .admin-nav-btn.active { background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%); box-shadow: 0 4px 12px rgba(246,166,35,0.30); }
#screen-admin.role-dev .admin-nav-btn.active { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%); box-shadow: 0 4px 12px rgba(246,166,35,0.30); }

/* page heading row inside each pane */
#screen-admin .admin-pane-inner > .section-row:first-child {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
#screen-admin .section-title {
  font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif;
  font-size: 17px; font-weight: 800; color: var(--ink);
  text-transform: none; letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
#screen-admin .section-title > i { color: var(--blue-deep); font-size: 19px; }

/* branch selector = segmented control */
#screen-admin .admin-branch-selector {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  padding: 4px; margin-bottom: 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
}
#screen-admin .admin-branch-pill {
  border: none; background: transparent; color: var(--ink-soft);
  padding: 8px 14px; border-radius: 10px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
#screen-admin .admin-branch-pill:hover:not(.active) { background: var(--grey-bg); color: var(--ink); }
#screen-admin .admin-branch-pill.active { background: var(--blue-bg); color: var(--blue-deep); box-shadow: inset 0 0 0 1.5px var(--blue); }
#screen-admin .admin-branch-pill-count { font-size: 11px; font-weight: 800; color: var(--ink-faint); }
#screen-admin .admin-branch-pill.active .admin-branch-pill-count { color: var(--blue-deep); }
#screen-admin .admin-branch-pill-count-active { color: var(--green-text) !important; }

/* shared buttons */
#screen-admin .admin-act-btn { border-radius: 9px; font-family: inherit; font-weight: 700; transition: all .15s; }
#screen-admin .admin-act-btn:hover { filter: brightness(0.97); box-shadow: 0 2px 8px rgba(30,34,53,0.08); }
.admin-chip-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.admin-chip-btn i { font-size: 16px; color: var(--ink-soft); }
.admin-chip-btn:hover { border-color: var(--blue); background: var(--blue-bg); }
.admin-chip-orange { border-color: #F7C77A; background: var(--orange-bg); color: var(--orange-text); }
.admin-chip-orange i { color: var(--orange-text); }

/* cards inside admin panes sit on the tinted canvas */
#screen-admin .admin-pane-inner .card { border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); border-radius: var(--r-md); }

/* ---------- DESKTOP / TABLET (>= 768px) ---------- */
@media (min-width: 768px) {
  #screen-admin.active {
    display: grid;
    grid-template-columns: 258px 1fr;
    grid-template-rows: 76px 1fr;
    height: 100vh; min-height: 0;
    overflow: hidden;
  }
  #screen-admin.active.sidebar-collapsed { grid-template-columns: 78px 1fr; }

  /* rail */
  #screen-admin .admin-sidebar {
    grid-column: 1; grid-row: 1 / 3;
    position: static; z-index: auto;
    display: flex; flex-direction: column;
    height: 100vh; min-height: 0;
    background: var(--bg);
    border-bottom: none; border-right: 1px solid var(--line);
    box-shadow: none;
  }
  #screen-admin .admin-sidebar-head {
    height: 76px; flex-shrink: 0;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
  }
  .admin-logo { font-size: 20px; padding: 7px 10px 8px; }
  .admin-mobile-only { display: none !important; }
  #screen-admin .admin-head-actions .admin-icon-btn { display: none; }
  #screen-admin .admin-sidebar-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
    border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft);
    cursor: pointer; transition: transform .2s, border-color .15s;
  }
  #screen-admin .admin-sidebar-toggle-btn:hover { border-color: var(--blue); color: var(--blue-deep); }

  #screen-admin .admin-sidebar-nav {
    flex: 1; min-height: 0;
    flex-direction: column; gap: 2px;
    padding: 12px 12px;
    overflow-x: hidden; overflow-y: auto;
  }
  .admin-nav-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
  .admin-nav-group-label {
    display: block;
    font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: var(--ink-faint);
    padding: 6px 13px 4px;
  }
  #screen-admin .admin-nav-btn {
    width: 100%;
    justify-content: flex-start; gap: 12px;
    padding: 10px 13px;
    border-radius: 13px;
    border: 1.5px solid transparent;
    background: transparent;
    font-size: 13.5px;
  }
  #screen-admin .admin-nav-btn i    { font-size: 19px; width: 24px; text-align: center; flex-shrink: 0; }
  #screen-admin .admin-nav-btn span { font-size: 13.5px; }
  #screen-admin .admin-nav-btn:hover:not(.active) { background: var(--surface); border-color: var(--line); }
  #screen-admin .admin-nav-badge { display: inline-flex; margin-left: auto; }

  #screen-admin .admin-sidebar-footer {
    display: block; flex-shrink: 0;
    padding: 12px; border-top: 1px solid var(--line);
  }
  .admin-user-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; margin-bottom: 8px;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 13px;
    min-width: 0;
  }
  .admin-user-avatar {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
    color: #fff; font-weight: 800; font-size: 13px; font-family: 'Baloo 2', sans-serif;
    display: flex; align-items: center; justify-content: center;
  }
  .role-ppc .admin-user-avatar { background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%); }
  .role-dev .admin-user-avatar { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%); }
  .admin-user-meta { min-width: 0; }
  .admin-user-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-user-role { font-size: 10.5px; color: var(--ink-soft); margin-top: 1px; }
  #screen-admin .admin-logout-full {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; border-radius: 12px;
    border: 1.5px solid #F3A6A6; background: var(--red-bg); color: var(--red-text);
    font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .16s;
  }
  #screen-admin .admin-logout-full:hover { background: var(--red); border-color: var(--red-deep); color: #fff; }
  #screen-admin .admin-logout-full.admin-back-btn { border-color: #F7C77A; background: var(--orange-bg); color: var(--orange-text); }
  #screen-admin .admin-logout-full.admin-back-btn:hover { background: var(--orange); color: #fff; }

  /* topbar */
  #screen-admin .admin-topbar {
    grid-column: 2; grid-row: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 0 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    min-width: 0;
  }
  .admin-topbar-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
  .admin-topbar-icon {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
    color: #fff; font-size: 21px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(43,188,255,0.25);
  }
  .role-ppc .admin-topbar-icon { background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%); box-shadow: 0 6px 14px rgba(246,166,35,0.25); }
  .role-dev .admin-topbar-icon { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%); box-shadow: 0 6px 14px rgba(246,166,35,0.25); }
  .admin-topbar-head { min-width: 0; }
  .admin-topbar-title { font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.15; }
  .admin-topbar-sub { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .admin-topbar-date {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 12px;
    background: var(--surface); border: 1.5px solid var(--line);
    font-size: 12.5px; font-weight: 600; color: var(--ink);
  }
  .admin-topbar-date i { color: var(--blue-deep); font-size: 16px; }

  /* content */
  #screen-admin .admin-main {
    grid-column: 2; grid-row: 2;
    height: auto; min-height: 0;
    overflow-y: auto;
    background: var(--bg);
  }
  #screen-admin .admin-pane-inner { padding: 22px 28px 44px; max-width: none; }

  /* the topbar names the tab, so the pane's own title is redundant on desktop:
     hide it, keep the row's action buttons (right-aligned), and drop the row
     entirely when the title was all it held */
  #screen-admin .admin-pane-inner > .section-row:first-child .section-title { display: none; }
  #screen-admin .admin-pane-inner > .section-row:first-child { justify-content: flex-end; margin-bottom: 14px !important; }
  #screen-admin .admin-pane-inner > .section-row:first-child:not(:has(button, a, select, input, .lp-month-nav)) { display: none; }

  /* collapsed rail */
  #screen-admin.sidebar-collapsed .admin-sidebar-head { flex-direction: column; justify-content: center; gap: 6px; padding: 8px 6px; }
  #screen-admin.sidebar-collapsed .admin-logo { font-size: 13px; letter-spacing: 1px; padding: 5px 6px 6px; }
  #screen-admin.sidebar-collapsed .admin-sidebar-text,
  #screen-admin.sidebar-collapsed .admin-nav-group-label { display: none; }
  #screen-admin.sidebar-collapsed .admin-sidebar-toggle-btn { transform: rotate(180deg); }
  #screen-admin.sidebar-collapsed .admin-nav-btn { justify-content: center; padding: 11px 6px; position: relative; }
  #screen-admin.sidebar-collapsed .admin-nav-btn span:not(.admin-nav-badge) { display: none; }
  #screen-admin.sidebar-collapsed .admin-nav-badge { position: absolute; top: 3px; right: 3px; min-width: 10px; height: 10px; padding: 0; font-size: 0; }
  #screen-admin.sidebar-collapsed .admin-user-card { justify-content: center; padding: 8px; }
  #screen-admin.sidebar-collapsed .admin-logout-full { padding: 10px 0; }
}

/* ---------- ADMIN DASHBOARD (redesign 2026-10) ---------- */
.dash-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.dash-kpi {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm);
  min-width: 0; transition: transform .15s, box-shadow .15s;
}
.dash-kpi[role="button"] { cursor: pointer; }
.dash-kpi[role="button"]:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.dash-kpi-icon { width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 21px; }
.dash-kpi-body { min-width: 0; }
.dash-kpi-val { font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.dash-kpi-of { font-size: 15px; color: var(--ink-faint); font-weight: 700; }
.dash-kpi-label { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpi-sub { font-size: 11px; color: var(--ink-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-blue   .dash-kpi-icon { background: var(--blue-bg);   color: var(--blue-deep); }
.kpi-green  .dash-kpi-icon { background: var(--green-bg);  color: var(--green-deep); }
.kpi-orange .dash-kpi-icon { background: var(--orange-bg); color: var(--orange-deep); }
.kpi-pink   .dash-kpi-icon { background: var(--pink-bg);   color: var(--pink-deep); }
.kpi-blue   { border-left: 4px solid var(--blue); }
.kpi-green  { border-left: 4px solid var(--green); }
.kpi-orange { border-left: 4px solid var(--orange); }
.kpi-pink   { border-left: 4px solid var(--pink); }
.dash-mini-stat { font-size: 12px; color: var(--ink-soft); padding: 6px 12px; border-radius: 10px; cursor: pointer; user-select: none; transition: opacity .15s, box-shadow .15s; }
.dash-mini-stat:hover { opacity: .8; }
.dash-mini-stat b { font-family: 'Baloo 2', sans-serif; font-size: 19px; margin-right: 3px; }
.dash-mini-stat.ok  { background: var(--green-bg); } .dash-mini-stat.ok b  { color: var(--green-deep); }
.dash-mini-stat.bad { background: var(--red-bg); }   .dash-mini-stat.bad b { color: var(--red-deep); }
.dash-mini-stat.pasif { background: #ECEFF1; } .dash-mini-stat.pasif b { color: #455A64; }
/* Click-to-filter state (Yuran Tracking's 3 stat chips, added 2026-10-09) —
   same inset-ring convention as .eh-filter-pill.active/.admin-branch-pill.active. */
/* Multi-select revision (2026-10-09): all chips ON by default; a switched-OFF chip is dimmed + struck through. */
.dash-mini-stat.off { opacity: .4; }
.dash-mini-stat.off .dms-lbl { text-decoration: line-through; } /* line through the words only, not the number */
.dash-mini-stat.reset { background: var(--blue-bg); color: var(--blue-deep); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.dash-mini-stat.off:hover { opacity: .6; }
.dash-mini-stat.active { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.dash-mini-stat.ok.active    { box-shadow: inset 0 0 0 1.5px var(--green-deep); }
.dash-mini-stat.bad.active   { box-shadow: inset 0 0 0 1.5px var(--red-deep); }
.dash-mini-stat.pasif.active { box-shadow: inset 0 0 0 1.5px #455A64; }
#admin-pane-dashboard .card-title { font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 800; color: var(--ink); }
#admin-pane-dashboard .card-title > i, #admin-pane-dashboard .card-title span > i { color: var(--blue-deep); }

@media (min-width: 768px) {
  .dash-kpis { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
  .admin-pane-inner#admin-pane-dashboard { max-width: none; }
  .dash-grid {
    display: grid; gap: 16px; align-items: stretch;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "y yp" "ord rank" "meja meja";
  }
  #dash-yuran-tracking      { grid-area: y; }
  #dash-yuran-tracking-prev { grid-area: yp; }
  #dash-order-tracking      { grid-area: ord; }
  #dash-ranking-modul       { grid-area: rank; }
  #dash-meja-overview       { grid-area: meja; }
  .dash-grid > div > .card { height: 100%; margin: 0 !important; padding: 18px; }
  .dash-scroll-area { max-height: 380px; }
}
@media (min-width: 1280px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "y yp ord" "rank meja meja";
  }
}
/* phone: branch selector scrolls sideways instead of stacking */
@media (max-width: 767px) {
  #screen-admin .admin-branch-selector { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  #screen-admin .admin-branch-pill { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- ADMIN MURID — desktop master/detail (redesign 2026-10) ---------- */
.amt-layout { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
.amt-side {
  position: sticky; top: 0;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 12px; box-shadow: var(--shadow-sm);
  max-height: calc(100vh - 140px); overflow-y: auto;
}
.amt-side-title { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-faint); padding: 4px 8px 6px; }
.amt-mt-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 11px; border: 1.5px solid transparent;
  background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink); transition: all .15s;
}
.amt-mt-item:hover:not(.active) { background: var(--bg); }
.amt-mt-item.active { background: var(--blue-bg); border-color: var(--blue); color: var(--blue-deep); }
.amt-mt-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.amt-mt-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amt-mt-name small { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
.amt-mt-count { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); background: var(--bg); border-radius: 999px; padding: 2px 9px; }
.amt-mt-item.active .amt-mt-count { background: #fff; color: var(--blue-deep); }

.amt-panel { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); min-width: 0; overflow: hidden; }
.amt-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.amt-panel-head b { font-family: 'Baloo 2', sans-serif; font-size: 16px; color: var(--ink); display: block; line-height: 1.1; }
.amt-panel-head span { font-size: 12px; color: var(--ink-soft); }
.amt-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.amt-legend span, .amt-yuran { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.amt-legend i, .amt-yuran i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.amt-table-wrap { overflow-x: auto; }
.amt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.amt-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #F7F8FC; color: var(--ink-soft);
  font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.amt-table td { padding: 9px 14px; border-bottom: 1px solid #EEF0F6; vertical-align: middle; color: var(--ink); }
.amt-row { transition: background .12s; }
.amt-row:hover { background: #F7FAFF; }
.amt-row.is-pasif { opacity: .62; }
.amt-row.is-selected { background: var(--red-bg); }
.amt-row.is-sub td { background: #FBFBFD; }
.amt-row.is-sub .amt-name { font-weight: 500; color: var(--ink-soft); }
.amt-group td { background: var(--bg); font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 13.5px; color: var(--ink); padding: 9px 14px; border-bottom: 1px solid var(--line); }
.amt-group .amt-mt-dot { margin-right: 8px; vertical-align: 1px; }
.amt-group small { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 11.5px; color: var(--ink-soft); margin-left: 8px; }
.amt-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.amt-avatar { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; background: var(--blue-bg); color: var(--blue-deep); font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.amt-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #ccc; background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; }
.amt-check.on { background: var(--red); border-color: var(--red); }
.amt-name-meta { min-width: 0; }
.amt-name { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.amt-sub { font-size: 11px; color: var(--ink-soft); }
.amt-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.amt-tag-grey { background: #ECEFF1; color: #455A64; }
.amt-tag-blue { background: var(--blue-bg); color: var(--blue-text); }
.amt-pill { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 8px; background: var(--orange-bg); color: var(--orange-text); white-space: nowrap; }
.amt-c-modul { font-weight: 600; white-space: nowrap; }
.amt-sib { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pink-text); font-weight: 600; max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amt-muted { color: var(--ink-faint); }
.amt-c-act { text-align: right; width: 1%; white-space: nowrap; }
.amt-actions { display: inline-flex; gap: 5px; }
.amt-icon-btn { width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; background: #fff; transition: all .15s; }
.amt-icon-btn.tone-green  { border-color: #BFE8C4; color: var(--green-deep);  background: var(--green-bg); }
.amt-icon-btn.tone-blue   { border-color: #A9DDF7; color: var(--blue-deep);   background: var(--blue-bg); }
.amt-icon-btn.tone-orange { border-color: #F7D199; color: var(--orange-deep); background: var(--orange-bg); }
.amt-icon-btn.tone-red    { border-color: #F5B5B5; color: var(--red-deep);    background: var(--red-bg); }
.amt-icon-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(30,34,53,0.12); }
.amt-empty { text-align: center; color: var(--ink-faint); padding: 30px !important; }
.amt-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; padding: 14px; }
.amt-card-grid > .card { margin: 0 !important; }
@media (min-width: 768px) and (max-width: 1099px) {
  .amt-layout { grid-template-columns: 1fr; }
  .amt-side { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 4px; }
  .amt-side-title { display: none; }
  .amt-mt-item { width: auto; }
  /* Murid table only (2026-11-04): this used to hide the 5th HEADER of every .amt-table at split-screen widths while
     the 5th body cells stayed, shifting the headers of TeleChat Senarai / HQ / Calendar / Edit History tables */
  .amt-c-sib, .amt-murid th:nth-child(5) { display: none; }
}
.amt-table { table-layout: fixed; }
.amt-table td { overflow: hidden; text-overflow: ellipsis; }
.amt-c-act { width: auto; }
.amt-name { flex-wrap: nowrap; }
.amt-name-meta { min-width: 0; overflow: hidden; }
.amt-name-meta .amt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.amt-name-meta .amt-name .amt-tag { margin-left: 6px; vertical-align: 1px; }
.amt-sib { display: flex; max-width: none; font-size: 11px; margin-top: 1px; }
.amt-layout { grid-template-columns: 228px 1fr; }
#screen-admin .amt-table thead th.amt-c-act { text-align: right; }

/* ---------- ADMIN PENGGUNA MT — desktop table (redesign 2026-10) ---------- */
@media (min-width: 768px) {
  #admin-pengguna-list { display: block !important; }
}
.apg-count { font-size: 12px; color: var(--ink-soft); }
.apg-count b { font-family: 'Baloo 2', sans-serif; font-size: 16px; color: var(--ink); }
.apg-bar { height: 5px; border-radius: 99px; background: var(--grey-bg); margin-top: 4px; overflow: hidden; max-width: 130px; }
.apg-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--green)); }
.apg-select { width: 100%; padding: 7px 9px; border-radius: 9px; border: 1.5px solid var(--line); background: #fff; font-family: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.apg-select:focus { outline: none; border-color: var(--blue); }
.apg-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 9px; border: 1.5px solid; font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all .15s; }
.apg-btn i { font-size: 14px; }
.apg-btn.tone-orange { border-color: #F7D199; color: var(--orange-text); background: var(--orange-bg); }
.apg-btn.tone-pink   { border-color: #F5A9D6; color: var(--pink-text);   background: var(--pink-bg); }
.apg-btn.tone-blue   { border-color: #A9DDF7; color: var(--blue-text);   background: var(--blue-bg); }
.apg-btn.tone-red    { border-color: #F5B5B5; color: var(--red-text);    background: var(--red-bg); }
.apg-btn.tone-green  { border-color: #BFE8C4; color: var(--green-text);  background: var(--green-bg); }
.apg-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(30,34,53,0.12); }
.apg-table td { padding-top: 11px; padding-bottom: 11px; }
#screen-admin .amt-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- ADMIN shared toolbar (search + controls in one row) ---------- */
.admin-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-search {
  flex: 1 1 260px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 40px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.admin-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.admin-search i { color: var(--ink-faint); font-size: 17px; }
.admin-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--ink); }
.admin-toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-month-input { height: 40px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); font-family: inherit; font-size: 13px; color: var(--ink); }
.admin-toolbar .admin-chip-btn { height: 40px; }

/* ---------- ADMIN ORDERS — status board (redesign 2026-10) ---------- */
@media (min-width: 768px) {
  #screen-admin #admin-orders-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
  #screen-admin #admin-orders-list > .lb-card { margin: 0; border-radius: var(--r-md); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-height: 220px; }
  #screen-admin #admin-orders-list > .lb-card > .lb-card-detail { flex: 1; max-height: calc(100vh - 320px); overflow-y: auto; }
  #screen-admin #admin-orders-list > .lb-card > .lb-card-head { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  #screen-admin #admin-orders-list > .lb-card > .lb-card-head .lb-card-nama { font-family: 'Baloo 2', sans-serif; font-size: 15px; font-weight: 800; }
}
@media (min-width: 1200px) {
  #screen-admin #admin-orders-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* desktop: a pane's action buttons share the row with the branch selector instead of taking a row of their own */
@media (min-width: 768px) {
  #screen-admin .admin-pane-inner { position: relative; }
  #screen-admin .admin-pane-inner:has(> .section-row:first-child + .admin-branch-selector) > .section-row:first-child {
    position: absolute; top: 22px; right: 28px; margin: 0 !important; z-index: 2;
  }
}

/* ---------- ADMIN EDIT HISTORY (redesign 2026-10) ---------- */
.eh-filter-group { display: flex; align-items: center; gap: 8px; }
.eh-filter-label { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); }
.eh-seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; }
#screen-admin .eh-filter-pill { border: none; background: transparent; color: var(--ink-soft); padding: 6px 11px; border-radius: 9px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#screen-admin .eh-filter-pill:hover:not(.active) { background: var(--grey-bg); color: var(--ink); }
#screen-admin .eh-filter-pill.active { background: var(--blue-bg); color: var(--blue-deep); box-shadow: inset 0 0 0 1.5px var(--blue); border-color: transparent; }
.eh-table td { vertical-align: top; }
.eh-date { font-weight: 700; font-size: 12.5px; }
.eh-act { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 7px; }
.eh-ent { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.eh-label { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-details { font-size: 12px; color: var(--ink-soft); line-height: 1.45; white-space: normal; }
.eh-by { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
.eh-by i { color: var(--ink-faint); }
@media (max-width: 767px) { .eh-filter-group { width: 100%; overflow-x: auto; } .eh-seg { flex-wrap: nowrap; } }

/* ---------- ADMIN sheet tables: Laporan Bulanan / Jadual Outlet (redesign 2026-10) ---------- */
#screen-admin .section-row .btn-outline { width: auto; display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; }
#screen-admin .section-row .btn-outline:hover { border-color: var(--blue); background: var(--blue-bg); }
#screen-admin .lbt-sheet { border: 1.5px solid var(--line); border-radius: 0 var(--r-md) var(--r-md) var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; background: var(--surface); }
#screen-admin .lbt-table thead th { background: #F7F8FC; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
#screen-admin .lbt-table tbody td { border-bottom: 1px solid #EEF0F6; }
#screen-admin .lbt-table tbody tr:nth-child(even) td { background: #FBFCFE; }
#screen-admin .lbt-row:hover td { background: #F2F8FF; }
#screen-admin .lbt-row-submitted td { background: #F2FBF3; }
#screen-admin .lbt-module-chip { background: var(--blue-bg); color: var(--blue-text); }
#screen-admin .lbt-persesi-btn { color: var(--blue-deep); border-color: #A9DDF7; border-radius: 8px; }
#screen-admin .lbt-persesi-btn:hover { background: var(--blue-bg); }
#screen-admin .lbt-folder-tab { border-radius: 12px 12px 0 0; font-family: inherit; }
#screen-admin .lbt-folder-tab:hover { background: var(--blue-bg); color: var(--blue-deep); }
#screen-admin .lbt-folder-tab.active { color: var(--blue-deep); border-color: var(--line); }
#screen-admin .lbt-folder-tab.active .lbt-folder-count { background: var(--blue-bg); color: var(--blue-deep); border-color: #A9DDF7; }
#screen-admin .lbt-baki { word-break: normal; overflow-wrap: anywhere; }
#screen-admin .jo-table th, #screen-admin .jo-table td { border-color: #E6E8F0; }
#screen-admin .jo-sticky-head { background: #F1F3F9; color: var(--ink); font-weight: 800; }
#screen-admin .jo-table tbody tr:hover td { background: #F2F8FF; }
/* LB header labels: no uppercase/letter-spacing in these narrow columns (words were splitting) */
#screen-admin .lbt-table thead th { text-transform: none; letter-spacing: 0; font-size: 11px; word-break: keep-all; hyphens: none; line-height: 1.3; }

/* ---------- ADMIN LAIN-LAIN + PROFIL — desktop layout (redesign 2026-10) ---------- */
@media (min-width: 768px) {
  #screen-admin #admin-pane-tetapan { max-width: none; }
  #screen-admin #admin-pane-tetapan:not([style*="display: none"]):not([style*="display:none"]) {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start;
  }
  #screen-admin #admin-pane-tetapan > .card,
  #screen-admin #admin-pane-tetapan > div[style*="grid"] { margin: 0 !important; }
  #screen-admin #admin-pane-tetapan > .card:first-of-type { grid-column: 1; grid-row: 1 / span 2; }
  #screen-admin #admin-pane-tetapan > div[style*="grid"] { grid-column: 2; grid-row: 1; }
  #screen-admin #admin-pane-tetapan > .card:last-child { grid-column: 2; grid-row: 2; }

  #screen-admin #admin-pane-profile > .section-row + div {
    display: flex; align-items: center; gap: 16px; text-align: left !important;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
    padding: 18px 20px !important; margin-bottom: 16px;
  }
  #screen-admin #admin-pane-profile > .section-row + div > div:first-child { margin: 0 !important; flex-shrink: 0; }
  #screen-admin .profile-cards-grid { max-width: none; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
  #screen-admin .profile-cards-grid > .card { margin: 0; }
}
@media (min-width: 768px) {
  #screen-admin #admin-pane-tetapan > .card:first-of-type { grid-row: 1; }
  #screen-admin #admin-pane-tetapan > .card:last-child { grid-column: 1 / -1; grid-row: 2; }
  #screen-admin #admin-pane-profile > .section-row + div { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px; align-items: center; }
  #screen-admin #admin-pane-profile > .section-row + div > div:first-child { grid-row: 1 / span 2; }
  #screen-admin #admin-pane-profile > .section-row + div > div:nth-child(2) { align-self: end; font-family: 'Baloo 2', sans-serif; font-size: 20px !important; }
  #screen-admin #admin-pane-profile > .section-row + div > div:nth-child(3) { align-self: start; margin: 0 !important; }
}
@media (min-width: 768px) {
  #screen-admin .admin-pane-inner:has(> .section-row:first-child + div > .admin-branch-selector) > .section-row:first-child {
    position: absolute; top: 22px; right: 28px; margin: 0 !important; z-index: 2;
  }
}
/* Laporan Bulanan: its header (month nav + 3 export buttons) is too wide to share a row with the
   branch selector — in split-screen it overlapped. At every width the header is its own row and the
   branch selector sits below it, never side by side (2026-10-09, direct request). */
@media (min-width: 768px) {
  #screen-admin #admin-pane-laporanBulanan:has(> .section-row:first-child + div > .admin-branch-selector) > .section-row:first-child {
    position: static; margin: 0 0 14px !important;
  }
  #screen-admin #admin-pane-laporanBulanan > .section-row:first-child > div { flex-wrap: wrap; justify-content: flex-end; }
}

/* ---------- ADMIN dialogs on desktop (redesign 2026-10) ----------
   The admin dialogs are built as phone bottom-sheets (inline styles: overlay aligned to the bottom,
   20px top-only corners, a drag handle). On a desktop they become centred dialogs; the global search
   becomes a command-palette card near the top instead of a full-height white column. Phones unchanged. */
@media (min-width: 768px) {
  body:has(#screen-admin.active) > div:is([style*="align-items:flex-end"],[style*="align-items: flex-end"]) { align-items: center !important; padding: 24px; }
  body:has(#screen-admin.active) > div:is([style*="align-items:flex-end"],[style*="align-items: flex-end"]) > div[style*="border-radius:20px 20px 0 0"] {
    border-radius: var(--r-lg) !important;
    box-shadow: 0 24px 70px rgba(30,34,53,0.28) !important;
    animation: lo-pop .18s ease !important;
    max-width: 560px !important;
  }
  body:has(#screen-admin.active) div[style*="width:36px;height:4px"] { display: none !important; }
  body:has(#screen-admin.active) > div:is([style*="align-items:flex-end"],[style*="align-items: flex-end"]) > div[style*="border-radius:20px 20px 0 0"] > div[style*="font-size:15px;font-weight:700"] {
    font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; font-size: 18px !important; font-weight: 800 !important; color: var(--ink) !important;
  }

  #_gsearch-overlay { background: rgba(30,34,53,0.45) !important; backdrop-filter: blur(3px); }
  #_gsearch-overlay > div {
    height: auto !important; max-height: 72vh; max-width: 640px !important;
    margin: 10vh auto 0 !important; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: 0 24px 70px rgba(30,34,53,0.30) !important;
  }
  #_gsearch-overlay > div > div:first-child { background: var(--surface) !important; padding: 16px 18px !important; }
  #_gsearch-overlay #_gsearch-results { min-height: 160px; }
}

/* ---------- EXPORT TELECHAT (js/admin/telechat.js, 2026-10-09) ---------- */
.tc-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 16px; margin-bottom: 14px; }
.tc-card-head { display: flex; align-items: center; gap: 8px; font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); margin-bottom: 10px; }
.tc-card-head i { color: var(--blue-deep); font-size: 18px; }
.tc-empty { text-align: center; color: var(--ink-faint); padding: 26px 12px; font-size: 13px; }
.tc-empty i { font-size: 22px; }
.tc-empty-ok { color: var(--green-text); }
.tc-empty-ok i { font-size: 34px; display: block; margin-bottom: 6px; }
.tc-muted { color: var(--ink-faint); }
.tc-nowrap { white-space: nowrap; }
.tc-red { color: var(--red-deep); }
.tc-block { display: block; }
.tc-busy { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 9000; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-md); }

.tc-upload-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tc-upload-grid > .tc-card { margin: 0; }
.tc-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 240px; border: 2px dashed #B9C3DA; background: linear-gradient(180deg, #F7FBFF 0%, var(--surface) 100%); transition: border-color .15s, background .15s; }
.tc-drop.is-over { border-color: var(--blue); background: var(--blue-bg); }
.tc-drop-icon { width: 64px; height: 64px; border-radius: 20px; background: var(--blue-bg); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; font-size: 32px; }
.tc-drop-title { font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; font-size: 19px; font-weight: 800; color: var(--ink); }
.tc-drop-sub { font-size: 13px; color: var(--ink-soft); }
.tc-drop-note { font-size: 11.5px; color: var(--ink-faint); }
.tc-help ol { margin: 0 0 12px; padding-left: 20px; font-size: 13px; color: var(--ink); line-height: 1.85; }
.tc-paste { border-top: 1px solid var(--line); padding-top: 10px; }
.tc-paste summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--blue-deep); display: flex; align-items: center; gap: 6px; }
.tc-paste-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tc-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 13px; color: var(--ink); background: var(--surface); }
.tc-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
textarea.tc-input { resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }

.tc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; }
.tc-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(30,34,53,0.10); }
.tc-btn-primary { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); border-color: transparent; color: #fff; }
.tc-btn-blue { background: var(--blue-bg); border-color: #A9DDF7; color: var(--blue-deep); }
.tc-btn-green { background: var(--green-bg); border-color: #BFE8C4; color: var(--green-deep); }
.tc-btn-ghost { background: transparent; }

.tc-toolbar { gap: 8px; }
.tc-source { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); min-width: 0; flex-wrap: wrap; }
.tc-source > span:first-of-type { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-toolbar-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tc-chip-green { border-color: #BFE8C4; background: var(--green-bg); color: var(--green-text); }
.tc-chip-green i { color: var(--green-deep); }
.tc-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tc-pill-orange { background: var(--orange-bg); color: var(--orange-text); }
.tc-pill-green { background: var(--green-bg); color: var(--green-text); }

.tc-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tc-notes:empty { display: none; }
.tc-note { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-family: inherit; font-size: 12px; color: var(--ink-soft); cursor: default; }
button.tc-note { cursor: pointer; }
button.tc-note:hover { border-color: var(--blue); }
.tc-note u { color: var(--blue-deep); font-weight: 700; text-decoration: none; }
.tc-note-blue { background: var(--blue-bg); border-color: #A9DDF7; color: var(--blue-text); }
.tc-note-warn { background: var(--orange-bg); border-color: #F7C77A; color: var(--orange-text); font-weight: 600; }

.tc-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; border-bottom: 1.5px solid var(--line); overflow-x: auto; }
.tc-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-soft); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1.5px; white-space: nowrap; }
.tc-tab:hover { color: var(--ink); }
.tc-tab.active { color: var(--blue-deep); border-bottom-color: var(--blue); }
.tc-tab-badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 800; text-align: center; }
.tc-tabs-hint { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; padding-left: 12px; display: inline-flex; align-items: center; gap: 5px; }

/* Kotak MT grid */
.tc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.tc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tc-legend-hint { margin-left: auto; color: var(--ink-faint); font-weight: 500; }
.tc-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.tc-we-sw { background: #F1F2F7; border: 1px solid var(--line); }
.tc-mt-box { padding: 0; overflow: hidden; }
.tc-mt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); border-left: 5px solid var(--mtc, var(--blue)); background: #FAFBFE; }
.tc-mt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mtc, var(--blue)); display: inline-block; flex-shrink: 0; }
.tc-mt-name { font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 15.5px; color: var(--ink); }
.tc-mt-user { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--grey-bg); color: var(--grey-text); }
.tc-mt-stats { margin-left: auto; font-size: 12px; color: var(--ink-soft); }
.tc-mt-stats b { color: var(--ink); }
.tc-grid-wrap { overflow-x: auto; }
.tc-grid { border-collapse: separate; border-spacing: 0; font-size: 12px; width: 100%; }
.tc-grid th, .tc-grid td { border-bottom: 1px solid #EEF0F6; border-right: 1px solid #F1F2F7; padding: 0; text-align: center; height: 32px; }
.tc-grid thead th { background: #F7F8FC; color: var(--ink-soft); font-size: 10.5px; font-weight: 800; }
.tc-grid .tc-bil { width: 30px; min-width: 30px; color: var(--ink-faint); position: sticky; left: 0; background: var(--surface); z-index: 1; }
.tc-grid .tc-nama { text-align: left; padding: 0 10px; min-width: 190px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--ink); position: sticky; left: 30px; background: var(--surface); z-index: 1; box-shadow: 2px 0 0 #EEF0F6; }
.tc-grid thead .tc-bil, .tc-grid thead .tc-nama { background: #F7F8FC; z-index: 3; color: var(--ink-soft); }
.tc-grid .tc-day { min-width: 30px; width: 30px; line-height: 1.15; }
.tc-grid .tc-day span { display: block; font-size:10px; font-weight: 700; color: var(--ink-faint); }
.tc-grid .tc-day.is-we { background: #ECEEF6; }
.tc-grid .tc-cell.is-we { background: #F6F7FB; }
.tc-grid .tc-tot { min-width: 44px; font-weight: 800; color: var(--ink); background: #FAFBFE; }
.tc-grid tbody tr:hover td { background-color: #F7FAFF; }
.tc-k { width: 26px; height: 24px; border-radius: 6px; border: none; font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer; padding: 0; transition: transform .1s; }
.tc-k:hover { transform: scale(1.15); }
.tc-k-ok { background: #C8F2CC; color: #1B6E27; }
.tc-k-ganti { background: #FFE0A6; color: #8A5300; }
.tc-k-burn { background: #FFC9C9; color: #A61B1B; }
.tc-k-praktikal { background: #CDEBFF; color: #0B6EA6; }
.tc-k-semak { background: #FFF59D; color: #6B5C00; box-shadow: inset 0 0 0 2px #E8C900; }

/* lists */
.tc-table-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; }
.amt-table.tc-list, .amt-table.tc-sum, .amt-table.tc-saved, .amt-table.tc-match-tbl { table-layout: auto; }
.tc-list td, .tc-saved td { white-space: nowrap; }
.tc-list td small, .tc-c-date small { display: block; font-size: 10.5px; color: var(--ink-faint); font-weight: 500; }
.tc-c-bil { width: 1%; color: var(--ink-faint); }
.tc-c-num { text-align: center !important; }
.tc-c-act { text-align: right; width: 1%; }
.tc-row-diganti td, .tc-row-pendua td, .tc-row-abaikan td { color: var(--ink-faint); text-decoration: line-through; }
.tc-row-diganti td:nth-last-child(-n+2), .tc-row-pendua td:nth-last-child(-n+2), .tc-row-abaikan td:nth-last-child(-n+2) { text-decoration: none; }
.tc-row-semak td { background: #FFFDE7; }
.tc-tag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.tc-tag-grey { background: #ECEFF1; color: #455A64; }
.tc-tag-orange { background: var(--orange-bg); color: var(--orange-text); }
.tc-tag-red { background: var(--red-bg); color: var(--red-text); }
.tc-tag-blue { background: var(--blue-bg); color: var(--blue-text); }
.tc-st { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 8px; white-space: nowrap; }
.tc-st-ok { background: var(--green-bg); color: var(--green-text); }
.tc-st-semak { background: #FFF59D; color: #6B5C00; }
.tc-st-diganti, .tc-st-pendua, .tc-st-abaikan { background: var(--grey-bg); color: var(--grey-text); }
.tc-sum tfoot td { font-weight: 800; background: var(--bg); padding: 10px 14px; }

/* Perlu Semak */
.tc-semak-intro { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.tc-semak { display: grid; grid-template-columns: 1fr; gap: 14px; border-left: 5px solid #E8C900; }
.tc-semak-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.tc-semak-head span { font-size: 11.5px; color: var(--ink-faint); }
.tc-warns { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tc-warns li { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: #7A5A00; background: #FFF8D6; border-radius: 8px; padding: 6px 9px; }
.tc-warns i { color: #C99A00; margin-top: 2px; }
.tc-semak-rows { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 10px; }
.tc-semak-rows td { padding: 5px 6px; border-bottom: 1px solid #F1F2F7; }
.tc-semak-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tc-semak-msg { background: #F4F6FB; border-radius: 12px; padding: 10px 12px; min-width: 0; }
.tc-semak-msg-label { font-size: 11px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.tc-semak-msg pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--ink); line-height: 1.5; max-height: 280px; overflow-y: auto; }

/* modal (centred on desktop, bottom sheet on phone) */
.tc-modal-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(30,34,53,0.45); display: flex; align-items: flex-end; justify-content: center; }
.tc-modal { background: var(--surface); width: 100%; max-height: 92vh; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; box-shadow: 0 24px 70px rgba(30,34,53,0.28); }
.tc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 800; color: var(--ink); }
.tc-x { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--grey-bg); color: var(--ink-soft); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tc-modal-body { padding: 4px 18px 14px; overflow-y: auto; }
.tc-modal-split { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tc-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.tc-form { display: flex; flex-direction: column; gap: 9px; }
.tc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.tc-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tc-form label.tc-check, label.tc-check { flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.tc-hint { font-size: 11.5px; color: var(--ink-soft); }
.tc-hint-warn { color: var(--orange-text); }
.tc-multi-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F1F2F7; font-size: 13px; }
.tc-sub-head { font-weight: 800; font-size: 13px; color: var(--ink); margin: 16px 0 4px; }
.tc-ign { margin-bottom: 10px; background: #F4F6FB; border-radius: 10px; padding: 8px 10px; }
.tc-ign pre { margin: 0; white-space: pre-wrap; font-size: 12px; font-family: ui-monospace, Consolas, monospace; }

@media (min-width: 768px) {
  .tc-upload-grid { grid-template-columns: 1.15fr 1fr; }
  .tc-semak { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .tc-modal-overlay { align-items: center; padding: 24px; }
  .tc-modal { max-width: 520px; border-radius: var(--r-lg); max-height: 88vh; }
  .tc-modal.is-wide { max-width: 860px; }
  .tc-modal.is-wide .tc-modal-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash-kpis.tc-kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .tc-tabs-hint, .tc-legend-hint { display: none; }
  .tc-toolbar-right { margin-left: 0; width: 100%; }
  .tc-toolbar-right .admin-chip-btn { flex: 1; justify-content: center; }
  .tc-grid .tc-nama { min-width: 130px; max-width: 150px; }
}

/* Export TeleChat — Perlu Semak suggestions + Banding Persesi (2026-10-09) */
.tc-sr-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.tc-sr { border: 1px solid #EEF0F6; border-radius: 10px; padding: 8px 10px; background: #FCFCFE; }
.tc-sr-top { display: flex; align-items: center; gap: 12px; font-size: 12.5px; flex-wrap: wrap; }
.tc-sr-top b { flex: 1 1 200px; min-width: 0; }
.tc-sr-top .amt-icon-btn { width: 26px; height: 26px; font-size: 13px; }
.tc-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; }
.tc-sug:empty { display: none; }
.tc-sug-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1.5px solid #A9DDF7; background: var(--blue-bg); color: var(--blue-deep); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .15s; }
.tc-sug-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.tc-sug-btn.is-red { border-color: #F5B5B5; background: var(--red-bg); color: var(--red-deep); }
.tc-sug-btn.is-red:hover { background: var(--red); color: #fff; }
.tc-sug-all { margin: 4px 0 2px; }
.tc-sug-all small { font-weight: 600; opacity: .8; }

.tc-bd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tc-bd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-family: inherit; font-size: 12px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.tc-bd-chip b { color: var(--ink); }
.tc-bd-chip.active { border-color: var(--blue); background: var(--blue-bg); color: var(--blue-deep); }
.tc-bd { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 8px; white-space: nowrap; }
.tc-bd-red { background: var(--red-bg); color: var(--red-text); }
.tc-bd-orange { background: var(--orange-bg); color: var(--orange-text); }
.tc-bd-blue { background: var(--blue-bg); color: var(--blue-text); }
.tc-bd-green { background: var(--green-bg); color: var(--green-text); }
.tc-bd-chip.tc-bd-red, .tc-bd-chip.tc-bd-orange, .tc-bd-chip.tc-bd-blue, .tc-bd-chip.tc-bd-green { border-color: transparent; }
.tc-bd-chip.active.tc-bd-red, .tc-bd-chip.active.tc-bd-orange, .tc-bd-chip.active.tc-bd-blue, .tc-bd-chip.active.tc-bd-green { box-shadow: inset 0 0 0 2px currentColor; }
.tc-bd-table td { vertical-align: top; }
.tc-bd-table td.tc-bd-cell { white-space: normal; font-size: 12px; line-height: 1.55; min-width: 220px; }
.tc-bd-table td.tc-bd-cell .amt-icon-btn { width: 24px; height: 24px; font-size: 12px; vertical-align: middle; margin-left: 4px; }
.tc-bd-table td small { display: block; font-size: 10.5px; color: var(--ink-faint); font-weight: 500; margin-top: 3px; }
.tc-bd-grey { background: var(--grey-bg); color: var(--grey-text); }
.tc-bd-chip.tc-bd-grey { border-color: transparent; }
.tc-bd-chip.active.tc-bd-grey { box-shadow: inset 0 0 0 2px currentColor; }

/* Export TeleChat — Banding Persesi in the Laporan Persesi layout (2026-10-10) */
.tc-bd-mode { display: flex; gap: 6px; margin: -4px 0 12px; }
.tc-lp-wrap { display: flex; flex-direction: column; gap: 14px; }
.tc-lp-sheet { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; overflow-x: auto; box-shadow: var(--shadow-sm); }
.tc-lp-sheet td[onclick]:hover { filter: brightness(0.92); }
.tc-bd-teal { background: #D5F5EE; color: #0E7A67; }
.tc-bd-purple { background: #EEE6FB; color: #6A48B5; }
.tc-bd-chip.tc-bd-teal, .tc-bd-chip.tc-bd-purple { border-color: transparent; }
.tc-bd-chip.active.tc-bd-teal, .tc-bd-chip.active.tc-bd-purple { box-shadow: inset 0 0 0 2px currentColor; }

/* Export TeleChat — Baki Sesi ledger (2026-10-10) */
.amt-table.tc-bk-table { table-layout: auto; }
.tc-bk-table th, .tc-bk-table td { white-space: nowrap; }
.tc-bk-table .tc-bk-name { min-width: 180px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.tc-bk-table thead .tc-bk-name { z-index: 3; background: #F7F8FC; }
.tc-bk-table .tc-bk-name small { display: block; font-size: 10.5px; color: var(--ink-faint); }
.tc-bk-cell { text-align: center; padding: 6px 8px !important; cursor: pointer; position: relative; border-left: 1px solid #F1F2F7; line-height: 1.25; }
.tc-bk-cell b { display: block; font-size: 12.5px; }
.tc-bk-cell small { display: block; font-size: 10.5px; font-weight: 700; }
.tc-bk-cell:hover { filter: brightness(0.95); }
.tc-bk-cell.is-ok { background: #E8FBEA; color: #1B6E27; }
.tc-bk-cell.is-baki { background: #FFF1D6; color: #8A5300; }
.tc-bk-cell.is-lebih { background: #EEE6FB; color: #6A48B5; }
.tc-bk-cell.is-ign { background: #F1F2F7; color: #7A7E8C; }
.tc-bk-cell.is-pasif { background: #F1F2F7; color: var(--ink-faint); font-size: 11px; cursor: default; }
.tc-bk-cell.is-off { color: #D0D3DD; cursor: default; }
.tc-bk-new { position: absolute; top: 2px; right: 3px; font-style: normal; font-size:10px; font-weight: 800; color: var(--blue-deep); text-transform: uppercase; }
.tc-bk-total { text-align: center; border-left: 2px solid var(--line); line-height: 1.25; }
.tc-bk-total b { display: block; font-size: 14px; }
.tc-bk-total small { display: block; font-size: 10.5px; color: var(--ink-faint); }
.tc-bk-total.is-baki b { color: #C62828; }
.tc-bk-sw-ok { background: #C8F2CC; } .tc-bk-sw-baki { background: #FFE0A6; } .tc-bk-sw-lebih { background: #E4DAF7; } .tc-bk-sw-ign { background: #E7E9F2; }
.tc-bk-calc { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; }
.tc-bk-calc td { padding: 7px 8px; border-bottom: 1px solid #EEF0F6; }
.tc-bk-calc td:not(:first-child) { text-align: right; white-space: nowrap; }
.tc-bk-calc tr.is-total td { font-weight: 800; border-top: 2px solid var(--ink); }
.tc-bk-est { position: absolute; top: 1px; left: 4px; font-style: normal; font-size: 12px; font-weight: 800; color: #B45309; }
.tc-bk-est-l { color: #B45309; font-size: 14px; }
/* intro notes hold inline <b> and a right-aligned button: block flow, not flex */
.tc-semak-intro { display: block; line-height: 1.6; }
.tc-semak-intro > i { margin-right: 4px; }
.tc-semak-intro > .tc-btn { float: right; margin: -4px 0 4px 12px; }
.tc-semak-intro::after { content: ""; display: block; clear: both; }
.tc-bk-cell.is-guess { cursor: pointer; background: repeating-linear-gradient(135deg, #F1F2F7 0 6px, #E9EBF2 6px 12px); line-height: 1.15; }
.tc-bk-total.is-kredit b { color: #6A48B5; }

/* Export TeleChat — Kotak MT pakej + elaun (2026-10-10) */
.tc-grid .tc-pk { min-width: 46px; font-weight: 700; color: var(--ink-soft); font-size: 11px; }
.tc-grid .tc-rm { min-width: 74px; padding: 0 8px; font-weight: 800; color: #1B6E27; background: #F2FBF3; white-space: nowrap; }
.tc-grid tfoot td { height: 34px; background: #F7F8FC; border-top: 2px solid var(--line); }
.tc-grid .tc-rm-tot-l { text-align: right; padding-right: 12px; font-weight: 800; color: var(--ink); font-size: 12px; }
.tc-grid .tc-rm-tot { background: #C8F2CC; font-size: 13px; }
.tc-mt-rm { display: inline-flex; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--green-bg); color: var(--green-text); }
.tc-mt-rm b { color: var(--green-deep); }
.tc-grid .tc-rm { position: sticky; right: 0; z-index: 1; box-shadow: -2px 0 0 #EEF0F6; }
.tc-grid thead .tc-rm { z-index: 3; background: #F7F8FC; color: var(--ink-soft); }
.tc-grid .tc-day { min-width: 28px; width: 28px; }

/* MT Template — Punch Telegram (js/mt/punch_template.js, 2026-10-10) */
.pt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 15px; color: var(--ink); }
.pt-nav { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pt-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.pt-dow { text-align: center; font-size: 10.5px; font-weight: 800; color: var(--ink-faint); padding: 2px 0; }
.pt-day { min-height: 46px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: inherit; border: 1.5px solid transparent; background: transparent; }
.pt-day b { font-size: 13px; }
.pt-day small { font-size:10px; font-weight: 700; }
.pt-day.none { color: #C8CBD6; }
.pt-day.has { background: var(--blue-bg); border-color: #A9DDF7; color: var(--blue-deep); cursor: pointer; }
.pt-day.has.future { background: #F4F6FB; border-color: var(--line); color: var(--ink-soft); cursor: not-allowed; opacity: .55; }
.pt-nav[disabled] { opacity: .35; cursor: not-allowed; }
.pt-day.has:hover { filter: brightness(0.96); }
.pt-day.today { box-shadow: inset 0 0 0 2px var(--orange); }
.pt-day.sel { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.pt-loading { grid-column: 1 / -1; text-align: center; padding: 30px 0; color: var(--ink-faint); font-size: 13px; }
.pt-hint { font-size: 11.5px; color: var(--ink-soft); margin: 4px 0 12px; display: flex; gap: 5px; align-items: flex-start; }
.pt-hint.pt-warn { color: var(--orange-text); background: var(--orange-bg); border-radius: 10px; padding: 8px 10px; font-weight: 600; }
.pt-empty { text-align: center; color: var(--ink-faint); padding: 16px 0; font-size: 13px; }
.pt-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.pt-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; }
.pt-item input { width: 18px; height: 18px; accent-color: var(--blue-deep); flex-shrink: 0; }
.pt-item-name { flex: 1; font-weight: 700; font-size: 13px; color: var(--ink); min-width: 0; }
.pt-item-time { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.pt-item.off { opacity: .5; }
.pt-item.off .pt-item-name { text-decoration: line-through; }
.pt-tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.pt-tag.is-own { background: var(--orange-bg); color: var(--orange-text); }
.pt-tag.is-other { background: var(--purple-bg); color: var(--purple-text); }
.pt-text { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.55; padding: 10px; resize: vertical; }
.pt-fmt { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.pt-fmt-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-family: inherit; font-size: 12px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.pt-fmt-btn.on { border-color: var(--blue); background: var(--blue-bg); color: var(--blue-deep); }

/* ---------- Franchise lock (js/shared/org_lock.js, 2026-10-12) ----------
   Banner reuses .dv-banner (developer.css). Full-screen notice for MT/PPC of a frozen franchise. */
.org-lock-banner { align-items: center; margin: 0 0 14px; }
.org-lock-ov { position: fixed; inset: 0; z-index: 5000; background: rgba(20, 16, 40, .55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.org-lock-box { background: var(--surface, #fff); border-radius: 18px; max-width: 360px; width: 100%; padding: 26px 22px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.org-lock-ic { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--red-bg); color: var(--red-text); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.org-lock-title { font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.org-lock-msg { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 18px; }
.org-lock-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface, #fff); font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }

/* Branch (cawangan) header stays put while the page scrolls (2026-10-18). Phones: it parks just under the
   sticky top bar (--admin-sticky-top is measured in main.js: _adminSyncStickyTop); desktop: top of the window.
   The tab wrappers around it (#admin-murid-branch-bar ...) become display:contents so the strip is sticky
   against the whole pane instead of a box exactly as tall as itself. */
#screen-admin .admin-branch-sticky {
  position: sticky; top: var(--admin-sticky-top, 0px); z-index: 20;
  background: var(--bg); margin: 0 -14px 6px; padding: 8px 14px 6px;
}
#screen-admin .admin-branch-sticky .admin-branch-selector { margin-bottom: 0; }
#admin-murid-branch-bar, #admin-pengguna-branch-bar, #jo-branch-bar, #tc-branch-bar, #admin-eh-branch-bar, #admin-lb-branch-bar { display: contents !important; }
@media (min-width: 1024px) {
  #screen-admin .admin-branch-sticky { margin: 0 -28px 6px; padding: 8px 28px 6px; }
}
/* Desktop: #screen-admin and .admin-main were overflow:hidden/auto, which makes them the "scroll container" a
   sticky child sticks to, but the WINDOW is what scrolls (checked 2026-10-18), so the branch header never stuck.
   overflow:clip keeps the clipping and does not create a scroll container. */
@media (min-width: 1024px) {
  #screen-admin.active, #screen-admin .admin-main { overflow: clip; }
}
/* the Murid tab's MT list is sticky too: park it under the sticky branch header (about 58px tall) */
#screen-admin .amt-side { top: calc(var(--admin-sticky-top, 0px) + 66px); max-height: calc(100vh - 66px - var(--admin-sticky-top, 0px) - 30px); }

/* Dashboard > Resit Info (2026-10-18) */
.dash-resit-row { padding: 9px 2px; border-bottom: 1px solid #f1f1f1; cursor: pointer; }
.dash-resit-row:hover { background: var(--bg); }
.drr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drr-name { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drr-mt { font-size: 10.5px; font-weight: 700; color: var(--blue-deep); background: var(--blue-bg); padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.drr-sub { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 3px; font-size: 11.5px; color: var(--ink-soft); }
.drr-sub i { font-size: 13px; vertical-align: -1px; margin-right: 2px; }
.drr-sub b { color: var(--ink); }
/* Resit Info: search/export row, summary line, missing-receipt chip */
.drr-summary { font-size: 12px; color: var(--ink-soft); margin: 0 0 8px; }
.drr-summary b { color: var(--ink); }
.drr-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.drr-warn { font-size: 10.5px; font-weight: 700; color: var(--orange-text); background: var(--orange-bg); padding: 1px 7px; border-radius: 999px; }

/* ---------- RESIT INFO as a table (owner 2026-10-18) ---------- */
.drt-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.drt-stat { flex: 1 1 140px; padding: 10px 14px; border-radius: 12px; background: var(--blue-bg); border: 1.5px solid #CDEBFB; min-width: 0; }
.drt-stat-val { font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; color: var(--blue-text); line-height: 1.1; }
.drt-stat-label { font-size: 11.5px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.drt-stat-sub { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.drt-stat-green { background: var(--green-bg); border-color: #C7EECB; } .drt-stat-green .drt-stat-val { color: var(--green-deep); }
.drt-stat-orange { background: var(--orange-bg); border-color: #F7D9A6; } .drt-stat-orange .drt-stat-val { color: var(--orange-deep); }
.drt-wrap { overflow: auto; max-height: 440px; border: 1.5px solid var(--line); border-radius: 12px; }
.drt-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.drt-table thead th {
  position: sticky; top: 0; z-index: 1; background: #F7F8FC; color: var(--ink-soft);
  font-size: 11px; font-weight: 800; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.drt-table thead th i { font-size: 12px; opacity: .55; vertical-align: -1px; }
.drt-table thead th.drt-sorted { color: var(--blue-deep); } .drt-table thead th.drt-sorted i { opacity: 1; }
.drt-table thead th.drt-num { cursor: default; }
.drt-table td { padding: 8px 12px; border-bottom: 1px solid #EEF0F6; color: var(--ink); white-space: nowrap; }
.drt-row { cursor: pointer; } .drt-row:hover td { background: #F2F8FF; }
.drt-num { width: 36px; color: var(--ink-soft) !important; text-align: right; }
.drt-name { font-weight: 700; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.drt-resit { font-variant-numeric: tabular-nums; font-weight: 600; }
.drt-date { font-variant-numeric: tabular-nums; }
.drt-rm { text-align: right !important; font-variant-numeric: tabular-nums; font-weight: 700; }
.drt-mot { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--grey-bg); color: var(--ink-soft); }
.drt-mot-online { background: var(--blue-bg); color: var(--blue-text); }
.drt-mot-tunai { background: var(--green-bg); color: var(--green-text); }
.drt-muted { color: var(--ink-faint); }
.drt-empty { text-align: center; color: var(--ink-faint); padding: 26px !important; white-space: normal !important; }
/* the table needs the width: Resit Info gets a full row of the dashboard grid */
@media (min-width: 768px) {
  .dash-grid { grid-template-areas: "y ord" "rank rank" "meja meja"; }
}
@media (min-width: 1280px) {
  .dash-grid { grid-template-areas: "y ord rank" "meja meja meja"; }
}
/* a wide table must scroll inside its card, never push the page sideways */
.dash-grid { grid-template-columns: minmax(0, 1fr); }
.dash-grid > div, .dash-resit-card { min-width: 0; }
@media (min-width: 768px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .drt-stat { flex-basis: 120px; padding: 8px 12px; } .drt-stat-val { font-size: 19px; } }

/* ============================================================================
   POLISH 2026-10-18 — P1 (from the full audit: tablet layouts and short laptop screens)
   ----------------------------------------------------------------------------
   Tablet 768–1099px: the 258px rail took a third of the width, so MT Murid cards/search
   were cut off at the right, the admin Murid table lost its name column, the admin
   Laporan Bulanan headers wrapped one letter per line and the KPI tiles truncated to "M…".
   Here both rails become icon-only (78px) automatically — the same look as the admin
   "kecilkan panel" toggle — wide tables keep a usable minimum width and scroll inside
   their own card, and the MT Murid dashboard goes single-column.
   Laptop 1366×768: the admin nav (13 items in 5 groups) ran past the bottom of the rail,
   hiding Lain-lain / Bil Langganan / Profil; on short screens it is compacted to fit.
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1099px) {
  /* ---- MT rail: icons only ---- */
  #screen-home.active { grid-template-columns: 78px 1fr; }
  #screen-home .home-header { padding: 0 8px; justify-content: center; }
  #screen-home .home-header-left { justify-content: center; }
  #screen-home .home-header-logo { font-size: 12px; letter-spacing: 1px; padding: 5px 6px 6px; }
  #screen-home .bottom-tabs { padding: 12px 8px; }
  #screen-home .btab { justify-content: center; padding: 11px 6px; position: relative; }
  #screen-home .btab span { display: none; }
  #screen-home .btab .btab-badge { position: absolute; top: 2px; right: 2px; }
  #screen-home .sidebar-user { justify-content: center; padding: 8px; }
  #screen-home .sidebar-user-meta { display: none; }
  #screen-home .sidebar-logout { padding: 10px 0; }
  #screen-home .sidebar-logout span { display: none; }
  #screen-home .mt-topbar { padding: 0 20px; }
  /* ---- MT Murid dashboard: one column, widgets above the list ---- */
  .murid-layout { grid-template-columns: minmax(0, 1fr); padding: 18px 20px 40px; }
  .murid-side-rail { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
  .murid-side-rail > div:empty { display: none; }
  #student-filtered-list { grid-template-columns: minmax(0, 1fr); }

  /* ---- Admin rail: icons only (same rules as .sidebar-collapsed) ---- */
  #screen-admin.active { grid-template-columns: 78px 1fr; }
  #screen-admin .admin-sidebar-head { flex-direction: column; justify-content: center; gap: 6px; padding: 8px 6px; }
  #screen-admin .admin-logo { font-size: 12px; letter-spacing: 1px; padding: 5px 6px 6px; }
  #screen-admin .admin-sidebar-text,
  #screen-admin .admin-nav-group-label,
  #screen-admin .admin-sidebar-toggle-btn { display: none; }
  #screen-admin .admin-nav-btn { justify-content: center; padding: 11px 6px; position: relative; }
  #screen-admin .admin-nav-btn span:not(.admin-nav-badge) { display: none; }
  #screen-admin .admin-nav-badge { position: absolute; top: 3px; right: 3px; min-width: 10px; height: 10px; padding: 0; font-size: 0; }
  #screen-admin .admin-user-card { justify-content: center; padding: 8px; }
  #screen-admin .admin-logout-full { padding: 10px 0; }
  #screen-admin .admin-topbar { padding: 0 20px; }
  #screen-admin .admin-topbar-date span { display: none; }
  #screen-admin .admin-pane-inner { padding: 18px 20px 40px; }
  /* ---- admin content ---- */
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-areas: "y ord" "resit resit" "rank rank" "meja meja"; }
  .amt-layout { grid-template-columns: minmax(0, 1fr); }
}
/* wide sheets keep a readable minimum width and scroll inside their card, at every width */
#screen-admin .lbt-table { min-width: 1080px; }
#screen-admin .lbt-sheet-scroll { overflow-x: auto; }
#screen-admin .amt-table-wrap { overflow-x: auto; }
#screen-admin .amt-table { min-width: 640px; }

/* short laptop screens (1366×768 and similar): compact the admin nav so every item fits */
@media (min-width: 768px) and (max-height: 860px) {
  #screen-admin .admin-sidebar-nav { padding: 8px 10px; gap: 1px; }
  .admin-nav-group { margin-bottom: 4px; gap: 1px; }
  .admin-nav-group-label { padding: 4px 13px 2px; font-size:10px; }
  #screen-admin .admin-nav-btn { padding: 7px 12px; }
  #screen-admin .admin-nav-btn i { font-size: 17px; }
  #screen-admin .admin-sidebar-footer { padding: 8px 10px; }
  #screen-admin .admin-user-card { padding: 6px 8px; margin-bottom: 6px; }
  #screen-admin .admin-user-avatar { width: 30px; height: 30px; }
  #screen-admin .admin-logout-full { padding: 8px; }
}
/* if the nav still does not fit, make the scroll obvious */
#screen-admin .admin-sidebar-nav { scrollbar-width: thin; scrollbar-color: #C9CDDB transparent; }
/* P1b: the content column must never grow to fit a wide table (Jadual Outlet pushed the whole pane,
   topbar date included, off the right edge) — wide content scrolls inside its own card instead */
@media (min-width: 768px) {
  #screen-admin.active { grid-template-columns: 258px minmax(0, 1fr); }
  #screen-admin.active.sidebar-collapsed { grid-template-columns: 78px minmax(0, 1fr); }
  #screen-home.active { grid-template-columns: 258px minmax(0, 1fr); }
  #screen-admin .admin-main, #screen-admin .admin-topbar, #screen-admin .admin-pane-inner, #screen-home .tab-content { min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  #screen-admin.active, #screen-admin.active.sidebar-collapsed { grid-template-columns: 78px minmax(0, 1fr); }
  #screen-home.active { grid-template-columns: 78px minmax(0, 1fr); }
  #screen-admin .amt-table { min-width: 860px; }
}
#screen-admin .section-row .btn-outline { flex: 0 0 auto; }

/* ============================================================================
   POLISH 2026-10-18 — P2: phone tap targets + MT desktop tidy-ups
   ============================================================================ */
/* phone: every control the audit measured under 36px gets a finger-sized hit area (≥40px) */
@media (max-width: 767px) {
  .ms-add-btn, .btn-edit-toggle { min-height: 40px; }
  .mt-nav-btn { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
  .inner-tab-btn { min-height: 40px; }
  .lp-month-nav-btn { min-width: 40px; min-height: 38px; }
  .sp-tab { min-height: 42px; }
  #screen-admin .admin-act-btn, #screen-admin .apg-btn { min-height: 38px; }
  #screen-admin .admin-branch-pill, #screen-admin .eh-filter-pill { min-height: 38px; }
  #screen-admin .admin-icon-btn { width: 40px; height: 40px; }
  .amt-icon-btn { width: 36px; height: 36px; }
  /* chatbot bubble: keep the last card's buttons clear of it */
  .tab-content, #screen-admin .admin-main { padding-bottom: 72px; }
}
/* desktop: a touch "→ swipe" hint and a title the topbar already shows are noise */
@media (min-width: 768px) {
  .mt-swipe-hint { display: none; }
  #screen-home .mt-dup-title { display: none; }
  /* MT Murid list: two card columns from ~1280px instead of one long column */
  .murid-layout { grid-template-columns: 280px minmax(0, 1fr); }
  #student-filtered-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .murid-layout { grid-template-columns: minmax(0, 1fr); }
  #student-filtered-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- P2b: what the after-audit still flagged ---------- */
.admin-nav-group-label { color: var(--ink-soft); }                 /* 9.5px caps labels were 3.6:1 */
.today-widget-title { color: var(--blue-text); }
.today-item-badge { color: var(--ink) !important; }                /* text took the pale border colour (1.9:1) */
@media (max-width: 767px) {
  #screen-admin .admin-nav-btn { min-height: 40px; }
  /* Laporan Bulanan header: month nav + three Export buttons wrap instead of running off the screen */
  #admin-pane-laporanBulanan > .section-row:first-child > div { flex-wrap: wrap; width: 100%; }
  #admin-pane-laporanBulanan > .section-row:first-child > div > .btn-outline { flex: 1 1 auto; min-height: 40px; }
  #admin-pane-laporanBulanan > .section-row:first-child .lp-month-nav { flex: 1 1 100%; justify-content: space-between; }
  /* Jadual Semua MT: MT show/hide chips and Select All / Unselect All */
  #screen-admin button[onclick^="_adminJsToggleMt"], #screen-admin button[onclick^="_adminJsSelectAllMt"], #screen-admin button[onclick^="_adminJsUnselectAllMt"] { min-height: 34px; }
  #screen-admin .section-row .btn-outline { min-height: 40px; }
}

/* ============================================
   DIAGNOSIS STRIP — PPC's own diagnosis bookings above Kelas Hari Ini (2026-10-29, js/mt/diagnos.js)
   Same widget shape as .today-widget; cards are wider (children + parent + actions), today's are orange.
   ============================================ */
#mt-diag-strip:empty { display: none; }
#mt-diag-strip { padding: 14px 14px 0; }
.diag-icon { background: linear-gradient(135deg, var(--pink-deep), var(--pink)); }
.diag-widget .today-widget-title { color: var(--pink-text); }
.today-item.diag-item { width: 220px; display: flex; flex-direction: column; gap: 5px; cursor: default; background: var(--surface); border-left-color: var(--pink); }
.diag-item.diag-today { background: var(--orange-bg); border-color: #F6C77A; border-left-color: var(--orange); }
.diag-item.diag-ask { border-left-color: var(--red); }
.diag-when { display: flex; flex-direction: column; line-height: 1.25; }
.diag-when b { font-size: 12px; color: var(--ink); text-transform: uppercase; letter-spacing: .3px; }
.diag-today .diag-when b { color: var(--orange-text); }
.diag-when span { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.diag-anak div { display: flex; align-items: flex-start; gap: 5px; font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.diag-anak i { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
.diag-anak small { font-weight: 600; color: var(--ink-soft); font-size: 11px; }
.diag-parent { font-size: 11.5px; color: var(--ink-soft); }
.diag-concern { font-size: 11px; color: var(--ink-soft); background: rgba(30,34,53,.05); border-radius: 6px; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diag-mark { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 3px 7px; width: fit-content; }
.diag-mark.ok { background: var(--green-bg); color: var(--green-text); }
.diag-mark.no { background: var(--red-bg); color: var(--red-text); }
.diag-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 4px; }
.diag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 0 9px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; text-decoration: none; }
.diag-btn i { font-size: 15px; }
.diag-btn.wa { color: #128C4A; border-color: #BDE8CF; }
.diag-btn.ok { background: var(--green-bg); color: var(--green-text); border-color: transparent; }
.diag-btn.no { background: var(--red-bg); color: var(--red-text); border-color: transparent; }

/* ============================================
   ORDER LAIN-LAIN (2026-10-29, js/mt/order.js openOrderLainForm — also used by admin Pengurusan Order)
   ============================================ */
.ord-lain-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--surface); color: var(--blue-deep); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; min-height: 38px; }
.ord-lain-btn:active { transform: scale(.97); }
.ord-lain-icon { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--orange-bg); color: var(--orange-text); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.ord-lain-remark { font-size: 13px; color: var(--ink); margin-top: 3px; white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.ord-lain-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--orange-bg); color: var(--orange-text); font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 2px 7px; }
.ord-lain-overlay { position: fixed; inset: 0; background: rgba(30,34,53,.45); z-index: 4000; display: flex; align-items: flex-end; justify-content: center; }
.ord-lain-sheet { background: var(--surface); width: 100%; max-width: 480px; border-radius: 22px 22px 0 0; padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0,0,0,.18); animation: slideUp .25s ease; }
.ord-lain-grab { width: 36px; height: 4px; background: var(--line); border-radius: 2px; margin: 0 auto 14px; }
.ord-lain-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.ord-lain-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.ord-lain-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.ord-lain-label { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px; }
.ord-lain-input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 15px; color: var(--ink); resize: vertical; min-height: 96px; outline: none; }
.ord-lain-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.ord-lain-hint { font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; }
.ord-lain-actions { display: flex; gap: 8px; margin-top: 16px; }
.ord-lain-cancel { flex: 1; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft); font: inherit; font-weight: 700; cursor: pointer; }
.ord-lain-send { flex: 2; min-height: 46px; border-radius: 12px; border: 0; background: var(--blue-deep); color: #fff; font: inherit; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ord-lain-send:disabled { opacity: .6; cursor: default; }

/* ============================================
   EXPORT TELECHAT — edit mesej asal + Excel HQ (2026-11-01, js/admin/telechat.js + telechat_hq.js)
   ============================================ */
.tc-semak-msg-label { flex-wrap: wrap; }
.tc-msg-edit-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); background: var(--surface); color: var(--blue-deep); border-radius: 8px; padding: 3px 9px; font: inherit; font-size: 11px; font-weight: 800; text-transform: none; letter-spacing: 0; cursor: pointer; }
.tc-msg-edit-btn:hover { border-color: var(--blue); background: var(--blue-bg); }
textarea.tc-msg-edit { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.5; min-height: 260px; resize: vertical; }
.tc-drop-hq .tc-drop-icon { background: var(--green-bg); color: var(--green-text); }
.tc-hq-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed var(--line); background: var(--surface); font-size: 13px; color: var(--ink-soft); }
.tc-hq-bar > i { font-size: 18px; color: var(--green-text); }
.tc-hq-bar.is-on { border-style: solid; border-color: #BFE8C8; background: #F3FBF4; color: var(--ink); }
.tc-hq-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.tc-bd-chips-hq { margin-top: -4px; }
.tc-bd-chips-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--green-text); margin-right: 2px; }
.tc-row-warn td { background: #FFFBEA; }
.tc-total td { background: var(--grey-bg); }
@media (min-width: 768px) { .tc-upload-grid:has(.tc-drop-hq) { grid-template-columns: 1fr 1fr; } .tc-upload-grid .tc-drop-hq { grid-column: 1 / -1; } }
.tc-hq-tutor { padding: 5px 8px; font-size: 12.5px; min-width: 130px; }
.tc-hq-tutor.is-empty { border-color: var(--orange); background: var(--orange-bg); }
.tc-bd-sel { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 0 4px 0 12px; color: var(--ink-soft); }
.tc-bd-sel select { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); padding: 7px 6px; outline: none; cursor: pointer; max-width: 220px; }
.tc-bd-mthead { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; padding: 8px 12px; border-radius: 10px; background: #EEF3FA; color: var(--ink); font-size: 13px; position: sticky; left: 0; }
.tc-bd-mthead:first-child { margin-top: 0; }
.tc-bd-mthead i { color: var(--blue-deep); font-size: 16px; }
.tc-bd-mthead span { color: var(--ink-soft); font-size: 12px; }
.tc-lp-wrap .tc-bd-mthead { margin: 8px 0 -4px; }
/* 2026-11-01: where the student is now (Banding) + a ganti priced at an older pakej (Kotak) */
.tc-bd-kini { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--orange-bg); color: var(--orange-text); font-size: 10px; font-weight: 700; }
.tc-grid .tc-pk .tc-pk-lain { display: block; color: #8E6BD1; font-size: 10px; font-weight: 700; }

/* New MT Plus icon on the login screen (2026-11-01): the image carries its own rounded square, so the white plate goes. */
.auth-logo-icon.auth-logo-img { background: transparent; border-radius: 22%; }
.auth-logo-icon.auth-logo-img img { width: 100%; height: 100%; display: block; border-radius: 22%; }

/* HOME brand removed (2026-11-01, no licence): the MT Plus icon replaces the HOME wordmark plates. */
.brand-mark { display: block; height: 36px; width: 36px; border-radius: 22%; }
.home-header-logo:has(> .brand-mark), .admin-logo:has(> .brand-mark) { background: transparent; border: 0; box-shadow: none; padding: 0; margin-right: 4px; line-height: 0; }
#screen-home .home-header-logo:has(> .brand-mark) { padding: 0; }
.auth-brand-name.auth-brand-text { background: transparent; box-shadow: none; padding: 0; color: #fff; font-size: 34px; letter-spacing: 1px; margin-bottom: 12px; }
@media (min-width: 1024px) { .auth-brand-name.auth-brand-text { font-size: 40px; } .brand-mark { height: 40px; width: 40px; } }
#screen-admin.sidebar-collapsed .brand-mark { height: 30px; width: 30px; }


/* ============ MT francaise membership (2026-11-02) — js/shared/francaise.js ============ */
.fr-wrap { max-width: 640px; margin: 0 auto; padding: 14px 16px 40px; display: flex; flex-direction: column; gap: 12px; }
.fr-hero { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, var(--green-bg), var(--blue-bg, #EAF3FF)); }
.fr-hero > i { font-size: 30px; color: var(--green-deep); flex-shrink: 0; }
.fr-hero-t { font-weight: 800; font-size: 15px; color: var(--ink); }
.fr-hero-s, .fr-sub { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; }
.fr-loading { font-size: 12px; color: var(--ink-faint); }
.fr-acc { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line, #e8e8ee); font-size: 12px; }
.fr-acc span { color: var(--ink-soft); }
.fr-pw { margin-top: 10px; }
.fr-pw summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--blue-deep); padding: 6px 0; }
.fr-pw input { margin-top: 8px; }
.fr-req { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line, #eee); flex-wrap: wrap; }
.fr-req:last-child { border-bottom: 0; }
.fr-req-main { flex: 1; min-width: 160px; font-size: 13px; color: var(--ink); }
.fr-req-main small { display: block; color: var(--ink-soft); font-size: 11px; margin-top: 2px; }
.fr-st { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.fr-st-wait { background: var(--orange-bg); color: var(--orange-text); }
.fr-st-ok { background: var(--green-bg); color: var(--green-deep); }
.fr-st-no { background: var(--red-bg); color: var(--red-deep); }
.fr-st-off { background: #eee; color: #777; }
.fr-btn { border: 1.5px solid var(--line, #dcdce6); background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 9px; cursor: pointer; font-family: inherit; }
.fr-btn.fr-primary { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.fr-btn.fr-small { padding: 5px 10px; font-size: 11px; }
.fr-btn:disabled { opacity: .45; cursor: not-allowed; }
.fr-hint { font-size: 11px; color: var(--ink-faint); }
.fr-count { background: var(--orange-bg); color: var(--orange-text); border-radius: 999px; font-size: 11px; padding: 1px 8px; margin-left: 6px; }
.fr-admin { margin-bottom: 12px; }
.fr-past { margin-top: 8px; font-size: 12px; }
.fr-past summary { cursor: pointer; color: var(--ink-soft); font-weight: 700; padding: 4px 0; }
.fr-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(20, 22, 35, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fr-modal { background: #fff; border-radius: 16px; padding: 18px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.fr-title { font-weight: 800; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.fr-row { display: flex; justify-content: flex-end; gap: 8px; }
.fr-list { max-height: 160px; overflow: auto; font-size: 12px; background: var(--bg-soft, #f6f6fa); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }

/* a free MT has no students: no AI assistant button */
body:has(.fr-free) #aicb-fab, body:has(.fr-free) #aicb-panel { display: none !important; }
.fr-logout { align-self: flex-start; margin-top: 10px; color: var(--red-deep); border-color: var(--red-bg); }

.tc-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }

/* ===== Admin / PPC "Template" tab — redesigned 2026-11-03 (paragraph cards, plain-language fields) ===== */
#admin-pane-template { max-width: 1320px; }
.tp-lead { font-size: 13px; color: var(--ink-soft); margin: -2px 0 12px; line-height: 1.5; }
.tp-for { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--ink); }
.tp-for label { display: inline-flex; align-items: center; gap: 6px; }
.tp-for select { width: auto; min-width: 240px; max-width: 100%; font-weight: 700; }
.tp-step { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.tp-step span { width: 20px; height: 20px; border-radius: 50%; background: var(--blue-deep); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-step small { font-weight: 600; color: var(--ink-soft); }
.tp-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.tp-list { position: sticky; top: calc(var(--admin-sticky-top, 0px) + 12px); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 12px; box-shadow: var(--shadow-sm); }
.tp-group { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-faint); padding: 8px 8px 4px; }
.tp-item { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; font-family: inherit; color: var(--ink-soft); cursor: pointer; text-align: left; }
.tp-item i { font-size: 19px; flex-shrink: 0; }
.tp-item-t { display: flex; flex-direction: column; min-width: 0; }
.tp-item-t b { font-size: 13px; color: inherit; }
.tp-item-t small { font-size: 10.5px; color: var(--ink-faint); font-weight: 600; }
.tp-item:hover:not(.active) { background: var(--grey-bg); color: var(--ink); }
.tp-item.active { background: var(--blue-bg); color: var(--blue-deep); box-shadow: inset 0 0 0 1.5px var(--blue); }
.tp-tag { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 800; color: var(--green-text); background: var(--green-bg); border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }
.tp-main { min-width: 0; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow-sm); }
.tp-head { margin-bottom: 10px; }
.tp-title { font-size: 18px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.tp-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.tp-note { display: flex; gap: 10px; align-items: flex-start; background: var(--grey-bg); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink); margin-bottom: 14px; }
.tp-note > i { font-size: 18px; margin-top: 1px; color: var(--ink-soft); }
.tp-note.ok { background: var(--green-bg); } .tp-note.ok > i { color: var(--green-text); }
.tp-note.info { background: var(--blue-bg); } .tp-note.info > i { color: var(--blue-deep); }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tp-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-hint { font-size: 11.5px; color: var(--ink-soft); flex: 1; min-width: 180px; line-height: 1.4; }
.tp-hint code, .tp-w code, .tp-tour-d code { font-family: ui-monospace, Consolas, monospace; background: var(--bg); border-radius: 5px; padding: 1px 5px; font-size: 11.5px; color: var(--blue-deep); }
.tp-menuwrap { position: relative; }
.tp-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 290px; max-height: 340px; overflow-y: auto; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(30,34,53,.18); padding: 6px; }
.tp-menu[hidden] { display: none; }
.tp-menu-h { font-size: 11px; color: var(--ink-faint); padding: 6px 8px 8px; font-weight: 700; }
.tp-menu button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font-family: inherit; cursor: pointer; text-align: left; }
.tp-menu button:hover { background: var(--blue-bg); }
.tp-menu button b { font-size: 13px; color: var(--ink); }
.tp-menu button small { font-size: 11px; color: var(--ink-soft); }
.tp-cards { display: flex; flex-direction: column; gap: 10px; }
.tp-card { border: 1.5px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.tp-card.off { opacity: .55; background: var(--grey-bg); }
.tp-ghost { opacity: .35; border-style: dashed; }
.tp-chead { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 4px; background: var(--bg); border-bottom: 1px solid var(--line); }
.tp-handle { cursor: grab; color: var(--ink-faint); font-size: 20px; padding: 4px 6px; touch-action: none; display: inline-flex; border-radius: 8px; }
.tp-handle:hover { background: var(--blue-bg); color: var(--blue-deep); }
.tp-handle:active { cursor: grabbing; }
.tp-ctitle { font-size: 12px; font-weight: 800; color: var(--ink-soft); flex: 1; }
.tp-ctitle em { font-style: normal; font-weight: 600; color: var(--ink-faint); }
.tp-cacts { display: inline-flex; gap: 2px; }
.tp-cacts button { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 8px; color: var(--ink-soft); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tp-cacts button:hover:not([disabled]) { background: var(--blue-bg); color: var(--blue-deep); }
.tp-cacts button.red:hover { background: var(--red-bg, #FFEBEE); color: var(--red-deep, #C62828); }
.tp-cacts button[disabled] { opacity: .3; cursor: default; }
.tp-cbody { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tp-ta { width: 100%; resize: vertical; min-height: 56px; font-size: 14px; line-height: 1.5; }
.tp-list-lbl { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.tp-itemrow { display: flex; align-items: center; gap: 6px; }
.tp-itemrow input { flex: 1; min-width: 0; }
.tp-num { font-size: 12px; font-weight: 800; color: var(--ink-faint); min-width: 20px; }
.tp-x { border: 0; background: transparent; color: var(--ink-faint); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-x:hover { background: var(--red-bg, #FFEBEE); color: var(--red-deep, #C62828); }
.tp-sys { display: flex; gap: 10px; align-items: flex-start; background: var(--purple-bg, #F1EAFE); color: var(--purple-text, #5B2EA6); border-radius: 10px; padding: 10px 12px; }
.tp-sys > i { font-size: 20px; }
.tp-sys b { display: block; font-size: 13px; }
.tp-sys small { display: block; font-size: 11.5px; opacity: .85; margin-top: 2px; }
.tp-emptycards { text-align: center; color: var(--ink-faint); font-size: 13px; padding: 22px; border: 1.5px dashed var(--line); border-radius: 14px; }
.tp-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tp-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--grey-bg); border-radius: 10px; margin-bottom: 8px; }
.tp-seg button { border: 0; background: transparent; padding: 5px 14px; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.tp-seg button.on { background: #fff; color: var(--blue-deep); box-shadow: var(--shadow-sm); }
.tp-preview { position: sticky; top: calc(var(--admin-sticky-top, 0px) + 12px); }
.tp-bubble { background: #DCF8C6; border-radius: 12px 12px 12px 2px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: #111; word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.tp-prevnote { font-size: 11px; color: var(--ink-faint); margin-top: 6px; }
.tp-mail { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.tp-mail-head { background: var(--bg); padding: 8px 12px; font-size: 12px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.tp-mail-body { padding: 12px 14px; font-size: 14px; line-height: 1.55; color: #1E2235; }
.tp-w { display: flex; gap: 8px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--orange-text); background: var(--orange-bg); border-radius: 10px; padding: 9px 11px; line-height: 1.45; }
.tp-w.bad { color: var(--red-deep, #C62828); background: var(--red-bg, #FFEBEE); }
.tp-w > i { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.tp-foot { position: sticky; bottom: 0; z-index: 12; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 16px -16px -16px; padding: 12px 16px; background: #fff; border-top: 1.5px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 -6px 16px rgba(30,34,53,.06); }
.tp-why { margin-right: auto; font-size: 12px; font-weight: 700; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.tp-why.dirty { color: var(--blue-deep); } .tp-why.bad { color: var(--red-deep, #C62828); }
.tp-foot .admin-chip-btn[disabled] { opacity: .45; cursor: not-allowed; }
.tp-save { padding-left: 22px; padding-right: 22px; }
.tp-tourbox { max-width: 400px; text-align: center; padding: 26px 22px 20px; }
.tp-tour-ic { width: 58px; height: 58px; border-radius: 18px; background: var(--blue-bg); color: var(--blue-deep); font-size: 30px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.tp-tour-t { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.tp-tour-d { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); text-align: left; }
.tp-tour-dots { display: flex; justify-content: center; gap: 6px; margin: 16px 0; }
.tp-tour-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .tp-tour-dots span.on { background: var(--blue-deep); width: 22px; border-radius: 6px; }
.tp-tour-b { display: flex; gap: 8px; justify-content: center; }
@media (max-width: 900px) {
  .tp-wrap { grid-template-columns: 1fr; }
  .tp-list { position: static; display: flex; gap: 6px; overflow-x: auto; padding: 8px; align-items: center; }
  .tp-list > .tp-step, .tp-group { display: none; }
  .tp-item { width: auto; white-space: nowrap; flex-shrink: 0; border: 1.5px solid var(--line); }
  .tp-item-t small { display: none; }
  .tp-grid { grid-template-columns: 1fr; }
  /* phone: the preview stays on screen while typing */
  .tp-preview { position: sticky; top: var(--admin-sticky-top, 0px); z-index: 15; order: -1; background: var(--surface); padding: 8px 0 6px; max-height: 30vh; overflow-y: auto; border-bottom: 1px solid var(--line); }
  .tp-preview > .tp-step { display: none; }
  .tp-for select { min-width: 0; width: 100%; }
  .tp-foot { margin: 14px -16px -16px; }
  .tp-why { flex-basis: 100%; }
}

/* Developer › Permohonan francaise (2026-11-02) — js/admin/dev_apply.js */
.dv-apps-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border: 1.5px solid var(--line, #dbdeea); border-radius: 14px; background: #fff; }
.dv-apps-bar > i { font-size: 22px; color: var(--ink-faint); }
.dv-apps-bar.has { border-color: var(--orange, #F6A623); background: var(--orange-bg); }
.dv-apps-bar.has > i { color: var(--orange-text); }
.dv-apps-txt { flex: 1; min-width: 200px; display: flex; flex-direction: column; font-size: 12px; color: var(--ink-soft); }
.dv-apps-txt b { font-size: 13.5px; color: var(--ink); }
.dv-apps-txt a { color: var(--blue-deep); word-break: break-all; }
.dv-app { border: 1.5px solid var(--line, #dbdeea); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.dv-app.done { opacity: .75; }
.dv-app-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.dv-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; }
.dv-app-grid span { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); }
.dv-app-grid b { font-size: 13px; }
.dv-app-grid small { display: block; font-size: 11.5px; color: var(--ink-soft); word-break: break-all; }
.dv-app-act { display: flex; gap: 8px; margin-top: 10px; }

/* ==========================================================================
   MT LOOK 2026-11-02 — new logo palette (indigo #2B2A7A + amber #FFB320), graph-paper background.
   Applies ONLY while body.mt-look is set (showScreen(): home/add/add-choice/jadual) so the admin / PPC / developer
   side and the login page keep their own look. Every rule is prefixed body.mt-look.
   ========================================================================== */
body.mt-look {
  --ink: #17163F; --ink-soft: #565873; --ink-faint: #6E7090;
  --bg: #FFF4D0; --surface: #FFFFFF; --line: #E6DDBA;
  --blue: #3D5AFE; --blue-deep: #2B2A7A; --blue-bg: #ECECFB; --blue-text: #2B2A7A;
  --orange: #FFB320; --orange-deep: #F5A800; --orange-bg: #FFF3D6; --orange-text: #7A5200;
  --purple: #2B2A7A; --purple-deep: #1E1D5A; --purple-bg: #ECECFB; --purple-text: #2B2A7A;
  --pink: #E8508F; --pink-deep: #C23574; --pink-bg: #FFE9F2; --pink-text: #B02A66;
  --r-md: 18px; --r-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(43,42,122,.08); --shadow-md: 0 12px 28px rgba(43,42,122,.14);
  --mt-line: rgba(201,132,0,.22); --mt-line2: rgba(201,132,0,.10);
}
body.mt-look, body.mt-look .app {
  background-color: #FFF4D0;
  background-image: linear-gradient(var(--mt-line) 1px, transparent 1px), linear-gradient(90deg, var(--mt-line) 1px, transparent 1px),
                    linear-gradient(var(--mt-line2) 1px, transparent 1px), linear-gradient(90deg, var(--mt-line2) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 32px 32px, 32px 32px;
}
body.mt-look h1, body.mt-look h2, body.mt-look h3, body.mt-look .card-title, body.mt-look .page-title, body.mt-look .section-title,
body.mt-look .home-title, body.mt-look .modal-title, body.mt-look .lb-card-nama, body.mt-look .lp-summary-name,
body.mt-look .student-name, body.mt-look .tmpl-student-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.3px; }

/* header: indigo with the logo's faint grid; the logo tile gets a white + amber ring so it doesn't sink into the indigo */
body.mt-look .home-header {
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 38px),
              repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 38px), #2B2A7A;
  border-bottom: 3px solid #FFB320;
}
body.mt-look .home-header .brand-mark { border-radius: 10px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FFB320; }
body.mt-look .home-header-left { gap: 16px; }
body.mt-look .home-sub { font-weight: 800; }
body.mt-look .btn-logout { background: #FFB320; border-color: #FFB320; color: #2B2A7A; }
body.mt-look .elaun-strip { background: linear-gradient(135deg, #1E1D5A 0%, #2B2A7A 100%); }
body.mt-look .elaun-strip * { color: #E8E8FF; }
body.mt-look .elaun-strip b, body.mt-look .elaun-strip strong { color: #FFB320 !important; }

/* footer (phone): dark indigo grid bar, amber rule, active tab amber */
@media (max-width: 767px) {
  body.mt-look .bottom-tabs {
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 28px),
                repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 28px), #2B2A7A;
    border-top: 3px solid #FFB320; box-shadow: 0 -6px 18px rgba(43,42,122,.25);
  }
  body.mt-look .btab { color: #B9BAEA; }
  body.mt-look .btab i { padding: 3px 16px; border-radius: 14px; }
  body.mt-look .btab.active, body.mt-look .btab.active i { color: #FFB320; }
  body.mt-look .btab.active i { background: rgba(255,179,32,.18); }
}

/* primary actions = amber "sticker" (the "Hidupkan notification" button): amber fill, indigo frame, thick offset shadow that
   sinks when pressed. Tambah (.ms-add-btn), Order Lain-lain, Hidupkan, Simpan, Seterusnya all share it. */
body.mt-look .btn-add-student, body.mt-look .ms-add-btn, body.mt-look .ms-add-btn.has-pending, body.mt-look .ord-lain-btn,
body.mt-look .push-btn.pri, body.mt-look .btn-green, body.mt-look .btn-next {
  background: #FFB320; color: #2B2A7A; border: 2px solid #2B2A7A; border-radius: 14px; font-weight: 800; box-shadow: 0 4px 0 #2B2A7A;
  transition: transform .08s, box-shadow .08s;
}
body.mt-look .ms-add-btn:hover, body.mt-look .ms-add-btn.has-pending:hover { background: #FFB320; color: #2B2A7A; border: 2px solid #2B2A7A; }
body.mt-look .btn-add-student:active, body.mt-look .ms-add-btn:active, body.mt-look .ord-lain-btn:active, body.mt-look .push-btn.pri:active,
body.mt-look .btn-green:active, body.mt-look .btn-next:active { transform: translateY(4px); box-shadow: 0 0 0 #2B2A7A; }
body.mt-look .ord-lain-btn { min-height: 40px; padding: 8px 16px; }
/* secondary + icon buttons: white with an indigo frame and offset shadow */
body.mt-look .btn-outline, body.mt-look .btn-edit-toggle, body.mt-look .btn-prev {
  background: #fff; color: #2B2A7A; border: 2px solid #2B2A7A; border-radius: 14px; font-weight: 800; box-shadow: 0 3px 0 #2B2A7A;
}
body.mt-look .btn-icon { border: 2px solid #2B2A7A; border-radius: 12px; box-shadow: 0 2px 0 #2B2A7A; }
body.mt-look .btn-icon:active { transform: translateY(2px); box-shadow: none; }
body.mt-look .mt-nav-btn { background: #fff; border: 2px solid #2B2A7A; color: #2B2A7A; box-shadow: 0 2px 0 #2B2A7A; font-weight: 800; }
body.mt-look .student-card, body.mt-look .card { border: 2px solid rgba(43,42,122,.14); box-shadow: 0 4px 0 rgba(43,42,122,.12); border-radius: 20px; }
body.mt-look .student-card { border-left-width: 5px; border-left-color: #CFCEF7; }   /* neutral stripe; paid cards get the green one inline (student.js) */
body.mt-look .student-card.jadual-done { background: var(--surface); }   /* "next month's jadual made" must not look like "paid" (green) */
body.mt-look .student-card.is-pending { border-left-color: #FFB320; }
/* package avatar (A+, B+ …): soft lavender, not a dark block */
body.mt-look .student-avatar { background: #ECECFB; border-color: #A9A8EE; color: #2B2A7A; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
body.mt-look .student-sesi-count { background: #FFF1C2; color: #7A5200; border-color: #FFB320; }
body.mt-look .tag { background: #ECECFB; color: #2B2A7A; border-color: #CFCEF7; }
body.mt-look .profil-avatar { background: linear-gradient(135deg, #3D5AFE, #2B2A7A) !important; }

/* Jadual MT: tab switch, week banner, tables, day heads */
body.mt-look .inner-tab-bar { background: #fff; border: 2px solid #2B2A7A; border-radius: 16px; padding: 4px; box-shadow: 0 3px 0 #2B2A7A; }
body.mt-look .inner-tab-btn { color: #2B2A7A; border-radius: 12px; font-weight: 800; }
body.mt-look .inner-tab-btn.active { background: #2B2A7A; color: #FFB320; box-shadow: none; }
body.mt-look .mt-week-banner { border: 2px solid #2B2A7A; box-shadow: 0 3px 0 #2B2A7A; }
body.mt-look .mt-week-label, body.mt-look .mt-week-label * { color: #2B2A7A !important; font-weight: 800; }
body.mt-look .mt-grid-table { border-collapse: separate; border-spacing: 0; border: 2px solid #2B2A7A; border-radius: 16px; overflow: hidden; background: #fff; }
body.mt-look .mt-grid-table th, body.mt-look .mt-grid-table td { border: 1px dashed #CBD2F2; }
body.mt-look .mt-grid-table thead th, body.mt-look .mt-day-header { background: #2B2A7A !important; color: #fff !important; border: 1px solid #3B3A93; }
body.mt-look .mt-day-header *, body.mt-look .mt-grid-table thead th * { color: #fff !important; }
body.mt-look .mt-grid-table thead th.mt-time-col { color: #FFB320 !important; }
body.mt-look .mt-time-cell { background: #EAEEFF !important; color: #2B2A7A !important; font-weight: 800; }
body.mt-look .mt-today-col { background: #FFF1C2 !important; border-color: #FFB320 !important; }
body.mt-look .mt-slot-cell.mt-empty { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(43,42,122,.04) 6px 7px) !important; }
body.mt-look .mt-day-block-head { color: #2B2A7A !important; font-weight: 800; font-size: 14px; border-left: 5px solid #FFB320; padding-left: 8px; }
body.mt-look .mt-day-block-head span[style*="FF7043"] { background: #FFB320 !important; color: #2B2A7A !important; font-weight: 800; }
/* desktop: the side rail's active item (was a blue→green gradient) becomes indigo with an amber label */
@media (min-width: 768px) {
  body.mt-look .btab.active { background: #2B2A7A; color: #FFB320; box-shadow: 0 4px 0 rgba(43,42,122,.25); }
  body.mt-look .btab.active i { color: #FFB320; }
}

/* ==========================================================================
   LOGIN LOOK 2026-11-02 — new logo identity on the login / register screen (body.auth-look, set by showScreen('auth')
   and loadAuthPage). Indigo grid hero with the SYSTEM / MT lockup, graph-paper page, framed tabs and fields, amber sticker button.
   ========================================================================== */
body.auth-look, body.auth-look .app {
  background-color: #FFF4D0;
  background-image: linear-gradient(rgba(201,132,0,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(201,132,0,.22) 1px, transparent 1px),
                    linear-gradient(rgba(201,132,0,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(201,132,0,.10) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 32px 32px, 32px 32px;
}
body.auth-look .auth-header {
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 38px),
              repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 38px), #2B2A7A;
  border-bottom: 4px solid #FFB320; border-radius: 0 0 32px 32px;
}
body.auth-look .auth-header::before, body.auth-look .auth-header::after { display: none; }
body.auth-look #screen-auth { background: transparent; }
body.auth-look .auth-logo-icon.auth-logo-img img { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #FFB320; }
body.auth-look .auth-brand-name.auth-brand-text { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; margin: 6px 0 14px; letter-spacing: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
body.auth-look .auth-brand-sys { font-size: 13px; font-weight: 800; letter-spacing: .5em; text-indent: .5em; color: #FFB320; }
body.auth-look .auth-brand-mt  { font-size: 60px; font-weight: 800; letter-spacing: 2px; line-height: .95; color: #fff; }
body.auth-look .auth-brand-plus { color: #2FD08A; margin-left: 2px; }
body.auth-look .auth-sys-label { background: rgba(255,179,32,.14); border-color: #FFB320; color: #FFE08A; font-weight: 700; }
body.auth-look .auth-body { background: #fff; border: 2px solid rgba(43,42,122,.14); border-bottom: 0; box-shadow: 0 -4px 0 rgba(43,42,122,.10); }
body.auth-look .auth-form-title { color: #17163F; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.3px; }
body.auth-look .tab-row { background: #fff; border: 2px solid #2B2A7A; border-radius: 16px; padding: 4px; box-shadow: 0 3px 0 #2B2A7A; }
body.auth-look .tab-btn { color: #2B2A7A; border-radius: 12px; font-weight: 800; }
body.auth-look .tab-btn.active { background: #2B2A7A; color: #FFB320; box-shadow: none; }
body.auth-look .form-label { color: #17163F; font-weight: 700; }
body.auth-look .form-input { border: 2px solid #CFCEF7; border-radius: 14px; background: #FAFAFF; }
body.auth-look .form-input:focus { border-color: #2B2A7A; box-shadow: 0 0 0 4px rgba(255,179,32,.35); background: #fff; }
body.auth-look .btn-green { background: #FFB320; color: #2B2A7A; border: 2px solid #2B2A7A; border-radius: 14px; font-weight: 800; box-shadow: 0 4px 0 #2B2A7A; transition: transform .08s, box-shadow .08s; }
body.auth-look .btn-green:active { transform: translateY(4px); box-shadow: 0 0 0 #2B2A7A; }
body.auth-look #screen-auth button[onclick*="_showForgotForm"] { color: #2B2A7A !important; font-weight: 700; }
@media (min-width: 768px) {
  body.auth-look .auth-header { border-bottom: 0; border-radius: 0; border-right: 4px solid #FFB320; }
  body.auth-look .auth-body { background: transparent; border: 0; box-shadow: none; }
  body.auth-look .auth-form-inner { border: 2px solid rgba(43,42,122,.14); box-shadow: 0 6px 0 rgba(43,42,122,.12); }
  body.auth-look .auth-brand-mt { font-size: 84px; }
  body.auth-look .auth-brand-sys { font-size: 16px; }
}

/* Quick actions on one session in the student profile (profile.js: Tukar waktu / Tukar MT / Burn) */
.sp-act-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sp-act { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; min-height: 28px; }
.sp-act i { font-size: 13px; }
.sp-act:active { transform: scale(.96); }
.sp-act-burn { color: var(--red-text); border-color: #F5B5B5; background: var(--red-bg); }
.sp-act-burn.on { background: var(--red); border-color: var(--red); color: #fff; }

/* TeleChat Kotak: change a student's pakej for the month (telechat.js _tcPickPakej) */
.tc-pk-btn { font: inherit; font-weight: 800; font-size: 11px; color: var(--ink-soft); background: transparent; border: 1.5px dashed var(--line); border-radius: 8px; padding: 2px 7px; cursor: pointer; min-height: 24px; }
.tc-pk-btn:hover { border-color: var(--blue-deep); color: var(--blue-deep); background: var(--blue-bg); }
.tc-pk-btn.is-manual { color: var(--purple-text); border: 1.5px solid #B9B6F0; background: #F1F0FF; }
.tc-pk-menu { position: fixed; z-index: 6000; min-width: 220px; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 14px 36px rgba(30,34,53,.22); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.tc-pk-menu-h { padding: 6px 8px 8px; font-size: 12.5px; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tc-pk-menu-h small { display: block; font-weight: 500; font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }
.tc-pk-opt { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 12px; color: var(--ink); background: transparent; border: 0; border-radius: 9px; padding: 7px 8px; cursor: pointer; }
.tc-pk-opt:hover { background: var(--blue-bg); }
.tc-pk-opt.on { background: var(--blue-bg); box-shadow: inset 0 0 0 1.5px var(--blue-deep); }
.tc-pk-opt b { font-weight: 800; } .tc-pk-opt span { color: var(--ink-soft); font-size: 11px; } .tc-pk-opt em { font-style: normal; font-weight: 800; color: var(--green-text); }
.tc-pk-reset { display: flex; gap: 6px; color: var(--ink-soft); border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px; }

/* RESIT INFO tab (2026-11-03): sort buttons + unpaid rows */
.ri-sort-row { margin: 0 0 10px; }
.ri-sort-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.ri-sort-btn.active { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.drt-row.ri-unpaid td { background: #FFF8EC; }
.drt-row.ri-unpaid:hover td { background: #FFF1D6; }

/* JADUAL OUTLET sort buttons (2026-11-03) */
.jo-sort-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.jo-sort-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.jo-sort-btn.active { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }

/* "Masukkan maklumat" lives in the sticky footer (2026-11-03): the menu opens upward */
.tp-foot .tp-menu { top: auto; bottom: calc(100% + 8px); }
.tp-foot .tp-menuwrap { margin-right: 6px; }
@media (max-width: 767px) { .tp-foot .tp-menu { width: min(290px, calc(100vw - 32px)); } }

/* a little more air between the sort buttons (2026-11-03) */
.jo-sort-row { gap: 10px; }
.ri-sort-row { gap: 10px; }

/* FILTER dropdowns (Jadual Outlet + Resit Info, 2026-11-03) and roomier sort / filter button rows */
.flt-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin: 0 0 12px; }
.flt-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; padding-bottom: 9px; }
.flt-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.flt-item > span { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.flt-sel { font: 600 12.5px inherit; font-family: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 10px; min-width: 110px; max-width: 200px; cursor: pointer; }
.flt-item.on .flt-sel { border-color: #FFB320; background: #FFF8EC; }
.flt-clear { align-self: flex-end; }
.jo-sort-row, .ri-sort-row { gap: 14px; row-gap: 12px; margin-bottom: 14px; }
.jo-sort-btn, .ri-sort-btn { margin: 0 2px 4px 0; }

/* filter buttons = sticker look; the native <select> is invisible on top of the button (2026-11-03) */
.flt-row { align-items: center; gap: 12px; margin-bottom: 14px; }
.flt-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.flt-btn .flt-caret { font-size: 13px; margin-left: 2px; opacity: .7; }
.flt-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
:is(body.admin-look, body.dev-look) .flt-btn.on { background: #FFB320 !important; color: var(--ak) !important; }
.flt-btn.on { background: #FFB320; }

/* filter buttons a little closer (2026-11-03) */
.flt-row { gap: 8px; }

/* ============================================================================
   DROPDOWN SKIN 2026-11-03 — the open list of every <select> (js/shared/dropdown.js). Same family as the sticker buttons:
   white card, 2px frame in the page's ink colour, offset shadow, amber for hover / selected.
   ============================================================================ */
.sx-pop { --sx: var(--ak, var(--ink, #2B2630)); position: fixed; z-index: 100000; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 2px solid var(--sx); border-radius: 14px; box-shadow: 0 4px 0 var(--sx), 0 14px 28px rgba(20,16,30,.18); padding: 6px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; animation: sx-in .12s ease-out; scrollbar-width: thin; }
@keyframes sx-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sx-pop ul { list-style: none; margin: 0; padding: 0; }
.sx-pop li { padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--sx); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.sx-pop li.first { color: var(--ink-soft, #6B6575); font-weight: 600; }
.sx-pop li.grp { padding-left: 20px; }
.sx-pop li.head { cursor: default; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft, #6B6575); padding: 8px 12px 4px; }
.sx-pop li.hot { background: #FFF1CC; }
.sx-pop li.sel { background: #FFB320; color: var(--sx); }
.sx-pop li.sel::after { content: '✓'; margin-left: auto; font-weight: 900; }
.sx-pop li.sel.hot { background: #FFA800; }
.sx-pop li.dis { opacity: .4; cursor: not-allowed; }

/* ---- TeleChat Kotak MT, 3 rows per student (2026-11-04): Persesi · HQ · Tele, one MT at a time ---- */
.tc-kt-tabs { margin: 2px 0 10px; }
.tc-kt-tabs .lbt-folder-count i { font-size: 11px; margin-right: 2px; vertical-align: -1px; }
.tc-kt-grid .tc-kt-row td { background: var(--kt-bg); height: 26px; }
.tc-kt-grid .tc-kt-row td.is-we { background-image: linear-gradient(rgba(20, 30, 60, .045), rgba(20, 30, 60, .045)); }
.tc-kt-grid .tc-kt-row.tc-kt-last td { border-bottom: 2px solid #CDD3E3; }
.tc-kt-grid tbody tr.tc-kt-row:hover td { background-color: var(--kt-bg); filter: brightness(0.97); }
.tc-kt-grid .tc-bil.tc-kt-stu { box-shadow: inset 4px 0 0 var(--kt-bar); font-weight: 800; color: var(--ink-soft); vertical-align: middle; }
.tc-kt-grid .tc-nama { min-width: 168px; max-width: 168px; width: 168px; box-sizing: border-box; }
.tc-kt-grid .tc-nama.tc-kt-stu { vertical-align: middle; white-space: normal; line-height: 1.25; padding: 4px 8px; border-bottom: 2px solid #CDD3E3; }
.tc-kt-nm { display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tc-kt-pk { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.tc-kt-warn { color: #C62828; font-size: 13px; }
.tc-kt-grid .tc-kt-src { box-sizing: border-box; position: sticky; left: 198px; z-index: 1; min-width: 70px; width: 70px; text-align: left; padding: 0 6px; font-size: 10.5px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; box-shadow: 2px 0 0 #E3E6F0; }
.tc-kt-grid thead .tc-kt-src { background: #F7F8FC; z-index: 3; }
.tc-kt-grid .tc-kt-src i { font-size: 12px; margin-right: 3px; vertical-align: -1px; }
.tc-kt-r-s .tc-kt-src i { color: #2F8F4E; } .tc-kt-r-h .tc-kt-src i { color: #B26A00; } .tc-kt-r-t .tc-kt-src i { color: #1E88C9; }
.tc-kt-v { display: inline-block; min-width: 24px; padding: 3px 0; border-radius: 6px; font-size: 11px; font-weight: 800; }
.tc-kt-v-s { background: #D7F3DA; color: #1B6E27; }
.tc-kt-v-h { background: #FFE7C2; color: #8A5300; }
.tc-kt-grid td.tc-kt-beza { box-shadow: inset 0 0 0 2px #E53935; }
.tc-kt-nil { color: #C62828; font-weight: 800; font-size: 11px; }
.tc-kt-grid td.tc-kt-tbeza { color: #C62828 !important; background-image: linear-gradient(#FDECEC, #FDECEC) !important; }
.tc-kt-sw-s { background: #D7F3DA; } .tc-kt-sw-h { background: #FFE7C2; } .tc-kt-sw-t { background: #C8F2CC; box-shadow: inset 0 0 0 2px #1E88C9; }
.tc-kt-sw-beza { background: #fff; box-shadow: inset 0 0 0 2px #E53935; }
.tc-kt-grid tfoot td { height: 28px; }
@media (max-width: 700px) {
  .tc-kt-grid .tc-nama { min-width: 120px; max-width: 120px; width: 120px; }
  .tc-kt-grid .tc-kt-src { left: 150px; min-width: 58px; width: 58px; }
}

/* ---- Admin Booking Meja tab (2026-11-04, js/admin/meja_admin.js) ---- */
.bm-head { margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.bm-config-btn { font-size: 12px; padding: 7px 12px; white-space: nowrap; }
.bm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.bm-seg { display: inline-flex; background: var(--grey-bg, #F1F2F6); border-radius: 10px; padding: 3px; gap: 2px; flex-shrink: 0; }
.bm-seg button { border: none; background: transparent; padding: 7px 14px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.bm-seg button.on { background: var(--surface, #fff); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.bm-days { display: flex; flex-wrap: wrap; gap: 4px; }
.bm-days button { border: 1.5px solid var(--line); background: var(--surface, #fff); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.bm-days button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.bm-date { flex: 1 1 280px; max-width: 460px; margin: 0; }
.bm-note { font-size: 11.5px; color: var(--ink-soft); background: var(--bg); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; line-height: 1.5; }
.bm-note i { margin-right: 3px; }
.bm-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.bm-floor, .bm-list { padding: 14px; min-width: 0; }
.bm-list-head { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }
.bm-table-wrap { overflow-x: auto; }
.bm-table { width: 100%; font-size: 12.5px; }
.bm-table .bm-masa { white-space: nowrap; }
.bm-src { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.bm-src-jadual, .bm-src-tetap { background: #ECEEF4; color: #4A5068; }
.bm-src-tempah { background: var(--purple-bg); color: var(--purple-deep); }
.bm-tanpa { margin-top: 10px; font-size: 12px; color: #B71C1C; background: #FDECEC; border-radius: 8px; padding: 8px 10px; line-height: 1.5; }
.bm-empty, .bm-loading, .bm-empty-list { text-align: center; padding: 28px 16px; color: var(--ink-faint); font-size: 13px; }
.bm-empty i { font-size: 28px; display: block; margin-bottom: 8px; }
.bm-empty .btn-outline { margin-top: 12px; }
@media (max-width: 1100px) { .bm-grid { grid-template-columns: minmax(0, 1fr); } }

.bm-table { table-layout: auto; }
.bm-table th, .bm-table td { padding: 8px 10px; }

/* SPLIT SCREEN / TABLET FIX (2026-11-04, owner: "bila split screen akan ade banyak bug, yg saya detect dekat telechat").
   768–1023px (a laptop window split in two, a tablet) still had #screen-admin overflow:hidden, so the WINDOW scrolled
   while the icon rail and the sticky branch strip stuck to a box that never scrolls: the rail scrolled away and the
   branch strip floated over the content. Same overflow:clip as desktop (>=1024) from 768px up. The branch strip's
   bleed now matches the pane padding of each band (it was -28px from 1024 while the pane padding is 20px up to 1099,
   which pushed the strip 8px past both edges). */
@media (min-width: 768px) {
  #screen-admin.active, #screen-admin .admin-main { overflow: clip; }
  #screen-admin .admin-branch-sticky { margin: 0 -28px 6px; padding: 8px 28px 6px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  #screen-admin .admin-branch-sticky { margin: 0 -20px 6px; padding: 8px 20px 6px; }
}
/* A pane's action buttons share the branch row on desktop (absolute, top-right) — but the sticky branch strip
   (z-index 20, with a background) was painted OVER them: Orders "Order Lain-lain"/"Pilih", Jadual Outlet "Export
   Excel" ... were invisible at every desktop width (found 2026-11-04). They now sit above the strip; it still sticks
   alone when the page scrolls. 768–1099px (split screen / tablet): not enough room beside the branch pills, so the
   buttons get their own row above them, like Laporan Bulanan. */
@media (min-width: 768px) {
  #screen-admin .admin-pane-inner:has(> .section-row:first-child + .admin-branch-selector) > .section-row:first-child,
  #screen-admin .admin-pane-inner:has(> .section-row:first-child + div > .admin-branch-selector) > .section-row:first-child { z-index: 21; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  #screen-admin .admin-pane-inner:has(> .section-row:first-child + .admin-branch-selector) > .section-row:first-child,
  #screen-admin .admin-pane-inner:has(> .section-row:first-child + div > .admin-branch-selector) > .section-row:first-child {
    position: static; margin: 0 0 10px !important; flex-wrap: wrap; gap: 6px;
  }
}
/* Orders board at 768–1099px (2026-11-04): the 2-column board (min-height 220px) starts at 768px but the "always open"
   lists only started at 1100px, so split screen showed 4 tall EMPTY cards (orders hidden in a closed accordion). */
@media (min-width: 768px) and (max-width: 1099px) {
  #screen-admin #admin-orders-list > .lb-card > .lb-card-detail { display: block; }
  #screen-admin #admin-orders-list > .lb-card > .lb-card-head { cursor: default; }
  #screen-admin #admin-orders-list > .lb-card > .lb-card-head .lb-chevron { display: none; }
}
/* Pengguna MT table (2026-11-04): 4 fixed columns = 960px and an AUTO name column under table-layout:fixed — below
   ~1100px of content (split screen, 1280px laptop with the full sidebar) the name column got 0px and the MT names
   vanished. A minimum width keeps every column; the table scrolls sideways inside its card. */
#screen-admin .apg-table { min-width: 1180px; }
/* TeleChat KPI cards: 4 across only when there is room (split screen 768–1099 cut "Perlu semak", "Oktober 2026") */
@media (min-width: 768px) and (max-width: 1099px) { .dash-kpis.tc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* TeleChat Kotak MT: "Pindah ke MT" button + menu (2026-11-04) */
.tc-kt-pk { flex-wrap: wrap; }
.tc-mt-btn { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-mt-btn i { font-size: 13px; }
.tc-mt-menu { max-width: 280px; }
.tc-mt-menu-list { display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 360px); overflow-y: auto; }
.tc-mt-opt { grid-template-columns: 1fr; }

/* TeleChat Kotak MT: the date header row stays on top while scrolling down (owner 2026-11-04: "senang nak buat perbandingan").
   The grid scrolls inside its own box (a box with overflow-x cannot stick to the page), the header row sticks to the top
   of that box, the Jumlah rows to its bottom; # / Murid / Sumber / Elaun stay sticky sideways as before. */
.tc-kt-box .tc-grid-wrap { max-height: max(380px, calc(100vh - 150px)); overflow: auto; overscroll-behavior: contain; }
.tc-kt-box .tc-grid thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -2px 0 #DDE1EC; }
.tc-kt-box .tc-grid thead th.tc-bil, .tc-kt-box .tc-grid thead th.tc-nama, .tc-kt-box .tc-grid thead th.tc-kt-src { z-index: 5; }
/* Elaun sits before the days here: not sticky to the right (it slid OVER the Sumber column when scrolled sideways) */
.tc-kt-box .tc-grid .tc-rm { right: auto; box-shadow: none; z-index: 0; }
.tc-kt-box .tc-grid thead th.tc-rm { z-index: 2; box-shadow: inset 0 -2px 0 #DDE1EC; }
.tc-kt-box .tc-grid tfoot td { position: sticky; z-index: 2; background: #F7F8FC; }
.tc-kt-box .tc-grid tfoot tr:nth-child(1) td { bottom: 56px; box-shadow: inset 0 2px 0 #DDE1EC; }
.tc-kt-box .tc-grid tfoot tr:nth-child(2) td { bottom: 28px; }
.tc-kt-box .tc-grid tfoot tr:nth-child(3) td { bottom: 0; }
.tc-kt-box .tc-grid tfoot td.tc-rm { z-index: 2; }
.tc-kt-box .tc-grid tfoot td.tc-rm-tot-l { left: 0; z-index: 4; box-shadow: 2px 0 0 #E3E6F0; }
.tc-kt-box .tc-grid tfoot tr:nth-child(1) td.tc-rm-tot-l { box-shadow: 2px 0 0 #E3E6F0, inset 0 2px 0 #DDE1EC; }

/* TeleChat: Key in HQ (2026-11-04) */
.tc-hq-w { display: flex; gap: 6px; margin-bottom: 4px; }
.tc-hq-w label { flex: 1; flex-direction: row !important; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--line); border-radius: 9px; padding: 8px; cursor: pointer; font-size: 12.5px; color: var(--ink); }
.tc-hq-w label:has(input:checked) { border-color: var(--blue-deep); background: var(--blue-bg); }
.tc-kt-grid td.tc-kt-add { cursor: pointer; }
.tc-kt-grid td.tc-kt-add:hover { box-shadow: inset 0 0 0 2px #E0A43A; background-image: linear-gradient(rgba(255, 196, 92, .25), rgba(255, 196, 92, .25)); }
.tc-kt-srcbtn { font: inherit; font-size: 10.5px; font-weight: 800; color: inherit; background: transparent; border: 0; padding: 2px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.tc-kt-srcbtn:hover { color: #B26A00; }
.tc-kt-srcbtn .tc-kt-plus { font-size: 10px; opacity: .45; margin-left: 1px; }
.tc-kt-srcbtn:hover .tc-kt-plus { opacity: 1; }

/* TeleChat: HQ day menu + delete (2026-11-04) */
.tc-kt-vbtn { font: inherit; border: 0; cursor: pointer; }
.tc-kt-vbtn:hover { box-shadow: 0 0 0 2px #E0A43A; }
.tc-hq-menu { max-width: 300px; }
.tc-hq-mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 9px; font-size: 12px; color: var(--ink); }
.tc-hq-mrow:hover { background: var(--blue-bg); }
.tc-hq-mrow small { display: block; color: var(--ink-soft); font-size: 10.5px; margin-top: 1px; }

/* TeleChat Kotak MT: Gabung (2026-11-06) */
.tc-gb-btn { padding: 2px 6px; }
.tc-gb-opt { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--ink) !important; font-size: 13px !important; font-weight: 500 !important; }
.tc-gb-opt:has(input:checked) { border-color: var(--blue-deep); background: var(--blue-bg); }
.tc-gb-opt.is-off { opacity: .55; cursor: not-allowed; }
.tc-gb-opt small { display: block; color: var(--ink-soft); font-size: 11px; margin-top: 3px; }
.tc-gb-opt input { margin-top: 3px; }

/* ============================================================
   SEMAKAN MT (TeleChat -> MT Template tab) + Akses PPC (2026-11-06)
   ============================================================ */
.smk-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1.5px solid transparent; }
.smk-pill i { font-size: 13px; }
.smk-st-baru  { background: #EEF0FF; color: #3F45B5; border-color: #C9CCF6; }
.smk-st-sub   { background: #FFF5DD; color: #96600A; border-color: #F3D78E; }
.smk-st-balik { background: #FDECEC; color: #B3261E; border-color: #F5C2C0; }
.smk-st-ok    { background: #E7F6EC; color: #1E7B3C; border-color: #B7E1C3; }
.smk-red { color: #C62828; font-weight: 700; }
.smk-empty { padding: 14px; text-align: center; color: var(--ink-faint); font-size: 12.5px; }

/* comparison */
.smk-box { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface); margin: 8px 0 12px; }
.smk-words { background: #FFF7F6; border: 1.5px solid #F6CFCB; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.smk-words-ok { background: #EEF8F1; border-color: #BFE3CB; color: #1E7B3C; font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.smk-words-h { font-size: 12px; font-weight: 800; color: #B3261E; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.smk-words ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.smk-words li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); }
.smk-w-day { font-weight: 800; min-width: 74px; color: var(--ink); }
.smk-w-src { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; color: var(--ink-soft); }
.smk-w-src b { color: var(--ink); }
.smk-w-src.is-beza { border-color: #E57373; background: #FDECEC; color: #B3261E; }
.smk-w-src.is-beza b { color: #B3261E; }
.smk-w-na { opacity: .6; }
.smk-words-tot { font-size: 12px; color: #B3261E; font-weight: 600; }
.smk-grid-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }
.smk-grid { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.smk-grid th, .smk-grid td { padding: 6px 7px; text-align: center; border-bottom: 1px solid #EEF0F6; border-right: 1px solid #F1F2F7; white-space: nowrap; }
.smk-grid thead th { background: #F7F8FC; color: var(--ink-soft); font-size: 10.5px; font-weight: 800; }
.smk-grid thead th.smk-d span { display: block; font-size: 9.5px; font-weight: 700; opacity: .7; }
.smk-grid .smk-src { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 800; color: var(--ink); min-width: 118px; box-shadow: 2px 0 0 #EEF0F6; }
.smk-grid thead .smk-src { background: #F7F8FC; z-index: 2; }
.smk-grid .smk-src i { margin-right: 5px; font-size: 13px; vertical-align: -1px; }
.smk-grid tr.smk-r-s td { background: #F2FAF4; }
.smk-grid tr.smk-r-h td { background: #FFF8EC; }
.smk-grid tr.smk-r-t td { background: #F1F6FF; }
.smk-grid .smk-tot, .smk-grid .smk-rm { font-weight: 800; color: var(--ink); }
.smk-grid td.smk-d { min-width: 34px; font-weight: 700; color: var(--ink); }
.smk-grid th.is-col { background: #FDECEC; color: #B3261E; }
.smk-grid td.is-beza { background: #FDECEC !important; color: #B3261E; box-shadow: inset 0 0 0 2px #E57373; }
.smk-grid td.smk-na { color: var(--ink-faint); font-style: italic; text-align: left; }
.smk-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 10.5px; color: var(--ink-soft); margin-top: 7px; }
.smk-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.smk-sw-beza { background: #FDECEC; box-shadow: inset 0 0 0 2px #E57373; }

/* notes / meta */
.smk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }
.smk-meta i { margin-right: 3px; }
.smk-note { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: 13px; background: #F5F6FA; color: var(--ink); border: 1.5px solid var(--line); }
.smk-note > i { font-size: 18px; margin-top: 1px; }
.smk-note b { display: block; font-size: 11.5px; margin-bottom: 2px; }
.smk-note-admin { background: #FFF6E6; border-color: #F3D28C; }
.smk-note-admin > i { color: #B26A00; }
.smk-note-mt { background: #EEF0FF; border-color: #C9CCF6; }
.smk-note-mt > i { color: #3F45B5; }
.smk-note-ok { background: #EEF8F1; border-color: #BFE3CB; }
.smk-note-ok > i { color: #1E7B3C; }
.smk-quote { margin-top: 6px; padding: 6px 8px; border-left: 3px solid #B7E1C3; background: #fff; border-radius: 6px; }
.smk-sec-h { font-size: 12.5px; font-weight: 800; color: var(--ink); margin: 12px 0 2px; display: flex; align-items: center; gap: 6px; }
.smk-hint-sm { font-size: 12px; color: var(--ink-soft); margin: 8px 0; display: flex; gap: 6px; align-items: center; }
.smk-log { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--ink-soft); }
.smk-log li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.smk-log li div { color: var(--ink); margin-top: 2px; }
.smk-rv-foot { justify-content: flex-end; }
.smk-rv-foot .smk-del { margin-right: auto; color: #C62828; }

/* admin: Kotak MT row buttons + send modal + list */
.smk-kt-send { padding: 2px 6px; }
.smk-kt-pill { border: 1.5px solid; border-radius: 8px; min-height: 24px; padding: 1px 6px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; }
.smk-bulk-btn { margin-left: auto; font-size: 12px; padding: 6px 10px; }
.smk-send-row { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.smk-send-head { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-size: 13px !important; color: var(--ink) !important; }
.smk-send-sum { font-size: 12px; color: var(--ink-soft); margin: 4px 0 6px; }
.smk-send-note { margin-top: 6px; width: 100%; box-sizing: border-box; }
.smk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 10px; }
.smk-card { text-align: left; font: inherit; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 2px 0 rgba(30,34,53,.05); }
.smk-card:hover { border-color: var(--blue-deep); }
.smk-card.is-hot { border-color: #F3D78E; background: #FFFBF0; }
.smk-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--ink); }
.smk-card-sub { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--ink-soft); }
.smk-card-rm { font-size: 12px; color: var(--ink); background: #F5F6FA; border-radius: 8px; padding: 6px 8px; }
.smk-card-na { background: #FFF6E6; }
.smk-card-when { font-size: 10.5px; color: var(--ink-faint); }
.smk-akses-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.smk-akses-row { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.smk-akses-row b { display: block; font-size: 13.5px; color: var(--ink); }
.smk-akses-row small { font-size: 11px; color: var(--ink-soft); }
.smk-switch { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 999px; background: #D5D8E3; position: relative; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.smk-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.smk-switch:checked { background: #2F8F4E; }
.smk-switch:checked::after { left: 21px; }

/* MT: Template tab block + sheet */
.btab { position: relative; }
.smk-tab-badge { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #E53935; color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface, #fff); }
.smk-mt-sec { margin-bottom: 18px; }
.smk-mt-list { display: flex; flex-direction: column; gap: 8px; }
.smk-mt-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px; cursor: pointer; box-shadow: 0 2px 0 rgba(30,34,53,.05); }
.smk-mt-card.is-todo { border-color: #F5C2C0; background: #FFF9F8; }
.smk-mt-card-ic { width: 38px; height: 38px; border-radius: 12px; background: #EEF0FF; color: #3F45B5; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.smk-mt-card.is-todo .smk-mt-card-ic { background: #FDECEC; color: #B3261E; }
.smk-mt-card-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.smk-mt-card-b b { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smk-mt-card-b span { font-size: 11.5px; color: var(--ink-soft); }
.smk-mt-card-b em { font-style: normal; font-size: 11.5px; color: #96600A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.smk-open { overflow: hidden; }
.smk-sheet { position: fixed; inset: 0; z-index: 3500; background: rgba(30,34,53,.45); display: flex; justify-content: center; align-items: stretch; }
.smk-sheet-panel { background: var(--bg, #F5F6FA); width: 100%; max-width: 760px; display: flex; flex-direction: column; height: 100%; box-shadow: 0 24px 70px rgba(30,34,53,.28); }
@media (min-width: 800px) { .smk-sheet { align-items: center; padding: 24px; } .smk-sheet-panel { height: auto; max-height: calc(100vh - 48px); border-radius: 20px; overflow: hidden; } }
.smk-sheet-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border-bottom: 1.5px solid var(--line); }
.smk-sheet-head > div { flex: 1; min-width: 0; }
.smk-sheet-t { font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smk-sheet-s { font-size: 12px; color: var(--ink-soft); }
.smk-sheet-x { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-size: 18px; color: var(--ink); flex-shrink: 0; }
.smk-sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; }
.smk-sheet-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1.5px solid var(--line); }
.smk-submit { width: 100%; border: 0; border-radius: 14px; padding: 13px; font: inherit; font-size: 15px; font-weight: 800; color: #fff; background: var(--mt-indigo, #3F45B5); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 3px 0 rgba(30,34,53,.18); }
.smk-submit:disabled { opacity: .6; }
.smk-step { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; }
.smk-step > div { flex: 1; min-width: 0; }
.smk-step b { display: block; font-size: 14px; color: var(--ink); }
.smk-step small { font-size: 11.5px; color: var(--ink-soft); }
.smk-step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--mt-indigo, #3F45B5); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smk-mini-btn { border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap; }
.smk-tips { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-soft); background: var(--surface); border: 1.5px dashed var(--line); border-radius: 12px; padding: 10px 12px; }
.smk-tips > div { display: flex; gap: 8px; align-items: flex-start; }
.smk-tips i { font-size: 15px; color: var(--ink); margin-top: 1px; }
.smk-tips b { color: var(--ink); }
.smk-lp { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px; margin: 8px 0; min-height: 60px; }
.smk-remark { width: 100%; box-sizing: border-box; margin-top: 6px; font-size: 14px; }
/* Semakan MT, MT view: every date of the month, no totals (owner 2026-11-07) */
.smk-grid th.is-we, .smk-grid td.is-we { background-image: linear-gradient(rgba(20, 30, 60, .05), rgba(20, 30, 60, .05)); }
.smk-grid-mt td.smk-d, .smk-grid-mt th.smk-d { min-width: 30px; padding: 6px 4px; }
.smk-grid-mt .smk-src { min-width: 108px; }

/* Semakan Admin card in Template > Laporan + list sheet (owner 2026-11-07) */
.tmpl-card-badge { position: absolute; top: 10px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #E53935; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.smk-mt-sum { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.smk-none { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 20px; color: var(--ink-soft); font-size: 13px; }
.smk-none i { font-size: 38px; color: #2F8F4E; }
.smk-none b { font-size: 15px; color: var(--ink); }

/* TeleChat Kotak MT: Baki per murid (2026-11-08, same as Laporan Bulanan) */
.tc-kt-baki { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #EEF8F1; color: #1E7B3C; border: 1px solid #BFE3CB; white-space: nowrap; cursor: help; }
.tc-kt-baki i { font-size: 11px; }
.tc-kt-baki.is-owe { background: #FFF5DD; color: #96600A; border-color: #F3D78E; }
.tc-kt-baki.is-awal { background: #EEF0FF; color: #3F45B5; border-color: #C9CCF6; }
.tc-kt-baki.is-load { background: #F5F6FA; color: var(--ink-faint); border-color: var(--line); }

/* Admin Profile: Kod Rujukan (2026-11-08) */
.adm-ref-card { max-width: 640px; margin: 0 auto 16px; padding: 16px; }
.adm-ref-load { padding: 14px; text-align: center; color: var(--ink-faint); }
.adm-ref-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 6px 0 10px; }
.adm-ref-code { display: flex; gap: 6px; }
.adm-ref-code span { width: 40px; height: 48px; border-radius: 10px; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', 'Plus Jakarta Sans', monospace; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: 0; }
.adm-ref-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-ref-wa { color: #1B7F3B !important; }
.adm-ref-sub { font-size: 12px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 12px; }
.adm-ref-h { font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.adm-ref-list { display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.adm-ref-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; border-bottom: 1px solid var(--line); }
.adm-ref-row:last-child { border-bottom: 0; }
.adm-ref-nm { font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ref-dt { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.adm-ref-pill { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.adm-ref-ok { background: #E7F6EC; color: #1E7B3C; }
.adm-ref-wait { background: #FFF5DD; color: #96600A; }
.adm-ref-no { background: #F1F2F6; color: #6B7080; }
.adm-ref-empty { font-size: 12.5px; color: var(--ink-faint); padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 12px; }
@media (max-width: 480px) { .adm-ref-code span { width: 36px; height: 44px; font-size: 21px; } }

/* Bil Langganan: QR bayaran + resit (2026-11-08) */
.dv-qr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dv-qr img { width: 168px; height: 168px; object-fit: contain; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 6px; }
.dv-qr.is-compact { margin-bottom: 12px; padding: 10px; border: 1.5px dashed var(--line); border-radius: 12px; }
.dv-qr.is-compact img { width: 132px; height: 132px; }
.dv-qr-t { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-soft); min-width: 180px; flex: 1; }
.dv-qr-t b { color: var(--ink); }
.dv-qr-dl { font-size: 12px; font-weight: 700; color: var(--blue-deep); text-decoration: none; margin-top: 2px; }
.dv-cl-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }