/* Reserved for mobile-specific overrides; base rules remain in main.css */


/* Extracted from main.css: mobile media blocks */

@media (max-width: 640px) {
      #page-registry > div:first-child > div {
        padding: 20px 16px 0 !important;
      }
      #page-registry > div:first-child > div > div:last-child {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      #page-registry .main {
        padding: 16px 12px 80px !important;
      }
      #page-registry .main > div:first-child {
        padding: 12px 14px !important;
        flex-wrap: wrap !important;
      }
    }
    
@media (max-width: 640px) {

      /* ── Base touch target sizing ── */
      input,
      select,
      textarea,
      button {
        font-size: 16px !important;
      }

      /* prevent iOS zoom */

      /* ── Search input: full-height touch target ── */
      .search-wrap input {
        height: 44px;
        padding: 0 14px 0 38px !important;
        font-size: 16px !important;
        border-radius: 10px;
      }

      /* ── Control buttons: min 44px tall ── */
      .ctrl .btn,
      .ctrl .sel {
        min-height: 44px;
        font-size: 16px !important;
        padding: 0 12px !important;
      }

      /* ── Category pill filters: larger, scrollable row ── */
      .pills {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 4px;
      }

      .pill {
        min-height: 36px;
        padding: 6px 14px !important;
        font-size: 14px !important;
        white-space: nowrap;
        flex-shrink: 0;
      }

      /* ── Patient card: comfortable spacing ── */
      .pcard-body {
        padding: 14px 14px 12px !important;
      }

      /* ── Patient card action buttons: full-height, thumb-friendly ── */
      .pcard-act-btn {
        min-height: 40px !important;
        font-size: 13px !important;
        border-radius: 8px;
      }

      /* ── Patient info rows: a bit more breathing room ── */
      .pi {
        padding: 3px 0;
      }

      .pi label {
        font-size: 11px !important;
        min-width: 80px;
      }

      .pi span {
        font-size: 13px !important;
      }

      /* ── Dose value: readable on small screen ── */
      .doseval {
        font-size: 15px !important;
        font-weight: 700 !important;
      }

      /* ── DOT day chips: slightly bigger on mobile ── */
      .dot-chip {
        font-size: 11px !important;
        padding: 3px 7px !important;
      }

      /* ── Divider: less visual noise ── */
      .divider {
        margin: 8px 0 !important;
      }

      /* ── Hero stats: clean 2×2 grid ── */
      .hero-stats {
        gap: 0 !important;
      }

      .hstat {
        padding: 14px 12px !important;
        border-right: 1px solid rgba(255, 255, 255, .08);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
      }

      .hstat-v {
        font-size: 22px !important;
      }

      .hstat-l {
        font-size: 12px !important;
      }

      /* ── Main content area: better bottom padding so last card shows ── */
      .main {
        padding: 12px 10px 80px !important;
      }

      /* ── Laporan: stack 2-col grids to 1-col on mobile ── */
      #page-laporan .main>div[style*="grid-template-columns:1fr 1fr"],
      #page-laporan .main>div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* Methadone stats: 4-col → 2-col on mobile */
      #methadone-stats-body div[style*="grid-template-columns:repeat(4"],
      #methadone-daily-body div[style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr 1fr !important;
      }

      #methadone-stats-body div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* ── Topbar: full width, no left gap ── */
      #topbar {
        padding: 0 !important;
      }

      .topnav-top {
        padding: 0 12px !important;
        min-height: 52px;
      }

      #mob-menu-btn {
        display: flex !important;
      }

      #sidebar-toggle {
        display: none !important;
      }

      /* ── Patient number badge: slightly bigger ── */
      .pno {
        font-size: 13px !important;
        font-weight: 700 !important;
      }

      .pname {
        font-size: 15px !important;
        font-weight: 700 !important;
      }

      /* ── Status badge: larger on mobile ── */
      .sbadge {
        font-size: 12px !important;
        padding: 4px 10px !important;
      }

      /* ── Modal: full screen feel, clear topbar + safe area ── */
      .ov {
        padding: 6px !important;
        padding-top: max(60px, calc(env(safe-area-inset-top, 0px) + 56px)) !important;
      }

      .modal {
        border-radius: 14px 14px 0 0 !important;
        max-height: calc(100dvh - max(60px, calc(env(safe-area-inset-top, 0px) + 56px))) !important;
      }

      .mhdr {
        padding: 16px 16px 14px !important;
        gap: 11px !important;
      }

      .m-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        font-size: 14px !important;
      }

      .mname {
        font-size: 15px !important;
      }

      .mbody {
        padding: 14px 14px !important;
      }

      /* ── Sticky reg-ctrl bar: full width ── */
      #reg-ctrl-sticky {
        padding: 6px 10px !important;
        gap: 6px !important;
        background: var(--white);
      }

      /* ── Table view toggle buttons ── */
      .topt {
        min-height: 44px !important;
        font-size: 14px !important;
      }

      /* ── Section cards (sc): better tap area ── */
      .sc {
        padding: 14px 16px !important;
      }

      .sc-v {
        font-size: 22px !important;
      }

      .sc-l {
        font-size: 12px !important;
      }

      /* ── Toast: up from bottom nav ── */
      .toast {
        bottom: 80px !important;
      }

      /* ── Prevent x-overflow on page ── */
      #content-area {
        overflow-x: hidden !important;
      }

      .main>* {
        max-width: 100%;
        box-sizing: border-box;
      }
    }


@media (max-width: 600px) {
      .dot-day-btn {
        min-width: 38px;
        height: 34px;
        font-size: 12px;
        padding: 0 9px;
      }
      .dot-day-chips-row {
        gap: 5px;
        padding: 8px 10px;
      }
    }

    
@media (max-width: 640px) {
      .pcard-body { padding: 13px 14px 12px !important; }

      .pcard-actions {
        gap: 5px !important;
        margin-top: 10px !important;
        padding-top: 9px !important;
        flex-wrap: nowrap !important;
      }

      .pcard-act-btn {
        padding: 8px 2px !important;
        font-size: 10.5px !important;
        border-radius: 7px !important;
        min-height: 36px !important;
      }

      .p-avatar {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
      }

      .pname { font-size: 13px !important; }

      /* Modal action buttons — compact touch */
      #modal-ov .msave[onclick="saveModal()"] {
        padding: 12px 14px !important;
        font-size: 14px !important;
      }

      #modal-ov #m-keluar-btn,
      #modal-ov #m-transfer-out-btn,
      #modal-ov button.msave[onclick="confirmDeletePatient()"] {
        padding: 11px 12px !important;
        font-size: 13px !important;
        min-height: 44px !important;
      }
    }

    
@media (max-width: 640px) {

      /* ── Sidebar: hidden by default on mobile, slide-in on toggle ── */
      #sidebar {
        display: flex !important;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        position: fixed;
        z-index: 350;
        width: 80vw !important;
        max-width: 280px;
        height: 100dvh;
      }

      #sidebar.mob-open {
        transform: translateX(0) !important
      }

      body.mob-sidebar-open #sidebar-backdrop {
        display: block !important
      }

      #topbar,
      #content-area {
        left: 0 !important;
        margin-left: 0 !important
      }

      #content-area {
        width: 100% !important;
        overflow-x: hidden
      }


      /* Topnav: brand + hamburger only */
      .topnav-top {
        padding: 0 16px;
        justify-content: space-between;
      }

      .topnav-bottom {
        display: none
      }

      .nav-brand {
        font-size: 14px
      }

      .nav-date {
        display: none
      }

      /* Topbar: title + time + bell fit on narrow screens */
      #topbar {
        padding: 0 10px !important;
        gap: 6px !important;
        min-width: 0;
      }

      #mob-menu-btn {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0;
      }

      .topbar-title {
        font-size: 14px !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
      }

      #nav-time {
        margin-left: 0 !important;
        padding-left: 8px !important;
        border-left: 1px solid var(--rule) !important;
        font-size: 11px !important;
        letter-spacing: 0 !important;
        flex-shrink: 0;
        white-space: nowrap;
      }

      #ln-bell-wrap {
        flex-shrink: 0;
      }

      #nav-user-badge {
        display: none !important;
      }

      /* Mobile font scaling */
      .hero-title {
        font-size: 20px !important
      }

      .hero-sub {
        font-size: 13px !important
      }

      .hstat-v {
        font-size: 22px !important
      }

      .hstat-l {
        font-size: 12px !important
      }

      .pname {
        font-size: 14px !important
      }

      .pic {
        font-size: 13px !important
      }

      .pno {
        font-size: 12px !important
      }

      /* Mobile hamburger menu */
      .mob-menu-btn {
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
      }

      .mob-menu-btn span {
        width: 20px;
        height: 2px;
        background: rgba(255, 255, 255, .7);
        border-radius: 2px;
        display: block;
        transition: all .2s
      }

      .mob-menu-btn.open span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px)
      }

      .mob-menu-btn.open span:nth-child(2) {
        opacity: 0
      }

      .mob-menu-btn.open span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px)
      }

      /* Mobile nav drawer */
      .mob-nav-drawer {
        position: fixed;
        top: 44px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--ink);
        z-index: 190;
        display: none;
        flex-direction: column;
        overflow-y: auto;
        animation: slideDown .2s ease;
      }

      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-8px)
        }

        to {
          opacity: 1;
          transform: translateY(0)
        }
      }

      .mob-nav-drawer.open {
        display: flex
      }

      .mob-nav-drawer .ntab {
        height: 50px;
        padding: 0 16px;
        font-size: 14.5px;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        border-left: none;
        border-radius: 8px;
        width: 100%;
        justify-content: flex-start;
        color: rgba(255, 255, 255, .6);
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
        margin-bottom: 1px;
      }

      .mob-nav-drawer .ntab.active {
        color: #fff;
        background: rgba(45, 212, 191, .12);
        border-bottom-color: transparent;
        border-left: none;
        box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .18);
      }

      .mob-nav-drawer .ntab.active .ntab-icon {
        color: var(--side-accent, #2dd4bf);
      }

      .mob-nav-drawer .nav-section-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .32);
        padding: 10px 4px 6px;
      }

      .mob-nav-drawer .nav-divider {
        height: 1px;
        background: rgba(255, 255, 255, .06);
        margin: 6px 0;
      }

      .mob-nav-drawer .ntab .ntab-icon {
        font-size: 17px;
        width: 20px;
        opacity: .88;
      }

      /* ── Scrollable nav items wrapper ── */
      .mob-drawer-scroll {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px 12px 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .mob-drawer-scroll::-webkit-scrollbar { display: none; }

      /* ── Sticky account section at bottom ── */
      .mob-account-section {
        flex-shrink: 0;
        padding: 12px 14px 0 14px;
        background: var(--side-bg);
        position: relative;
      }

      /* ── User profile card ── */
      .mob-user-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 13px;
        border-radius: 12px;
        background: linear-gradient(135deg,
          rgba(109,40,217,.20) 0%,
          rgba(75,45,160,.15) 50%,
          rgba(45,212,191,.08) 100%);
        border: 1px solid rgba(139,92,246,.25);
        box-shadow:
          0 0 0 1px rgba(139,92,246,.08) inset,
          0 4px 16px rgba(0,0,0,.28),
          0 0 20px rgba(109,40,217,.10);
        margin-bottom: 10px;
        position: relative;
        overflow: hidden;
      }

      /* Subtle shimmer line on top of card */
      .mob-user-card::before {
        content: '';
        position: absolute;
        top: 0; left: 10%; right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(139,92,246,.5), rgba(45,212,191,.3), transparent);
        border-radius: 1px;
      }

      .mob-user-card-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6d28d9, #2dd4bf);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        flex-shrink: 0;
        box-shadow: 0 0 0 2px rgba(139,92,246,.35), 0 2px 8px rgba(0,0,0,.35);
      }

      .mob-user-card-info {
        flex: 1;
        min-width: 0;
      }

      .mob-user-card-name {
        font-size: 12.5px;
        font-weight: 700;
        color: rgba(255,255,255,.90);
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: -.1px;
      }

      .mob-user-card-role {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 2px;
      }

      .mob-user-card-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #2dd4bf;
        flex-shrink: 0;
        box-shadow: 0 0 5px rgba(45,212,191,.7);
        animation: mobPulse 2.4s ease-in-out infinite;
      }

      @keyframes mobPulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: .6; transform: scale(.85); }
      }

      .mob-user-card-role span:last-child {
        font-size: 10.5px;
        color: rgba(255,255,255,.45);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .mob-user-card-status {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22c55e;
        flex-shrink: 0;
        box-shadow: 0 0 6px rgba(34,197,94,.6);
        margin-left: 2px;
      }

      /* ── Logout button ── */
      .mob-logout-btn {
        contain: layout style paint;
        will-change: transform;
        width: 100%;
        padding: 11px 16px;
        background: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #ef4444 100%);
        border: none;
        border-radius: 10px;
        color: #fff;
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        letter-spacing: .1px;
        box-shadow:
          0 2px 12px rgba(220,38,38,.40),
          0 1px 3px rgba(0,0,0,.30),
          0 0 0 1px rgba(255,255,255,.08) inset;
        transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        margin-bottom: 10px;
        position: relative;
        overflow: hidden;
      }

      .mob-logout-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0);
        transition: background .12s ease;
        border-radius: inherit;
      }

      .mob-logout-btn.is-pending {
        opacity: 0.85;
        pointer-events: none;
      }

      .mob-logout-btn:active {
        transform: scale(0.97);
        box-shadow:
          0 1px 6px rgba(220,38,38,.35),
          0 0 0 1px rgba(255,255,255,.06) inset;
      }

      .mob-logout-btn:active::after {
        background: rgba(255,255,255,.06);
      }

      /* Hero */
      .hero {
        padding: 20px 0 0
      }

      .hero-inner {
        padding: 0 16px
      }

      .hero-title {
        font-size: 17px
      }

      .hero-sub {
        font-size: 15px
      }

      .hero-stats {
        flex-wrap: wrap
      }

      .hstat {
        flex: 1 1 50%;
        min-width: 0;
        padding: 12px 16px;
        border-right: 1px solid rgba(255, 255, 255, .08);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
      }

      .hstat:nth-child(2n) {
        border-right: none
      }

      .hstat-v {
        font-size: 20px
      }

      .hstat-l {
        font-size: 15px
      }

      /* Main content */
      .main {
        padding: 14px 12px
      }

      /* Controls */
      .ctrl {
        gap: 6px
      }

      .search-wrap {
        min-width: 0;
        flex: 1 1 100%
      }

      .ctrl .btn {
        font-size: 15px;
        padding: 8px 10px
      }

      .ctrl .sel {
        font-size: 15px;
        padding: 8px 10px
      }

      /* Pill filters */
      .pills {
        gap: 4px
      }

      .pill {
        padding: 4px 10px;
        font-size: 15px
      }

      /* Patient grid — 1 column */
      .pgrid {
        grid-template-columns: 1fr
      }

      .pcard-body {
        padding: 12px 13px 11px
      }

      .plist-hdr,
      .plist-row {
        grid-template-columns: 4px 36px 1fr 80px 55px 0 0 0
      }

      .plist-hdr>div:nth-child(n+6),
      .plist-row>div:nth-child(n+6) {
        display: none
      }

      #reg-ctrl-sticky {
        padding: 4px 0 2px
      }

      .pname {
        font-size: 15px
      }

      /* Summary cards — 2×2 */
      .scards {
        grid-template-columns: 1fr 1fr;
        gap: 8px
      }

      .sc-v {
        font-size: 20px
      }

      /* Date bar */
      .datebar {
        padding: 12px 14px;
        gap: 10px
      }

      /* Table — horizontal scroll wrapper */
      .tbl-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
      }

      table {
        min-width: 600px
      }

      /* Weekly & Dispensing rows — scroll */
      .week-hdr,
      .week-row {
        min-width: 700px
      }

      .disp-hdr,
      .disp-row,
      .disp-cat-hdr {
        min-width: 860px
      }

      /* Modal — scrollable on mobile, clear topbar + safe area */
      .ov {
        padding: 8px;
        align-items: flex-start;
        padding-top: max(60px, calc(env(safe-area-inset-top, 0px) + 56px));
        overflow-y: auto
      }

      .modal {
        max-width: 100%;
        border-radius: 10px;
        max-height: calc(100dvh - max(60px, calc(env(safe-area-inset-top, 0px) + 56px)));
        overflow-y: auto;
        overflow-x: hidden
      }

      .mbody {
        padding: 14px 16px
      }

      .mgrid {
        grid-template-columns: 1fr;
        gap: 10px
      }

      .mhdr {
        padding: 14px 16px 12px
      }

      /* Login mobile → login/css/login-mobile.css */

      /* Users form */
      #page-users .main>div:first-child>div:last-child>div {
        grid-template-columns: 1fr !important;
      }

      /* User list table */
      #u-list>div {
        grid-template-columns: 1fr auto !important;
        gap: 6px !important;
      }

      #u-list .wh:nth-child(3),
      #u-list>div>div:nth-child(3) {
        display: none
      }

      /* Report box */
      .copy-area {
        font-size: 15px
      }
    }

    
@media(max-width:640px) {
      .ext-form-grid {
        grid-template-columns: 1fr 1fr
      }

      .ext-row,
      .ext-hdr-row {
        min-width: 700px
      }

      .ext-tbl-wrap {
        overflow-x: auto
      }

      /* Ext 3-col grid (Fasiliti Asal / → / Nota) → 1-col on mobile */
      div[style*="grid-template-columns:1fr 50px 1fr"] {
        grid-template-columns: 1fr !important
      }
    }

    
@media (max-width: 640px) {

      /* ── OVERVIEW main padding fix ────────────────────────── */

      /* ── DATEBAR: stable two-row layout ── */
      .datebar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
        padding: 18px 24px;
        background: var(--white);
        border: 1.5px solid var(--rule);
        border-radius: 12px;
        box-shadow: var(--sh);
      }

      .db-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
      }

      .db-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
      }

      /* inner button-group sub-containers */
      .datebar>div:last-child>div {
        flex: 0 0 auto;
        flex-wrap: wrap;
      }

      /* ── RBAR: stack count + label button vertically ──────── */
      .rbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      .rbar>button {
        width: 100%;
        justify-content: center;
      }

      /* ── LAPORAN: 2-col → 1-col ───────────────────────────── */
      #laporan-content .main>div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* ── NEW PATIENT FORM: 2-col → 1-col ─────────────────── */
      #page-newpat div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* ── MODAL BODY: all 2-col grids → 1-col ─────────────── */
      .mbody div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* ── STOK TABLE: horizontal scroll ───────────────────── */
      /* white card container */
      #page-stok .main>div:last-child {
        overflow-x: auto !important;
      }

      /* column header row */
      #page-stok .main>div:last-child>div[style*="grid-template-columns:110px"] {
        min-width: 620px;
      }

      /* JS-generated rows */
      #stok-table-body>div[style*="grid-template-columns"] {
        min-width: 620px;
      }

      /* stok table: body scroll */
      #stok-table-body {
        overflow-x: auto;
      }

      /* ── STOK ACTION BUTTONS: wrap on mobile ──────────────── */
      #page-stok .main>div[style*="display:flex;gap:10px;margin-bottom:16px"] {
        flex-wrap: wrap;
      }

      #page-stok .main>div[style*="display:flex;gap:10px;margin-bottom:16px"]>button {
        flex: 1 1 calc(50% - 5px);
        min-width: 140px;
        font-size: 13px !important;
        padding: 10px 10px !important;
      }

      /* ── USERS (pengurusan) table: hide col header row scroll ─ */
      #page-users div[style*="grid-template-columns:1fr 140px 160px 130px"] {
        min-width: 580px;
      }

      #page-users .main>div>div:last-child {
        overflow-x: auto;
      }

      /* ── WEEK EXT BODY & PESAKIT LUAR: horizontal scroll ────────────────── */
      #week-ext-body,
      #ext-list-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      #week-ext-body .week-ext-hdr,
      #week-ext-body .week-ext-row,
      .ext-hdr-row,
      #ext-body>div {
        min-width: 800px;
      }

      /* ── SPUB / SPECIAL OVERLAYS: full-width on mobile ─────── */
      #spub-special-overlay>div {
        max-width: calc(100vw - 24px) !important;
        width: 100% !important;
        max-height: 90dvh;
        overflow-y: auto;
        padding: 20px 16px !important;
      }

      #spub-day-picker-overlay>div,
      #spub-weekend-overlay>div {
        max-width: calc(100vw - 24px) !important;
        width: 100% !important;
        max-height: 90dvh;
        overflow-y: auto;
      }

      /* ── SEARCH CTRL: search bar always full-width first ──── */
      .ctrl .search-wrap {
        flex: 1 1 100%;
        order: -1;
      }

      /* ── HERO STATS: force 2-col wrap ────────────────────── */
      .hero-stats {
        display: flex !important;
        flex-wrap: wrap;
      }

      .hstat {
        flex: 1 1 calc(50% - 1px);
        min-width: 0;
      }

      /* ── PILLS: allow wrapping ───────────────────────────── */
      .pills {
        flex-wrap: wrap;
      }

      /* ── INPUTS & SELECTS: ensure never wider than viewport ── */
      .minp,
      input.minp,
      select.minp,
      textarea.minp {
        max-width: 100%;
        font-size: 16px !important;
        /* Prevents iOS zoom on focus */
      }

      select.sel {
        font-size: 16px !important;
      }

      input.sinp {
        font-size: 16px !important;
      }

      /* ── CTRL BAR: wrap all elements ─────────────────────── */
      .ctrl {
        flex-wrap: wrap;
      }

      /* ── MODAL: fix ios overscroll ───────────────────────── */
      .modal {
        -webkit-overflow-scrolling: auto;
      }

      /* ── EXT FORM ACTION BUTTONS: stack on mobile ────────── */
      div[style*="grid-template-columns:1fr 50px 1fr"]>div:nth-child(2) {
        display: none;
        /* Hide the arrow divider on mobile */
      }

      div[style*="grid-template-columns:1fr 50px 1fr"] {
        row-gap: 10px;
      }
    }

    
@media(max-width:640px){
      #page-reg .hero-inner,#page-cicir .hero-inner,#page-laporan .hero-inner{padding:20px 16px 0!important;flex-direction:column;}
      .prm-stats-row{padding:20px 16px 0!important;}
      .prm-sc{min-width:90px;padding:14px 12px 16px!important;}
      .prm-sc-v{font-size:22px!important;}
      #page-reg .main,#page-cicir .main,#page-laporan .main{padding:16px 12px 80px!important;}
      #page-cicir .ctrl{flex-wrap:wrap!important;}
      #page-reg .pgrid,#page-cicir .pgrid{grid-template-columns:1fr!important;gap:12px!important;}

      /* ── Audit log panel — fit mobile width ── */
      .audit-panel {
        max-width: 100%;
        overflow: hidden;
      }
      .audit-panel-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
      }
      .audit-panel-title {
        font-size: 13px !important;
      }
      .audit-panel-controls {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
      }
      .audit-filter-select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 0 !important;
        max-width: calc(100% - 88px) !important;
      }
      .audit-clear-btn {
        flex: 0 0 auto !important;
      }
      .audit-log-body {
        max-height: 320px !important;
      }
      .audit-row {
        padding: 10px 12px !important;
        gap: 10px !important;
      }
      .audit-action {
        font-size: 13px !important;
        line-height: 1.45 !important;
      }
      .audit-meta {
        font-size: 11px !important;
        gap: 6px 10px !important;
      }
      .audit-sync-banner {
        font-size: 12px !important;
        padding: 8px 12px !important;
      }
    }


@media (max-width: 480px) {
      #page-disp .hero-stats-kpi {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    
@media (max-width: 600px) {
      #compliance-risk-cards {
        grid-template-columns: 1fr !important;
      }
      #compliance-risk-modal {
        max-height: 92vh !important;
        border-radius: 16px 16px 0 0 !important;
      }
    }
    
@media (max-width: 640px) {
      #page-week .hero-inner {
        padding: 18px 14px 14px;
      }
      #page-week .wk-hero-badge {
        display: none;
      }
      #page-week .wk-kpi-strip {
        flex-wrap: wrap;
      }
      #page-week .wk-kpi {
        flex: 1 1 calc(50% - 1px);
        min-width: 0;
        padding: 13px 12px 15px !important;
        border-bottom: 1px solid rgba(255,255,255,.06);
      }
      #page-week .wk-kpi-v {
        font-size: 22px !important;
      }
      #page-week .wk-vol-bar {
        padding: 10px 14px;
      }
      #page-week .wk-vol-v {
        font-size: 18px !important;
      }
      #page-week .datebar {
        padding: 10px 13px;
        border-radius: 11px;
      }
      #page-week .main {
        padding: 14px 12px 72px;
      }
    }


@media (max-width: 640px) {

      /* ── 1. HERO HEADER — compact ── */
      #page-week .hero-inner {
        padding: 16px 14px 14px !important;
      }

      #page-week .wk-hero-top {
        gap: 10px !important;
        align-items: center !important;
      }

      #page-week .hero-title {
        font-size: 19px !important;
        margin-bottom: 3px !important;
      }

      #page-week .hero-sub {
        font-size: 11.5px !important;
      }

      #page-week .wk-hero-badge {
        padding: 4px 9px !important;
      }

      #page-week .wk-badge-label {
        font-size: 9px !important;
      }

      /* ── 2. KPI STRIP — tight 2×2 grid ── */
      #page-week .wk-kpi-strip {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
      }

      #page-week .wk-kpi {
        padding: 13px 10px 14px !important;
        border-right: 1px solid rgba(255,255,255,.06) !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
      }

      /* Remove right border on 2nd and 4th (right column) */
      #page-week .wk-kpi:nth-child(2n) {
        border-right: none !important;
      }

      /* Remove bottom border on last two cards */
      #page-week .wk-kpi:nth-child(3),
      #page-week .wk-kpi:nth-child(4) {
        border-bottom: none !important;
      }

      #page-week .wk-kpi-v {
        font-size: 26px !important;
        margin-bottom: 5px !important;
      }

      #page-week .wk-kpi-l {
        font-size: 9px !important;
        letter-spacing: .5px !important;
      }

      /* ── 3. VOLUME BAR — compact, left-right aligned ── */
      #page-week .wk-vol-bar {
        padding: 10px 14px !important;
      }

      #page-week .wk-vol-inner {
        max-width: 100% !important;
        gap: 8px !important;
      }

      #page-week .wk-vol-label {
        font-size: 9px !important;
        letter-spacing: .4px !important;
        white-space: nowrap;
      }

      #page-week .wk-vol-v {
        font-size: 20px !important;
      }

      #page-week .wk-vol-unit {
        font-size: 11px !important;
      }

      /* ── 4. MAIN AREA ── */
      #page-week .main {
        padding: 12px 12px 80px !important;
      }

      /* ── 5. WEEK NAVIGATOR DATEBAR — CRITICAL NAV FIX ── */
      #page-week .datebar {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
      }

      /* The db-row inside datebar: stack to column */
      #page-week .datebar.db-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
      }

      /* Left group (label + nav buttons + Minggu Ini) → stack vertically */
      #page-week .datebar > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
      }

      /* "Minggu Rekod" label — hide on mobile to save space */
      #page-week .datebar .db-label {
        display: none !important;
      }

      /* ◀ Lepas | date range | Depan ▶ — 3-part flex row, ALWAYS fully visible */
      #page-week .datebar > div:first-child > div:first-of-type {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
      }

      /* Both nav buttons — fixed size, never shrink */
      #page-week .datebar .btn[onclick*="shiftWeek"] {
        flex-shrink: 0 !important;
        height: 44px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        min-width: 76px !important;
        border-radius: 9px !important;
        white-space: nowrap !important;
      }

      /* Date range pill — flex-grow to fill middle, wraps if needed */
      #page-week #w-week-label {
        flex: 1 !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
        border-radius: 9px !important;
        white-space: normal !important;
        line-height: 1.4 !important;
        text-align: center !important;
        word-break: break-word !important;
      }

      /* Minggu Ini button — full width below nav row */
      #page-week .datebar .btn-action[onclick*="resetWeekToToday"] {
        width: 100% !important;
        height: 40px !important;
        justify-content: center !important;
        font-size: 13px !important;
        border-radius: 9px !important;
      }

      /* ── 6. ACTION BUTTONS (CSV / Jana Buku Rekod / Borang Kosong) ── */
      /* Right group → stack to column */
      #page-week .datebar > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        align-items: stretch !important;
        width: 100% !important;
      }

      /* Jana Buku Rekod — primary, full width */
      #page-week .datebar .btn-action[onclick*="generateBukuRekod(false)"] {
        width: 100% !important;
        height: 44px !important;
        justify-content: center !important;
        font-size: 13px !important;
        border-radius: 9px !important;
        order: 1;
      }

      /* CSV + Borang Kosong — side by side on one row */
      #page-week .datebar .btn-action[onclick*="exportWeekCSV"],
      #page-week .datebar .btn-action[onclick*="generateBukuRekod(true)"] {
        flex: 1 !important;
        height: 40px !important;
        justify-content: center !important;
        font-size: 12px !important;
        border-radius: 9px !important;
      }

      /* Wrap CSV + Borang Kosong into a side-by-side row */
      #page-week .datebar > div:last-child {
        flex-direction: column !important;
      }

      /* Row wrapper for CSV + Borang Kosong */
      #page-week .datebar > div:last-child::after {
        content: none;
      }

      /* Force CSV & Borang Kosong buttons into a flex row */
      #page-week .datebar > div:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
      }

      /* Create a secondary row for CSV + Borang Kosong using display grid */
      #page-week .datebar > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
      }

      /* Override: Jana Buku Rekod = full row, CSV + Borang = 2-col row */
      #page-week .datebar > div:last-child > button:nth-child(1) {
        /* CSV */
        grid-column: 1 / 2;
      }

      #page-week .datebar > div:last-child > button:nth-child(2) {
        /* Jana Buku Rekod */
        grid-column: 1 / 2;
      }

      #page-week .datebar > div:last-child > button:nth-child(3) {
        /* Borang Kosong */
        grid-column: 1 / 2;
      }

      /* Better: use grid 1fr row for each button, CSV+Borang on same row */
      #page-week .datebar > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 6px !important;
      }

      /* Jana Buku Rekod spans full width (row 1) */
      #page-week .datebar > div:last-child > button:nth-child(2) {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
        height: 44px !important;
        font-size: 13px !important;
        justify-content: center !important;
        border-radius: 9px !important;
      }

      /* CSV (row 2, col 1) */
      #page-week .datebar > div:last-child > button:nth-child(1) {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        height: 40px !important;
        font-size: 12px !important;
        justify-content: center !important;
        border-radius: 9px !important;
      }

      /* Borang Kosong (row 2, col 2) */
      #page-week .datebar > div:last-child > button:nth-child(3) {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
        height: 40px !important;
        font-size: 12px !important;
        justify-content: center !important;
        border-radius: 9px !important;
      }

      /* All datebar btn-action SVG icons */
      #page-week .datebar .btn-action svg {
        width: 13px !important;
        height: 13px !important;
        flex-shrink: 0;
      }

      /* ── 7. SEARCH + CATEGORY FILTER BAR ── */
      #page-week .ctrl {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        align-items: stretch !important;
      }

      #page-week .ctrl .search-wrap {
        width: 100% !important;
        min-width: unset !important;
        flex: none !important;
      }

      #page-week .ctrl .sinp {
        height: 44px !important;
        width: 100% !important;
        font-size: 14px !important;
      }

      /* Filter buttons — scrollable row */
      #page-week .ctrl > .btn {
        flex-shrink: 0 !important;
        height: 36px !important;
        padding: 0 13px !important;
        font-size: 12px !important;
        border-radius: 7px !important;
        white-space: nowrap !important;
      }

      /* All filter buttons wrap into a flex row */
      #page-week .ctrl {
        flex-direction: row !important;
        flex-wrap: wrap !important;
      }

      /* Search wrap takes full first line */
      #page-week .ctrl .search-wrap {
        flex-basis: 100% !important;
        order: 0;
      }

    }

    @media (max-width: 640px) {

      /* ────────────────────────────────────────────────────────────────
         1. HERO HEADER — compact single-row title + sub-text
      ──────────────────────────────────────────────────────────────── */
      #page-disp .hero {
        padding: 14px 0 0;
      }

      #page-disp .hero-inner {
        padding: 0 14px;
      }

      #page-disp .hero-title {
        font-size: 17px !important;
        font-weight: 800 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px !important;
      }

      #page-disp .hero-sub {
        font-size: 12px !important;
        line-height: 1.4;
        margin-bottom: 12px !important;
        white-space: normal;
        word-break: break-word;
        color: rgba(255,255,255,.38);
      }

      /* ────────────────────────────────────────────────────────────────
         2. HERO STATS — KPI row (6) + SPUB/MFlex modules row
      ──────────────────────────────────────────────────────────────── */
      #page-disp .hero-stats {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(255,255,255,.08);
      }

      #page-disp .hero-stats-kpi {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100%;
      }

      #page-disp .hero-stats-modules {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
        border-top: 1px solid rgba(255,255,255,.08);
      }

      #page-disp .hstat {
        padding: 12px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 72px;
        border-right: 1px solid rgba(255,255,255,.08) !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        box-sizing: border-box !important;
      }

      /* Remove right border on even children (right column) in KPI row */
      #page-disp .hero-stats-kpi .hstat:nth-child(2n) {
        border-right: none !important;
      }

      #page-disp .hstat-v {
        font-size: 22px !important;
        font-weight: 800 !important;
        line-height: 1;
        display: block;
      }

      #page-disp .hstat-l {
        font-size: 10px !important;
        letter-spacing: .3px;
        margin-top: 4px !important;
        display: block;
        color: rgba(255,255,255,.35);
      }

      #page-disp .hstat-s {
        font-size: 9px !important;
        margin-top: 2px !important;
        display: block;
        color: rgba(255,255,255,.22);
      }

      #page-disp .hstat-module::before {
        display: none !important;
      }

      /* SPUB & MFlex boxed components — occupy full hstat area */
      #page-disp .hstat > div {
        width: 100% !important;
      }

      #page-disp .hstat > div > div[style*="background:linear-gradient"] {
        border-radius: 10px !important;
        padding: 10px 8px !important;
        width: 100% !important;
      }

      /* Inner 3-col metric values inside SPUB/MFlex cards */
      #page-disp .hstat > div > div[style*="background:linear-gradient"] > div[style*="grid-template-columns"] {
        gap: 0 !important;
      }

      #page-disp .hstat > div > div[style*="background:linear-gradient"] span[style*="font-size:24px"] {
        font-size: 18px !important;
      }

      #page-disp .hstat > div > div[style*="background:linear-gradient"] span[style*="font-size:9px"] {
        font-size: 8px !important;
      }

      /* Summary cards removed — stats consolidated in hero header */
      #page-disp .scards {
        display: none !important;
      }

      /* ────────────────────────────────────────────────────────────────
         4. MAIN CONTENT AREA — reduce padding
      ──────────────────────────────────────────────────────────────── */
      #page-disp .main {
        padding: 12px 12px 80px !important;
      }

      /* ────────────────────────────────────────────────────────────────
         5. DATE BAR — clean horizontal date row, touch-friendly
      ──────────────────────────────────────────────────────────────── */
      #page-disp .datebar {
        padding: 12px 12px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
        display: flex !important;
        flex-direction: column !important;
      }

      #page-disp .db-row {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
      }

      /* Date picker row: label + input + day badge in one horizontal strip */
      #page-disp .db-row > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
      }

      #page-disp .db-label {
        font-size: 9px !important;
        white-space: nowrap;
        flex-shrink: 0;
      }

      #page-disp .date-inp {
        flex: 1 !important;
        min-width: 0 !important;
        height: 44px !important;
        font-size: 14px !important;
        border-radius: 9px !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
      }

      #page-disp .day-badge {
        height: 44px !important;
        min-width: 72px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        border-radius: 9px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
      }

      /* ────────────────────────────────────────────────────────────────
         6. ACTION BUTTONS — grouped 2-col rows, touch-friendly 44px height
      ──────────────────────────────────────────────────────────────── */
      #page-disp .db-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
      }

      /* Each button group container → full-width grid */
      #page-disp .db-actions > div {
        display: grid !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 6px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
      }

      /* Primary group (Group TA + Batal) — 2 equal columns */
      #page-disp .db-actions > div:first-child {
        grid-template-columns: 1fr 1fr !important;
        background: rgba(124,58,237,.06) !important;
        border: 1px solid rgba(124,58,237,.14) !important;
      }

      /* SPUB group (Borang SPUB + Tarikh Khas) — 2 equal columns */
      #page-disp .db-actions > div:nth-child(2) {
        grid-template-columns: 1fr 1fr !important;
        background: rgba(14,116,144,.06) !important;
        border: 1px solid rgba(14,116,144,.14) !important;
      }

      /* Tools group (Laporan + Reset + CSV) — 3 equal columns */
      #page-disp .db-actions > div:nth-child(3) {
        grid-template-columns: 1fr 1fr 1fr !important;
        background: rgba(30,58,95,.04) !important;
        border: 1px solid rgba(30,58,95,.10) !important;
      }

      /* All action buttons — min 44px height, full-width in grid cell */
      #page-disp .btn-action {
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        justify-content: center !important;
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        letter-spacing: .01em;
        white-space: nowrap;
        box-sizing: border-box !important;
      }

      /* Shrink SVG icons slightly */
      #page-disp .btn-action svg {
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0;
      }

      /* SPUB special badge inside Tarikh Khas button */
      #page-disp #spub-special-badge {
        font-size: 9px !important;
        padding: 1px 5px !important;
      }

      /* ────────────────────────────────────────────────────────────────
         7. SPUB WEEKEND NOTICE — full-width, compact
      ──────────────────────────────────────────────────────────────── */
      #page-disp #spub-wknd-notice {
        margin-top: 8px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
      }

      #page-disp #spub-wknd-notice strong {
        font-size: 13px !important;
      }

      /* ────────────────────────────────────────────────────────────────
         8. SEARCH + FILTER BAR — stack vertically on mobile
      ──────────────────────────────────────────────────────────────── */
      #page-disp .ctrl {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
      }

      #page-disp .ctrl .search-wrap {
        width: 100% !important;
        min-width: unset !important;
      }

      #page-disp .ctrl .sinp {
        height: 44px !important;
        width: 100% !important;
      }

      /* Filter buttons row — horizontally scrollable */
      #page-disp .ctrl > div[style*="border-radius:7px"] {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: flex !important;
        flex-wrap: nowrap !important;
        padding: 4px !important;
        gap: 4px !important;
      }

      #page-disp .ctrl .btn-ghost {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
      }

      /* ────────────────────────────────────────────────────────────────
         9. PESAKIT LUAR SECTION HEADER — stack gracefully
      ──────────────────────────────────────────────────────────────── */
      #page-disp .ext-hdr {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px 14px !important;
      }

      #page-disp .ext-hdr-title {
        font-size: 14px !important;
        font-weight: 700 !important;
      }

      #page-disp .ext-hdr > div:last-child {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
      }

      #page-disp .ext-hdr > div:last-child > button {
        height: 40px !important;
        font-size: 12px !important;
        padding: 0 8px !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      #page-disp #ext-count-badge {
        display: block !important;
        width: 100% !important;
        font-size: 13px !important;
        margin-bottom: 2px !important;
      }

      /* ────────────────────────────────────────────────────────────────
         10. CONSISTENT VERTICAL SPACING — 8/12/16px rhythm
      ──────────────────────────────────────────────────────────────── */
      #page-disp .ext-section {
        margin-top: 16px !important;
      }

      #page-disp .report-box {
        margin-top: 16px !important;
      }

    }

/* ---- Inline style block #8 ---- */
/* ══ PENDAFTARAN FORM — PREMIUM UI ══════════════════════════ */
          #page-newpat .reg-form-wrap {
            max-width: 860px;
            margin: 0 auto;
            padding: 0 0 32px;
          }
          
@media (max-width: 600px) {
            #page-newpat .reg-grid { grid-template-columns: 1fr; }
            #page-newpat .reg-grid .reg-full { grid-column: 1; }
          }
          
@media (max-width: 640px) {
  #page-users .u-stats-row { padding: 14px 14px 0 !important; flex-wrap: wrap; }
  #page-users .u-sc { min-width: 50% !important; border-bottom: 1px solid rgba(255,255,255,.06); }
  #page-users .main { padding: 14px 14px 80px !important; }
  #page-users .u-card-body { padding: 14px !important; }
  #page-users .u-list-header { grid-template-columns: 1fr auto !important; }
  #page-users .u-col-label:nth-child(2),
  #page-users .u-col-label:nth-child(3) { display: none !important; }
  #page-users #u-list .u-user-row { grid-template-columns: 1fr auto !important; }
  #page-users #u-list .u-user-row > div:nth-child(2),
  #page-users #u-list .u-user-row > div:nth-child(3) { display: none !important; }
}



@media (max-width: 640px) {
          #page-users .u-stats-row { padding: 16px 16px 0; flex-wrap: wrap; gap: 0; }
          #page-users .u-sc { min-width: 50%; border-bottom: 1px solid rgba(255,255,255,.06); }
          #page-users .main { padding: 16px !important; }
          .u-card-body { padding: 16px; }
          .u-list-header,
          .u-user-row { grid-template-columns: 1fr auto !important; gap: 6px !important; }
          .u-col-label:nth-child(2), .u-col-label:nth-child(3),
          .u-user-row > div:nth-child(2), .u-user-row > div:nth-child(3) { display: none; }
        }
        
@media (max-width: 480px) {
                #tk-header { padding: 12px 14px 10px; }
                #tk-kpi-strip { padding: 8px 14px; }
                #tk-chart-body { padding: 12px 14px 10px; }
                #tk-footer { padding: 7px 14px; }
                #tk-avg-badge { display: none; }
                .tk-kpi-value { font-size: 14px; }
                #tk-chart-wrap { height: 200px; }
                .tk-period-btn { padding: 4px 8px; font-size: 9px; }
              }


@media (max-width: 520px) {
                    #compliance-risk-cards { grid-template-columns: 1fr; }
                  }


@media(max-width:540px){
          .memo-hero { padding:14px 16px 10px; }
          .memo-hero-title { font-size:17px; }
          .memo-form-panel { padding:12px 12px 32px; }
          .memo-pat-info { grid-template-columns:1fr; }
          .memo-type-grid { grid-template-columns:1fr 1fr; }
          .memo-action-row { flex-direction:column; }
          .memo-btn { justify-content:center; }
          .memo-preview-doc-wrap { padding:10px; }
        }

        
@media (max-width: 540px) {
          .memo-a4 {
            width: 100% !important;
            min-height: auto !important;
            padding: 12mm 8mm !important;
            font-size: 9pt !important;
          }

          .memo-pages-container {
            gap: 16px;
          }

          .memo-preview-doc-wrap {
            padding: 12px !important;
          }

          .memo-page-number {
            font-size: 8pt;
            right: 12px;
            bottom: 8px;
          }
        }

        


/* Extracted from main.css: pass2 explicit mobile blocks */

@media (max-width: 800px) {
      #page-disp .hero-inner {
        padding: 0 18px;
      }
      #page-disp .main {
        padding: 16px 14px;
      }
      #page-disp .scards {
        display: none !important;
      }
      #page-disp .hero-title {
        font-size: 19px !important;
      }
      #page-disp .hstat-v {
        font-size: 22px !important;
      }
      #page-disp .datebar {
        padding: 10px 14px;
        border-radius: 11px;
      }
    }

    
@media (max-width: 900px) {
      #page-week .hero-inner {
        padding: 22px 18px 16px;
      }
      #page-week .main {
        padding: 16px 14px;
      }
      #page-week .hero-title {
        font-size: 20px !important;
      }
      #page-week .wk-kpi {
        padding: 14px 12px 16px !important;
      }
      #page-week .wk-kpi-v {
        font-size: 24px !important;
      }
      #page-week .wk-vol-bar {
        padding: 11px 18px;
      }
      #page-week .wk-vol-inner {
        max-width: 100%;
      }
    }

    
@media(max-width:820px){
          .memo-main { grid-template-columns:1fr; overflow:visible; }
          .memo-form-panel { border-right:none; border-bottom:1px solid var(--rule); overflow-y:visible; }
          .memo-preview-panel { overflow-y:visible; }
          .memo-a4 { width:100%; min-height:auto; padding:14mm 12mm; font-size:9.5pt; }
          .memo-pat-info { grid-template-columns:1fr 1fr; }
          .memo-type-grid { grid-template-columns:repeat(2,1fr); }
        }
        
@media (max-width: 820px) {
          .memo-a4 {
            width: 100% !important;
            min-height: auto !important;
            padding: 14mm 12mm !important;
            font-size: 9.5pt !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
          }

          .memo-a4-scaler {
            transform: scale(1);
          }

          .memo-pages-container {
            gap: 20px;
            padding: 0 8px;
          }

          .memo-preview-doc-wrap {
            padding: 16px !important;
          }
        }

        
@media (max-width: 768px) {
          .hold-status-banner {
            flex-wrap: wrap;
            padding: 12px;
            gap: 10px;
          }

          .hold-banner-text strong {
            font-size: 13px;
          }

          .btn-hold-resolve {
            padding: 9px 14px;
            font-size: 12px;
            width: 100%;
            justify-content: center;
          }

          .badge-cicir-sementara {
            display: block;
            margin-left: 0;
            margin-top: 6px;
          }
        }




/* ═══════════════════════════════════════════════════════════════════
   KAWALAN STOK METHADONE — MOBILE RESPONSIVE IMPROVEMENTS
   Target: #page-methadone / #methadone-stats-body / #methadone-daily-body
   Strategy: preserve desktop layout completely; only override ≤ 768px
   ═══════════════════════════════════════════════════════════════════ */

/* ── TABLET (≤ 900px): gentle 2-col compression ── */
@media (max-width: 900px) {
  /* Stats grid: relax from 4-col to fluid 2-col */
  #methadone-stats-body div[style*="grid-template-columns:repeat(4"],
  #methadone-stats-body div[style*="grid-template-columns: repeat(4"],
  #methadone-daily-body div[style*="grid-template-columns:repeat(4"],
  #methadone-daily-body div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Hero stats: tighten on tablet */
  #page-methadone .hstat-v,
  #methadone-stats-body .hstat-v {
    font-size: clamp(20px, 3vw, 28px) !important;
  }
}

/* ── MOBILE (≤ 640px): full overhaul ── */
@media (max-width: 640px) {

  /* ─────────────────────────────────────────────────────────────────
     1. PAGE CONTAINER — prevent horizontal overflow
  ───────────────────────────────────────────────────────────────── */
  #page-methadone {
    overflow-x: hidden !important;
  }

  #page-methadone .main {
    padding: 12px 12px 80px !important;
    overflow-x: hidden !important;
  }

  #page-methadone .main > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     2. HERO HEADER — compact, legible title
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .hero {
    padding: 14px 0 0 !important;
  }

  #page-methadone .hero-inner {
    padding: 0 14px !important;
  }

  #page-methadone .hero-title {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin-bottom: 3px !important;
  }

  #page-methadone .hero-sub {
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.4 !important;
    color: rgba(255,255,255,.40) !important;
    margin-bottom: 12px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     3. HERO STATS STRIP — clean 2-col grid, no cramping
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  #page-methadone .hstat {
    padding: 13px 10px 11px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 68px !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    box-sizing: border-box !important;
  }

  #page-methadone .hstat:nth-child(2n) {
    border-right: none !important;
  }

  /* Reduce oversized hero numbers — use clamp so they never dominate */
  #page-methadone .hstat-v {
    font-size: clamp(18px, 5.5vw, 24px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    word-break: break-all !important;
    max-width: 100% !important;
  }

  #page-methadone .hstat-l {
    font-size: clamp(9px, 2.5vw, 11px) !important;
    letter-spacing: .3px !important;
    margin-top: 4px !important;
    color: rgba(255,255,255,.38) !important;
    line-height: 1.3 !important;
    text-align: center !important;
    word-break: break-word !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     4. STATS BODY GRID CARDS — responsive 2-col, balanced spacing
  ───────────────────────────────────────────────────────────────── */

  /* 4-col grids → 2-col */
  #methadone-stats-body div[style*="grid-template-columns:repeat(4"],
  #methadone-stats-body div[style*="grid-template-columns: repeat(4"],
  #methadone-daily-body div[style*="grid-template-columns:repeat(4"],
  #methadone-daily-body div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* 3-col grids → 2-col (no single orphan on mobile) */
  #methadone-stats-body div[style*="grid-template-columns:repeat(3"],
  #methadone-stats-body div[style*="grid-template-columns: repeat(3"],
  #methadone-daily-body div[style*="grid-template-columns:repeat(3"],
  #methadone-daily-body div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* 2-col grids → 1-col (avoid sub-100px cells) */
  #methadone-stats-body div[style*="grid-template-columns:1fr 1fr"],
  #methadone-stats-body div[style*="grid-template-columns: 1fr 1fr"],
  #methadone-daily-body div[style*="grid-template-columns:1fr 1fr"],
  #methadone-daily-body div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     5. STAT CARDS (sc / .meth-sc / generic stat card) — clean hierarchy
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .sc,
  #methadone-stats-body .sc,
  #methadone-daily-body .sc {
    padding: 13px 14px 11px !important;
    border-radius: 12px !important;
    min-height: 76px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
  }

  /* Label — small, muted, uppercase — hierarchy top */
  #page-methadone .sc-l,
  #methadone-stats-body .sc-l,
  #methadone-daily-body .sc-l {
    font-size: clamp(9px, 2.4vw, 11px) !important;
    letter-spacing: .5px !important;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  /* Value — prominent but not overwhelming */
  #page-methadone .sc-v,
  #methadone-stats-body .sc-v,
  #methadone-daily-body .sc-v {
    font-size: clamp(20px, 6vw, 26px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    word-break: break-all !important;
    max-width: 100% !important;
  }

  /* Status/sub text below value */
  #page-methadone .sc-s,
  #methadone-stats-body .sc-s,
  #methadone-daily-body .sc-s {
    font-size: clamp(9px, 2.4vw, 11px) !important;
    margin-top: 5px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     6. SECTION CARDS (scards wrapper) — spacing rhythm
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .scards,
  #methadone-stats-body .scards,
  #methadone-daily-body .scards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     7. DATE BAR / CONTROLS — stack vertically, touch-friendly
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .datebar {
    padding: 14px 14px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  #page-methadone .db-row {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  #page-methadone .db-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     8. ACTION BUTTONS — touch-friendly, wrap gracefully
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .btn-action,
  #methadone-stats-body .btn-action,
  #methadone-daily-body .btn-action {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    font-size: clamp(11px, 3vw, 13px) !important;
    font-weight: 700 !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    line-height: 1.3 !important;
  }

  #page-methadone .btn-action svg,
  #methadone-stats-body .btn-action svg,
  #methadone-daily-body .btn-action svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }

  /* Button row containers — wrap safely */
  #page-methadone div[style*="display:flex;gap"] > button,
  #page-methadone div[style*="display: flex; gap"] > button {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 120px !important;
    box-sizing: border-box !important;
  }

  #page-methadone div[style*="display:flex;gap:10px;margin-bottom"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     9. SEARCH & FILTER CTRL BAR — full-width search, wrap filters
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .ctrl {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    align-items: stretch !important;
    max-width: 100% !important;
  }

  #page-methadone .ctrl .search-wrap {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    order: -1 !important;
  }

  #page-methadone .ctrl .sinp,
  #page-methadone .ctrl input[type="search"],
  #page-methadone .ctrl input[type="text"] {
    height: 44px !important;
    width: 100% !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
  }

  #page-methadone .ctrl .sel,
  #page-methadone .ctrl select {
    height: 44px !important;
    font-size: 15px !important;
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #page-methadone .ctrl .btn {
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     10. TABLES — safe horizontal scroll, no viewport bleed
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .tbl-wrap,
  #methadone-stats-body .tbl-wrap,
  #methadone-daily-body .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    border-radius: 10px !important;
  }

  /* Stock transaction table rows */
  #stok-table-body > div[style*="grid-template-columns"] {
    min-width: 560px !important;
  }

  #page-methadone .main > div:last-child {
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* Table header/row inside methadone section */
  #methadone-stats-body table,
  #methadone-daily-body table {
    min-width: 520px !important;
    table-layout: auto !important;
    word-break: break-word !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     11. STATUS BADGES — clear, visible on small screens
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .sbadge,
  #methadone-stats-body .sbadge,
  #methadone-daily-body .sbadge {
    font-size: clamp(10px, 2.8vw, 12px) !important;
    padding: 4px 9px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.3 !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     12. SECTION HEADINGS inside main — clear hierarchy spacing
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .main > div > div[style*="font-size:18px"],
  #page-methadone .main > div > div[style*="font-size: 18px"],
  #methadone-stats-body > div[style*="font-size:18px"],
  #methadone-daily-body > div[style*="font-size:18px"] {
    font-size: clamp(14px, 4vw, 17px) !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     13. CARD CONTAINERS — consistent vertical rhythm
  ───────────────────────────────────────────────────────────────── */
  #page-methadone .main > div {
    margin-bottom: 14px !important;
  }

  #page-methadone .main > div:last-child {
    margin-bottom: 0 !important;
  }

  /* White card containers with box-shadow */
  #methadone-stats-body,
  #methadone-daily-body {
    padding: 14px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     14. INLINE LARGE NUMBERS — prevent layout explosion
  ───────────────────────────────────────────────────────────────── */
  #page-methadone span[style*="font-size:32px"],
  #page-methadone span[style*="font-size: 32px"],
  #methadone-stats-body span[style*="font-size:32px"],
  #methadone-daily-body span[style*="font-size:32px"] {
    font-size: clamp(22px, 7vw, 30px) !important;
    word-break: break-all !important;
    display: block !important;
  }

  #page-methadone span[style*="font-size:28px"],
  #page-methadone span[style*="font-size: 28px"],
  #methadone-stats-body span[style*="font-size:28px"],
  #methadone-daily-body span[style*="font-size:28px"] {
    font-size: clamp(20px, 6vw, 26px) !important;
    word-break: break-all !important;
  }

  #page-methadone span[style*="font-size:24px"],
  #methadone-stats-body span[style*="font-size:24px"],
  #methadone-daily-body span[style*="font-size:24px"] {
    font-size: clamp(17px, 5.5vw, 22px) !important;
    word-break: break-all !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     15. STOK PAGE SPECIFIC — action buttons + table scroll fix
         (augments existing #page-stok rules)
  ───────────────────────────────────────────────────────────────── */
  #page-stok .main > div[style*="display:flex;gap:10px;margin-bottom:16px"],
  #page-stok .main > div[style*="display: flex; gap: 10px; margin-bottom: 16px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #page-stok .main > div[style*="display:flex;gap:10px;margin-bottom:16px"] > button,
  #page-stok .main > div[style*="display: flex; gap: 10px; margin-bottom: 16px"] > button {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 130px !important;
    min-height: 44px !important;
    font-size: clamp(11px, 3vw, 13px) !important;
    padding: 10px 10px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
  }

  /* Stok table scroll */
  #page-stok .main > div:last-child {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 10px !important;
  }

  #page-stok .main > div:last-child > div[style*="grid-template-columns"] {
    min-width: 580px !important;
  }

  #stok-table-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Hero stats on stok page */
  #page-stok .hstat-v {
    font-size: clamp(18px, 5.5vw, 24px) !important;
    word-break: break-all !important;
  }

  #page-stok .hstat-l {
    font-size: clamp(9px, 2.4vw, 11px) !important;
  }
}

/* ── SMALL MOBILE (≤ 480px): extra compactness ── */
@media (max-width: 480px) {

  /* Tighter padding for very small screens */
  #page-methadone .main,
  #page-stok .main {
    padding: 10px 10px 80px !important;
  }

  /* Hero values: even smaller on 375px phones */
  #page-methadone .hstat-v,
  #page-stok .hstat-v {
    font-size: clamp(16px, 5vw, 20px) !important;
  }

  #page-methadone .hstat {
    padding: 10px 8px 9px !important;
    min-height: 60px !important;
  }

  /* Stat cards: 2-col on small phones; single col if < 300px */
  #page-methadone .sc,
  #methadone-stats-body .sc,
  #methadone-daily-body .sc {
    padding: 11px 11px 9px !important;
    min-height: 68px !important;
  }

  #page-methadone .sc-v,
  #methadone-stats-body .sc-v,
  #methadone-daily-body .sc-v {
    font-size: clamp(18px, 5.5vw, 22px) !important;
  }

  /* Buttons: always full-width on very small screens */
  #page-stok .main > div[style*="display:flex;gap:10px;margin-bottom:16px"] > button {
    flex: 1 1 100% !important;
    min-width: unset !important;
  }

  /* Date bar padding */
  #page-methadone .datebar {
    padding: 12px 12px !important;
  }
}

/* ── VERY SMALL (≤ 360px): single-column fallback ── */
@media (max-width: 360px) {

  /* Force all stat grids to single column */
  #methadone-stats-body div[style*="grid-template-columns"],
  #methadone-daily-body div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #page-methadone .scards,
  #methadone-stats-body .scards,
  #methadone-daily-body .scards {
    grid-template-columns: 1fr !important;
  }

  #page-methadone .hero-stats {
    grid-template-columns: 1fr 1fr !important;
  }

  #page-methadone .hstat-v {
    font-size: 16px !important;
  }

  #page-methadone .hstat-l {
    font-size: 9px !important;
  }

  #page-methadone .main,
  #page-stok .main {
    padding: 8px 8px 80px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   KAWALAN STOK — STOCK RECORD TABLE RESPONSIVE FIX v2
   Fix: overflow:hidden on card clips the scroll container → table invisible
   Strategy:
     Mobile: card = overflow-x:auto (card IS the scroll zone)
             stok-scroll-wrap = overflow:visible (don't double-scroll)
             grid rows = min-width:580px (keep columns readable)
   Desktop: unchanged (card keeps overflow:hidden for border-radius)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── GLOBAL CONTAINER CHAIN: prevent page-level horizontal bleed ─────── */
#page-stok {
  overflow-x: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#page-stok .main {
  width: 100% !important;
  box-sizing: border-box !important;
}

#page-stok .main > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── SCROLLBAR STYLING for stok scroll ──────────────────────────────── */
#page-stok .main > div:last-child::-webkit-scrollbar {
  height: 4px !important;
}
#page-stok .main > div:last-child::-webkit-scrollbar-track {
  background: rgba(124,58,237,.06) !important;
  border-radius: 0 0 12px 12px !important;
}
#page-stok .main > div:last-child::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,.3) !important;
  border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ≤ 768px: Enable scroll on the CARD, neutralise inner containers
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* CORE FIX: The card becomes the horizontal scroll container.
     This overrides the desktop overflow:hidden that was clipping the table. */
  #page-stok .main > div:last-child {
    overflow-x: auto !important;      /* card scrolls horizontally */
    overflow-y: visible !important;   /* don't clip dropdown/tooltip vertically */
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  /* stok-scroll-wrap: neutralised — card handles scroll now */
  .stok-scroll-wrap {
    overflow: visible !important;   /* don't create a nested scroll context */
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* stok-table-body: also neutralised — no competing scroll */
  #stok-table-body {
    overflow: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── GRID ROWS: give them a min-width so columns don't collapse ──── */
  /* Header row (div with inline grid-template-columns starting with 110px) */
  #page-stok .main > div:last-child > div[style*="grid-template-columns:110px"],
  #page-stok .main > div:last-child > div[style*="grid-template-columns: 110px"],
  #page-stok .main > div:last-child .stok-scroll-wrap > div[style*="grid-template-columns"] {
    min-width: 580px !important;
    box-sizing: border-box !important;
  }

  /* Body rows */
  #stok-table-body > div[style*="grid-template-columns"] {
    min-width: 580px !important;
    box-sizing: border-box !important;
  }

  /* Also handle real <table> if JS generates one */
  #stok-table-body table {
    min-width: 580px !important;
    table-layout: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── BADGES: controlled size so they don't blow out columns ──────── */
  #stok-table-body .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: clamp(9px, 2.2vw, 11px) !important;
    padding: 3px 7px !important;
    border-radius: 20px !important;
    max-width: 100% !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }

  /* ── VALUE CHIPS (+6000 ml, 11444.0 ml, etc.) ──────────────────── */
  #stok-table-body span[style*="border-radius:5px"],
  #stok-table-body span[style*="border-radius: 5px"],
  #stok-table-body span[style*="border-radius:8px"],
  #stok-table-body span[style*="border-radius: 8px"] {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: clamp(10px, 2.4vw, 12px) !important;
    padding: 3px 7px !important;
    letter-spacing: -0.2px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }

  /* ── TABLE CELLS ────────────────────────────────────────────────── */
  #stok-table-body td {
    padding: 8px 8px !important;
    font-size: clamp(11px, 2.6vw, 13px) !important;
    vertical-align: middle !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  /* Number/quantity columns: stay on one line */
  #stok-table-body .c-qty-in,
  #stok-table-body .c-qty-out,
  #stok-table-body .c-baki {
    white-space: nowrap !important;
    text-align: right !important;
    font-size: clamp(10px, 2.4vw, 12px) !important;
  }

  /* Date column */
  #stok-table-body .c-tarikh,
  #stok-table-body td:first-child {
    white-space: nowrap !important;
    font-size: clamp(10px, 2.4vw, 12px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ≤ 640px (iPhone 14 Pro Max = 430px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  #page-stok .main {
    padding: 10px 10px 80px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Card: scroll + compact border-radius */
  #page-stok .main > div:last-child {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grid rows slightly narrower for 430px */
  #page-stok .main > div:last-child > div[style*="grid-template-columns:110px"],
  #page-stok .main > div:last-child > div[style*="grid-template-columns: 110px"],
  #page-stok .main > div:last-child .stok-scroll-wrap > div[style*="grid-template-columns"],
  #stok-table-body > div[style*="grid-template-columns"],
  #stok-table-body table {
    min-width: 540px !important;
  }

  /* Compact cells */
  #stok-table-body td {
    padding: 7px 7px !important;
    font-size: 11px !important;
  }

  #stok-table-body .badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  #stok-table-body span[style*="border-radius:5px"],
  #stok-table-body span[style*="border-radius: 5px"],
  #stok-table-body span[style*="border-radius:8px"],
  #stok-table-body span[style*="border-radius: 8px"] {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  #stok-table-body .c-qty-in,
  #stok-table-body .c-qty-out,
  #stok-table-body .c-baki {
    font-size: 10px !important;
  }

  #stok-table-body .c-tarikh,
  #stok-table-body td:first-child {
    font-size: 10px !important;
  }

  #stok-low-badge {
    font-size: 8px !important;
    padding: 2px 6px !important;
  }

  #stok-reorder-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ≤ 480px: Extra compactness
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  #page-stok .main {
    padding: 8px 8px 80px !important;
  }

  #stok-table-body > div[style*="grid-template-columns"],
  #stok-table-body table {
    min-width: 480px !important;
  }

  #stok-table-body td {
    padding: 6px 6px !important;
    font-size: 10.5px !important;
  }

  #stok-table-body .badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
  }

  #stok-table-body span[style*="border-radius:5px"],
  #stok-table-body span[style*="border-radius: 5px"],
  #stok-table-body span[style*="border-radius:8px"],
  #stok-table-body span[style*="border-radius: 8px"] {
    font-size: 9px !important;
    padding: 2px 5px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   KAWALAN STOK — TABLE VISIBILITY FIX v3
   Problem: table body rows completely invisible on mobile (iPhone 14 Pro Max)
   Root cause:
     1. #stok-table-body has `overflow-x: auto` from an earlier media block
        (line ~2975) which creates a *nested* scroll context. CSS spec forces
        overflow-y to become `hidden` when overflow-x is non-visible — this
        clips the rows vertically.
     2. .stok-scroll-wrap has `width: 100%` but no mechanism to grow beyond
        the card width, so rows wider than the viewport are invisible.
   Fix:
     - Card = sole scroll owner (overflow: auto)
     - .stok-scroll-wrap + #stok-table-body = width:max-content so they
       grow as wide as the content, letting the card scroll over them
     - All competing overflow-x:auto on #stok-table-body is killed
     - Every row gets min-width: 560px so columns stay readable
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. CARD: sole scroll owner ─────────────────────────────────────── */
  #page-stok .main > div:last-child {
    overflow: auto !important;           /* both axes: valid + enables scroll */
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  /* ── 2. INNER WRAPPERS: grow with content, never scroll themselves ───── */
  .stok-scroll-wrap {
    overflow: visible !important;        /* no nested scroll context */
    display: block !important;
    width: max-content !important;       /* expand to fit all columns */
    min-width: 100% !important;          /* at least fill the card */
    box-sizing: border-box !important;
  }

  #stok-table-body {
    overflow: visible !important;        /* kill the competing overflow-x:auto */
    display: block !important;
    width: max-content !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── 3. ROWS: enforce a minimum readable width ───────────────────────── */
  /* Header row (sits directly in the card, outside stok-table-body) */
  #page-stok .main > div:last-child > div[style*="grid-template-columns"] {
    min-width: 560px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Data rows inside #stok-table-body */
  #stok-table-body > div,
  #stok-table-body > div[style*="grid-template-columns"] {
    min-width: 560px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Fallback: real <table> element if JS generates one */
  #stok-table-body table {
    min-width: 560px !important;
    table-layout: auto !important;
    width: max-content !important;
  }
}

/* ── Tighter min-width for very small phones (≤ 430px) ─────────────────── */
@media (max-width: 480px) {

  #page-stok .main > div:last-child > div[style*="grid-template-columns"],
  #stok-table-body > div,
  #stok-table-body > div[style*="grid-template-columns"],
  #stok-table-body table {
    min-width: 500px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   KAWALAN STOK — TABLE HEADER / BODY ALIGNMENT FIX
   Problem: The table header row (TARIKH, JENIS, KUANTITI, BAKI STOK …)
   lives OUTSIDE .stok-scroll-wrap so it does not scroll with the body.
   On mobile the card is the scroll owner; the header stays pinned at card
   width while the body rows scroll independently → columns never line up.
   Fix:
     1. Wrap both header and body inside a shared scroll container
        (.stok-scroll-wrap), or — if the header is a sibling — pull it
        into the same width/min-width contract as the body rows.
     2. Make the header row behave exactly like a body row: same min-width,
        same box-sizing, width:max-content so it rides the scroll.
     3. Use a sticky top-offset so the header stays visible while scrolling.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Shared scroll contract: card scrolls, nothing inside double-scrolls ── */
  #page-stok .main > div:last-child {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Header row: same width rules as body rows ──────────────────────── */
  /* Targets the header div that sits as a direct child of the card,
     above .stok-scroll-wrap / #stok-table-body */
  #page-stok .main > div:last-child > div[style*="grid-template-columns"]:not([id]),
  #page-stok .main > div:last-child > .stok-hdr,
  #page-stok .main > div:last-child > [class*="stok"][class*="hdr"],
  #page-stok .main > div:last-child > [class*="tbl"][class*="hdr"] {
    min-width: 560px !important;
    width: max-content !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }

  /* ── Ensure .stok-scroll-wrap starts right after the header ─────────── */
  .stok-scroll-wrap {
    overflow: visible !important;
    width: max-content !important;
    min-width: 560px !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* ── Body rows: matching contract ───────────────────────────────────── */
  #stok-table-body {
    overflow: visible !important;
    width: max-content !important;
    min-width: 560px !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  #stok-table-body > div {
    min-width: 560px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Kawalan Stok "Semakan Stok Harian" inner table ─────────────────── */
  /* The check-&-found section renders its own grid table inside a card.
     Target both the header row and body rows of that inner table. */
  #kawalan-stok-body,
  #kawalan-check-body,
  [id*="kawalan"][id*="body"],
  [id*="semakan"][id*="body"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header row inside kawalan/semakan section */
  #kawalan-stok-body > div[style*="grid-template-columns"]:first-child,
  #kawalan-check-body > div[style*="grid-template-columns"]:first-child,
  [id*="kawalan"][id*="body"] > div[style*="grid-template-columns"]:first-child,
  [id*="semakan"][id*="body"] > div[style*="grid-template-columns"]:first-child {
    min-width: 420px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: var(--white, #fff) !important;
    width: max-content !important;
    box-sizing: border-box !important;
  }

  /* All grid rows inside kawalan/semakan body */
  #kawalan-stok-body > div[style*="grid-template-columns"],
  #kawalan-check-body > div[style*="grid-template-columns"],
  [id*="kawalan"][id*="body"] > div[style*="grid-template-columns"],
  [id*="semakan"][id*="body"] > div[style*="grid-template-columns"] {
    min-width: 420px !important;
    width: max-content !important;
    box-sizing: border-box !important;
  }

  /* Fallback: any <table> inside these sections */
  #kawalan-stok-body table,
  #kawalan-check-body table,
  [id*="kawalan"][id*="body"] table,
  [id*="semakan"][id*="body"] table {
    min-width: 420px !important;
    table-layout: auto !important;
    width: max-content !important;
    box-sizing: border-box !important;
  }

  /* ── Column label alignment: prevent header labels from wrapping ─────── */
  #kawalan-stok-body > div[style*="grid-template-columns"]:first-child > div,
  #kawalan-check-body > div[style*="grid-template-columns"]:first-child > div,
  [id*="kawalan"][id*="body"] > div[style*="grid-template-columns"]:first-child > div,
  [id*="semakan"][id*="body"] > div[style*="grid-template-columns"]:first-child > div {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ── 430px (iPhone 14 Pro Max) tighter contract ─────────────────────────── */
@media (max-width: 480px) {

  #page-stok .main > div:last-child > div[style*="grid-template-columns"]:not([id]),
  #page-stok .main > div:last-child > .stok-hdr,
  .stok-scroll-wrap,
  #stok-table-body,
  #stok-table-body > div {
    min-width: 500px !important;
  }

  #kawalan-stok-body > div[style*="grid-template-columns"],
  #kawalan-check-body > div[style*="grid-template-columns"],
  [id*="kawalan"][id*="body"] > div[style*="grid-template-columns"],
  [id*="semakan"][id*="body"] > div[style*="grid-template-columns"],
  #kawalan-stok-body table,
  #kawalan-check-body table {
    min-width: 380px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PENGIRAAN DOS & REKOD MINGGUAN — MOBILE TABLE SCROLL / ALIGNMENT FIX
   Root cause of "incomplete header colour":
     • Grid tracks (esp. 1fr + Catatan/Tindakan cols) wider than row box when
       width:100% caps to scrollport — bg paints on box, columns spill past it.
     • Fix: tbl-scroll-inner wrapper + identical fixed row width + per-cell hdr bg.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #page-disp .tbl-wrap,
  #page-week .tbl-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Shared inner scroll block — header + body share one width contract */
  #page-disp .tbl-scroll-inner,
  #page-week .tbl-scroll-inner {
    display: inline-block !important;
    min-width: 100% !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
  }

  /* ── Pengiraan Dos — fixed row width matches 9-col grid ── */
  #page-disp .tbl-scroll-inner > .disp-hdr,
  #page-disp .tbl-scroll-inner > #d-body > .disp-row,
  #page-disp .tbl-scroll-inner > #d-body > .disp-cat-hdr {
    width: 960px !important;
    min-width: 960px !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #page-disp .disp-hdr,
  #page-disp .disp-cat-hdr {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
  }

  /* Column header: paint bg per cell so every col (incl. Tindakan) is filled */
  #page-disp .disp-hdr {
    background: transparent !important;
    border-bottom: none !important;
    padding-top: 11px !important;
    padding-bottom: 0 !important;
  }

  #page-disp .disp-hdr > .wh {
    background: linear-gradient(to bottom, #f8f5ff, #f3f0fb) !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    padding-bottom: 11px !important;
    border-bottom: 2px solid rgba(220, 215, 240, .8) !important;
    box-sizing: border-box !important;
  }

  #page-disp .disp-hdr > .wh.c {
    justify-content: center !important;
  }

  /* Category band: pseudo fills full row width with inline bg colour */
  #page-disp .disp-cat-hdr {
    isolation: isolate !important;
  }

  #page-disp .disp-cat-hdr::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: inherit !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  #page-disp .tbl-scroll-inner > #d-body {
    overflow: visible !important;
    display: block !important;
    width: 960px !important;
    min-width: 960px !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* ── Rekod Mingguan — fixed row width matches 13-col grid ── */
  #page-week .tbl-scroll-inner > .week-hdr,
  #page-week .tbl-scroll-inner > #w-body > .week-row,
  #page-week .tbl-scroll-inner > #w-body > .week-cat-hdr,
  #page-week .tbl-scroll-inner > #week-ext-rows > .week-ext-hdr,
  #page-week .tbl-scroll-inner > #week-ext-rows > .week-ext-row {
    width: 920px !important;
    min-width: 920px !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #page-week .week-hdr,
  #page-week .week-cat-hdr {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
  }

  #page-week .week-hdr {
    background: transparent !important;
    border-bottom: none !important;
    padding-top: 12px !important;
    padding-bottom: 0 !important;
  }

  #page-week .week-hdr > .wh {
    background: linear-gradient(to bottom, #f8f5ff, #f3f0fb) !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid rgba(210, 205, 235, .85) !important;
    box-sizing: border-box !important;
  }

  #page-week .week-hdr > .wh.c {
    align-items: center !important;
  }

  #page-week .week-cat-hdr {
    isolation: isolate !important;
  }

  #page-week .week-cat-hdr::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: inherit !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  #page-week .tbl-scroll-inner > #w-body {
    overflow: visible !important;
    display: block !important;
    width: 920px !important;
    min-width: 920px !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* ── Pesakit Luar (disp) ── */
  #page-disp .ext-section {
    overflow: visible !important;
  }

  #page-disp #ext-list-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-disp .ext-hdr-row,
  #page-disp #ext-body > .ext-row {
    width: 780px !important;
    min-width: 780px !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #page-disp .ext-hdr-row {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    background: transparent !important;
  }

  #page-disp .ext-hdr-row > .wh {
    background: linear-gradient(to bottom, #f8f5ff, #f3f0fb) !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 2px solid rgba(220, 215, 240, .8) !important;
    box-sizing: border-box !important;
  }

  /* ── Pesakit Luar (week) ── */
  #page-week .ext-section {
    overflow: visible !important;
  }

  #page-week #week-ext-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-week #week-ext-body .week-ext-hdr,
  #page-week #week-ext-body .week-ext-row {
    width: 920px !important;
    min-width: 920px !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Kill global sticky cat-headers inside horizontal-scroll tables */
  #page-disp .disp-cat-hdr,
  #page-week .week-cat-hdr {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 480px) {

  #page-disp .tbl-scroll-inner > .disp-hdr,
  #page-disp .tbl-scroll-inner > #d-body > .disp-row,
  #page-disp .tbl-scroll-inner > #d-body > .disp-cat-hdr,
  #page-disp .tbl-scroll-inner > #d-body {
    width: 960px !important;
    min-width: 960px !important;
  }

  #page-week .tbl-scroll-inner > .week-hdr,
  #page-week .tbl-scroll-inner > #w-body > .week-row,
  #page-week .tbl-scroll-inner > #w-body > .week-cat-hdr,
  #page-week .tbl-scroll-inner > #week-ext-rows > .week-ext-hdr,
  #page-week .tbl-scroll-inner > #week-ext-rows > .week-ext-row,
  #page-week .tbl-scroll-inner > #w-body {
    width: 920px !important;
    min-width: 920px !important;
  }
}