/* =========================================================
   Plato Clone — Gaya dikongsi (semua skrin guna fail ini)
   ========================================================= */

/* Font sebenar Plato: Lato (diekstrak getComputedStyle — spec/ui-style-guide.md) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* Palet standard MIDIVIS. !important melindungi UI daripada JavaScript lama
   yang mungkin masih tersimpan dalam cache browser. */
:root {
  --brand: #04165B !important;    /* sidebar standard */
  --accent: #4267B2 !important;   /* aktif/butang utama standard */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  background: #f4f5f7;
  color: #333;
  display: flex;
  min-height: 100vh;
}

/* ===== SIDEBAR (menu kiri) ===== */
.sidebar {
  width: 180px;                 /* Plato: 180px tepat */
  background: var(--brand);
  color: #9FABD4;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  /* Sidebar sendiri TIDAK menatal — .menu di bawah yang menatal.
     Ini kelakuan Plato: logo dipaku di atas dan senarai menu bergerak
     di bawahnya, jadi item teratas terpotong pada tepi kawasan menu.
     Dahulunya seluruh sidebar (logo termasuk) yang menatal, jadi logo
     hanyut keluar pandangan sebaik sahaja menu cukup panjang. */
  overflow: hidden;
}
/* Logo dipaku: jangan biar flex mengecutkannya, dan jangan sertakan ia
   dlm kawasan tatal. */
.logo { text-align: center; padding: 20px 0; flex-shrink: 0; }
/* Kawasan tatal sebenar.
   `min-height:0` WAJIB: item flex enggan mengecut di bawah saiz
   kandungannya secara lalai, jadi tanpa ia .menu membesar melepasi
   sidebar dan tiada apa yang menatal langsung.
   Palang tatal DISEMBUNYIKAN (Plato tidak pernah memaparkannya) tetapi
   `overflow-y:auto` KEKAL — menu boleh mencecah 956px bila submenu
   dikembangkan, jadi menggugurkan overflow akan menjadikan Logout
   mustahil dicapai pada tetingkap pendek. */
.menu {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* Edge lama */
}
.menu::-webkit-scrollbar { width: 0; height: 0; }   /* Chrome / Safari / Edge */
.logo .logo-img {
  width: 76px; height: 76px; display: block; margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.28));
}
/* Wordmark di bawah avatar. Nisbah diambil dari logo menegak Plato
   (imej 60x92: avatar di atas, wordmark rapat di bawahnya) — jadi jurang
   kecil sahaja, bukan jarak perenggan. `line-height:1` menghalang
   ruang atas/bawah fon daripada menolaknya turun. */
.logo .brand {
  font-size: 22px; font-weight: bold; color:#fff; letter-spacing: 1px;
  line-height: 1; margin-top: 8px;
}

.menu a {
  display: flex; align-items: center; gap: 10px;  /* gap 10px = margin-right ikon Plato */
  padding: 15px;                                  /* Plato: 15px */
  color: #9FABD4;                                 /* Plato: biru pudar */
  text-decoration: none;
  font-size: 13px; font-weight: 700;              /* Plato: 13px bold */
  line-height: 18.57px;                           /* Plato: 18.57px -> 15+18.57+15 = ~49px tinggi item */
}
/* Garis pemisah antara item menu. Tanpa ia menu kita satu blok navy
   tanpa jeda, jadi mata tiada apa-apa untuk mengasingkan item semasa
   mengimbas senarai 14 item.
   `>` sahaja: item aras kedua duduk dalam .submenu (latar lebih gelap
   sendiri) dan Plato tidak melukis garis ini di situ.
   1px, bukan 0.57px yang dilaporkan getComputedStyle — 0.57px ialah
   1px Plato selepas penskalaan zoom, dan sempadan sub-piksel begitu
   hilang terus pada paparan 1x. */
.menu > a { border-bottom: 1px solid rgba(255,255,255,.05); }
.menu a .icon {
  width: 20px; text-align: center;                /* Plato: 20px */
  font-size: 16px;                                /* Plato: 16px (ikon lebih besar drpd teks 13px) */
  line-height: inherit;                           /* jangan biar ikon 16px menolak tinggi baris melebihi 18.57px */
}
.menu a .chev { margin-left: auto; opacity: .6; }
/* Plato: hanya latar bertukar semasa hover — teks & ikon KEKAL #9FABD4.
   Kita dahulunya memutihkan teks juga, jadi hover kelihatan seperti
   item aktif kedua dan staf tersilap baca menu mana yang dibuka. */
.menu a:hover { background: rgba(0,2,57,.13); }
.menu a.active { background: var(--accent); color:#fff; }

/* ===== KANDUNGAN KANAN ===== */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: #fff;
  /* Plato: bayang kebiruan halus, BUKAN garis kelabu. */
  box-shadow: 0 1px 2px 0 rgba(18,49,159,.15);
  height: 40px;                                   /* Plato: 40px tepat */
  /* Item kiri Plato ialah SEL setinggi 40px dgn padding sendiri (9px 16px)
     dan garis pemisah #E9E9E9 — bukan baris flex ber-gap. `gap:18px` +
     `padding:0 20px` kita dahulunya menambah jarak DI ATAS padding itu,
     jadi hamburger duduk pada x=200 dan tiada pemisah langsung.
     Dgn padding 0 di sini + 16px pada sel: glyph mendarat pd x=196 dan
     pemisah pd x=225 — sama tepat dgn Plato. */
  display: flex; align-items: stretch; gap: 0; padding: 0;
  font-size: 14px; font-weight: 400; color: #000; /* Plato: 14px/400/hitam */
  flex-shrink: 0;                                 /* jgn dihimpit oleh kandungan tinggi */
}
.topbar .hamburger {
  display: flex; align-items: center; justify-content: center;
  /* Lebar DIPAKU 45px, bukan padding 16px seperti Plato. Sebabnya glyph
     kita `☰` selebar 14px sedangkan `fa-bars` Plato 12px — dgn padding
     16px sel jadi 46px dan segala-galanya di sebelah kanan tersorong 1px.
     Memaku 45px mengekalkan pemisah pd x=224 dan "Create New Patient"
     pd x=225 seperti Plato; glyph mendarat pd ~195 (Plato 196). */
  width: 45px; flex: 0 0 45px; padding: 0;
  border-right: 1px solid #E9E9E9;                /* Plato: pemisah sel kiri */
  font-size: 14px; color: #000; cursor: pointer;  /* Plato: 14px hitam, bukan 20px kelabu */
}
.topbar .new-patient {
  background: none; cursor: pointer;
  border: none; border-right: 1px solid #E9E9E9;
  padding: 0 16px;
  font-size: 14px; color:#000; display:flex; align-items:center; gap:6px;
}
.topbar .new-patient:hover { color:var(--accent); }
/* Kanan: Plato guna float:right dgn a{padding:9px}, jadi jarak antara dua
   item bersebelahan = 9+9 = 18px dan item terakhir berhenti 9px dari tepi. */
.topbar .right { margin-left: auto; display:flex; align-items:center; gap:18px; padding-right: 9px; }
.topbar .user { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:400; color:#999; }
.topbar .loc-badge { color:#000; font-size:14px; font-weight:400; }
.topbar .check { color:#888; }

.content { padding: 15px; }   /* Plato: .page{padding:15px} */
.page-title { font-size: 20px; color:#333; margin: 16px 0; font-weight: 600; }

/* ===== Tab carian ===== */
.tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border-bottom: none; }
.tabs .tab {
  /* Plato: 7px 10px, bukan 10px 18px. Padding lama menjadikan jalur tab
     ~40px berbanding 34px Plato dan setiap tab jauh lebih lebar. */
  padding: 7px 10px; line-height: 20px;
  font-size: 14px; font-weight: 400; cursor: pointer;
  /* margin-bottom -2px = tab ditarik turun menindih atas .card, jadi tab
     aktif nampak bercantum dgn panel putih di bawahnya. `margin-right:3px`
     gantikan `gap:4px`; `position:relative`+z-index perlu supaya sempadan
     .card (dilukis kemudian dlm DOM) tidak menutupi 2px tindanan itu. */
  margin: 4px 3px -2px 0;
  position: relative; z-index: 1;
  background: var(--accent); color: #FAFAFA;
  border: none; border-radius: 4px 4px 0 0;
  transition: all .2s;
}
.tabs .tab:hover { background: #00145E; color: #FAFAFA; }   /* Plato: navy gelap */
/* Tab aktif Plato TIADA sempadan — putih rata dgn teks kelabu. Sempadan
   #ddd + border-bottom putih kita dahulunya cuba melakar "gigi" tab
   sendiri; tindanan -2px di atas sudah melakukannya. */
.tabs .tab.active { background:#fff; color:#767676; border:none; }

/* ===== Kad + toolbar ===== */
/* Plato .tab-content: sempadan #E9E9E9 + bayang halus. `padding:15px`
   Plato SENGAJA tidak disalin ke sini — 54 daripada .card kita
   membungkus jadual penuh-lebar tanpa padding; menambahnya akan
   menyorong setiap jadual ke dalam 15px. Kad yang memang perlu
   padding sudah menetapkannya sendiri. */
.card { background:#fff; border:1px solid #E9E9E9; border-radius:4px;
        box-shadow:0 1px 1px 0 rgba(0,0,0,.1); }
.toolbar { display:flex; align-items:center; gap:14px; padding:14px; flex-wrap: wrap; }
.search-box {
  flex: 1; min-width: 220px; display:flex; align-items:center;
  border:1px solid #ccc; border-radius:4px; padding:8px 10px;
}
.search-box input { border:none; outline:none; flex:1; font-size:14px; margin-left:8px; }
select { padding:8px; border:1px solid #ccc; border-radius:4px; font-size:13px; background:#fff; }
.count { font-size:14px; font-weight:400; color:#000; }   /* Plato: TIDAK bold */
.spacer { margin-left:auto; }
.provider { display:flex; align-items:center; gap:8px; color:#888; font-size:13px; }
.provider select { min-width: 220px; }

/* ===== Jadual ===== */
table { width:100%; border-collapse: collapse; }
/* GRID PENUH. Nilai ini diekstrak terus daripada clinic.platomedical.com
   (#/patients dan #/queue) melalui getComputedStyle, bukan daripada
   pemerhatian skrin. Jadual Plato ialah
   `table table-bordered table-striped` — jadi SETIAP sel ada tepi, bukan
   garis bawah sahaja:
     th  atas: none | kanan 1px | bawah 2px | kiri 1px   (#ddd)
     td  keempat-empat: 1px #ddd
   Sempadan yang dilaporkan sbg 0.634921px/1.90476px ialah 1px/2px yang
   dijepit browser kpd piksel peranti pada DPR 1.575 — bukan nilai ditulis.
   th align BAWAH, td align ATAS: sel berbilang baris (nama pesakit yg
   membalut dlm Queue) sejajar ke atas manakala tajuk lajur duduk rapat
   pada garis 2px di bawahnya. */
thead th {
  text-align:left; font-size:14px; color:#000; font-weight:700;
  padding:10px; line-height:20px; vertical-align:bottom; background:transparent;
  border:1px solid #ddd; border-top:none; border-bottom:2px solid #ddd;
}
th .sort { color:#aaa; font-size:12px; margin-left:4px; }
tbody td {
  padding:10px; font-size:14px; line-height:20px; color:#000;
  vertical-align:top; border:1px solid #ddd;
}
/* Zebra — `table-striped`. Plato meletakkannya pada <td>, bukan <tr>:
   getComputedStyle(tr) pulang telus manakala td baris ganjil = #F9F9F9.
   Ia mesti kekal pada td di sini juga, kerana hover di bawah dan latar
   sebaris (lencana status Queue) akan menutupinya jika tidak. */
tbody tr:nth-of-type(odd) > td { background:#F9F9F9; }
/* Hover ialah TAMBAHAN kita — Plato tiada `.table-hover`. Dikekalkan
   kerana jadual kita sampai 14 lajur dan mata perlu jejak baris merentas
   skrin. Disasarkan pada td supaya ia menang atas zebra di atas. */
tbody tr:hover > td { background:#f7f9ff; }

/* Butang utama Plato: BUKAN tanpa sempadan. Ia ada tepi navy gelap
   #00145E 1px yang menambat butang biru pada latar putih, dan radius
   2px (hampir tajam) — bukan 3-4px yang kita pakai dahulu. */
/* = `.btn.btn-primary.btn-xs` Plato: 12px/400, padding 1px 5px, radius 2px.
   Diukur pada butang "View Records" sebenar = 83x21px. Padding 6px 12px
   kita dahulunya memberi 93x26 — butang jauh lebih gempal drpd Plato. */
.view-btn {
  background:var(--accent); color:#fff; border:1px solid #00145E; border-radius:2px;
  padding:1px 5px; font-size:12px; font-weight:400; line-height:1.5;   /* lh Bootstrap -> tinggi 21px */
  cursor:pointer; white-space:nowrap;
}
.view-btn:hover { background:#2f5bb5; }

/* ===== Navigasi tarikh (Queue) ===== */
.date-nav { display:flex; align-items:center; gap:10px; }
.date-nav button {
  border:1px solid #ccc; background:#fff; border-radius:4px;
  padding:7px 12px; cursor:pointer; font-size:13px;
}
.date-nav button:hover { background:#f0f0f0; }
.date-nav .date { font-weight:bold; font-size:14px; }

/* ===== Pil status Queue (warna ikut spec M3) ===== */
.status { display:inline-block; padding:4px 10px; border-radius:12px; font-size:12px; color:#fff; }
.s-checkin   { background:#2e9e5b; }  /* hijau */
.s-consult   { background:#7a52c7; }  /* ungu */
.s-lab       { background:#e08a1e; }  /* oren */
.s-treatment { background:var(--accent); }  /* biru */
.s-scan      { background:#d4537e; }  /* merah jambu */
.s-dispensary{ background:#d9b400; }  /* kuning */
.s-checkout  { background:#888; }      /* kelabu */

/* ===== Kalendar Appointments ===== */
.calendar { display:flex; border:1px solid #e3e3e3; background:#fff; overflow:auto; }
.cal-time-col { width:70px; flex-shrink:0; border-right:1px solid #eee; }
.cal-time-col .head, .cal-col .head {
  height:40px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:bold; background:#fafafa; border-bottom:1px solid #eee;
}
.cal-time-col .slot { height:50px; font-size:11px; color:#999; padding:3px 6px; border-bottom:1px solid #f3f3f3; }
.cal-col { flex:1; min-width:130px; border-right:1px solid #eee; }
.cal-col .slot { height:50px; border-bottom:1px solid #f3f3f3; padding:2px; cursor:pointer; }
.cal-col .slot:hover { background:#f7f9ff; }
.appt {
  background:#dbe7fb; border-left:3px solid var(--accent); border-radius:3px;
  font-size:11px; padding:3px 5px; height:100%; overflow:hidden;
}
.appt.green { background:#dbf3e3; border-left-color:#2e9e5b; }
.appt.pink  { background:#fbe1ec; border-left-color:#d4537e; }

/* ===== Borang (Create Patient dll) ===== */
.form-section {
  background:#fff; border:1px solid #e3e3e3; border-radius:4px;
  margin-bottom:16px; padding:18px;
}
.form-section h3 {
  font-size:15px; color:#2b2e5e; margin-bottom:14px;
  border-bottom:1px solid #eee; padding-bottom:8px;
}
.form-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.field label { display:block; font-size:13px; color:#555; margin-bottom:5px; }
.field label .req { color:#d33; }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=date], .field select, .field textarea {
  width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; font-size:14px;
}
.field textarea { min-height:60px; resize:vertical; }
.field.full { grid-column: 1 / -1; }
.checkbox-row { display:flex; align-items:center; gap:8px; font-size:14px; }
.btn-primary {
  background:var(--accent); color:#fff; border:1px solid #00145E; border-radius:4px;
  padding:11px 26px; font-size:14px; cursor:pointer;   /* Plato: tepi #00145E, radius 4px (2px itu .btn-xs) */
}
.btn-primary:hover { background:#2f5bb5; }
/* = `.btn.btn-default.grey-border` Plato. Diukur pada butang
   "Show/Hide Columns" / "Edit Statuses" sebenar = tinggi 31px:
   bg #FAFAFA (bukan putih), teks #767676 (bukan #333), tepi #999
   (bukan #ccc), padding 6px 12px (bukan 11px 20px — kita hampir 40px
   tinggi, sepertiga lebih gempal drpd Plato). */
.btn-secondary {
  background:#FAFAFA; color:#767676; border:1px solid #999; border-radius:4px;
  padding:6px 12px; font-size:14px; cursor:pointer;
}
.add-link { color:var(--accent); font-size:13px; text-decoration:none; }
.add-link:hover { text-decoration:underline; }
.toast {
  --toast-accent:#c43d3d;
  position:fixed; top:22px; right:22px; z-index:1000;
  width:min(420px,calc(100vw - 32px)); min-height:58px;
  display:grid; grid-template-columns:34px 1fr 28px; align-items:center; gap:10px;
  padding:12px 12px 12px 14px; overflow:hidden;
  background:#fff; color:#25283a; border:1px solid #e3e5ec;
  border-left:4px solid var(--toast-accent); border-radius:10px;
  box-shadow:0 14px 38px rgba(18,26,58,.18),0 3px 10px rgba(18,26,58,.08);
  opacity:0; visibility:hidden; transform:translateY(-12px) scale(.98);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  pointer-events:none;
}
.toast.show { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.toast.success { --toast-accent:#258653; }
.toast.warning { --toast-accent:#c17a12; }
.toast.info { --toast-accent:#315fc6; }
.toast-icon {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:color-mix(in srgb,var(--toast-accent) 13%,white);
  color:var(--toast-accent); font-size:16px; font-weight:800;
}
.toast-message { font-size:13px; line-height:1.45; font-weight:600; }
.toast-close {
  width:28px; height:28px; padding:0; border:0; border-radius:6px;
  background:transparent; color:#7b8092; font-size:21px; line-height:1; cursor:pointer;
}
.toast-close:hover { background:#f1f2f6; color:#25283a; }
@media (max-width:600px) {
  .toast { top:12px; right:16px; left:16px; width:auto; }
}

/* ===== Grid kad (System Setup, Intelligence) ===== */
.grid-cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap:14px; margin-top:16px; }
.grid-cards .gcard {
  background:#fff; border:1px solid #e3e3e3; border-radius:4px;
  padding:18px; cursor:pointer; text-align:center;
}
.grid-cards .gcard:hover { border-color:var(--accent); box-shadow:0 1px 4px rgba(58,111,216,.15); }
.grid-cards .gcard .gicon { font-size:26px; margin-bottom:8px; }
.grid-cards .gcard .gname { font-size:14px; font-weight:bold; color:#333; }
.grid-cards .gcard .gdesc { font-size:12px; color:#888; margin-top:4px; }

/* ===== Sub-tab dalam halaman ===== */
.subtabs { display:flex; gap:0; border-bottom:2px solid #e3e3e3; margin:14px 0; }
.subtabs .stab {
  padding:10px 20px; font-size:14px; cursor:pointer; background:none; border:none;
  color:#666; border-bottom:2px solid transparent; margin-bottom:-2px;
}
.subtabs .stab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:bold; }

/* ===== Invois ===== */
.invoice-summary { margin-top:10px; border-top:2px solid #333; padding-top:8px; max-width:340px; margin-left:auto; }
.invoice-summary .row { display:flex; justify-content:space-between; font-size:14px; padding:4px 0; }
.invoice-summary .row.total { font-weight:bold; font-size:16px; border-top:1px solid #ccc; padding-top:8px; }
.badge-nkda { background:#d33; color:#fff; padding:2px 8px; border-radius:3px; font-size:11px; font-weight:bold; }

/* ===== Header info pesakit ===== */
.patient-head {
  background:#fff; border:1px solid #e3e3e3; border-radius:4px;
  padding:16px; margin-top:16px; display:flex; gap:18px; align-items:center;
}
.patient-head .avatar {
  width:64px; height:64px; border-radius:50%; background:#dbe7fb;
  display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--accent);
}
.patient-head .pname { font-size:18px; font-weight:bold; }
.patient-head .pmeta { font-size:13px; color:#777; margin-top:4px; }

/* =========================================================
   RESPONSIF GLOBAL (telefon/tablet) — ditambah 26/08/2026
   ---------------------------------------------------------
   SEMUA peraturan di bawah berada DALAM `@media screen and ...`.
   Tiada satu pun peraturan desktop di atas diubah, jadi paparan
   >=821px kekal bait-untuk-bait sama seperti sebelum ini.

   `screen and` itu WAJIB, bukan hiasan: kertas A4/Letter dalam
   piksel CSS ialah ~794-816px, iaitu DI BAWAH ambang 820px. Tanpa
   kata kunci `screen`, setiap cetakan (borang, resit, sijil MC)
   akan tiba-tiba mengambil susun atur telefon.
   ========================================================= */

/* ---- Lapisan gelap di belakang sidebar off-canvas ----
   Dicipta sekali oleh initMobileNav() dalam app.js dan kekal
   display:none pada desktop, jadi ia tidak menyentuh apa-apa
   di sana. */
.nav-overlay { display: none; }

@media screen and (max-width: 820px) {

  /* ===== 1) SIDEBAR OFF-CANVAS ===== */
  /* position:sticky tidak boleh digelongsor keluar skrin sambil
     mengekalkan lebar 0 dalam aliran flex body — ia akan sentiasa
     menempah 180px. Pada mobile sahaja ia bertukar kepada fixed,
     jadi .main mewarisi seluruh lebar viewport. */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100%;
    width: 240px;
    max-width: 82vw;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 2px 0 14px rgba(0,0,0,.35);
    align-self: auto;
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .nav-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
  /* Kunci tatal halaman semasa menu terbuka */
  body.nav-open { overflow: hidden; }

  /* Sasaran ketikan baris menu >= 48px */
  .menu a { min-height: 48px; padding: 14px 16px; font-size: 14px; }
  .logo { padding: 14px 0; }
  .logo .logo-img { width: 60px; height: 60px; }

  /* ===== 2) SHELL / TOPBAR ===== */
  body { display: block; }              /* sidebar sudah keluar aliran */
  .main { width: 100%; max-width: 100%; }

  .topbar {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 8px 12px;
  }
  /* Hamburger ke KANAN baris pertama (ikut kelakuan Plato mobile) */
  .topbar .hamburger {
    order: 2;
    margin-left: auto;
    font-size: 24px;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  /* Identiti pengguna + cawangan kekal di kiri baris pertama */
  .topbar .right {
    order: 1;
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    flex-wrap: wrap;
  }
  .topbar .right select { max-width: 42vw; min-width: 0; }
  .topbar .user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Butang "Create New Patient" turun ke baris kedua, selebar penuh */
  .topbar .new-patient {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #d5d5d5; border-radius: 4px;
    background: #fafafa;
  }

  .content { padding: 0 12px 16px; }
  .page-title { font-size: 17px; margin: 12px 0; }

  /* ===== 3) TIADA LIMPAHAN MENDATAR ===== */
  .main, .content, .card, .form-section, .patient-head { max-width: 100%; min-width: 0; }
  img, video, canvas, iframe { max-width: 100%; }
  pre { overflow-x: auto; }

  /* ===== 4) JADUAL MENATAL MENDATAR =====
     Jadual KEKAL jadual (tiada penukaran jadi kad). display:block
     menjadikan elemen <table> itu sendiri bekas tatal; thead/tbody
     kekal dibungkus satu kotak jadual tanpa nama, jadi lajur masih
     berbaris antara kepala dan badan. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  thead th, tbody td { white-space: nowrap; }
  /* Sel yang memang perlu membalut (nota, alamat, mesej "Loading...") */
  tbody td[colspan] { white-space: normal; }

  /* ===== 5) BARIS PENAPIS BERTINDAN (selebar penuh) ===== */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .toolbar > * { width: 100%; }
  .search-box { min-width: 0; width: 100%; }
  .provider { justify-content: space-between; }
  .provider select, .toolbar select { width: 100%; min-width: 0; }
  .spacer { margin-left: 0; }
  .count { padding: 2px 0; }

  /* Baris alat khusus Queue (.qtools/.qt-left/.qt-right ditakrif dalam
     <style> queue.html; ia dimuat SELEPAS fail ini, jadi pemilih di sini
     diberi awalan `body` untuk menang keutamaan tanpa menyentuh fail itu) */
  body .qtools { flex-direction: column; align-items: stretch; padding: 12px 12px 0; }
  body .qtools.last { padding-bottom: 12px; }
  body .qt-left, body .qt-right { width: 100%; min-width: 0; flex: 1 1 auto; }
  body .qt-right { justify-content: space-between; }
  body .qt-right select { flex: 1 1 auto; min-width: 0; width: auto; }
  body .addq { max-width: 100%; }
  body .addq input { min-width: 0; }

  /* Navigasi tarikh kekal SATU baris (ikut Plato): butang mengecut,
     kotak tarikh mengambil baki ruang. */
  body .qt-left { flex-direction: row; flex-wrap: nowrap; gap: 4px; }
  body #prevDay, body #nextDay { width: auto; flex: 0 0 auto; padding: 0 8px; font-size: 12px; min-height: 40px; }
  body .qdate-wrap { flex: 1 1 auto; min-width: 0; }
  body .qdate-in { width: auto; flex: 1 1 auto; min-width: 0; height: 40px; }
  body .qaddon { height: 40px; }
  body .qaddon.cal { width: 42px; flex: 0 0 42px; }
  body .qaddon.mag { width: 52px; flex: 0 0 52px; }
  /* Tajuk panel + [Filter] + refresh kekal satu baris */
  body .qhead { gap: 8px; padding: 8px 12px; font-size: 12px; }
  body .qhead .hbtns { flex: 0 0 auto; }
  body .qhead .refresh, body .qhead .hbtn { min-height: 40px; height: auto; }

  /* ===== 6) SASARAN KETIKAN >= 40px ===== */
  .content button, .view-btn, .btn-primary, .btn-secondary,
  .tabs .tab, .subtabs .stab { min-height: 40px; }
  .btn-primary, .btn-secondary { padding: 11px 18px; }
  /* Kekalkan kalendar/datepicker padat — 42 butang x 40px tidak muat */
  .dp button, .dp-g button, .dp-h button, .dp-f button { min-height: 0; }
  .subtabs { overflow-x: auto; }
  .subtabs .stab { white-space: nowrap; }

  /* ===== 7) MODAL MUAT DALAM SKRIN ===== */
  body .modal-bg, body .modal-overlay, body .modal, body .set-modal, body .ov {
    padding: 12px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  body .modal-bg > *, body .modal-overlay > *, body .modal > *,
  body .set-modal > *, body .ov > * {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px);
    overflow: auto;
    box-sizing: border-box;
  }

  /* ===== 8) LAIN-LAIN ===== */
  .patient-head { flex-wrap: wrap; gap: 12px; padding: 12px; }
  .patient-head .avatar { width: 48px; height: 48px; font-size: 20px; }
  .form-section { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .invoice-summary { max-width: 100%; margin-left: 0; }
  .calendar { max-width: 100%; }
  .toast { left: 12px; right: 12px; top: 12px; }
}

@media screen and (max-width: 480px) {
  .topbar .right span.user { max-width: 34vw; }
  .tabs .tab { padding: 10px 12px; font-size: 13px; }
}

/* =========================================================
   RESPONSIF — JARING AM (blok kedua, sengaja SELEPAS blok di atas)
   ---------------------------------------------------------
   33 halaman shell membawa kira-kira 60 kelas baris-alat sendiri
   (.srow, .frow, .rhead, .ctoolbar, .fbar2, .hd-btns, ...) yang
   ditakrif dalam <style> setiap halaman sebagai `display:flex`
   TANPA flex-wrap, banyak dengan asas tetap (`flex:0 0 380px`).
   Menyenaraikan setiap satu di sini bermakna fail ini perlu
   dikemas kini setiap kali satu halaman baharu menambah kelas
   baris — jadi sebaliknya kita hidupkan pembalutan secara am dan
   kunci semula HANYA baris yang memang mesti kekal satu baris.

   flex-wrap diabaikan sepenuhnya oleh elemen yang bukan bekas
   flex, jadi pemilih `*` di sini tidak menyentuh apa-apa selain
   baris flex yang sedia ada.
   ========================================================= */
@media screen and (max-width: 820px) {

  .main * { flex-wrap: wrap; }

  /* Asas tetap (cth `flex:0 0 380px`) tidak boleh melebihi bekasnya */
  .content input, .content select, .content textarea { max-width: 100%; }

  /* Baris yang MESTI kekal satu baris walaupun sempit */
  .date-nav,
  body .qhead, body .qt-left, body .qdate-wrap, body .addq,
  .search-box, .status, .subtabs { flex-wrap: nowrap; }
  /* .tabs sengaja DIKECUALIKAN: gaya desktop sudah flex-wrap:wrap,
     jadi ia terus membalut pada mobile — kelakuan yang sama. */
}

/* =========================================================
   RESPONSIF — PEMBETULAN YG DIJUMPAI SEMASA MENGIMBAS 33 HALAMAN
   pada 375px (bukan tekaan; setiap satu di sini benar-benar
   menyebabkan document.body.scrollWidth > lebar viewport).
   ========================================================= */
@media screen and (max-width: 820px) {

  /* Jadual dgn min-width tetap (cth setup-backup `table.bk{min-width:420px}`,
     queue `.qtable{min-width:1300px}`). Kerana peraturan di atas menjadikan
     <table> itu sendiri bekas tatal, min-width memaksa BEKAS itu melebar dan
     halaman yang melimpah — bukan kandungan yang menatal. Dengan min-width:0
     bekas mengecut kepada lebar skrin dan kotak jadual di dalamnya (yang
     `white-space:nowrap` kekalkan lebar asalnya) menatal di dalamnya.
     !important perlu: pemilih halaman ialah `table.bk` (0,1,1). */
  table { min-width: 0 !important; }

  /* Grid dgn bilangan lajur TETAP — auto-fill mengecut sendiri, tetapi
     `1fr 1fr 220px` / `repeat(6, minmax(110px,1fr))` tidak boleh. */
  /* Awalan `body` WAJIB di sini: `.fbar` juga ditakrif dalam <style> setiap
     halaman, yang dimuat SELEPAS fail ini. Pada keutamaan yang sama, yang
     terkemudian menang — jadi tanpa `body` peraturan ini kalah senyap. */
  body .fbar, body .fgrid, body .pickrow,
  body .ohead, body .ofoot, body .olg { grid-template-columns: 1fr; }
  body .fbar .gen { grid-column: auto; }
}

/* =========================================================
   CETAK — rangka bersama untuk semua halaman aplikasi
   ---------------------------------------------------------
   Semua butang Print yang mencetak halaman semasa melalui stylesheet ini.
   Chrome akan mencetak seluruh DOM secara lalai, termasuk sidebar/topbar;
   sebab itu laporan Intelligence dahulu keluar bersama navigasi aplikasi.

   Peraturan ini hanya aktif pada media cetak. Ia membuang chrome dan
   kawalan interaktif, mengembangkan bekas jadual yang boleh ditatal, dan
   mengembalikan kandungan utama kepada lebar penuh kertas. Gaya cetakan
   khusus sesuatu modul (contohnya Stock Taking) masih boleh menambah aturan
   sendiri tanpa perlu menyalin pembetulan shell ini.
   ========================================================= */
@media print {
  @page { margin: 12mm; }

  html, body {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: #fff !important;
  }
  body {
    display: block !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Navigasi dan lapisan aplikasi bukan sebahagian daripada dokumen. */
  .sidebar,
  .topbar,
  .nav-overlay,
  .toast,
  #idleWarn {
    display: none !important;
  }

  /* Kandungan mengambil seluruh kawasan boleh cetak selepas sidebar hilang. */
  .main,
  .content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .main { display: block !important; }
  .content { padding: 0 !important; }

  /* Butang, pagination dan aksi skrin tidak patut muncul pada laporan. */
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .pager,
  .pagination {
    display: none !important;
  }

  /* Jangan potong lajur kanan hanya kerana jadual menatal di skrin. */
  .tbl-scroll {
    overflow: visible !important;
    max-width: none !important;
  }
  table {
    display: table !important;
    overflow: visible !important;
  }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, img { break-inside: avoid; page-break-inside: avoid; }

  .card { box-shadow: none !important; }
  a { color: inherit; text-decoration: none; }
}