/* ---- Inline style block #1 ---- */
html {
      background: linear-gradient(to right, #f5f3ff 0%, #d8ccff 50%, #a78bfa 100%);
      min-height: 100%;
    }

    /* ── SIDEBAR TOGGLE BUTTON — clean floating tab on sidebar right edge ── */
    /* ════════════════════════════════════════════════════════════════
       SIDEBAR TOGGLE — circular pill that rides the sidebar's right edge
       Spec: 40px circle, dark-purple, white SVG arrow, soft glow
       Position: vertically centred, half-protrudes outside sidebar
    ════════════════════════════════════════════════════════════════ */
    #sidebar-toggle {
      /* ── layout ─────────────────────────────── */
      position: fixed;
      top: 50%;
      left: calc(var(--side-w) - 20px);  /* half of 40px protrudes into content */
      transform: translateY(-50%);
      z-index: 400;                       /* above sidebar (300) & topbar (200) */

      /* ── size & shape ───────────────────────── */
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      border-radius: 50%;
      padding: 0;
      margin: 0;

      /* ── colour ─────────────────────────────── */
      background: #4B2DA0;               /* dark-purple, matches sidebar tone */
      border: 2px solid rgba(255,255,255,.20);
      color: #ffffff;

      /* ── depth ──────────────────────────────── */
      box-shadow:
        0 0 0 3px rgba(109,40,217,.22),  /* soft purple halo */
        0 4px 18px rgba(0,0,0,.60);      /* drop shadow for depth */

      /* ── interaction ────────────────────────── */
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;

      /* ── transitions ────────────────────────── */
      transition:
        left      .30s cubic-bezier(.4,0,.2,1),
        transform .30s cubic-bezier(.4,0,.2,1),
        background .18s ease,
        box-shadow .18s ease;
    }

    /* Hover — scale up + stronger glow */
    #sidebar-toggle:hover {
      background: #6230C4;
      box-shadow:
        0 0 0 5px rgba(139,92,246,.38),
        0 6px 22px rgba(0,0,0,.55);
      transform: translateY(-50%) scale(1.08);
    }

    /* Active press */
    #sidebar-toggle:active {
      transform: translateY(-50%) scale(0.92);
      box-shadow:
        0 0 0 2px rgba(109,40,217,.20),
        0 2px 10px rgba(0,0,0,.50);
    }

    /* ── Minimized state: button slides with sidebar — desktop only ── */
    @media (min-width: 1181px) {
      body.sidebar-collapsed #sidebar-toggle {
        left: calc(62px - 20px);
      }

      body.sidebar-collapsed #sidebar-toggle svg {
        transform: rotate(180deg);
      }
    }

    /* ── SVG arrow ── */
    #sidebar-toggle svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      transition: transform .25s ease-in-out;
    }

    /* ── Mobile: hide fixed button; mob-menu-btn handles it ── */

    /* Sidebar slide transition on desktop (collapse) */
    #sidebar {
      transition: transform .28s cubic-bezier(.4, 0, .2, 1),
        width .28s cubic-bezier(.4, 0, .2, 1);
    }

    /* ── DESKTOP SIDEBAR MINIMIZED STATE — desktop only (≥1025px) ──── */
    @media (min-width: 1181px) {
      body.sidebar-collapsed #sidebar {
        width: 62px;
      }

      body.sidebar-collapsed #topbar {
        left: 62px !important;
      }

      body.sidebar-collapsed #content-area {
        margin-left: 62px !important;
      }

      body.sidebar-collapsed .side-brand {
        padding: 14px 0;
        justify-content: center;
      }

      body.sidebar-collapsed .side-brand-text {
        display: none;
      }

      body.sidebar-collapsed .side-quick {
        padding: 8px 6px 6px;
      }

      body.sidebar-collapsed .nav-section-label,
      body.sidebar-collapsed .nav-divider,
      body.sidebar-collapsed .ntab-badge {
        display: none;
      }

      body.sidebar-collapsed .side-nav {
        padding: 8px 6px;
      }

      body.sidebar-collapsed .ntab {
        justify-content: center;
        padding: 10px 0;
        gap: 0;
        position: relative;
      }

      body.sidebar-collapsed .ntab .ntab-icon {
        font-size: 18px;
        flex-shrink: 0;
      }

      body.sidebar-collapsed .ntab-label {
        display: none;
      }

      body.sidebar-collapsed .ntab::after {
        content: attr(data-label);
        position: absolute;
        left: 68px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(20, 5, 50, .95);
        color: #fff;
        font-size: 11.5px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 6px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity .12s;
        z-index: 400;
        border: 1px solid rgba(255,255,255,.1);
      }

      body.sidebar-collapsed .ntab:hover::after {
        opacity: 1;
      }

      body.sidebar-collapsed .side-user {
        display: none !important;
      }
    }

    /* ── SIDEBAR BACKDROP (mobile overlay) ─────────────────────────── */
    #sidebar-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 299;
      /* backdrop-filter removed: causes repaint jank on iPad */
    }


    /* ══════════════════════════════════════════════════════════════════
       PATIENT REGISTRY ARCHIVE — DESIGN STANDARDISATION
       Matches system design: page-reg / page-stok / page-cicir pattern.
       ✅ Only CSS changes. No data, logic, IDs, or JS bindings modified.
    ══════════════════════════════════════════════════════════════════ */

    /* ── 1. HEADER: Remove gradient → match system hero style ── */
    #page-registry > div:first-child {
      background: radial-gradient(ellipse 70% 80% at 100% -10%, rgba(99,102,241,.28) 0%, transparent 60%),
                  radial-gradient(ellipse 50% 60% at -5% 110%, rgba(16,185,129,.15) 0%, transparent 55%),
                  linear-gradient(155deg, #0f0726 0%, #1a0b3d 35%, #160830 65%, #0d0520 100%) !important;
      padding: 0 !important;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    /* Subtle grid overlay — same as other heroes */
    #page-registry > div:first-child::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 0;
    }
    /* Orb glow top-right */
    #page-registry > div:first-child::after {
      content: '';
      position: absolute;
      top: -60px;
      right: -40px;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    /* Inner wrapper — sit above pseudo-elements */
    #page-registry > div:first-child > div {
      position: relative;
      z-index: 1;
      padding: 32px 32px 0 !important;
    }

    /* ── Title row ── */
    #page-registry > div:first-child > div > div:first-child {
      margin-bottom: 6px !important;
    }
    #page-registry > div:first-child > div > div:first-child > span:first-child {
      font-size: 26px !important;
    }
    #page-registry > div:first-child > div > div:first-child > div > div:first-child {
      font-size: 24px !important;
      font-weight: 800 !important;
      letter-spacing: -.4px;
      line-height: 1.15;
    }
    #page-registry > div:first-child > div > div:first-child > div > div:last-child {
      font-size: 13px !important;
      color: rgba(255,255,255,.38) !important;
      font-weight: 400;
    }

    /* ── Pill badges row (LIVE badge + Sync button) ── */
    #page-registry > div:first-child > div > div:nth-child(2) {
      margin-bottom: 20px !important;
    }

    /* ── 2. SUMMARY STATS BAR → individual light cards ── */
    #page-registry > div:first-child > div > div:last-child {
      display: grid !important;
      grid-template-columns: repeat(7, 1fr) !important;
      gap: 0 !important;
      border-top: 1px solid rgba(255,255,255,.08) !important;
      /* Remove any dark strip background — inherit hero background */
      background: transparent !important;
    }
    /* Each stat cell */
    #page-registry > div:first-child > div > div:last-child > div {
      padding: 18px 14px 20px !important;
      border-right: 1px solid rgba(255,255,255,.06) !important;
      text-align: center !important;
      position: relative;
      cursor: default;
      transition: background .2s;
    }
    #page-registry > div:first-child > div > div:last-child > div:last-child {
      border-right: none !important;
    }
    #page-registry > div:first-child > div > div:last-child > div:hover {
      background: rgba(255,255,255,.04);
    }
    /* Stat value */
    #page-registry > div:first-child > div > div:last-child > div > span:first-child {
      font-size: 26px !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      letter-spacing: -1px !important;
      margin-bottom: 6px !important;
    }
    /* Stat label */
    #page-registry > div:first-child > div > div:last-child > div > span:last-child {
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: .7px !important;
      text-transform: uppercase !important;
      color: rgba(255,255,255,.3) !important;
    }

    /* ── 3. MAIN CONTENT AREA ── */
    #page-registry .main {
      background: #f3f4f8 !important;
      padding: 28px 32px !important;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* ── 4. FILTER & ACTION BAR ── */
    #page-registry .main > div:first-child {
      display: flex !important;
      gap: 10px !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      margin-bottom: 16px !important;
      background: #fff !important;
      border: 1px solid #e2e5ef !important;
      border-radius: 14px !important;
      padding: 14px 18px !important;
      box-shadow: 0 2px 12px rgba(15,7,38,.06), 0 1px 3px rgba(15,7,38,.04) !important;
    }
    /* Search input */
    #page-registry .main > div:first-child > div:first-child {
      flex: 1 !important;
      min-width: 200px !important;
    }
    #reg-search {
      height: 40px !important;
      border: 1.5px solid #dde1ef !important;
      border-radius: 10px !important;
      font-size: 13px !important;
      background: #f8f9fc !important;
      color: var(--ink) !important;
      font-family: var(--sans) !important;
      transition: all .18s !important;
      width: 100% !important;
      padding-left: 34px !important;
    }
    #reg-search:focus {
      border-color: #6366f1 !important;
      background: #fff !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important;
    }
    /* Dropdowns */
    #reg-status-filter,
    #reg-cat-filter {
      height: 40px !important;
      border: 1.5px solid #dde1ef !important;
      border-radius: 10px !important;
      font-size: 13px !important;
      background: #f8f9fc !important;
      color: var(--ink) !important;
      font-family: var(--sans) !important;
      padding: 0 12px !important;
      font-weight: 500 !important;
      cursor: pointer !important;
      transition: all .18s !important;
    }
    #reg-status-filter:focus,
    #reg-cat-filter:focus {
      border-color: #6366f1 !important;
      outline: none !important;
    }
    /* All action buttons in bar */
    #page-registry .main > div:first-child > button {
      height: 40px !important;
      border-radius: 10px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      font-family: var(--sans) !important;
      padding: 0 16px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      white-space: nowrap !important;
      cursor: pointer !important;
      transition: all .18s !important;
    }
    /* Primary: Tambah ke Registry */
    #page-registry .main > div:first-child > button:nth-child(4) {
      background: #059669 !important;
      color: #fff !important;
      border: none !important;
      box-shadow: 0 2px 8px rgba(5,150,105,.25) !important;
    }
    #page-registry .main > div:first-child > button:nth-child(4):hover {
      background: #047857 !important;
      transform: translateY(-1px) !important;
    }
    /* Secondary: Export CSV */
    #page-registry .main > div:first-child > button:nth-child(5) {
      background: #f8f9fc !important;
      border: 1.5px solid #dde1ef !important;
      color: var(--ink2) !important;
    }
    #page-registry .main > div:first-child > button:nth-child(5):hover {
      border-color: #6366f1 !important;
      color: #6366f1 !important;
    }
    /* Secondary: Reten Bulanan */
    #page-registry .main > div:first-child > button:nth-child(6) {
      background: var(--ink) !important;
      color: #fff !important;
      border: none !important;
      box-shadow: 0 2px 8px rgba(26,9,56,.2) !important;
    }
    #page-registry .main > div:first-child > button:nth-child(6):hover {
      background: #160728 !important;
      transform: translateY(-1px) !important;
    }

    /* ── 5. STATUS FILTER PILLS ── */
    #reg-pills {
      display: flex !important;
      gap: 6px !important;
      flex-wrap: wrap !important;
      margin-bottom: 16px !important;
    }
    .reg-pill {
      padding: 6px 14px !important;
      border-radius: 20px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      border: 1.5px solid #e2e5ef !important;
      background: #f8f9fc !important;
      color: #6b7280 !important;
      font-family: var(--sans) !important;
      transition: all .15s !important;
      letter-spacing: .1px !important;
    }
    .reg-pill:hover {
      border-color: #6366f1 !important;
      color: #6366f1 !important;
      background: rgba(99,102,241,.05) !important;
    }
    .reg-pill.active {
      background: var(--ink) !important;
      border-color: transparent !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(26,9,56,.2) !important;
    }
    /* Transfer In pill — keep amber tone but softened */
    .reg-pill[data-regtype="transfer_in"] {
      border-color: #fde68a !important;
      background: #fffbeb !important;
      color: #92400e !important;
    }
    .reg-pill[data-regtype="transfer_in"]:hover,
    .reg-pill[data-regtype="transfer_in"].active {
      background: #f59e0b !important;
      border-color: transparent !important;
      color: #fff !important;
    }
    /* Rekod Lama pill — keep violet tone but softened */
    .reg-pill[data-regtype="rekod_lama"] {
      border-color: #ddd6fe !important;
      background: #f5f3ff !important;
      color: #5b21b6 !important;
    }
    .reg-pill[data-regtype="rekod_lama"]:hover,
    .reg-pill[data-regtype="rekod_lama"].active {
      background: #7c3aed !important;
      border-color: transparent !important;
      color: #fff !important;
    }

    /* ── 6. INFO BOXES (Blue & Yellow alerts) ── */
    #page-registry .main > div[style*="background:#eff6ff"],
    #page-registry .main > div[style*="background: #eff6ff"] {
      background: #f0f5ff !important;
      border: 1px solid #c7d7fc !important;
      border-radius: 10px !important;
      padding: 12px 18px !important;
      margin-bottom: 14px !important;
      font-size: 12px !important;
      color: #1e3a8a !important;
    }
    #page-registry .main > div[style*="background:#fefce8"],
    #page-registry .main > div[style*="background: #fefce8"] {
      background: #fffdf0 !important;
      border: 1px solid #fde68a !important;
      border-radius: 10px !important;
      padding: 12px 18px !important;
      margin-bottom: 14px !important;
      font-size: 12px !important;
      color: #78350f !important;
    }

    /* ── 7. TABLE CARD WRAPPER ── */
    #page-registry .main > div:last-child {
      background: var(--white) !important;
      border-radius: 14px !important;
      border: 1px solid #e8ebf4 !important;
      overflow: hidden !important;
      box-shadow: 0 2px 8px rgba(15,7,38,.05), 0 1px 2px rgba(15,7,38,.04) !important;
    }

    /* ── TABLE HEADER ── */
    #reg-table thead tr {
      background: #f8f7fc !important;
      border-bottom: 2px solid #ede9f8 !important;
    }
    #reg-table thead th {
      padding: 12px 14px !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: .6px !important;
      color: var(--ink3) !important;
      white-space: nowrap !important;
    }

    /* ── TABLE ROWS ── */
    #reg-table tbody tr {
      border-bottom: 1px solid #f3f4f8 !important;
      transition: background .12s !important;
    }
    #reg-table tbody tr:last-child {
      border-bottom: none !important;
    }
    #reg-table tbody tr:hover td {
      background: #f8f7fd !important;
    }
    #reg-table tbody td {
      padding: 11px 14px !important;
      font-size: 13px !important;
      vertical-align: middle !important;
      color: var(--ink) !important;
    }
    /* Numbers: mono-aligned */
    #reg-table tbody td:nth-child(5) {
      font-family: var(--mono) !important;
      text-align: right !important;
      font-size: 12px !important;
    }
    /* ID column */
    #reg-table tbody td:nth-child(3) {
      font-family: var(--mono) !important;
      font-size: 11px !important;
      color: var(--ink3) !important;
    }

    /* ── 8. STATUS BADGES — standardised ── */
    #reg-table .reg-status-badge,
    #reg-table [class*="reg-badge"],
    #reg-table td span[style*="border-radius"] {
      display: inline-flex !important;
      align-items: center !important;
      padding: 3px 10px !important;
      border-radius: 20px !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: .4px !important;
      text-transform: uppercase !important;
      line-height: 1 !important;
    }

    /* ── 9. "LIHAT" ACTION BUTTON in table ── */
    #reg-table .reg-view-btn,
    #reg-table button {
      height: 30px !important;
      padding: 0 12px !important;
      border-radius: 8px !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      font-family: var(--sans) !important;
      cursor: pointer !important;
      transition: all .15s !important;
      white-space: nowrap !important;
    }

    /* ── 10. TABLE FOOTER ── */
    #reg-footer {
      padding: 10px 18px !important;
      font-size: 12px !important;
      color: var(--ink3) !important;
      border-top: 1px solid #f0eff8 !important;
      background: #faf9fc !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
    }

    /* ── MODAL HEADER: remove dark gradient, use system style ── */
    #reg-modal-overlay > div > div:first-child {
      background: var(--ink) !important;
      border-radius: 16px 16px 0 0 !important;
      padding: 20px 24px !important;
    }

    /* ── RESPONSIVE: mobile stacking ── */
    /* ── CATEGORY COLOUR CODING ──────────────────────────────────────── */
    /* Stripe (top bar on card) */
    .s-fta {
      background: var(--blue);
    }

    .s-tw {
      background: var(--amber);
    }

    .s-dot {
      background: var(--purple);
    }

    .s-ds {
      background: var(--cyan);
    }

    /* Card left accent border per category */
    .pcard.cat-fta {
      border-left: 4px solid var(--blue) !important;
    }

    .pcard.cat-tw {
      border-left: 4px solid var(--amber) !important;
    }

    .pcard.cat-dot {
      border-left: 4px solid var(--purple) !important;
    }

    .pcard.cat-ds {
      border-left: 4px solid var(--cyan) !important;
    }

    /* Avatar gradient per category */
    .av-fta {
      background: linear-gradient(135deg, #dbeafe, #93c5fd);
      color: #1e40af;
    }

    .av-tw {
      background: linear-gradient(135deg, #fef3c7, #fcd34d);
      color: #92400e;
    }

    .av-dot {
      background: linear-gradient(135deg, #ede9fe, #c4b5fd);
      color: #5b21b6;
    }

    .av-ds {
      background: linear-gradient(135deg, #cffafe, #67e8f9);
      color: #155e75;
    }

    /* Make stripe slightly taller for visibility */
    .pcard-stripe {
      height: 5px !important;
    }

    /* ── MOBILE REFINEMENTS ──────────────────────────────────────────── */
    /* ---- Inline style block #2 ---- */
/* ═══════════════════════════════════════════════════════════
   PREMIUM MOBILE FINE-TUNING (Optimized for iPad & Modern Mobile)
   ═══════════════════════════════════════════════════════════ */

    /* 1. Global Container Fixes — Stop the horizontal shimmy */
    html,
    body {
      max-width: 100vw;
      overflow-x: hidden;
      /* Prevent overall horizontal scroll */
      position: relative;
    }

    #app-shell {
      max-width: 100vw;
      width: 100vw;
      overflow: hidden;
    }

    /* 2. Responsive Hero Stats (Dynamic Grid wrapping) */
    .hero-stats {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0 !important;
      width: 100% !important;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .03);
    }

    /* Tablet adjustment: 3 columns */
    @media (min-width: 601px) {
      .hero-stats {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }

    /* Desktop adjustment: 4 columns */
    @media (min-width: 800px) {
      .hero-stats {
        grid-template-columns: repeat(4, 1fr) !important;
      }
    }

    .hstat {
      flex: none !important;
      width: auto !important;
      padding: 14px 10px !important;
      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 borders on right edge based on column count */
    .hstat:nth-child(2n) {
      border-right: none !important;
    }

    @media (min-width: 601px) {
      .hstat:nth-child(2n) {
        border-right: 1px solid rgba(255, 255, 255, .08) !important;
      }

      .hstat:nth-child(3n) {
        border-right: none !important;
      }
    }

    @media (min-width: 800px) {
      .hstat:nth-child(3n) {
        border-right: 1px solid rgba(255, 255, 255, .08) !important;
      }

      .hstat:nth-child(4n) {
        border-right: none !important;
      }
    }

    /* 3. Mobile Sidebar Overlay (Non-shifting) */
    @media (max-width: 1180px) {
      #sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: translateX(-100%);
        z-index: 3000 !important;
        transition: transform .3s ease !important;
        box-shadow: 20px 0 50px rgba(0, 0, 0, .2);
      }

      body.sidebar-open #sidebar,
      body.mob-sidebar-open #sidebar {
        transform: translateX(0);
      }

      #sidebar-backdrop {
        z-index: 2999 !important;
      }

      /* Keep content pinned */
      #topbar,
      #content-area {
        left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
      }

      /* Memo / Surat Rujukan — desktop only (sukar diurus pada mobile/tablet) */
      #stab-memo,
      #mob-nav-drawer [data-page="memo"] {
        display: none !important;
      }
    }

    /* 4. Scrollable Data Tables (Universal Fix) */
    .tbl-wrap {
      width: 100% !important;
      max-width: 100vw !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
    }

    .tbl-wrap table {
      min-width: 600px;
      /* Force horizontal scroll instead of squishing */
    }

    /* 6. Form Grid on Mobile */
    .pinfo {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }

    @media (min-width: 768px) {
      .pinfo {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    :root {
      --bg: #f0f2f8;
      --white: #ffffff;
      --ink: #1a0938;
      --ink2: #3d2a6b;
      --ink3: #7c6e9a;
      --rule: #ddd8f0;
      --rule2: #c5bbdf;
      --green: #059669;
      --green-bg: #ecfdf5;
      --green-b: #6ee7b7;
      --red: #dc2626;
      --red-bg: #fef2f2;
      --red-b: #fca5a5;
      --blue: #2563eb;
      --blue-bg: #eff6ff;
      --blue-b: #93c5fd;
      --amber: #d97706;
      --amber-bg: #fffbeb;
      --amber-b: #fcd34d;
      --purple: #7c3aed;
      --purple-bg: #f5f3ff;
      --purple-b: #c4b5fd;
      --cyan: #0891b2;
      --cyan-bg: #ecfeff;
      --cyan-b: #67e8f9;
      --orange: #ea580c;
      --orange-bg: #fff7ed;
      --orange-b: #fdba74;
      /* Sidebar */
      --side-bg: #12102a;
      --side-bg-elevated: rgba(255, 255, 255, .06);
      --side-accent: #2dd4bf;
      --side-w: 240px;
      --sans: 'DM Sans', system-ui, sans-serif;
      --head: 'DM Sans', system-ui, sans-serif;
      --mono: 'DM Mono', 'JetBrains Mono', monospace;
      --sh: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
      --sh2: 0 4px 16px rgba(0, 0, 0, .10), 0 12px 32px rgba(0, 0, 0, .06);
    }

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

    html {
      height: 100%;
      height: -webkit-fill-available
    }

    body {
      background: transparent;
      color: var(--ink);
      font-family: var(--sans);
      min-height: 100vh;
      min-height: -webkit-fill-available;
      display: flex;
      flex-direction: column
    }

    /* ══ LOADING PAGE ════════════════════════════════════════════ */
    #loading-screen.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* ══ LAYOUT SHELL — Zaant-style sidebar + topbar ════════════ */
    #app-shell {
      display: flex;
      height: 100vh;
      height: 100dvh
    }

    /* ── SIDEBAR ── */
    #sidebar {
      width: var(--side-w);
      flex-shrink: 0;
      background: var(--side-bg);
      display: flex;
      flex-direction: column;
      height: 100vh;
      height: 100dvh;
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 300;
      border-right: 1px solid rgba(255, 255, 255, .07);
      overflow: hidden;
    }

    .side-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 18px 20px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      flex-shrink: 0;
    }

    .side-logo {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 1.5px solid rgba(255, 255, 255, .2);
      background: #fff;
    }

    .side-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .side-brand-text {
      line-height: 1.15
    }

    .side-brand-text strong {
      display: block;
      font-size: 14px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.2px
    }

    .side-brand-accent {
      color: var(--side-accent);
    }

    .side-brand-text span {
      font-size: 10px;
      color: rgba(255, 255, 255, .38)
    }

    /* ── Quick access strip ── */
    .side-quick {
      flex-shrink: 0;
      padding: 10px 12px 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .mob-side-quick {
      padding: 4px 0 8px;
      border-bottom: none;
    }

    .mob-drawer-brand {
      padding: 18px 16px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      flex-shrink: 0;
    }

    .mob-drawer-brand-title {
      font-size: 15px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.2px;
    }

    .mob-drawer-brand-sub {
      font-size: 11px;
      color: rgba(255, 255, 255, .38);
      margin-top: 2px;
    }

    /* ── Grouped nav sections ── */
    .nav-section {
      padding: 4px 0 2px;
    }

    .nav-section-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .32);
      padding: 8px 12px 6px;
      user-select: none;
    }

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

    .side-nav {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 6px 8px 10px;
      scrollbar-width: none
    }

    .side-nav::-webkit-scrollbar {
      display: none
    }

    .ntab {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      border-radius: 9px;
      margin-bottom: 2px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, .58);
      cursor: pointer;
      border: none;
      background: none;
      font-family: var(--sans);
      transition: color .15s, background .15s;
      text-align: left;
      white-space: nowrap;
      position: relative;
    }

    .ntab {
      contain: layout style;
    }

    .ntab .ntab-icon {
      font-size: 17px;
      width: 20px;
      flex-shrink: 0;
      text-align: center;
      pointer-events: none;
      line-height: 1;
      opacity: .88;
    }

    .ntab .ntab-label {
      flex: 1;
      min-width: 0;
    }

    .ntab-badge {
      flex-shrink: 0;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .04em;
      padding: 2px 7px;
      border-radius: 999px;
      line-height: 1.3;
    }

    .ntab-badge-hot {
      background: linear-gradient(135deg, #7c3aed, #a855f7);
      color: #fff;
      box-shadow: 0 0 12px rgba(124, 58, 237, .35);
    }

    .ntab-quick {
      font-weight: 600;
    }

    .ntab:hover {
      color: rgba(255, 255, 255, .92);
      background: rgba(255, 255, 255, .07)
    }

    .ntab.active {
      color: #fff;
      background: rgba(45, 212, 191, .12);
      font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .18);
    }

    .ntab.active .ntab-icon {
      color: var(--side-accent);
      opacity: 1;
    }

    #page-stok.stok-page-loading {
      contain: layout style;
    }

    #page-stok.stok-page-loading .main {
      opacity: 0.94;
      transition: opacity 0.12s ease;
    }

    .side-user {
      padding: 12px 12px calc(14px + env(safe-area-inset-bottom)) 12px;
      border-top: 1px solid rgba(255, 255, 255, .07);
      flex-shrink: 0;
      background: rgba(0, 0, 0, .12);
    }

    .side-user-card {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      padding: 10px 10px;
      border-radius: 12px;
      background: var(--side-bg-elevated);
      border: 1px solid rgba(255, 255, 255, .06);
    }

    .side-user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0;
    }

    .side-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, #7c3aed, #2dd4bf);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
      border: 2px solid rgba(255, 255, 255, .12);
    }

    .side-user-meta {
      min-width: 0;
      flex: 1;
    }

    .side-user-name {
      font-size: 12.5px;
      font-weight: 700;
      color: rgba(255, 255, 255, .92);
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .side-user-role-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 2px;
      flex-wrap: wrap;
    }

    .side-user-role {
      font-size: 10.5px;
      color: rgba(255, 255, 255, .42);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .side-user-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 600;
      color: #34d399;
      flex-shrink: 0;
    }

    .side-user-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #34d399;
      box-shadow: 0 0 8px rgba(52, 211, 153, .55);
      animation: sideStatusPulse 2.4s ease-in-out infinite;
    }

    @keyframes sideStatusPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: .55; }
    }

    .side-user-settings {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .04);
      color: rgba(255, 255, 255, .55);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      font-size: 16px;
      transition: background .15s, color .15s, border-color .15s;
    }

    .side-user-settings:hover {
      background: rgba(255, 255, 255, .1);
      color: #fff;
      border-color: rgba(255, 255, 255, .14);
    }

    .side-logout-btn {
      width: 100%;
      padding: 10px 12px;
      background: #dc2626;
      border: none;
      border-radius: 9px;
      color: #fff;
      font-family: var(--sans);
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background .15s, transform .1s;
    }

    .side-logout-btn:hover {
      background: #b91c1c;
    }

    .side-logout-btn:active {
      transform: scale(.98);
    }

    .side-logout-btn .ti {
      font-size: 16px;
    }

    /* ── TOP BAR ── */
    #topbar {
      position: fixed;
      left: var(--side-w);
      right: 0;
      top: 0;
      height: 52px;
      z-index: 200;
      background: rgba(255, 255, 255, .92);
      border-bottom: 1px solid var(--rule);
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 10px;
      backdrop-filter: blur(12px);
      box-shadow: 0 1px 8px rgba(26, 9, 56, .06);
    }

    .topbar-title {
      font-family: var(--head);
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .nav-date {
      font-family: var(--sans);
      font-size: 12px;
      color: var(--ink3);
      background: var(--bg);
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid var(--rule);
      white-space: nowrap;
    }

    /* ── CONTENT AREA ── */
    #content-area {
      margin-left: var(--side-w);
      margin-top: 52px;
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      background: var(--bg);
      height: calc(100vh - 52px);
      height: calc(100dvh - 52px);
      box-sizing: border-box;
      position: relative;
    }

    /* Keep old classes for compat */
    .topnav {
      display: none
    }

    .nav-brand {
      display: none
    }

    .nav-tabs {
      display: none
    }

    /* ══ PAGES ═══════════════════════════════════════════════════ */
    .page {
      display: none;
      width: 100%
    }

    .page.active {
      display: block;
      width: 100%;
      min-height: calc(100vh - 52px)
    }

    /* ══ LIVE FEED ═══════════════════════════════════════════════ */
    @keyframes pulse-dot {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .5
      }
    }

    @keyframes slideInFeed {
      from {
        opacity: 0;
        transform: translateX(-20px)
      }

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

    .feed-item {
      display: flex;
      gap: 14px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--rule);
      transition: background .15s;
      animation: slideInFeed .3s ease;
    }

    .feed-item:last-child {
      border-bottom: none
    }

    .feed-item:hover {
      background: var(--bg)
    }

    .feed-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    .feed-content {
      flex: 1;
      min-width: 0
    }

    .feed-header {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 3px
    }

    .feed-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink)
    }

    .feed-time {
      font-size: 11px;
      color: var(--ink3);
      font-weight: 500
    }

    .feed-desc {
      font-size: 13px;
      color: var(--ink2);
      line-height: 1.5
    }

    .feed-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 700;
      margin-left: 6px;
    }

    .badge-new {
      background: var(--green-bg);
      color: var(--green)
    }

    .badge-dispense {
      background: var(--blue-bg);
      color: var(--blue)
    }

    .badge-stock {
      background: var(--amber-bg);
      color: var(--amber)
    }

    .badge-cf {
      background: var(--purple-bg);
      color: var(--purple)
    }

    /* ══ HERO STRIP ══════════════════════════════════════════════ */
    .hero {
      background: radial-gradient(ellipse at 92% 0%, rgba(124, 58, 237, .38) 0%, transparent 55%), linear-gradient(135deg, #2d1065 0%, #1a0938 100%);
      padding: 24px 0 0;
      width: 100%
    }

    .hero-inner {
      max-width: 100%;
      padding: 0 28px
    }

    .hero-title {
      font-family: var(--head);
      font-size: 22px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 4px
    }

    .hero-sub {
      font-size: 15px;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 20px
    }

    .hero-stats {
      display: flex;
      border-top: 1px solid rgba(255, 255, 255, .08)
    }

    .hstat {
      padding: 14px 24px;
      flex: 1;
      border-right: 1px solid rgba(255, 255, 255, .08);
      text-align: center
    }

    .hstat:last-child {
      border-right: none
    }

    .hstat-v {
      font-family: var(--head);
      font-size: 24px;
      font-weight: 800;
      display: block;
      line-height: 1
    }

    .hstat-l {
      font-size: 15px;
      letter-spacing: .4px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .3);
      margin-top: 4px;
      display: block
    }

    /* All stats visible */

    /* ══ MAIN WRAP ═══════════════════════════════════════════════ */
    .main {
      width: 100%;
      padding: 24px 28px
    }

    /* ══ CONTROL BAR ════════════════════════════════════════════ */
    .ctrl {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      align-items: center
    }

    .search-wrap {
      flex: 1;
      min-width: 220px;
      position: relative
    }

    .si {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--ink3);
      pointer-events: none
    }

    .sinp {
      width: 100%;
      padding: 10px 12px 10px 36px;
      border: 1.5px solid var(--rule2);
      border-radius: 8px;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--ink);
      background: var(--white);
      outline: none;
      box-shadow: var(--sh);
      transition: border-color .15s;
    }

    .sinp:focus {
      border-color: var(--ink)
    }

    .sinp::placeholder {
      color: var(--ink3)
    }

    .btn {
      padding: 7px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--rule2);
      background: var(--white);
      color: var(--ink2);
      font-family: var(--sans);
      transition: all .12s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
      white-space: nowrap;
      letter-spacing: .01em;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      line-height: 1.4;
    }

    .btn:hover {
      border-color: #94a3b8;
      color: var(--ink);
      background: #f8fafc;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .09);
      transform: translateY(-0.5px);
    }

    .btn:active {
      transform: translateY(0);
      box-shadow: none
    }

    .btn.active {
      background: var(--purple);
      border-color: var(--purple);
      color: #fff;
      box-shadow: 0 1px 3px rgba(124, 58, 237, .3)
    }

    .btn.active:hover {
      background: #1e2535;
      border-color: #1e2535
    }

    .btn-green.active {
      background: var(--green);
      border-color: var(--green)
    }

    .btn-red.active {
      background: var(--red);
      border-color: var(--red)
    }

    .btn-ink {
      background: var(--ink);
      border-color: var(--ink);
      color: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .15)
    }

    .btn-ink:hover {
      background: #1e2535;
      border-color: #1e2535;
      color: #fff
    }

    /* Button variant: ghost (default filter buttons) */
    .btn-ghost {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      color: var(--ink3);
      font-size: 13px;
    }

    .btn-ghost:hover {
      background: var(--bg);
      border-color: var(--rule2);
      color: var(--ink);
      box-shadow: none;
      transform: none
    }

    .btn-ghost.active {
      background: var(--ink);
      border-color: var(--ink);
      color: #fff
    }

    /* Coloured action buttons */
    .btn-action {
      padding: 7px 13px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      font-family: var(--sans);
      transition: all .12s ease;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      line-height: 1.4;
      letter-spacing: .01em;
    }

    .btn-action:hover {
      filter: brightness(1.08);
      transform: translateY(-0.5px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
    }

    .btn-action:active {
      transform: translateY(0);
      filter: brightness(.97)
    }

    .sel {
      padding: 9px 12px;
      border: 1.5px solid var(--rule2);
      border-radius: 8px;
      font-size: 15px;
      color: var(--ink);
      background: var(--white);
      font-family: var(--sans);
      outline: none;
      cursor: pointer;
      box-shadow: var(--sh);
    }

    .minp {
      width: 100%;
      box-sizing: border-box;
      padding: 9px 12px;
      border: 1.5px solid var(--rule2);
      border-radius: 10px;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--ink);
      background: var(--white);
      outline: none;
      box-shadow: var(--sh);
      transition: border-color .15s;
    }

    .minp:focus {
      border-color: var(--ink)
    }

    .minp::placeholder {
      color: var(--ink3)
    }

    /* ══ PILL FILTERS ════════════════════════════════════════════ */
    .pills {
      display: flex;
      gap: 5px;
      margin-bottom: 16px;
      flex-wrap: wrap
    }

    .pill {
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      border: 1.5px solid var(--rule2);
      background: var(--white);
      color: var(--ink2);
      transition: all .15s;
      font-family: var(--sans);
    }

    .pill:hover {
      border-color: var(--ink2)
    }

    .pill.active {
      background: var(--purple);
      border-color: var(--purple);
      color: #fff
    }

    .pill .n {
      font-size: 15px;
      margin-left: 2px;
      opacity: .6
    }

    /* ══ RESULT BAR ══════════════════════════════════════════════ */
    .rbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px
    }

    .rcount {
      font-size: 15px;
      color: var(--ink3)
    }

    .rcount strong {
      color: var(--ink);
      font-weight: 600
    }

    /* ══ PATIENT GRID ════════════════════════════════════════════ */
    .pgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 10px
    }

    .pcard {
      background: var(--white);
      border: 1.5px solid var(--rule);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: var(--sh);
      transition: all .18s;
      cursor: pointer;
    }

    .pcard:hover {
      box-shadow: var(--sh2);
      transform: translateY(-1px)
    }

    .pcard.is-default {
      background: var(--red-bg);
      border-color: var(--red-b)
    }

    .pcard-stripe {
      height: 3px
    }

    .s-active {
      background: var(--green)
    }

    .s-default {
      background: var(--red)
    }

    .s-aktif-cat {
      background: linear-gradient(90deg, var(--purple), #2dd4bf)
    }

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

    .pcard-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px
    }

    .pno {
      font-family: var(--mono);
      font-size: 15px;
      color: var(--ink3);
      margin-bottom: 2px
    }

    .pname {
      font-family: var(--head);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2
    }

    .pic {
      font-family: var(--mono);
      font-size: 15px;
      color: var(--ink3);
      margin-top: 2px
    }

    /* ── Enhanced patient list UX ─────────────────────────── */
    .p-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 15px;
      flex-shrink: 0;
      letter-spacing: .5px;
      font-family: var(--head)
    }

    .p-avatar.av-active {
      background: linear-gradient(135deg, #bbf7d0, #6ee7b7);
      color: #065f46
    }

    .p-avatar.av-default {
      background: linear-gradient(135deg, #fee2e2, #fca5a5);
      color: #991b1b
    }

    .pcard-top-inner {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      flex: 1;
      min-width: 0
    }

    .pcard-top-text {
      flex: 1;
      min-width: 0
    }

    .dot-day-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      margin-top: 2px
    }

    .dot-chip {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      background: #e0f2fe;
      color: #0369a1;
      font-family: var(--mono)
    }

    .dot-chip.active-day {
      background: #0369a1;
      color: #fff
    }

    .pcard-actions {
      display: flex;
      gap: 5px;
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px solid var(--rule2)
    }

    .pcard-act-btn {
      flex: 1;
      padding: 5px 0;
      border: 1px solid var(--rule2);
      background: var(--bg);
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink3);
      cursor: pointer;
      transition: all .15s;
      text-align: center
    }

    .pcard-act-btn:hover {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink)
    }

    .pcard-act-btn.btn-edit:hover {
      background: #1d4ed8;
      color: #fff;
      border-color: #1d4ed8
    }

    .search-hl {
      background: #fef08a;
      border-radius: 2px;
      padding: 0 1px
    }

    /* ══════════════════════════════════════════════════════════════════
       KKM HEALTHCARE SYSTEM — PATIENT CARD & ACTION BUTTON REDESIGN
       Pure UI/CSS enhancement. No logic, IDs, or JS bindings changed.
       Design: Clean, calm, professional clinical interface.
    ══════════════════════════════════════════════════════════════════ */

    /* ── Patient Card: refined clinical look ── */
    .pcard {
      background: #ffffff !important;
      border: 1px solid #e8eaf0 !important;
      border-radius: 14px !important;
      overflow: hidden !important;
      box-shadow: 0 1px 3px rgba(15,20,40,.05), 0 4px 12px rgba(15,20,40,.04) !important;
      transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
      cursor: pointer !important;
    }

    .pcard:hover {
      box-shadow: 0 4px 16px rgba(15,20,40,.09), 0 8px 28px rgba(15,20,40,.06) !important;
      transform: translateY(-2px) !important;
      border-color: #d0d4e4 !important;
    }

    .pcard.is-default {
      background: #fdfafa !important;
      border-color: #f5d0d0 !important;
    }

    /* ── Category stripe: thin, elegant ── */
    .pcard-stripe {
      height: 3px !important;
    }

    /* Category stripe colours — harmonious clinical palette */
    .s-fta   { background: linear-gradient(90deg, #3b5bdb, #4c6ef5) !important; }
    .s-tw    { background: linear-gradient(90deg, #e67700, #f59f00) !important; }
    .s-dot   { background: linear-gradient(90deg, #6741d9, #845ef7) !important; }
    .s-ds    { background: linear-gradient(90deg, #0c8599, #22b8cf) !important; }
    .s-default { background: linear-gradient(90deg, #e03131, #fa5252) !important; }
    .s-active  { background: linear-gradient(90deg, #2f9e44, #40c057) !important; }

    /* ── Card body: more breathing room ── */
    .pcard-body {
      padding: 14px 16px 13px !important;
    }

    /* ── Card top section ── */
    .pcard-top {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 11px !important;
      gap: 8px;
    }

    .pcard-top-inner {
      display: flex !important;
      gap: 11px !important;
      align-items: center !important;
      flex: 1 !important;
      min-width: 0 !important;
    }

    /* ── Avatar: cleaner circle ── */
    .p-avatar {
      width: 38px !important;
      height: 38px !important;
      border-radius: 10px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-weight: 700 !important;
      font-size: 13px !important;
      flex-shrink: 0 !important;
      letter-spacing: .3px !important;
    }

    .p-avatar.av-active  { background: #ebfbee; color: #2f9e44 !important; }
    .p-avatar.av-default { background: #fff5f5; color: #c92a2a !important; }
    .av-fta { background: #edf2ff; color: #3b5bdb !important; }
    .av-tw  { background: #fff9db; color: #e67700 !important; }
    .av-dot { background: #f3f0ff; color: #6741d9 !important; }
    .av-ds  { background: #e3fafc; color: #0c8599 !important; }

    /* ── Patient number ── */
    .pno {
      font-family: var(--mono) !important;
      font-size: 10.5px !important;
      color: #a0a8c0 !important;
      font-weight: 500 !important;
      margin-bottom: 2px !important;
      letter-spacing: .4px;
    }

    /* ── Patient name ── */
    .pname {
      font-size: 13.5px !important;
      font-weight: 600 !important;
      color: #1c2340 !important;
      line-height: 1.25 !important;
      letter-spacing: -.1px !important;
    }

    /* ── IC number ── */
    .pic {
      font-family: var(--mono) !important;
      font-size: 11px !important;
      color: #8891a8 !important;
      margin-top: 1px !important;
      letter-spacing: .2px;
    }

    /* ── Status badge: refined pill ── */
    .sbadge {
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      padding: 3px 9px 3px 7px !important;
      border-radius: 20px !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: .5px !important;
      flex-shrink: 0 !important;
      white-space: nowrap !important;
    }

    .sb-active  { background: #ebfbee; color: #2f9e44 !important; border: 1px solid #b2f2bb !important; }
    .sb-default { background: #fff5f5; color: #c92a2a !important; border: 1px solid #ffc9c9 !important; }
    .sb-keluar  { background: #e3fafc; color: #0c8599 !important; border: 1px solid #99e9f2 !important; }

    .sdot   { width: 5px !important; height: 5px !important; border-radius: 50% !important; }
    .sdot-a { background: #2f9e44 !important; }
    .sdot-d { background: #c92a2a !important; }
    .sdot-keluar { background: #0c8599 !important; }

    /* ── Divider: lighter ── */
    .divider {
      height: 1px !important;
      background: #f0f2f7 !important;
      margin: 10px 0 !important;
    }

    /* ── Patient info grid ── */
    .pinfo {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 9px 12px !important;
    }

    .pi label {
      font-size: 9.5px !important;
      text-transform: uppercase !important;
      letter-spacing: .6px !important;
      color: #a0a8c0 !important;
      display: block !important;
      margin-bottom: 2px !important;
      font-weight: 600 !important;
    }

    .pi span {
      font-size: 12.5px !important;
      color: #2a3050 !important;
      font-weight: 500 !important;
    }

    /* ── Dose display ── */
    .doseval {
      font-size: 15px !important;
      font-weight: 700 !important;
      color: #1c2340 !important;
    }

    /* ── Category chips ── */
    .chip {
      display: inline-block !important;
      padding: 2px 8px !important;
      border-radius: 5px !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: .4px !important;
    }

    .ch-fta { background: #edf2ff; color: #3b5bdb !important; }
    .ch-tw  { background: #fff9db; color: #e67700 !important; }
    .ch-dot { background: #f3f0ff; color: #6741d9 !important; }
    .ch-ds  { background: #e3fafc; color: #0c8599 !important; }
    .ch-restart { background: #e8f4fd; color: #1971c2 !important; }

    /* ── DOT chips ── */
    .dot-chip {
      font-size: 9.5px !important;
      font-weight: 700 !important;
      padding: 2px 6px !important;
      border-radius: 4px !important;
      background: #e3fafc !important;
      color: #0c8599 !important;
    }

    .dot-chip.active-day {
      background: #0c8599 !important;
      color: #fff !important;
    }

    /* ══════════════════════════════════════════════════════════════
       DOT SCHEDULE SELECTOR — Modern Healthcare Day Picker
    ══════════════════════════════════════════════════════════════ */
    .dot-day-selector {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .dot-day-chips-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 10px 12px;
      background: #f8fdf9;
      border: 1.5px solid #d1e8d5;
      border-radius: 10px;
    }

    .dot-day-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 32px;
      padding: 0 10px;
      border-radius: 20px;
      border: 1.5px solid #d0d8df;
      background: #fff;
      color: #5a6880;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: .2px;
      cursor: pointer;
      transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .1s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      white-space: nowrap;
    }

    .dot-day-btn:hover {
      border-color: #2e9e5b;
      color: #1e7a43;
      background: #f0faf4;
      box-shadow: 0 1px 4px rgba(46,158,91,.12);
    }

    .dot-day-btn.selected {
      background: #17a34a;
      border-color: #17a34a;
      color: #fff;
      box-shadow: 0 2px 8px rgba(23,163,74,.28);
      transform: translateY(-1px);
    }

    .dot-day-btn.selected:hover {
      background: #15913f;
      border-color: #15913f;
    }

    .dot-day-btn.setiap-hari-btn {
      border-radius: 20px;
      font-size: 11px;
    }

    .dot-day-btn.setiap-hari-btn.selected {
      background: linear-gradient(135deg, #0891b2, #0e7490);
      border-color: #0891b2;
      box-shadow: 0 2px 8px rgba(8,145,178,.28);
    }

    .dot-sel-preview {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      background: #fff;
      border: 1.5px solid #d1e8d5;
      border-radius: 8px;
      font-size: 11.5px;
      color: #374151;
      min-height: 32px;
      transition: border-color .15s;
    }

    .dot-sel-preview.has-value {
      border-color: #17a34a;
    }

    .dot-sel-preview-label {
      font-size: 10px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: .4px;
      flex-shrink: 0;
    }

    .dot-sel-preview-value {
      font-weight: 700;
      color: #17a34a;
      font-size: 12px;
      letter-spacing: .3px;
    }

    .dot-sel-divider {
      width: 1px;
      height: 14px;
      background: #d1e8d5;
      flex-shrink: 0;
    }

    .dot-sel-hint {
      font-size: 10.5px;
      color: #9ca3af;
      font-style: italic;
    }

    /* Modal variant: slightly more compact */
    .dot-day-selector.modal-variant .dot-day-chips-row {
      padding: 8px 10px;
      gap: 5px;
    }

    .dot-day-selector.modal-variant .dot-day-btn {
      min-width: 36px;
      height: 28px;
      font-size: 11px;
      padding: 0 8px;
    }

    .dot-day-selector.modal-variant .dot-sel-preview {
      padding: 5px 9px;
      font-size: 11px;
    }

    /* Mobile: slightly larger touch targets */
    /* ──────────────────────────────────────────────────────────────
       CARD ACTION BUTTONS — KKM Clinical Hierarchy
    ────────────────────────────────────────────────────────────── */
    .pcard-actions {
      display: flex !important;
      gap: 6px !important;
      margin-top: 11px !important;
      padding-top: 10px !important;
      border-top: 1px solid #f0f2f7 !important;
    }

    .pcard-act-btn {
      flex: 1 !important;
      padding: 7px 4px !important;
      border: 1.5px solid #e2e6f0 !important;
      background: #f8f9fc !important;
      border-radius: 8px !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      color: #5a6282 !important;
      cursor: pointer !important;
      transition: all .16s ease !important;
      text-align: center !important;
      letter-spacing: .1px !important;
      line-height: 1.3 !important;
    }

    .pcard-act-btn:hover {
      background: #1c2340 !important;
      color: #fff !important;
      border-color: #1c2340 !important;
      box-shadow: 0 2px 8px rgba(28,35,64,.18) !important;
      transform: translateY(-1px) !important;
    }

    /* Edit / Kemaskini button — primary feel on hover */
    .pcard-act-btn.btn-edit:hover {
      background: linear-gradient(135deg, #3b5bdb, #4c6ef5) !important;
      border-color: transparent !important;
      color: #fff !important;
      box-shadow: 0 2px 10px rgba(59,91,219,.3) !important;
    }

    /* ──────────────────────────────────────────────────────────────
       MODAL ACTION BUTTONS — Tiered KKM hierarchy
    ────────────────────────────────────────────────────────────── */

    /* 1. Primary save button: solid professional indigo */
    #modal-ov .msave[onclick="saveModal()"],
    #modal-ov button.msave[onclick="saveModal()"] {
      background: linear-gradient(135deg, #3b5bdb 0%, #4c6ef5 100%) !important;
      border: none !important;
      border-radius: 10px !important;
      font-size: 13.5px !important;
      font-weight: 600 !important;
      letter-spacing: .2px !important;
      padding: 11px 16px !important;
      box-shadow: 0 2px 8px rgba(59,91,219,.25), 0 1px 2px rgba(0,0,0,.08) !important;
      color: #fff !important;
      margin-top: 4px !important;
      margin-bottom: 0 !important;
      transition: all .18s ease !important;
    }

    #modal-ov .msave[onclick="saveModal()"]:hover {
      background: linear-gradient(135deg, #2f4ec4 0%, #3b5bdb 100%) !important;
      box-shadow: 0 4px 14px rgba(59,91,219,.35) !important;
      transform: translateY(-1px) !important;
    }

    /* 2. SPUB / MFLEX: outlined secondary */
    #modal-ov #m-keluar-btn,
    #modal-ov button[id="m-keluar-btn"] {
      background: #f8f9ff !important;
      border: 1.5px solid #748ffc !important;
      color: #3b5bdb !important;
      border-radius: 9px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      padding: 9px 14px !important;
      box-shadow: none !important;
      margin-top: 0 !important;
      transition: all .16s ease !important;
    }

    #modal-ov #m-keluar-btn:hover {
      background: #edf2ff !important;
      border-color: #4c6ef5 !important;
      box-shadow: 0 2px 8px rgba(59,91,219,.14) !important;
    }

    /* 3. Transfer OUT: amber warning style */
    #modal-ov #m-transfer-out-btn,
    #modal-ov button[id="m-transfer-out-btn"] {
      background: #fffbf0 !important;
      border: 1.5px solid #f59f00 !important;
      color: #955800 !important;
      border-radius: 9px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      padding: 9px 14px !important;
      box-shadow: none !important;
      margin-top: 0 !important;
      transition: all .16s ease !important;
    }

    #modal-ov #m-transfer-out-btn:hover {
      background: #fff3cd !important;
      border-color: #e67700 !important;
      box-shadow: 0 2px 8px rgba(230,119,0,.14) !important;
    }

    /* 4. Delete button: separated danger — soft rose */
    #modal-ov button.msave[onclick="confirmDeletePatient()"] {
      background: #fff8f8 !important;
      border: 1.5px solid #ffa8a8 !important;
      color: #c92a2a !important;
      border-radius: 9px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      padding: 9px 14px !important;
      margin-top: 20px !important;
      box-shadow: none !important;
      position: relative !important;
      transition: all .16s ease !important;
    }

    /* Separator line above delete button */
    #modal-ov button.msave[onclick="confirmDeletePatient()"]::before {
      content: '' !important;
      display: block !important;
      position: absolute !important;
      top: -12px !important;
      left: 0 !important;
      right: 0 !important;
      height: 1px !important;
      background: #f0f2f7 !important;
    }

    #modal-ov button.msave[onclick="confirmDeletePatient()"]:hover {
      background: #fff0f0 !important;
      border-color: #fa5252 !important;
      box-shadow: 0 2px 8px rgba(201,42,42,.14) !important;
    }

    /* Rujukan Keluar section label */
    #modal-ov #m-keluar-wrap > div:first-child,
    #modal-ov #m-transfer-out-wrap > div:first-child {
      font-size: 9.5px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: .7px !important;
      color: #a0a8c0 !important;
      margin-bottom: 7px !important;
    }

    /* Transfer OUT active notification card */
    #modal-ov #m-transfer-out-active {
      background: #fffbf0 !important;
      border: 1px solid #ffd08a !important;
      border-radius: 9px !important;
      padding: 10px 12px !important;
      font-size: 12.5px !important;
      color: #7d4a00 !important;
    }

    /* Rujukan / transfer section spacing */
    #modal-ov #m-rujukan-transfer-section {
      margin-top: 16px !important;
      padding-top: 16px !important;
      border-top: 1px solid #f0f2f7 !important;
    }

    /* Dose change history toggle */
    #modal-ov #m-dose-change-hist-toggle {
      background: #f8f9fc !important;
      border: 1px solid #dde1f0 !important;
      border-radius: 8px !important;
      color: #5a4ea0 !important;
      font-size: 11.5px !important;
      padding: 9px 13px !important;
      font-weight: 600 !important;
      transition: all .15s !important;
    }

    #modal-ov #m-dose-change-hist-toggle:hover {
      background: #f0f2ff !important;
      border-color: #b2bef8 !important;
    }

    /* ──────────────────────────────────────────────────────────────
       LIST VIEW — plist-row improvements
    ────────────────────────────────────────────────────────────── */
    .plist {
      border: 1px solid #e8eaf0 !important;
      border-radius: 12px !important;
    }

    .plist-row {
      border-bottom: 1px solid #f0f2f7 !important;
      transition: background .12s !important;
    }

    .plist-row:hover {
      background: #f6f8ff !important;
    }

    .plist-row.pl-default {
      background: #fdfafa !important;
    }

    .plist-row.pl-default:hover {
      background: #fff0f0 !important;
    }

    .pl-name {
      font-weight: 600 !important;
      font-size: 12.5px !important;
      color: #1c2340 !important;
    }

    .pl-ic {
      font-size: 11px !important;
      color: #8891a8 !important;
    }

    /* ──────────────────────────────────────────────────────────────
       MOBILE RESPONSIVE OVERRIDES — Touch-friendly compact layout
    ────────────────────────────────────────────────────────────── */
    /* ──────────────────────────────────────────────────────────────
       PAGE-SPECIFIC OVERRIDES (reg, cicir pages already had some)
       Ensure KKM style takes precedence cleanly.
    ────────────────────────────────────────────────────────────── */
    #page-reg .pcard,
    #page-cicir .pcard {
      border-radius: 14px !important;
      border: 1px solid #e8eaf0 !important;
      box-shadow: 0 1px 3px rgba(15,20,40,.05), 0 4px 12px rgba(15,20,40,.04) !important;
      background: #fff !important;
    }

    #page-reg .pcard:hover,
    #page-cicir .pcard:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 16px rgba(15,20,40,.09), 0 8px 28px rgba(15,20,40,.06) !important;
      border-color: #d0d4e4 !important;
    }

    #page-reg .pcard.is-default,
    #page-cicir .pcard.is-default {
      background: #fdfafa !important;
      border-color: #f5d0d0 !important;
    }

    #page-reg .pcard-body,
    #page-cicir .pcard-body { padding: 14px 16px 13px !important; }

    #page-reg .pcard-actions,
    #page-cicir .pcard-actions {
      gap: 6px !important;
      margin-top: 11px !important;
      padding-top: 10px !important;
      border-top: 1px solid #f0f2f7 !important;
    }

    #page-reg .pcard-act-btn,
    #page-cicir .pcard-act-btn {
      border: 1.5px solid #e2e6f0 !important;
      background: #f8f9fc !important;
      border-radius: 8px !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      color: #5a6282 !important;
      padding: 7px 4px !important;
      transition: all .16s ease !important;
    }

    #page-reg .pcard-act-btn:hover,
    #page-cicir .pcard-act-btn:hover {
      background: #1c2340 !important;
      color: #fff !important;
      border-color: #1c2340 !important;
      box-shadow: 0 2px 8px rgba(28,35,64,.18) !important;
      transform: translateY(-1px) !important;
    }

    #page-reg .pcard-act-btn.btn-edit:hover,
    #page-cicir .pcard-act-btn.btn-edit:hover {
      background: linear-gradient(135deg, #3b5bdb, #4c6ef5) !important;
      border-color: transparent !important;
      color: #fff !important;
      box-shadow: 0 2px 10px rgba(59,91,219,.3) !important;
    }

    #page-reg .pcard-stripe,
    #page-cicir .pcard-stripe { height: 3px !important; }

    /* ── Page-reg stripe overrides to match KKM palette ── */
    #page-reg .pcard.cat-fta .pcard-stripe { background: linear-gradient(90deg,#3b5bdb,#4c6ef5) !important; }
    #page-reg .pcard.cat-tw  .pcard-stripe { background: linear-gradient(90deg,#e67700,#f59f00) !important; }
    #page-reg .pcard.cat-dot .pcard-stripe { background: linear-gradient(90deg,#6741d9,#845ef7) !important; }
    #page-reg .pcard.cat-ds  .pcard-stripe { background: linear-gradient(90deg,#0c8599,#22b8cf) !important; }

    /* ── pinfo top alignment on pcard-top ── */
    #page-reg .pcard-top,
    #page-cicir .pcard-top {
      align-items: center !important;
    }

    #page-reg .pcard-top-inner,
    #page-cicir .pcard-top-inner {
      gap: 11px !important;
      align-items: center !important;
    }

    /* ── List view ─────────────────────────────────────────── */
    .plist {
      display: flex;
      flex-direction: column;
      gap: 0;
      border: 1.5px solid var(--rule);
      border-radius: 10px;
      overflow: hidden
    }

    .plist-hdr {
      display: grid;
      grid-template-columns: 36px 44px 1fr 130px 90px 70px 1fr 90px;
      gap: 0;
      background: var(--bg);
      border-bottom: 2px solid var(--rule);
      padding: 0
    }

    .plist-hdr>div {
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--ink3);
      white-space: nowrap
    }

    .plist-row {
      display: grid;
      grid-template-columns: 36px 44px 1fr 130px 90px 70px 1fr 90px;
      gap: 0;
      align-items: center;
      border-bottom: 1px solid var(--rule2);
      cursor: pointer;
      transition: background .12s
    }

    .plist-row:last-child {
      border-bottom: none
    }

    .plist-row:hover {
      background: #f0fdf4
    }

    .plist-row.pl-default {
      background: var(--red-bg)
    }

    .plist-row.pl-default:hover {
      background: #fee2e2
    }

    .plist-row>div {
      padding: 9px 10px;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .plist-stripe {
      width: 4px;
      align-self: stretch;
      display: flex;
      padding: 0 !important
    }

    .plist-stripe-inner {
      width: 4px;
      height: 100%;
      border-radius: 0
    }

    .pl-name {
      font-weight: 600;
      font-size: 13px;
      white-space: normal;
      line-height: 1.3
    }

    .pl-ic {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink3)
    }

    /* ── View toggle ───────────────────────────────────────── */
    .view-toggle {
      display: flex;
      gap: 2px;
      background: var(--bg);
      border: 1px solid var(--rule2);
      border-radius: 7px;
      padding: 3px;
      flex-shrink: 0
    }

    .vtbtn {
      background: transparent;
      border: none;
      border-radius: 5px;
      padding: 5px 9px;
      cursor: pointer;
      color: var(--ink3);
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      transition: all .15s
    }

    .vtbtn.active {
      background: var(--ink);
      color: #fff
    }

    /* ── Sticky ctrl bar ───────────────────────────────────── */
    #reg-ctrl-sticky {
      position: sticky;
      top: 0;
      z-index: 20;
      background: var(--white);
      padding: 6px 0 4px;
      margin-bottom: 4px;
      border-bottom: 1px solid var(--rule2)
    }

    .sbadge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      flex-shrink: 0;
    }

    .sb-active {
      background: var(--green-bg);
      color: var(--green);
      border: 1px solid var(--green-b)
    }

    .sb-default {
      background: var(--red-bg);
      color: var(--red);
      border: 1px solid var(--red-b)
    }

    .sdot {
      width: 5px;
      height: 5px;
      border-radius: 50%
    }

    .sdot-a {
      background: var(--green)
    }

    .sdot-d {
      background: var(--red)
    }

    .divider {
      height: 1px;
      background: var(--rule);
      margin: 9px 0
    }

    .pinfo {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px
    }

    .pi label {
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .4px;
      color: var(--ink3);
      display: block;
      margin-bottom: 2px;
      font-weight: 600
    }

    .pi span {
      font-size: 15px;
      color: var(--ink2)
    }

    .chip {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .3px
    }

    .ch-restart {
      background: #e0e7ff;
      color: #4338ca
    }

    .ch-fta {
      background: var(--blue-bg);
      color: var(--blue)
    }

    .ch-tw {
      background: var(--amber-bg);
      color: var(--amber)
    }

    .ch-dot {
      background: var(--purple-bg);
      color: var(--purple)
    }

    .ch-ds {
      background: var(--cyan-bg);
      color: var(--cyan)
    }

    .doseval {
      font-family: var(--head);
      font-size: 16px;
      font-weight: 800;
      color: var(--ink)
    }

    /* ══ TABLE (for weekly / dispensing) ════════════════════════ */
    .tbl-wrap {
      background: var(--white);
      border: 1.5px solid var(--rule);
      border-radius: 10px;
      overflow-x: auto;
      overflow-y: visible;
      box-shadow: var(--sh)
    }

    table {
      width: 100%;
      border-collapse: collapse
    }

    thead {
      background: #f8f6f2
    }

    th {
      text-align: left;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .4px;
      color: var(--ink3);
      font-weight: 700;
      padding: 10px 12px;
      border-bottom: 1.5px solid var(--rule);
      white-space: nowrap
    }

    th.c {
      text-align: center
    }

    td {
      padding: 10px 12px;
      font-size: 15px;
      border-bottom: 1px solid rgba(224, 219, 211, .6);
      vertical-align: middle
    }

    tr:last-child td {
      border-bottom: none
    }

    tr:hover td {
      background: rgba(0, 0, 0, .015)
    }

    tr.tr-default td {
      background: var(--red-bg)
    }

    /* ══ DAY CELLS ══════════════════════════════════════════════ */
    .dcs {
      display: flex;
      gap: 2px
    }

    .dc {
      width: 32px;
      height: 24px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 15px;
      font-weight: 600;
    }

    .dc-dot {
      background: var(--green-bg);
      color: var(--green);
      border: 1px solid var(--green-b)
    }

    .dc-ta {
      background: var(--blue-bg);
      color: var(--blue);
      border: 1px solid var(--blue-b)
    }

    .dc-abs {
      background: var(--red-bg);
      color: var(--red);
      border: 1px solid var(--red-b)
    }

    .dc-na {
      background: transparent;
      border: 1px solid var(--rule);
      color: var(--ink3)
    }

    .dc-today {
      outline: 2px solid var(--ink);
      outline-offset: -1px
    }

    /* ══ WEEKLY SECTION ══════════════════════════════════════════ */
    .week-hdr {
      display: grid;
      grid-template-columns: 36px 1fr 100px 60px 60px repeat(7, 44px) 80px;
      background: #f8f6f2;
      border-bottom: 1.5px solid var(--rule);
      padding: 10px 14px;
      gap: 4px;
      align-items: center;
    }

    .week-row {
      display: grid;
      grid-template-columns: 36px 1fr 100px 60px 60px repeat(7, 44px) 80px;
      padding: 10px 14px;
      gap: 4px;
      align-items: center;
      border-bottom: 1px solid rgba(224, 219, 211, .5);
      transition: background .1s;
    }

    .week-cat-hdr {
      display: grid;
      grid-template-columns: 36px 1fr 100px 60px 60px repeat(7, 44px) 80px;
      gap: 4px;
      align-items: center;
      padding: 7px 14px;
      position: sticky;
      top: 0;
      z-index: 2;
      border-bottom: 2px solid transparent;
    }

    .week-row:last-child {
      border-bottom: none
    }

    .week-row:hover {
      background: rgba(0, 0, 0, .012)
    }

    .week-row.wr-default {
      background: var(--red-bg)
    }

    .wh {
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: var(--ink3);
      font-weight: 700
    }

    .day-cell {
      width: 40px;
      height: 28px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 15px;
      font-weight: 600;
    }

    .d-dot {
      background: var(--green-bg);
      color: var(--green);
      border: 1px solid var(--green-b)
    }

    .d-ta {
      background: var(--blue-bg);
      color: var(--blue);
      border: 1px solid var(--blue-b)
    }

    .d-abs {
      background: var(--red-bg);
      color: var(--red);
      border: 1px solid var(--red-b);
      opacity: .7
    }

    .d-na {
      background: var(--bg);
      border: 1px solid var(--rule);
      color: var(--ink3)
    }

    /* ══ DISPENSING TABLE ════════════════════════════════════════ */
    .disp-hdr {
      display: grid;
      grid-template-columns: 36px 1fr 90px 70px 90px 90px 90px 90px 185px;
      background: #f8f6f2;
      border-bottom: 1.5px solid var(--rule);
      padding: 10px 14px;
      gap: 4px;
    }

    .disp-row {
      display: grid;
      grid-template-columns: 36px 1fr 90px 70px 90px 90px 90px 90px 185px;
      padding: 10px 14px;
      gap: 4px;
      align-items: center;
      border-bottom: 1px solid rgba(224, 219, 211, .5);
    }

    .disp-cat-hdr {
      display: grid;
      grid-template-columns: 36px 1fr 90px 70px 90px 90px 90px 90px 185px;
      gap: 4px;
      align-items: center;
      padding: 7px 14px;
      position: sticky;
      top: 0;
      z-index: 2;
      border-bottom: 2px solid transparent;
    }

    .disp-row:last-child {
      border-bottom: none
    }

    .disp-row:hover {
      background: rgba(0, 0, 0, .012)
    }

    .disp-row.dr-late {
      background: rgba(251, 191, 36, .06);
    }

    .disp-row.dr-late:hover {
      background: rgba(251, 191, 36, .12);
    }

    /* Late DOT badge */
    .late-dot-badge {
      display: inline-block;
      margin-left: 7px;
      padding: 1px 7px;
      border-radius: 9px;
      background: rgba(251, 191, 36, .18);
      color: var(--amber);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .4px;
      vertical-align: middle
    }

    .disp-row.dr-absent td,
    .disp-row.dr-absent div {
      opacity: .45
    }

    .disp-row.dr-absent .abs-btn,
    .disp-row.dr-absent .kaunter-btn {
      opacity: 1;
      pointer-events: auto;
      cursor: pointer;
    }

    .disp-row.dr-mflex {
      background: rgba(34, 211, 238, .05);
    }

    .disp-row.dr-mflex:hover {
      background: rgba(34, 211, 238, .10);
    }

    .disp-row.dr-mflex td,
    .disp-row.dr-mflex div {
      opacity: .7
    }

    .disp-row.dr-mflex .kaunter-btn {
      opacity: 1;
      pointer-events: auto;
      cursor: pointer;
    }

    /* Volume colors */
    .v-dot {
      font-family: var(--mono);
      font-size: 15px;
      color: var(--green);
      font-weight: 500
    }

    .v-ta {
      font-family: var(--mono);
      font-size: 15px;
      color: var(--blue);
      font-weight: 500
    }

    .v-total {
      font-family: var(--mono);
      font-size: 15px;
      font-weight: 700;
      color: var(--ink)
    }

    .v-zero {
      font-family: var(--mono);
      font-size: 15px;
      color: var(--ink3)
    }

    /* ══ SUMMARY CARDS ═══════════════════════════════════════════ */
    .scards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 20px
    }

    .sc {
      background: var(--white);
      border: 1.5px solid var(--rule);
      border-radius: 9px;
      padding: 14px 16px;
      box-shadow: var(--sh);
      position: relative;
      overflow: hidden;
    }

    .sc::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2.5px;
      background: var(--cc)
    }

    .sc-l {
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .4px;
      color: var(--ink3);
      margin-bottom: 5px
    }

    .sc-v {
      font-family: var(--head);
      font-size: 24px;
      font-weight: 800;
      line-height: 1
    }

    .sc-s {
      font-size: 15px;
      color: var(--ink3);
      margin-top: 3px
    }

    /* Absent button */
    .abs-btn {
      padding: 5px 9px;
      border-radius: 5px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: 1.5px solid var(--rule2);
      background: var(--white);
      color: var(--ink2);
      font-family: var(--sans);
      transition: all .15s;
      white-space: nowrap;
    }

    .abs-btn:hover {
      border-color: var(--red);
      color: var(--red)
    }

    .abs-btn.is-abs {
      background: var(--red-bg);
      border-color: var(--red);
      color: var(--red)
    }

    /* ══ DATE BAR ════════════════════════════════════════════════ */
    .datebar {
      background: var(--white);
      border: 1px solid var(--rule);
      border-radius: 10px;
      padding: 10px 16px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
      flex-wrap: wrap;
    }

    .db-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 20px;
    }

    .db-actions {
      display: flex;
      align-items: center;
      gap: 15px;
      flex: 1;
      justify-content: flex-end;
    }

    .dg {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .dg label {
      font-size: 15px;
      color: var(--ink3);
      text-transform: uppercase;
      letter-spacing: .4px;
      font-weight: 600
    }

    .date-inp {
      background: var(--bg);
      border: 1.5px solid var(--rule2);
      border-radius: 6px;
      padding: 7px 12px;
      font-family: var(--mono);
      font-size: 15px;
      color: var(--ink);
      outline: none;
      transition: border-color .15s;
    }

    .date-inp:focus {
      border-color: var(--ink)
    }

    .day-badge {
      background: var(--ink);
      color: #fff;
      border-radius: 5px;
      padding: 5px 13px;
      font-family: var(--head);
      font-size: 13px;
      font-weight: 700;
      align-self: center;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .db-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--ink3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    /* ══ MODAL ════════════════════════════════════════════════════ */
    .ov {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      z-index: 300;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 20px;
      overflow-y: auto;
      -webkit-overflow-scrolling: auto;
      overscroll-behavior: contain
    }

    .ov.open {
      display: flex
    }

    .modal {
      background: var(--white);
      border-radius: 14px;
      width: 100%;
      max-width: 480px;
      max-height: calc(100dvh - 40px);
      overflow-y: auto;
      overflow-x: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
      animation: min .2s ease;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: auto
    }

    @keyframes min {
      from {
        opacity: 0;
        transform: scale(.96) translateY(8px)
      }

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

    /* ════════════════════════════════════════════════════════════
       MODAL STRIPE — slim color bar at top
    ════════════════════════════════════════════════════════════ */
    .modal-stripe {
      height: 3px;
      border-radius: 14px 14px 0 0;
    }

    /* ════════════════════════════════════════════════════════════
       MODAL HEADER — KKM Healthcare Style
       Avatar  ·  Name + IC + badge  ·  Close button
    ════════════════════════════════════════════════════════════ */
    .mhdr {
      padding: 20px 22px 16px;
      border-bottom: 1px solid #eef0f6;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: linear-gradient(135deg, #f8fdf9 0%, #f4f6ff 100%);
      position: relative;
    }

    /* ── Avatar circle ── */
    .m-avatar {
      width: 52px;
      height: 52px;
      min-width: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, #d8f3e4 0%, #c3e6f5 100%);
      border: 2px solid rgba(255,255,255,.9);
      box-shadow: 0 2px 10px rgba(23,163,74,.18), 0 0 0 3px rgba(23,163,74,.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--head);
      font-size: 17px;
      font-weight: 800;
      color: #15803d;
      letter-spacing: -.5px;
      flex-shrink: 0;
      user-select: none;
    }

    .m-avatar.status-default {
      background: linear-gradient(135deg, #ffe4e4 0%, #fde8d8 100%);
      box-shadow: 0 2px 10px rgba(220,38,38,.14), 0 0 0 3px rgba(220,38,38,.07);
      color: #b91c1c;
    }

    .m-avatar.status-xfer {
      background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
      box-shadow: 0 2px 10px rgba(124,58,237,.14), 0 0 0 3px rgba(124,58,237,.07);
      color: #5b21b6;
    }

    /* ── Header info block ── */
    .m-hdr-info {
      flex: 1;
      min-width: 0;
    }

    /* Patient number tag */
    .m-tag {
      display: inline-flex;
      align-items: center;
      background: #ede9fe;
      color: #5b21b6;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .5px;
      padding: 2px 8px;
      border-radius: 20px;
      margin-bottom: 5px;
      font-family: var(--mono);
    }

    /* Patient name */
    .mname {
      font-family: var(--head);
      font-size: 18px;
      font-weight: 800;
      color: #111827;
      line-height: 1.2;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* IC row with copy icon */
    .m-ic-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 7px;
    }

    .mic {
      font-family: var(--mono);
      font-size: 12.5px;
      color: #6b7280;
      letter-spacing: .3px;
    }

    /* Copy IC button */
    .m-copy-btn {
      background: none;
      border: none;
      padding: 2px 4px;
      cursor: pointer;
      color: #9ca3af;
      font-size: 13px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      transition: color .13s, background .13s;
      line-height: 1;
    }

    .m-copy-btn:hover {
      color: #17a34a;
      background: rgba(23,163,74,.08);
    }

    .m-copy-btn.copied {
      color: #17a34a;
    }

    /* Status mini-badge inside header */
    .m-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .2px;
    }

    .m-status-badge.aktif {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    .m-status-badge.cicir {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }

    .m-status-badge.xfer {
      background: #ede9fe;
      color: #5b21b6;
      border: 1px solid #ddd6fe;
    }

    /* ── Close button ── */
    .mx {
      background: rgba(255,255,255,.85);
      border: 1px solid #e5e7eb;
      width: 30px;
      height: 30px;
      min-width: 30px;
      border-radius: 50%;
      font-size: 13px;
      cursor: pointer;
      color: #6b7280;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
      transition: all .14s ease;
      margin-left: auto;
      flex-shrink: 0;
    }

    .mx:hover {
      background: #fff;
      border-color: #d1d5db;
      color: #374151;
      box-shadow: 0 2px 8px rgba(0,0,0,.10);
      transform: scale(1.06);
    }

    /* ── Modal body ── */
    .mbody {
      padding: 18px 22px;
    }

    /* ── Section label style — unified ── */
    .m-section-lbl {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: #9ca3af;
      margin-bottom: 9px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .m-section-lbl::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #f0f2f7;
    }

    .mgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 16px
    }

    .mg label {
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .4px;
      color: var(--ink3);
      font-weight: 600;
      display: block;
      margin-bottom: 4px
    }

    /* ── Refined status toggle buttons ── */
    .topt {
      flex: 1;
      padding: 9px;
      border-radius: 10px;
      border: 1.5px solid var(--rule2);
      text-align: center;
      cursor: pointer;
      font-size: 13.5px;
      font-weight: 600;
      font-family: var(--sans);
      transition: all .15s;
      background: var(--white);
      letter-spacing: .1px;
    }

    .topt.ta {
      background: #f0fdf4;
      border-color: #86efac;
      color: #15803d;
      box-shadow: 0 1px 4px rgba(23,163,74,.12);
    }

    .topt.td {
      background: #fef2f2;
      border-color: #fca5a5;
      color: #b91c1c;
      box-shadow: 0 1px 4px rgba(185,28,28,.10);
    }

    /* ── Personal details section card ── */
    .m-detail-card {
      background: #f9fafb;
      border: 1px solid #eef0f6;
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 14px;
    }

    .m-detail-card .m-section-lbl {
      margin-bottom: 11px;
    }

    /* ── Field label inside cards ── */
    .m-field-lbl {
      font-size: 10.5px;
      font-weight: 700;
      color: #9ca3af;
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 4px;
    }

    .msave {
      width: 100%;
      padding: 11px;
      background: var(--ink);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 700;
      font-family: var(--head);
      cursor: pointer;
      transition: background .15s;
      margin-top: 14px
    }

    .msave:hover {
      background: #2d3142
    }

    /* ══ REPORT ══════════════════════════════════════════════════ */
    .report-box {
      background: var(--white);
      border: 1.5px solid var(--rule);
      border-radius: 10px;
      overflow: hidden;
      margin-top: 16px;
      box-shadow: var(--sh)
    }

    .report-hdr {
      background: var(--ink);
      padding: 12px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .rh-title {
      font-family: var(--head);
      font-size: 15px;
      font-weight: 700;
      color: #fff
    }

    .rh-btns {
      display: flex;
      gap: 6px
    }

    .rbtn {
      padding: 4px 12px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 5px;
      color: rgba(255, 255, 255, .8);
      font-size: 15px;
      cursor: pointer;
      font-family: var(--sans)
    }

    .rbtn:hover {
      background: rgba(255, 255, 255, .2)
    }

    .copy-area {
      background: #0a0e14;
      padding: 14px 18px;
      font-family: var(--mono);
      font-size: 15px;
      color: #c8d8e8;
      line-height: 1.8;
      white-space: pre-wrap;
      max-height: 200px;
      overflow-y: auto
    }

    /* ══ SECTION HEADER ══════════════════════════════════════════ */
    .sec-hdr {
      background: var(--bg);
      border-bottom: 1.5px solid var(--rule);
      padding: 8px 14px;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .4px;
      font-weight: 700;
      color: var(--ink3);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* ══ EMPTY ════════════════════════════════════════════════════ */
    .empty {
      text-align: center;
      padding: 48px 20px;
      color: var(--ink3);
      font-size: 15px
    }

    /* ══ TOAST ════════════════════════════════════════════════════ */
    .toast {
      position: fixed;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%) translateY(60px);
      background: var(--ink);
      color: #fff;
      padding: 10px 22px;
      border-radius: 30px;
      font-size: 15px;
      font-weight: 500;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
      opacity: 0;
      transition: all .25s;
      z-index: 999;
      white-space: nowrap;
      max-width: calc(100vw - 32px);
      text-overflow: ellipsis;
      overflow: hidden
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1
    }

    /* ══ AUDIT LOG ════════════════════════════════════════════════ */
    .audit-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 16px;
      border-bottom: 1px solid rgba(224, 219, 211, .5);
      font-size: 15px
    }

    .audit-row:last-child {
      border-bottom: none
    }

    .audit-row:hover {
      background: rgba(0, 0, 0, .012)
    }

    .audit-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      margin-top: 1px
    }

    .audit-content {
      flex: 1;
      min-width: 0
    }

    .audit-action {
      font-weight: 600;
      color: var(--ink)
    }

    .audit-detail {
      color: var(--ink2);
      margin-top: 2px
    }

    .audit-meta {
      font-family: var(--mono);
      font-size: 15px;
      color: var(--ink3);
      margin-top: 3px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .audit-panel {
      max-width: 100%;
      box-sizing: border-box;
    }

    .audit-panel-header {
      min-width: 0;
    }

    .audit-panel-controls {
      min-width: 0;
    }

    .audit-filter-select {
      max-width: 100%;
    }

    .audit-action {
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    /* ══ ALERT ITEMS ══════════════════════════════════════════════ */
    .alert-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 8px;
      margin-bottom: 8px;
      border: 1px solid;
      font-size: 15px
    }

    .alert-item:last-child {
      margin-bottom: 0
    }

    .alert-warn {
      background: var(--amber-bg);
      color: var(--amber);
      border-color: var(--amber-b)
    }

    .alert-danger {
      background: var(--red-bg);
      color: var(--red);
      border-color: var(--red-b)
    }

    .alert-info {
      background: var(--blue-bg);
      color: var(--blue);
      border-color: var(--blue-b)
    }

    /* ══ DOSE WARNING BADGE ═══════════════════════════════════════ */
    .dose-warn {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 15px;
      font-weight: 700;
      background: var(--amber-bg);
      color: var(--amber);
      border: 1px solid var(--amber-b);
      vertical-align: middle
    }

    .dose-danger {
      background: var(--red-bg);
      color: var(--red);
      border-color: var(--red-b)
    }

    /* ══ NOTIF BADGE ══════════════════════════════════════════════ */
    .notif-badge {
      position: absolute;
      top: -3px;
      right: -3px;
      width: 14px;
      height: 14px;
      background: var(--red);
      border-radius: 50%;
      font-size: 8px;
      font-weight: 700;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center
    }

    #tab-laporan {
      position: relative
    }

    /* ══ CONFIRM DIALOG ═══════════════════════════════════════════ */
    .confirm-ov {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .6);
      z-index: 9000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain
    }

    .confirm-ov.open {
      display: flex
    }

    .confirm-box {
      background: var(--white);
      border-radius: 12px;
      padding: 28px;
      max-width: 380px;
      width: 100%;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
      animation: min .2s ease;
      box-sizing: border-box;
      max-height: 90dvh;
      overflow-y: auto
    }

    .confirm-icon {
      font-size: 32px;
      text-align: center;
      margin-bottom: 12px
    }

    .confirm-title {
      font-family: var(--head);
      font-size: 16px;
      font-weight: 800;
      text-align: center;
      margin-bottom: 8px
    }

    .confirm-msg {
      font-size: 15px;
      color: var(--ink2);
      text-align: center;
      margin-bottom: 20px;
      line-height: 1.5
    }

    .confirm-btns {
      display: flex;
      gap: 8px
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 5px
    }

    ::-webkit-scrollbar-thumb {
      background: var(--rule2);
      border-radius: 3px
    }
    /* Login styles moved to login/css/ — see login.css bundle */


    /* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
══════════════════════════════════════════════════════════════ */

    /* ── MOBILE (≤ 640px) ──────────────────────────────────────── */
    /* ── TABLET / IPAD (641px – 1024px) ───────────────────────── */
    /* ── LOGIN PAGE: iPad landscape (769-1180px) — side-by-side panels ── */
    /* ── LOGIN PAGE: iPad portrait (641-1180px) — clean single column ── */
    /* ── LANDSCAPE: non-sidebar layout rules (all landscape tablets + desktops) ── */
    /*    Targets: 769px–1366px width + landscape orientation (CONTENT ONLY)       */
    @media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {

      /* ── 5. Topbar: show date + logout since there is room ── */
      .nav-date {
        display: flex !important;
      }

      #topbar-logout-btn {
        display: flex !important;
      }

      /* ── 6. Hero strip: single-row stats, better padding ── */
      .hero-inner {
        padding: 0 24px !important;
      }

      .hero-title {
        font-size: 20px !important;
      }

      .hero-stats {
        flex-wrap: nowrap !important;
      }

      .hstat {
        padding: 12px 18px !important;
        flex: 1;
      }

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

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

      /* ── 7. Main content: wider padding for landscape ── */
      .main {
        padding: 20px 24px !important;
      }

      /* ── 8. Patient grid: auto-fill 3+ columns ── */
      .pgrid {
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
        gap: 12px !important;
      }

      /* ── 9. Summary cards: full 4-column row ── */
      .scards {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
      }

      /* ── 10. Control bar: single row, no wrap ── */
      .ctrl {
        flex-wrap: wrap !important;
      }

      .search-wrap {
        min-width: 200px !important;
        flex: 1 !important;
        flex-basis: auto !important;
      }

      /* ── 11. Pills: wrap allowed but compact ── */
      .pills {
        flex-wrap: wrap !important;
      }

      /* ── 12. Modal: wider, well-centred ── */
      .ov {
        align-items: center !important;
        padding: 20px !important;
      }

      .modal {
        max-width: 540px !important;
        max-height: calc(100dvh - 40px) !important;
      }

      /* ── 13. Date bar: single row in landscape ── */
      .datebar {
        flex-wrap: nowrap !important;
      }

      .datebar>div:last-child {
        margin-left: auto !important;
        flex-wrap: nowrap !important;
      }

      /* ── 14. Prevent the col-1 override from tablet portrait query ── */
      .mbody div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
      }

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

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

      /* ── 16. GPU layer on sidebar only ── */
      #sidebar {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }

      /* ── 17. rbar: keep inline in landscape ── */
      .rbar {
        flex-direction: row !important;
        align-items: center !important;
      }

      .rbar>button {
        width: auto !important;
      }

      /* ── 18. Stok action buttons: no forced wrap ── */
      #page-stok .main>div[style*="display:flex;gap:10px;margin-bottom:16px"] {
        flex-wrap: nowrap !important;
      }

      #page-stok .main>div[style*="display:flex;gap:10px;margin-bottom:16px"]>button {
        flex: 0 0 auto !important;
        min-width: unset !important;
      }

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

    /* ── LANDSCAPE DESKTOP ONLY (≥1181px): pin sidebar + offset content ── */
    /*    iPad Air landscape (1180px) is excluded — sidebar stays as drawer  */
    @media (min-width: 1181px) and (max-width: 1366px) and (orientation: landscape) {

      /* ── 1. Pin sidebar visible in desktop landscape ── */
      #sidebar {
        transform: translateX(0) !important;
        width: var(--side-w) !important;
        position: fixed !important;
      }

      /* ── 2. Topbar: offset from sidebar ── */
      #topbar {
        left: var(--side-w) !important;
        right: 0 !important;
        padding-left: 20px !important; /* reset tablet hamburger padding */
      }

      /* ── 3. Content area: leave room for sidebar ── */
      #content-area {
        margin-left: var(--side-w) !important;
        width: auto !important;
        overflow-x: hidden;
      }

      /* ── 4. Hide backdrop (sidebar always pinned in desktop landscape) ── */
      #sidebar-backdrop {
        display: none !important;
      }

      /* ── Hide tablet hamburger toggle on desktop landscape ── */
      #sidebar-toggle {
        position: fixed !important;
        top: 50% !important;
        left: calc(var(--side-w) - 20px) !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: #4B2DA0 !important;
        border: 2px solid rgba(255,255,255,.20) !important;
        color: #fff !important;
        box-shadow: 0 0 0 3px rgba(109,40,217,.22), 0 4px 18px rgba(0,0,0,.60) !important;
      }
    }

    /* ── IPAD PRO / LARGE TABLET (1025px – 1180px) — sidebar fix ── */
    /* ── DESKTOP (> 1180px) — ensure 3-col grid ────────────────── */
    @media (min-width:1181px) {
      .pgrid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
      }

      .scards {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    /* ════════════════════════════════════════════════════════════════
       DESKTOP LEFT PANEL — PREMIUM SPACING SYSTEM (≥1181px)
       Pure desktop breakpoint: login two-panel layout, left side only.
       Complements the landscape-tablet block above.
    }

    /* ── HIDE hamburger on desktop ─────────────────────────────── */
    @media (min-width: 641px) {
      .mob-menu-btn {
        display: none !important
      }

      .mob-nav-drawer {
        display: none !important
      }

      .nav-tabs {
        display: flex !important
      }

      .topnav-bottom {
        display: flex !important
      }
    }

    /* ── Touch-friendly tap targets ────────────────────────────── */
    @media (hover: none) and (pointer: coarse) {

      .btn,
      .pill,
      .ntab,
      .abs-btn {
        min-height: 40px
      }

      .sinp,
      .minp,
      .sel,
      .date-inp {
        min-height: 44px;
        font-size: 16px !important
      }

      /* prevent iOS zoom */
      .pcard:hover {
        transform: none;
        box-shadow: var(--sh)
      }

      /* no hover effect on touch */
    }


    .ext-day-cb {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      user-select: none
    }

    .ext-day-cb input[type=checkbox] {
      display: none
    }

    .ext-day-cb span {
      display: inline-block;
      padding: 5px 9px;
      border-radius: 5px;
      border: 1.5px solid var(--rule2);
      background: var(--bg);
      font-size: 15px;
      font-weight: 600;
      color: var(--ink3);
      transition: all .15s;
      cursor: pointer;
    }

    .ext-day-cb input:checked+span {
      background: var(--purple-bg);
      border-color: var(--purple-b);
      color: var(--purple);
    }

    .ext-day-cb:hover span {
      border-color: var(--purple-b);
      color: var(--ink)
    }

    /* ══ EXTERNAL PATIENTS (SPUB/MFLEX) ═════════════════════════ */
    .ext-section {
      margin-top: 20px
    }

    .ext-hdr {
      background: var(--purple-bg);
      border: 1.5px solid var(--purple-b);
      border-radius: 10px 10px 0 0;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ext-hdr-title {
      font-family: var(--head);
      font-size: 15px;
      font-weight: 700;
      color: var(--purple);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .ext-form-wrap {
      background: var(--white);
      border: 1.5px solid var(--purple-b);
      border-top: none;
      border-radius: 0 0 10px 10px;
      padding: 16px;
      display: none;
    }

    .ext-form-wrap.open {
      display: block
    }

    .ext-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 80px 100px;
      gap: 10px;
      align-items: end;
      margin-bottom: 10px
    }

    .ext-tbl-wrap {
      background: var(--white);
      border: 1.5px solid var(--purple-b);
      border-top: none;
      border-radius: 0 0 10px 10px;
      overflow: hidden
    }

    .ext-row {
      display: grid;
      grid-template-columns: 28px 1fr 80px 70px 60px 90px 90px 110px 160px;
      padding: 8px 14px;
      gap: 6px;
      align-items: center;
      border-bottom: 1px solid rgba(224, 219, 211, .5);
      font-size: 12px;
    }

    .ext-row:last-child {
      border-bottom: none
    }

    .ext-row:hover {
      background: rgba(61, 26, 107, .03)
    }

    .ext-hdr-row {
      display: grid;
      grid-template-columns: 28px 1fr 80px 70px 60px 90px 90px 110px 160px;
      padding: 9px 14px;
      gap: 6px;
      align-items: center;
      background: #f8f6f2;
      border-bottom: 1.5px solid var(--purple-b);
    }

    .chip-spub {
      background: var(--purple-bg);
      color: var(--purple);
      border: 1px solid var(--purple-b)
    }

    .chip-mflex {
      background: var(--cyan-bg);
      color: var(--cyan);
      border: 1px solid var(--cyan-b)
    }

    /* ═══════════════════════════════════════════════════════════
   MOBILE COMPREHENSIVE FIXES  (max-width: 640px)
═══════════════════════════════════════════════════════════ */
    /* ── KAUNTER ─────────────────────────────────────────────── */
    .kaunter-btn {
      background: none;
      border: 1.5px solid var(--orange-b);
      color: var(--orange);
      border-radius: 6px;
      padding: 4px 9px;
      font-size: 11px;
      cursor: pointer;
      font-weight: 700;
      transition: all .15s;
      line-height: 1;
      font-family: var(--sans);
      white-space: nowrap;
    }

    .kaunter-btn:hover {
      background: rgba(234, 88, 12, .1)
    }

    .kaunter-btn.k-on {
      background: var(--orange);
      color: #fff;
      border-color: var(--orange)
    }

    .kaunter-badge {
      display: inline-block;
      margin-left: 5px;
      padding: 1px 6px;
      border-radius: 9px;
      background: var(--orange-bg);
      color: var(--orange);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .3px;
      vertical-align: middle;
      border: 1px solid var(--orange-b);
    }

    /* ── TA Khas ─────────────────────────────────────────────── */
    .ta-khas-btn {
      background: none;
      border: 1.5px solid var(--cyan);
      color: var(--cyan);
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 15px;
      cursor: pointer;
      transition: all .15s;
      line-height: 1;
    }

    .ta-khas-btn:hover {
      background: rgba(34, 211, 238, .1)
    }

    .ta-khas-btn.active {
      background: var(--cyan);
      color: white
    }

    .ta-khas-badge {
      display: inline-block;
      background: var(--cyan);
      color: white;
      font-size: 15px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 10px;
      margin-left: 4px;
      vertical-align: middle;
      letter-spacing: .5px;
    }

    .reason-chip {
      background: var(--bg);
      border: 1.5px solid var(--rule2);
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 15px;
      cursor: pointer;
      color: var(--ink2);
      transition: all .15s;
      font-weight: 500;
    }

    .reason-chip:hover {
      border-color: var(--purple-b);
      color: var(--purple)
    }

    .reason-chip.selected {
      background: var(--purple-bg);
      border-color: var(--purple-b);
      color: var(--purple);
      font-weight: 600
    }

    .bulk-cat-chip {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 8px 14px;
      border: 1.5px solid var(--rule2);
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink2);
      transition: all .15s;
      user-select: none;
    }

    .bulk-cat-chip:hover {
      border-color: var(--purple-b);
      color: var(--purple)
    }

    .bulk-cat-chip input[type=checkbox] {
      cursor: pointer;
      accent-color: var(--purple);
      width: 15px;
      height: 15px
    }

    .bulk-cat-chip.selected {
      background: var(--purple-bg);
      border-color: var(--purple-b);
      color: var(--purple)
    }

    /* Unified Responsive block removed for revert */

/* ---- Inline style block #3 ---- */
/* ═══════════════════════════════════════════════════════════
   iPAD / TOUCH PERFORMANCE FIXES
   - Eliminates 300ms tap delay
   - Prevents flicker on transitions
   - GPU-accelerates animated elements
   - Removes jarring tap highlights
═══════════════════════════════════════════════════════════ */

    /* 1. Eliminate 300ms tap delay on ALL interactive elements */
    a,
    button,
    input,
    select,
    textarea,
    label,
    .btn,
    .pill,
    .ntab,
    .pcard,
    .pcard-act-btn,
    .topt,
    .msave,
    .vtbtn,
    .lo-role,
    .ext-day-cb,
    .lo-submit,
    .rbtn,
    .mx,
    .lo-toggle-pw,
    [onclick],
    [role="button"],
    .cursor-pointer {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    /* 2. GPU-accelerate the sidebar slide animation */
    #sidebar {
      will-change: transform;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    /* 3. GPU-accelerate modal overlay */
    .ov,
    .confirm-ov {
      will-change: opacity;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    /* 4. Fix topbar backdrop-filter flicker on iPad
   Use solid fallback so the blur doesn't repaint on every scroll tick */
    @supports (-webkit-overflow-scrolling: auto) {
      #topbar {
        /* On older WebKit, replace blur with solid white — no more flicker */
        background: rgba(255, 255, 255, 0.97) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
      }
    }

    /* 5. Prevent all transition: all (too expensive on iPad GPU)
   Override with specific transitions only */
    .ntab {
      transition: background .15s, color .15s !important;
    }

    .btn {
      transition: background .15s, border-color .15s, color .15s, box-shadow .15s !important;
    }

    .pill {
      transition: background .15s, border-color .15s, color .15s !important;
    }

    .pcard {
      transition: box-shadow .18s !important;
    }

    /* remove transform on touch device */
    .pcard-act-btn {
      transition: background .15s, color .15s !important;
    }

    .topt {
      transition: background .15s, border-color .15s, color .15s !important;
    }

    .msave {
      transition: background .15s !important;
    }

    .lo-role {
      transition: background .2s, border-color .2s, box-shadow .2s !important;
    }

    .vtbtn {
      transition: background .15s, color .15s !important;
    }

    /* 6. Contain page rendering — stops browser re-painting all pages at once */
    /* NOTE: contain:layout removed — it breaks scroll height propagation to #content-area */
    .page {
      contain: style;
    }

    /* 7. Fix -webkit-overflow-scrolling: auto → replaced with momentum scroll
   (the old value is deprecated and causes bounce/freeze on iOS 15+) */
    /* Only truly modal overlays get overscroll containment — NOT .tbl-wrap which 
   is a horizontal scroll container; trapping it blocks vertical scroll on #content-area */
    .side-nav,
    .modal,
    .ov {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    /* Horizontal-scroll tables: touch momentum only, NO overscroll containment */
    .tbl-wrap,
    .mob-nav-drawer {
      -webkit-overflow-scrolling: touch;
    }

    #content-area {
      overscroll-behavior: contain;
    }

    /* 8. iPad: prevent double-tap zoom on buttons and cards */
    /* 9. Momentum scroll on iOS for all scrollable containers */
    #content-area,
    .modal,
    .ov {
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
    }

    /* 10. Remove expensive box-shadow transitions from cards (causes jank on scroll) */
    @media (hover: none) and (pointer: coarse) {
      .pcard {
        transition: none !important;
        box-shadow: var(--sh) !important;
      }

      .pcard:active {
        box-shadow: var(--sh2) !important;
      }

      /* Faster visual feedback on tap */
      .btn:active,
      .pill:active,
      .ntab:active {
        opacity: 0.75;
      }

      .pcard-act-btn:active {
        opacity: 0.7;
      }
    }

    /* ══ SPUB KEHADIRAN BUTTON ════════════════════════════════ */
    .spub-hadir-btn {
      padding: 5px 9px;
      border-radius: 5px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1.5px solid rgba(14, 116, 144, .3);
      background: #ecfeff;
      color: #0e7490;
      font-family: var(--sans);
      transition: all .15s;
      white-space: nowrap;
    }

    .spub-hadir-btn:hover {
      border-color: #0e7490;
      background: #cffafe;
      color: #0e7490
    }

    .spub-hadir-btn.confirmed {
      background: #059669;
      border-color: #059669;
      color: #fff;
      font-weight: 700
    }

    .spub-hadir-btn.confirmed:hover {
      background: #047857;
      border-color: #047857
    }

    /* ══ TELAH JUMPA MO BUTTON & BADGE ═══════════════════════ */
    .mo-assess-btn {
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1.5px solid rgba(5, 150, 105, .35);
      background: rgba(209, 250, 229, .18);
      color: #059669;
      font-family: var(--sans);
      transition: all .18s ease;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      letter-spacing: .01em;
    }
    .mo-assess-btn:hover:not(:disabled) {
      border-color: #059669;
      background: rgba(209, 250, 229, .38);
      box-shadow: 0 0 0 3px rgba(5, 150, 105, .12);
      transform: translateY(-1px);
    }
    .mo-assess-btn:active:not(:disabled) {
      transform: translateY(0);
    }
    .mo-assess-btn.mo-done {
      background: rgba(5, 150, 105, .12);
      border-color: rgba(5, 150, 105, .3);
      color: #047857;
      cursor: not-allowed;
      opacity: .72;
    }
    .mo-assessed-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #065f46;
      background: rgba(167, 243, 208, .35);
      border: 1px solid rgba(52, 211, 153, .4);
      border-radius: 6px;
      padding: 2px 8px;
      animation: moBadgePop .3s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes moBadgePop {
      from { opacity: 0; transform: scale(.75); }
      to   { opacity: 1; transform: scale(1); }
    }
    .mo-glow {
      animation: moGlowPulse .6s ease both;
    }
    @keyframes moGlowPulse {
      0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
      50%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, .15); }
      100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
    }

    /* ══ SAMBUNG RAWATAN BUTTONS ═════════════════════════════ */
    .sambung-btn {
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1.5px solid rgba(8, 145, 178, .35);
      background: rgba(207, 250, 254, .2);
      color: #0891b2;
      font-family: var(--sans);
      transition: all .18s ease;
      white-space: nowrap;
    }
    .sambung-btn:hover:not(:disabled) {
      border-color: #0891b2;
      background: rgba(207, 250, 254, .45);
    }
    .sambung-btn.sambung-no {
      border-color: rgba(220, 38, 38, .35);
      background: rgba(254, 226, 226, .2);
      color: #dc2626;
    }
    .sambung-btn.sambung-no:hover:not(:disabled) {
      border-color: #dc2626;
      background: rgba(254, 226, 226, .4);
    }
    .sambung-btn.sambung-done {
      border-color: rgba(5, 150, 105, .3);
      background: rgba(209, 250, 229, .25);
      color: #047857;
      cursor: default;
      opacity: .75;
    }
    .disp-row.dr-sambung {
      background: rgba(209, 250, 229, .08);
    }
    #sambung-ov.open { display: flex; }

    /* ══ SPUB BADGE in weekly record ═════════════════════════ */
    .spub-wk-badge {
      display: inline-block;
      font-size: 8px;
      font-weight: 800;
      padding: 1px 4px;
      border-radius: 3px;
      background: #f0e6ff;
      color: #7c3aed;
      border: 1px solid #c4b5fd;
      line-height: 1.2;
      letter-spacing: .3px;
      margin-top: 1px;
    }

/* ---- Inline style block #4 ---- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
    @keyframes prm-pulse {
      0%,100%{opacity:1;transform:scale(1);}
      50%{opacity:.5;transform:scale(.85);}
    }
    /* === SHARED HERO BASE === */
    #page-reg .hero,#page-cicir .hero,#page-laporan .hero{
      background:radial-gradient(ellipse 70% 80% at 100% -10%,rgba(99,102,241,.28) 0%,transparent 60%),radial-gradient(ellipse 50% 60% at -5% 110%,rgba(16,185,129,.15) 0%,transparent 55%),linear-gradient(155deg,#0f0726 0%,#1a0b3d 35%,#160830 65%,#0d0520 100%);
      padding:0;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06);
    }
    #page-reg .hero::before,#page-cicir .hero::before,#page-laporan .hero::before{
      content:'';position:absolute;inset:0;
      background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
      background-size:40px 40px;pointer-events:none;
    }
    #page-reg .hero::after,#page-cicir .hero::after,#page-laporan .hero::after{
      content:'';position:absolute;top:-60px;right:-40px;width:280px;height:280px;border-radius:50%;
      background:radial-gradient(circle,rgba(99,102,241,.18) 0%,transparent 70%);pointer-events:none;
    }
    #page-reg .hero-inner,#page-cicir .hero-inner,#page-laporan .hero-inner{
      position:relative;z-index:1;padding:32px 32px 0;
    }
    #page-reg .hero-title,#page-cicir .hero-title,#page-laporan .hero-title{
      font-family:'Sora',sans-serif!important;font-size:26px!important;font-weight:800!important;
      color:#fff!important;letter-spacing:-.5px;line-height:1.15;margin-bottom:6px!important;
    }
    #page-reg .hero-sub,#page-cicir .hero-sub,#page-laporan .hero-sub{
      font-size:13px!important;color:rgba(255,255,255,.38)!important;margin-bottom:0!important;font-weight:400;
    }
    .prm-eyebrow{
      display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;
      font-size:10px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;
      color:rgba(167,139,250,.7);margin-bottom:10px;padding:4px 10px;
      border:1px solid rgba(167,139,250,.2);border-radius:20px;background:rgba(124,58,237,.08);
    }
    .prm-eyebrow::before{
      content:'';width:6px;height:6px;border-radius:50%;background:#10b981;
      box-shadow:0 0 6px #10b981;animation:prm-pulse 2.4s ease-in-out infinite;
    }
    .prm-hero-bar{
      position:relative;z-index:1;height:1px;margin-top:24px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent);
    }
    /* === STAT CARDS ROW (premium glass) === */
    .prm-stats-row{
      position:relative;z-index:1;display:flex;gap:14px;padding:24px 32px 6px;overflow-x:auto;scrollbar-width:none;
    }
    .prm-stats-row::-webkit-scrollbar{display:none;}
    /* single accent variable per category drives icon / value / glow */
    .prm-sc.cc-green {--acc:#34d399;}
    .prm-sc.cc-indigo{--acc:#818cf8;}
    .prm-sc.cc-amber {--acc:#fbbf24;}
    .prm-sc.cc-violet{--acc:#a78bfa;}
    .prm-sc.cc-cyan  {--acc:#22d3ee;}
    .prm-sc.cc-red   {--acc:#f87171;}
    .prm-sc.cc-rose  {--acc:#fb7185;}
    .prm-sc.cc-slate {--acc:#94a3b8;}
    .prm-sc.cc-yellow{--acc:#facc15;}
    .prm-sc{
      --acc:#a78bfa;
      flex:1;min-width:132px;padding:16px 18px 18px;position:relative;cursor:default;border-radius:16px;overflow:hidden;
      background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 10px 26px rgba(8,4,24,.30),inset 0 1px 0 rgba(255,255,255,.10);
      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
      transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,border-color .25s ease;
      animation:prm-sc-in .55s cubic-bezier(.16,1,.3,1) both;
    }
    .prm-sc:nth-child(1){animation-delay:.04s;}
    .prm-sc:nth-child(2){animation-delay:.10s;}
    .prm-sc:nth-child(3){animation-delay:.16s;}
    .prm-sc:nth-child(4){animation-delay:.22s;}
    .prm-sc:nth-child(5){animation-delay:.28s;}
    @keyframes prm-sc-in{from{opacity:0;transform:translateY(16px) scale(.985);}to{opacity:1;transform:none;}}
    .prm-sc:hover{
      transform:translateY(-5px);
      border-color:color-mix(in srgb,var(--acc) 45%,transparent);
      box-shadow:0 18px 40px rgba(8,4,24,.40),0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.14);
    }
    /* soft accent glow that fades in from the top-right on hover */
    .prm-sc::after{
      content:'';position:absolute;top:-40%;right:-30%;width:160px;height:160px;border-radius:50%;
      background:radial-gradient(circle,var(--acc),transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;
    }
    .prm-sc:hover::after{opacity:.18;}
    /* top accent strip */
    .prm-sc::before{
      content:'';position:absolute;top:0;left:18px;right:18px;height:3px;
      border-radius:0 0 4px 4px;background:var(--acc);opacity:0;transition:opacity .25s;
    }
    .prm-sc:hover::before{opacity:.9;}
    .prm-sc-icon{
      position:relative;z-index:1;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
      justify-content:center;margin-bottom:12px;color:var(--acc);
      background:color-mix(in srgb,var(--acc) 16%,transparent);
      box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 22%,transparent);
    }
    .prm-sc-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--acc) 70%,transparent));}
    .prm-sc-v{
      position:relative;z-index:1;font-family:'Sora',sans-serif;font-size:30px;font-weight:800;line-height:1;
      display:block;margin-bottom:6px;letter-spacing:-1px;color:var(--acc);
      text-shadow:0 2px 14px color-mix(in srgb,var(--acc) 35%,transparent);
    }
    .prm-sc-l{position:relative;z-index:1;font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:rgba(255,255,255,.62);display:block;}
    @media (prefers-reduced-motion:reduce){
      .prm-sc{animation:none;}
      .prm-sc:hover{transform:none;}
    }
    /* === DATETIME BADGE (page-reg) === */
    #page-reg .hero-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
    #page-reg .hero-left{flex:1;min-width:220px;}
    .prm-dt-badge{
      display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;
      padding:14px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
      border-radius:14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .2s;
    }
    .prm-dt-badge:hover{background:rgba(255,255,255,.07);}
    .prm-dt-date{font-family:'Sora',sans-serif;font-size:12px;font-weight:600;color:rgba(255,255,255,.75);white-space:nowrap;}
    .prm-dt-time{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:600;color:#fff;letter-spacing:1.5px;}
    /* === PAGE-REG MAIN + CONTROLS === */
    #page-reg .main{background:#f3f4f8;padding:28px 32px!important;}
    #page-reg #reg-ctrl-sticky{
      background:#fff!important;border:1px solid #e2e5ef!important;border-radius:16px!important;
      padding:14px 18px!important;margin-bottom:20px!important;border-bottom:none!important;
      box-shadow:0 2px 12px rgba(15,7,38,.06),0 1px 3px rgba(15,7,38,.04)!important;
      position:sticky;top:8px;z-index:20;
    }
    #page-reg .sinp{
      height:42px;border:1.5px solid #dde1ef;border-radius:10px;font-size:14px!important;
      background:#f8f9fc;color:#1a0938;padding-left:40px!important;transition:all .18s;font-family:'Sora',sans-serif;
    }
    #page-reg .sinp:focus{border-color:#6366f1;background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.1);}
    #page-reg .sinp::placeholder{color:#9ca3af;font-size:13px;}
    #page-reg .sel{
      height:42px;border:1.5px solid #dde1ef;border-radius:10px;font-size:13px;
      background:#f8f9fc;color:#1a0938;padding:0 12px;font-family:'Sora',sans-serif;
      font-weight:500;cursor:pointer;transition:all .18s;
    }
    #page-reg .sel:focus{border-color:#6366f1;outline:none;}
    #page-reg .view-toggle{display:flex;border:1.5px solid #dde1ef;border-radius:10px;overflow:hidden;background:#f8f9fc;}
    #page-reg .vtbtn{
      padding:0 14px;height:42px;border:none;background:transparent;color:#9ca3af;
      font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;
      transition:all .15s;font-family:'Sora',sans-serif;
    }
    #page-reg .vtbtn.active{background:#1a0938;color:#fff;}
    #page-reg .vtbtn:not(.active):hover{background:#eef0f8;color:#1a0938;}
    #page-reg .pills{margin-top:10px!important;margin-bottom:0!important;gap:6px!important;padding-top:10px;border-top:1px solid #f0f1f6;}
    #page-reg .pill{
      padding:6px 16px!important;border-radius:8px!important;font-size:12px!important;font-weight:600!important;
      letter-spacing:.2px;border:1.5px solid #e2e5ef!important;background:#f8f9fc!important;
      color:#6b7280!important;font-family:'Sora',sans-serif;transition:all .15s;
    }
    #page-reg .pill:hover{border-color:#6366f1!important;color:#6366f1!important;background:rgba(99,102,241,.05)!important;}
    #page-reg .pill.active{
      background:linear-gradient(135deg,#4f46e5,#7c3aed)!important;border-color:transparent!important;
      color:#fff!important;box-shadow:0 2px 8px rgba(99,102,241,.3);
    }
    #page-reg .pill .n{font-size:11px!important;opacity:.75;font-family:'IBM Plex Mono',monospace;margin-left:4px;}
    #page-reg .rbar{margin-bottom:16px!important;margin-top:4px;}
    #page-reg .rcount{font-size:13px!important;color:#9ca3af!important;font-family:'Sora',sans-serif;}
    #page-reg .rcount strong{color:#374151!important;font-weight:700!important;}
    #page-reg .rbar .btn{
      height:38px;border-radius:10px!important;font-size:12px!important;font-weight:600!important;
      font-family:'Sora',sans-serif;background:linear-gradient(135deg,#1e3a5f,#1a0938)!important;
      border:none!important;color:#fff!important;padding:0 16px!important;
      box-shadow:0 2px 8px rgba(26,9,56,.2);transition:all .18s;
    }
    #page-reg .rbar .btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(26,9,56,.3)!important;}
    #page-reg .pgrid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;gap:16px!important;}
    /* PAGE-REG CARDS */
    #page-reg .pcard{
      border-radius:16px!important;border:1px solid #e8ebf4!important;
      box-shadow:0 2px 8px rgba(15,7,38,.05),0 1px 2px rgba(15,7,38,.04)!important;
      background:#fff!important;transition:all .22s cubic-bezier(.25,.8,.25,1)!important;overflow:visible!important;position:relative!important;
    }
    #page-reg .pcard.bulk-selected{border-color:#7c3aed!important;box-shadow:0 0 0 3px rgba(124,58,237,.18),0 4px 16px rgba(124,58,237,.12)!important;background:#faf7ff!important;}
    #page-reg .pcard:hover{transform:translateY(-3px)!important;box-shadow:0 8px 30px rgba(15,7,38,.10),0 2px 8px rgba(15,7,38,.06)!important;border-color:#d1d5e8!important;}
    #page-reg .pcard.is-default{background:#fffbfb!important;border-color:#fde8e8!important;}
    #page-reg .pcard-stripe{height:4px!important;}
    #page-reg .pcard.cat-fta .pcard-stripe{background:linear-gradient(90deg,#4f46e5,#6366f1)!important;}
    #page-reg .pcard.cat-tw  .pcard-stripe{background:linear-gradient(90deg,#d97706,#f59e0b)!important;}
    #page-reg .pcard.cat-dot .pcard-stripe{background:linear-gradient(90deg,#7c3aed,#a78bfa)!important;}
    #page-reg .pcard.cat-ds  .pcard-stripe{background:linear-gradient(90deg,#0891b2,#22d3ee)!important;}
    #page-reg .pcard-body{padding:18px 20px 16px!important;}
    #page-reg .pcard-top{margin-bottom:14px!important;align-items:center!important;}
    #page-reg .p-avatar{width:44px!important;height:44px!important;border-radius:12px!important;font-size:16px!important;font-family:'Sora',sans-serif!important;font-weight:800!important;}
    #page-reg .p-avatar.av-active{background:linear-gradient(135deg,#d1fae5,#a7f3d0)!important;color:#065f46!important;}
    #page-reg .p-avatar.av-default{background:linear-gradient(135deg,#fee2e2,#fecaca)!important;color:#991b1b!important;}
    #page-reg .pcard-top-inner{gap:12px!important;align-items:center!important;}
    #page-reg .pno{font-family:'IBM Plex Mono',monospace!important;font-size:10px!important;font-weight:600;color:#9ca3af!important;letter-spacing:.5px;margin-bottom:1px!important;text-transform:uppercase;}
    #page-reg .pname{font-family:'Sora',sans-serif!important;font-size:15px!important;font-weight:700!important;color:#111827!important;line-height:1.25!important;letter-spacing:-.1px;}
    #page-reg .pic{font-family:'IBM Plex Mono',monospace!important;font-size:12px!important;color:#9ca3af!important;margin-top:1px!important;letter-spacing:.3px;}
    #page-reg .sbadge{font-size:10px!important;padding:3px 9px!important;border-radius:6px!important;font-family:'Sora',sans-serif!important;font-weight:700!important;letter-spacing:.4px;}
    #page-reg .sb-active{background:#ecfdf5!important;color:#059669!important;border-color:#a7f3d0!important;}
    #page-reg .sb-default{background:#fef2f2!important;color:#dc2626!important;border-color:#fecaca!important;}
    #page-reg .divider{background:#f3f4f8!important;margin:12px 0!important;}
    #page-reg .pinfo{gap:10px!important;}
    #page-reg .pi label{font-size:10px!important;font-family:'Sora',sans-serif!important;font-weight:700!important;color:#9ca3af!important;letter-spacing:.7px;margin-bottom:3px!important;}
    #page-reg .pi span{font-size:13px!important;font-family:'Sora',sans-serif!important;color:#374151!important;font-weight:500;}
    #page-reg .chip{font-size:10px!important;font-family:'Sora',sans-serif!important;font-weight:700!important;padding:2px 8px!important;border-radius:5px!important;}
    #page-reg .dot-chip{font-size:10px!important;font-weight:700!important;padding:2px 7px!important;border-radius:4px!important;font-family:'IBM Plex Mono',monospace!important;}
    #page-reg .pcard-actions{gap:6px!important;margin-top:14px!important;padding-top:12px!important;border-top:1px solid #f3f4f8!important;}
    #page-reg .pcard-act-btn{flex:1;padding:8px 0!important;border:1.5px solid #e8ebf4!important;background:#f8f9fc!important;border-radius:9px!important;font-size:11px!important;font-weight:700!important;font-family:'Sora',sans-serif!important;color:#6b7280!important;letter-spacing:.2px;transition:all .15s!important;}
    #page-reg .pcard-act-btn:hover{background:#1a0938!important;color:#fff!important;border-color:#1a0938!important;}
    #page-reg .pcard-act-btn.btn-edit:hover{background:linear-gradient(135deg,#4f46e5,#7c3aed)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 2px 8px rgba(99,102,241,.3);}
    #page-reg .pcard-act-btn--info:hover{background:linear-gradient(135deg,#7c3aed,#a78bfa)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 2px 8px rgba(124,58,237,.28)!important;}
    #page-reg .plist{border-radius:14px!important;border:1px solid #e8ebf4!important;box-shadow:0 2px 8px rgba(15,7,38,.05)!important;overflow:hidden!important;}
    #page-reg .plist-hdr{background:#f8f9fc!important;border-bottom:1.5px solid #eef0f8!important;font-family:'Sora',sans-serif!important;}
    #page-reg .plist-h{font-size:10px!important;font-weight:700!important;letter-spacing:.8px!important;color:#9ca3af!important;text-transform:uppercase!important;padding:10px 12px!important;}
    #page-reg .plist-row{border-bottom:1px solid #f3f4f8!important;transition:background .12s!important;}
    #page-reg .plist-row:last-child{border-bottom:none!important;}
    #page-reg .plist-row:hover{background:#f8f9fc!important;}
    #page-reg .plist-c{padding:12px 12px!important;font-size:13px!important;font-family:'Sora',sans-serif!important;color:#374151!important;}
    /* === PAGE-CICIR CONTROLS & CARDS === */
    #page-cicir .main{background:#f3f4f8;padding:28px 32px!important;}
    #page-cicir .ctrl{background:#fff;border:1px solid #e2e5ef;border-radius:16px;padding:14px 18px;margin-bottom:20px!important;box-shadow:0 2px 12px rgba(15,7,38,.06),0 1px 3px rgba(15,7,38,.04);align-items:center;gap:10px!important;flex-wrap:wrap;}
    #page-cicir .sinp{height:42px;border:1.5px solid #dde1ef;border-radius:10px;font-size:14px!important;background:#f8f9fc;color:#1a0938;padding-left:40px!important;transition:all .18s;font-family:'Sora',sans-serif;}
    #page-cicir .sinp:focus{border-color:#6366f1;background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.1);}
    #page-cicir .sinp::placeholder{color:#9ca3af;font-size:13px;}
    #page-cicir .ctrl .sel,#page-cicir .ctrl select{height:42px!important;border:1.5px solid #dde1ef!important;border-radius:10px!important;font-size:13px!important;background:#f8f9fc!important;color:#1a0938!important;padding:0 12px!important;font-family:'Sora',sans-serif!important;font-weight:500!important;cursor:pointer;transition:all .18s;box-shadow:none!important;}
    #page-cicir .ctrl select:focus,#page-cicir .ctrl .sel:focus{border-color:#6366f1!important;outline:none;}
    #page-cicir .rbar{margin-bottom:16px!important;margin-top:4px;}
    #page-cicir .rcount{font-size:13px!important;color:#9ca3af!important;font-family:'Sora',sans-serif;}
    #page-cicir .rcount strong{color:#374151!important;font-weight:700!important;}
    #page-cicir .pgrid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;gap:16px!important;}
    #page-cicir .pcard{border-radius:16px!important;border:1px solid #e8ebf4!important;box-shadow:0 2px 8px rgba(15,7,38,.05),0 1px 2px rgba(15,7,38,.04)!important;background:#fff!important;transition:all .22s cubic-bezier(.25,.8,.25,1)!important;overflow:hidden!important;}
    #page-cicir .pcard:hover{transform:translateY(-3px)!important;box-shadow:0 8px 30px rgba(15,7,38,.10),0 2px 8px rgba(15,7,38,.06)!important;border-color:#d1d5e8!important;}
    #page-cicir .pcard.is-default{background:#fffbfb!important;border-color:#fde8e8!important;}
    #page-cicir .pcard-stripe{height:4px!important;}
    #page-cicir .pcard-body{padding:18px 20px 16px!important;}
    #page-cicir .pcard-top{margin-bottom:14px!important;align-items:center!important;}
    #page-cicir .p-avatar{width:44px!important;height:44px!important;border-radius:12px!important;font-size:16px!important;font-family:'Sora',sans-serif!important;font-weight:800!important;}
    #page-cicir .p-avatar.av-active{background:linear-gradient(135deg,#d1fae5,#a7f3d0)!important;color:#065f46!important;}
    #page-cicir .p-avatar.av-default{background:linear-gradient(135deg,#fee2e2,#fecaca)!important;color:#991b1b!important;}
    #page-cicir .pcard-top-inner{gap:12px!important;align-items:center!important;}
    #page-cicir .pno{font-family:'IBM Plex Mono',monospace!important;font-size:10px!important;font-weight:600;color:#9ca3af!important;letter-spacing:.5px;margin-bottom:1px!important;text-transform:uppercase;}
    #page-cicir .pname{font-family:'Sora',sans-serif!important;font-size:15px!important;font-weight:700!important;color:#111827!important;line-height:1.25!important;letter-spacing:-.1px;}
    #page-cicir .pic{font-family:'IBM Plex Mono',monospace!important;font-size:12px!important;color:#9ca3af!important;margin-top:1px!important;letter-spacing:.3px;}
    #page-cicir .sbadge{font-size:10px!important;padding:3px 9px!important;border-radius:6px!important;font-family:'Sora',sans-serif!important;font-weight:700!important;letter-spacing:.4px;}
    #page-cicir .divider{background:#f3f4f8!important;margin:12px 0!important;}
    #page-cicir .pinfo{gap:10px!important;}
    #page-cicir .pi label{font-size:10px!important;font-family:'Sora',sans-serif!important;font-weight:700!important;color:#9ca3af!important;letter-spacing:.7px;margin-bottom:3px!important;}
    #page-cicir .pi span{font-size:13px!important;font-family:'Sora',sans-serif!important;color:#374151!important;font-weight:500;}
    #page-cicir .chip{font-size:10px!important;font-family:'Sora',sans-serif!important;font-weight:700!important;padding:2px 8px!important;border-radius:5px!important;}
    #page-cicir .pcard-actions{gap:6px!important;margin-top:14px!important;padding-top:12px!important;border-top:1px solid #f3f4f8!important;}
    #page-cicir .pcard-act-btn{flex:1;padding:8px 0!important;border:1.5px solid #e8ebf4!important;background:#f8f9fc!important;border-radius:9px!important;font-size:11px!important;font-weight:700!important;font-family:'Sora',sans-serif!important;color:#6b7280!important;letter-spacing:.2px;transition:all .15s!important;}
    #page-cicir .pcard-act-btn:hover{background:#1a0938!important;color:#fff!important;border-color:#1a0938!important;}
    #page-cicir .pcard-act-btn.btn-edit:hover{background:linear-gradient(135deg,#4f46e5,#7c3aed)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 2px 8px rgba(99,102,241,.3);}
    /* === PAGE-LAPORAN === */
    #page-laporan .main{background:#f3f4f8;padding:28px 32px!important;}
    #laporan-content div[style*="background:var(--white)"]{border-radius:16px!important;border:1px solid #e8ebf4!important;box-shadow:0 2px 12px rgba(15,7,38,.05),0 1px 3px rgba(15,7,38,.03)!important;}
    #laporan-content div[style*="background:#f8f6f2"]{background:#f8f9fc!important;border-bottom:1px solid #eef0f8!important;padding:14px 20px!important;border-radius:0!important;}
    #laporan-content div[style*="font-size:14px;font-weight:700"]{font-family:'Sora',sans-serif!important;font-size:13px!important;font-weight:700!important;color:#1a0938!important;letter-spacing:-.1px;}
    #page-laporan #trend-days-select,#page-laporan #compliance-filter,#page-laporan #audit-filter,#page-laporan #donut-datepicker{border:1.5px solid #dde1ef!important;border-radius:8px!important;font-family:'Sora',sans-serif!important;font-size:12px!important;background:#f8f9fc!important;color:#374151!important;padding:5px 10px!important;}
    #page-laporan .main table thead th{font-family:'Sora',sans-serif!important;font-size:10px!important;font-weight:700!important;letter-spacing:.8px!important;text-transform:uppercase!important;color:#9ca3af!important;padding:12px 16px!important;background:#f8f9fc!important;}
    #page-laporan .main table tbody td{font-family:'Sora',sans-serif!important;font-size:13px!important;color:#374151!important;padding:11px 16px!important;border-bottom:1px solid #f3f4f8;}
    #page-laporan .main table tbody tr:hover td{background:#f8f9fc;}
    #laporan-content .main > div[style*="grid-template-columns:1fr 1fr"],#laporan-content .main > div[style*="grid-template-columns: 1fr 1fr"]{gap:16px!important;}
    #page-laporan #jenis-kes-subtitle,#page-laporan #dot-ta-subtitle,#page-laporan #donut-month-subtitle{font-family:'IBM Plex Mono',monospace!important;font-size:11px!important;color:#9ca3af!important;}
    #page-laporan #donut-today-pct,#page-laporan #donut-month-pct{font-family:'Sora',sans-serif!important;font-weight:800!important;}
    #laporan-content button[style*="background:#1e3a5f"],#laporan-content button[style*="background:#7c3aed"],#laporan-content button[style*="background:#0a6640"]{border-radius:8px!important;font-family:'Sora',sans-serif!important;font-size:11px!important;font-weight:700!important;padding:6px 12px!important;letter-spacing:.2px;transition:transform .15s,box-shadow .15s!important;}
    #laporan-content button[style*="background:#1e3a5f"]:hover,#laporan-content button[style*="background:#7c3aed"]:hover,#laporan-content button[style*="background:#0a6640"]:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)!important;}
    /* === MOBILE === */
    /* ---- Inline style block #5 ---- */
/* ── HERO SECTION ─────────────────────────────────────────────────── */
    #page-disp .hero {
      background:
        radial-gradient(ellipse at 90% -10%, rgba(139, 92, 246, .22) 0%, transparent 52%),
        radial-gradient(ellipse at 8% 110%, rgba(45, 212, 191, .12) 0%, transparent 48%),
        linear-gradient(160deg, #20104a 0%, #160730 55%, #0f0424 100%);
      padding: 28px 0 0;
      border-bottom: 1px solid rgba(255,255,255,.05);
    }

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

    #page-disp .hero-title {
      font-size: 23px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.4px;
      margin-bottom: 5px;
      line-height: 1.2;
    }

    #page-disp .hero-sub {
      font-size: 13px;
      font-weight: 400;
      color: rgba(255,255,255,.28);
      margin-bottom: 22px;
      letter-spacing: .01em;
    }

    /* ── HERO KPI STRIP ───────────────────────────────────────────────── */
    #page-disp .hero-stats {
      display: flex !important;
      flex-direction: column !important;
      border-top: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.022);
      border-radius: 0 !important;
      overflow: hidden;
    }

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

    #page-disp .hero-stats-modules {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
      border-top: 1px solid rgba(255,255,255,.07);
    }

    @media (max-width: 1100px) {
      #page-disp .hero-stats-kpi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

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

      #page-disp .hero-stats-modules {
        grid-template-columns: 1fr;
      }
    }

    #page-disp .hstat {
      padding: 16px 18px !important;
      text-align: center;
      position: relative;
      background: transparent;
      border-right: 1px solid rgba(255,255,255,.07) !important;
      border-bottom: 1px solid rgba(255,255,255,.07) !important;
      transition: background .18s;
    }

    #page-disp .hstat:hover {
      background: rgba(255,255,255,.04);
    }

    #page-disp .hstat::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 2px;
      border-radius: 0 0 3px 3px;
      background: rgba(255,255,255,.12);
    }

    #page-disp .hstat-v {
      font-size: 26px !important;
      font-weight: 800 !important;
      letter-spacing: -.5px;
      line-height: 1;
      display: block;
      margin-bottom: 2px;
    }

    #page-disp .hstat-l {
      font-size: 10px !important;
      font-weight: 600;
      letter-spacing: .6px;
      text-transform: uppercase;
      color: rgba(255,255,255,.32) !important;
      margin-top: 5px;
      display: block;
    }

    #page-disp .hstat-s {
      font-size: 10px !important;
      font-weight: 400;
      color: rgba(255,255,255,.22) !important;
      margin-top: 3px;
      display: block;
      letter-spacing: .01em;
      text-transform: none;
    }

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

    #page-disp .hstat-module {
      border-bottom: none !important;
    }

    /* SPUB + MFlex boxed components inside hstat — subtle refinements */
    #page-disp .hstat > div > div[style*="background:linear-gradient"] {
      border-radius: 10px !important;
      padding: 10px 12px !important;
    }

    /* ── DATE & ACTION BAR ────────────────────────────────────────────── */
    #page-disp .datebar {
      background: #fff;
      border: 1px solid rgba(220,215,240,.7);
      border-radius: 14px;
      padding: 12px 18px;
      box-shadow: 0 1px 4px rgba(26,9,56,.05), 0 4px 16px rgba(26,9,56,.04);
      margin-bottom: 18px;
    }

    #page-disp .db-label {
      font-size: 10px !important;
      font-weight: 700 !important;
      color: rgba(124,110,154,.65) !important;
      letter-spacing: .7px;
      text-transform: uppercase;
    }

    #page-disp .date-inp {
      background: #f7f5fc;
      border: 1.5px solid #e2ddf0;
      border-radius: 9px !important;
      padding: 8px 13px;
      font-size: 14px;
      color: #1a0938;
      font-weight: 600;
      transition: border-color .15s, box-shadow .15s;
    }

    #page-disp .date-inp:focus {
      border-color: #7c3aed;
      box-shadow: 0 0 0 3px rgba(124,58,237,.1);
    }

    #page-disp .day-badge {
      background: linear-gradient(135deg, #2d1065, #1a0938) !important;
      color: #fff !important;
      border-radius: 9px !important;
      padding: 7px 16px !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      letter-spacing: .08em;
      box-shadow: 0 2px 8px rgba(26,9,56,.25);
      text-transform: uppercase;
    }

    /* Action button groups (rounded containers) */
    #page-disp .db-actions > div[style*="border-radius:10px"] {
      background: #f8f7fc !important;
      border: 1px solid #ede8f7 !important;
      border-radius: 11px !important;
      padding: 5px 7px !important;
    }

    /* All action buttons — consistent height + rounding */
    #page-disp .btn-action {
      padding: 8px 14px !important;
      border-radius: 8px !important;
      font-size: 12.5px !important;
      font-weight: 700 !important;
      height: 36px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      letter-spacing: .01em;
      transition: all .15s ease;
    }

    #page-disp .btn-action:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(0,0,0,.18);
      filter: brightness(1.06);
    }

    /* Primary: Group TA */
    #page-disp .btn-action[onclick*="openBulkTaKhasModal"] {
      background: linear-gradient(135deg, #7c3aed, #6025c4) !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(124,58,237,.35) !important;
    }

    /* Danger: Batal */
    #page-disp .btn-action[onclick*="openRevokeGroupTaModal"] {
      background: #fff5f5 !important;
      color: #dc2626 !important;
      border: 1.5px solid #fecaca !important;
    }

    /* Secondary: Borang SPUB */
    #page-disp .btn-action[onclick*="openSpubDayPickerModal"] {
      background: linear-gradient(135deg, #0e7490, #0c6076) !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(14,116,144,.3) !important;
    }

    /* Secondary: Tarikh Khas */
    #page-disp .btn-action[onclick*="openSpubSpecialModal"] {
      background: #f0f9ff !important;
      color: #0369a1 !important;
      border: 1.5px solid #bae6fd !important;
    }

    /* Secondary: Laporan */
    #page-disp .btn-action[onclick*="showDispReportModal"] {
      background: linear-gradient(135deg, #1e3a5f, #162d4a) !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(30,58,95,.3) !important;
    }

    /* Neutral: Reset */
    #page-disp .btn-action[onclick*="onDateChange"] {
      background: #fff !important;
      color: var(--ink2) !important;
      border: 1.5px solid #ddd8f0 !important;
    }

    /* Neutral: CSV */
    #page-disp .btn-action[onclick*="downloadCsv"] {
      background: #fff !important;
      color: var(--ink2) !important;
      border: 1.5px solid #ddd8f0 !important;
    }

    /* ── SUMMARY CARDS (removed — stats consolidated in hero header) ─── */
    #page-disp .scards {
      display: none !important;
    }

    /* legacy sc rules kept for safety if markup reappears elsewhere */

    #page-disp .sc {
      background: #fff;
      border: 1px solid rgba(220,215,240,.6);
      border-radius: 14px;
      padding: 18px 20px 16px;
      box-shadow: 0 1px 3px rgba(26,9,56,.04), 0 4px 14px rgba(26,9,56,.05);
      position: relative;
      overflow: hidden;
      transition: transform .18s, box-shadow .18s;
    }

    #page-disp .sc:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(26,9,56,.1);
    }

    #page-disp .sc::before {
      height: 3px;
      border-radius: 3px 3px 0 0;
      background: var(--cc);
      opacity: .9;
    }

    #page-disp .sc::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--cc);
      opacity: .04;
      transform: translate(18px, 18px);
    }

    #page-disp .sc-l {
      font-size: 10px !important;
      text-transform: uppercase;
      letter-spacing: .7px;
      color: rgba(124,110,154,.75) !important;
      font-weight: 700;
      margin-bottom: 7px;
    }

    #page-disp .sc-v {
      font-size: 28px !important;
      font-weight: 800 !important;
      line-height: 1;
      letter-spacing: -.5px;
    }

    #page-disp .sc-s {
      font-size: 11px !important;
      color: rgba(124,110,154,.6) !important;
      margin-top: 5px;
      font-weight: 400;
    }

    /* ── SEARCH + FILTER BAR ──────────────────────────────────────────── */
    #page-disp .ctrl {
      gap: 10px;
      margin-bottom: 14px;
      align-items: center;
    }

    #page-disp .search-wrap {
      flex: 1;
      min-width: 220px;
      position: relative;
    }

    #page-disp .sinp {
      padding: 10px 14px 10px 40px !important;
      border: 1.5px solid #e2ddf0 !important;
      border-radius: 10px !important;
      font-size: 14px !important;
      background: #fff !important;
      color: #1a0938 !important;
      box-shadow: 0 1px 3px rgba(26,9,56,.05) !important;
      transition: border-color .15s, box-shadow .15s !important;
      height: 40px;
    }

    #page-disp .sinp:focus {
      border-color: #7c3aed !important;
      box-shadow: 0 0 0 3px rgba(124,58,237,.1) !important;
    }

    #page-disp .si {
      left: 13px;
      color: #9d8cc0;
    }

    /* Filter pill-toggle container */
    #page-disp .ctrl > div[style*="border-radius:7px"] {
      background: #f4f2fa !important;
      border: 1px solid #e2ddf0 !important;
      border-radius: 10px !important;
      padding: 4px !important;
      gap: 3px !important;
    }

    /* Pill filter buttons */
    #page-disp .btn-ghost {
      border-radius: 7px !important;
      padding: 6px 14px !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      color: #7c6e9a !important;
      transition: all .15s;
      height: 32px;
      display: inline-flex;
      align-items: center;
    }

    #page-disp .btn-ghost:hover {
      background: rgba(124,58,237,.08) !important;
      color: #7c3aed !important;
    }

    #page-disp .btn-ghost.active {
      background: #1a0938 !important;
      color: #fff !important;
      border-color: transparent !important;
      box-shadow: 0 1px 4px rgba(26,9,56,.2) !important;
    }

    /* Tidak Hadir filter — red accent when active */
    #page-disp #df-abs {
      color: #b91c1c !important;
    }

    #page-disp #df-abs.active {
      background: #dc2626 !important;
      color: #fff !important;
    }

    /* Kaunter filter — orange accent */
    #page-disp #df-kaunter {
      color: #c2410c !important;
    }

    #page-disp #df-kaunter.active {
      background: #ea580c !important;
      color: #fff !important;
    }

    /* ── PATIENT TABLE ────────────────────────────────────────────────── */
    #page-disp .tbl-wrap {
      border: 1px solid rgba(220,215,240,.7);
      border-radius: 14px;
      box-shadow: 0 1px 4px rgba(26,9,56,.05), 0 6px 20px rgba(26,9,56,.04);
      overflow: hidden;
    }

    #page-disp .disp-hdr {
      background: linear-gradient(to bottom, #f8f5ff, #f3f0fb);
      border-bottom: 2px solid rgba(220,215,240,.8);
      padding: 11px 16px;
      gap: 6px;
    }

    #page-disp .disp-hdr .wh {
      font-size: 10px !important;
      font-weight: 800 !important;
      letter-spacing: .7px;
      color: rgba(124,110,154,.7) !important;
      text-transform: uppercase;
    }

    #page-disp .disp-row {
      padding: 12px 16px;
      gap: 6px;
      border-bottom: 1px solid rgba(220,215,240,.4);
      transition: background .12s;
      min-height: 52px;
    }

    #page-disp .disp-row:hover {
      background: rgba(124,58,237,.03) !important;
    }

    #page-disp .disp-row:last-child {
      border-bottom: none;
    }

    /* Absent rows — clearly signaled */
    #page-disp .disp-row.dr-absent {
      background: rgba(254,242,242,.6) !important;
    }

    #page-disp .disp-row.dr-absent:hover {
      background: rgba(254,226,226,.55) !important;
    }

    /* MFlex rows */
    #page-disp .disp-row.dr-mflex {
      background: rgba(14,116,144,.03) !important;
    }

    /* Category sticky header rows */
    #page-disp .disp-cat-hdr {
      background: linear-gradient(to right, rgba(124,58,237,.06), rgba(124,58,237,.02));
      border-bottom: 2px solid rgba(124,58,237,.1);
      padding: 7px 16px;
      gap: 6px;
    }

    /* Volume value cells */
    #page-disp .v-dot {
      font-size: 13px;
      font-weight: 600;
      color: var(--green);
    }

    #page-disp .v-ta {
      font-size: 13px;
      font-weight: 600;
      color: var(--blue);
    }

    #page-disp .v-total {
      font-size: 13px;
      font-weight: 800;
      color: #1a0938;
    }

    #page-disp .v-zero {
      font-size: 13px;
      color: #c5bbdf;
    }

    /* Absent & Kaunter action buttons */
    #page-disp .abs-btn {
      padding: 5px 10px;
      border-radius: 7px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      border: 1.5px solid #e2ddf0 !important;
      background: #f8f5ff !important;
      color: #7c6e9a !important;
      transition: all .15s;
      white-space: nowrap;
      height: 30px;
      display: inline-flex;
      align-items: center;
    }

    #page-disp .abs-btn:hover {
      border-color: #fca5a5 !important;
      color: #dc2626 !important;
      background: #fef2f2 !important;
    }

    #page-disp .abs-btn.is-abs {
      background: #fef2f2 !important;
      border-color: #fca5a5 !important;
      color: #dc2626 !important;
      font-weight: 700 !important;
    }

    /* Kaunter button */
    #page-disp .abs-btn[onclick*="kaunter"],
    #page-disp .abs-btn[onclick*="Kaunter"],
    #page-disp .abs-btn[title*="kaunter"],
    #page-disp .abs-btn[title*="Kaunter"] {
      border-color: #fed7aa !important;
      color: #c2410c !important;
      background: #fff7ed !important;
    }

    /* Category badge (chip) — pill style */
    #page-disp .chip {
      border-radius: 20px !important;
      padding: 3px 9px !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: .3px;
    }

    /* Dose value */
    #page-disp .doseval {
      font-size: 15px !important;
      font-weight: 800 !important;
      color: #1a0938 !important;
    }

    /* ── WEEKEND / SPUB NOTICE ────────────────────────────────────────── */
    #page-disp #spub-wknd-notice {
      border-radius: 12px !important;
      border: 1px solid #c4b5fd !important;
      background: linear-gradient(135deg, #faf5ff, #f5f3ff) !important;
      padding: 14px 20px !important;
    }

    /* ── PESAKIT LUAR SECTION ─────────────────────────────────────────── */
    #page-disp .ext-section {
      border: 1px solid rgba(220,215,240,.7);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(26,9,56,.04);
      margin-top: 20px;
    }

    #page-disp .ext-hdr {
      background: linear-gradient(to bottom, #f8f5ff, #f3f0fb);
      border-bottom: 1px solid rgba(220,215,240,.7);
      padding: 14px 18px;
    }

    #page-disp .ext-hdr-row {
      background: linear-gradient(to bottom, #f8f5ff, #f3f0fb);
      border-bottom: 2px solid rgba(220,215,240,.8);
      padding: 10px 16px;
    }

    /* ── REPORT BOX ───────────────────────────────────────────────────── */
    #page-disp .report-box {
      border: 1px solid rgba(220,215,240,.7);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(26,9,56,.04);
    }

    #page-disp .report-hdr {
      background: linear-gradient(to bottom, #f8f5ff, #f3f0fb);
      border-bottom: 1px solid rgba(220,215,240,.7);
      padding: 13px 18px;
    }

    /* ── MAIN PADDING ─────────────────────────────────────────────────── */
    #page-disp .main {
      padding: 22px 28px;
    }

    /* ── RESPONSIVE TWEAKS ────────────────────────────────────────────── */
    /* ── Compliance Risk Dashboard — mobile responsiveness ── */
    @media (min-width: 601px) and (max-width: 900px) {
      #compliance-risk-cards {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }

/* ---- Inline style block #6 ---- */
/* ══════════════════════════════════════════════════════════════
       1. HERO HEADER — REFINED
    ══════════════════════════════════════════════════════════════ */
    #page-week .hero {
      background:
        radial-gradient(ellipse 65% 70% at 95% -10%, rgba(99,102,241,.22) 0%, transparent 55%),
        radial-gradient(ellipse 45% 55% at -5% 110%, rgba(45,212,191,.10) 0%, transparent 50%),
        linear-gradient(158deg, #1d0f47 0%, #160730 55%, #0f0424 100%);
      padding: 0;
      border-bottom: 1px solid rgba(255,255,255,.05);
      overflow: hidden;
    }

    /* Subtle grid texture */
    #page-week .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 44px 44px;
      pointer-events: none;
      z-index: 0;
    }

    #page-week .hero-inner {
      position: relative;
      z-index: 1;
      padding: 28px 32px 20px;
    }

    /* Top row: title + active badge */
    #page-week .wk-hero-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    #page-week .wk-hero-text {
      flex: 1;
    }

    #page-week .hero-title {
      font-size: 24px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.45px;
      margin-bottom: 5px;
      line-height: 1.2;
    }

    #page-week .hero-sub {
      font-size: 12.5px;
      font-weight: 500;
      color: rgba(255,255,255,.32);
      margin-bottom: 0;
      letter-spacing: .01em;
    }

    /* Active week badge */
    #page-week .wk-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      background: rgba(16,185,129,.12);
      border: 1px solid rgba(16,185,129,.25);
      border-radius: 20px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    #page-week .wk-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 6px #10b981;
      animation: wk-pulse 2.4s ease-in-out infinite;
    }

    @keyframes wk-pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:.5; transform:scale(.8); }
    }

    #page-week .wk-badge-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #34d399;
    }

    /* ══════════════════════════════════════════════════════════════
       2. KPI STRIP — REFINED TWO-TIER LAYOUT
    ══════════════════════════════════════════════════════════════ */

    /* Row 1: 4 primary KPI cards */
    #page-week .wk-kpi-strip {
      display: flex;
      position: relative;
      z-index: 1;
      border-top: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.018);
    }

    #page-week .wk-kpi {
      flex: 1;
      padding: 18px 20px 20px;
      text-align: center;
      position: relative;
      cursor: default;
      border-right: 1px solid rgba(255,255,255,.06);
      transition: background .18s;
    }

    #page-week .wk-kpi:last-child {
      border-right: none;
    }

    #page-week .wk-kpi:hover {
      background: rgba(255,255,255,.04);
    }

    /* Accent top line per KPI on hover */
    #page-week .wk-kpi::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 32px; height: 2px;
      border-radius: 0 0 4px 4px;
      opacity: 0;
      transition: opacity .2s;
    }

    #page-week .wk-kpi:hover::before { opacity: 1; }

    #page-week .wk-kpi-green::before  { background: #34d399; }
    #page-week .wk-kpi-red::before    { background: #f87171; }
    #page-week .wk-kpi-violet::before { background: #c4b5fd; }
    #page-week .wk-kpi-blue::before   { background: #93c5fd; }

    #page-week .wk-kpi-v {
      font-family: var(--head);
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1;
      display: block;
      margin-bottom: 7px;
    }

    #page-week .wk-kpi-green .wk-kpi-v  { color: #4ade98; }
    #page-week .wk-kpi-red .wk-kpi-v    { color: #f87171; }
    #page-week .wk-kpi-violet .wk-kpi-v { color: #c4b5fd; }
    #page-week .wk-kpi-blue .wk-kpi-v   { color: #93c5fd; }

    #page-week .wk-kpi-l {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .75px;
      text-transform: uppercase;
      color: rgba(255,255,255,.28);
      display: block;
    }

    /* Row 2: Volume accent bar — full-width, intentional */
    #page-week .wk-vol-bar {
      position: relative;
      z-index: 1;
      border-top: 1px solid rgba(255,255,255,.055);
      background: rgba(103,232,249,.04);
      padding: 13px 32px;
    }

    #page-week .wk-vol-inner {
      display: flex;
      align-items: center;
      gap: 14px;
      max-width: 480px;
    }

    #page-week .wk-vol-icon {
      font-size: 14px;
      flex-shrink: 0;
      opacity: .7;
    }

    #page-week .wk-vol-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .75px;
      text-transform: uppercase;
      color: rgba(255,255,255,.28);
      white-space: nowrap;
    }

    #page-week .wk-vol-v {
      font-family: var(--head);
      font-size: 22px;
      font-weight: 800;
      color: #67e8f9;
      letter-spacing: -.5px;
      line-height: 1;
      margin-left: auto;
    }

    #page-week .wk-vol-unit {
      font-size: 12px;
      font-weight: 700;
      color: rgba(103,232,249,.45);
      letter-spacing: .5px;
      text-transform: uppercase;
      align-self: flex-end;
      margin-bottom: 1px;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════════════════════════════
       3. WEEK NAVIGATION BAR
    ══════════════════════════════════════════════════════════════ */
    #page-week .main {
      padding: 22px 28px;
    }

    #page-week .datebar {
      background: #fff;
      border: 1px solid rgba(220,215,240,.7);
      border-radius: 14px;
      padding: 13px 20px;
      box-shadow: 0 1px 4px rgba(26,9,56,.05), 0 4px 16px rgba(26,9,56,.04);
      margin-bottom: 18px;
      gap: 12px;
    }

    /* "Minggu Rekod" label */
    #page-week .db-label {
      font-size: 10px !important;
      font-weight: 700 !important;
      color: rgba(124,110,154,.65) !important;
      letter-spacing: .7px;
      text-transform: uppercase;
    }

    /* Navigation buttons: Lepas / Depan */
    #page-week .datebar .btn[onclick*="shiftWeek"] {
      height: 36px !important;
      padding: 0 14px !important;
      border-radius: 8px !important;
      font-size: 12.5px !important;
      font-weight: 700 !important;
      border: 1.5px solid #e2ddf0 !important;
      background: #f7f5fc !important;
      color: #5b3fa0 !important;
      transition: all .14s;
    }

    #page-week .datebar .btn[onclick*="shiftWeek"]:hover {
      background: #ede8f7 !important;
      border-color: #c4b5fd !important;
      color: #4c1d95 !important;
      box-shadow: 0 1px 5px rgba(124,58,237,.12);
    }

    /* Week date range display pill */
    #page-week #w-week-label {
      background: #f4f2fa !important;
      border: 1.5px solid #e2ddf0 !important;
      border-radius: 9px !important;
      font-size: 13.5px !important;
      font-weight: 700 !important;
      color: #1a0938 !important;
      height: 36px !important;
      min-width: 190px;
      letter-spacing: -.1px;
    }

    /* Secondary: Minggu Ini */
    #page-week .btn-action[onclick*="resetWeekToToday"] {
      height: 36px !important;
      padding: 0 14px !important;
      border-radius: 8px !important;
      font-size: 12.5px !important;
      font-weight: 700 !important;
      background: #fff !important;
      color: #3d2a6b !important;
      border: 1.5px solid #ddd8f0 !important;
      box-shadow: 0 1px 3px rgba(26,9,56,.06) !important;
      transition: all .14s;
    }

    #page-week .btn-action[onclick*="resetWeekToToday"]:hover {
      background: #f4f2fa !important;
      border-color: #c4b5fd !important;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(124,58,237,.12) !important;
    }

    /* Neutral: CSV */
    #page-week .btn-action[onclick*="exportWeekCSV"] {
      height: 36px !important;
      padding: 0 14px !important;
      border-radius: 8px !important;
      font-size: 12.5px !important;
      font-weight: 700 !important;
      background: #fff !important;
      color: #3d2a6b !important;
      border: 1.5px solid #ddd8f0 !important;
      box-shadow: 0 1px 3px rgba(26,9,56,.06) !important;
      transition: all .14s;
    }

    #page-week .btn-action[onclick*="exportWeekCSV"]:hover {
      background: #f4f2fa !important;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(26,9,56,.1) !important;
    }

    /* Primary: Jana Buku Rekod */
    #page-week .btn-action[onclick*="generateBukuRekod(false)"] {
      height: 36px !important;
      padding: 0 16px !important;
      border-radius: 8px !important;
      font-size: 12.5px !important;
      font-weight: 800 !important;
      background: linear-gradient(135deg, #1e3a5f, #162d4a) !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(30,58,95,.3) !important;
      transition: all .14s;
    }

    #page-week .btn-action[onclick*="generateBukuRekod(false)"]:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(30,58,95,.4) !important;
      filter: brightness(1.08);
    }

    /* Accent: Borang Kosong */
    #page-week .btn-action[onclick*="generateBukuRekod(true)"] {
      height: 36px !important;
      padding: 0 16px !important;
      border-radius: 8px !important;
      font-size: 12.5px !important;
      font-weight: 800 !important;
      background: linear-gradient(135deg, #0d9488, #0a7a70) !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(13,148,136,.28) !important;
      transition: all .14s;
    }

    #page-week .btn-action[onclick*="generateBukuRekod(true)"]:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(13,148,136,.38) !important;
      filter: brightness(1.08);
    }

    /* ══════════════════════════════════════════════════════════════
       4. SEARCH + FILTER BAR
    ══════════════════════════════════════════════════════════════ */
    #page-week .ctrl {
      gap: 10px;
      margin-bottom: 14px;
      align-items: center;
      flex-wrap: wrap;
    }

    #page-week .search-wrap {
      flex: 1;
      min-width: 200px;
      position: relative;
    }

    #page-week .sinp {
      padding: 10px 14px 10px 40px !important;
      border: 1.5px solid #e2ddf0 !important;
      border-radius: 10px !important;
      font-size: 14px !important;
      background: #fff !important;
      color: #1a0938 !important;
      box-shadow: 0 1px 3px rgba(26,9,56,.05) !important;
      transition: border-color .15s, box-shadow .15s !important;
      height: 40px;
    }

    #page-week .sinp:focus {
      border-color: #7c3aed !important;
      box-shadow: 0 0 0 3px rgba(124,58,237,.10) !important;
    }

    #page-week .si {
      left: 13px;
      color: #9d8cc0;
    }

    /* Filter buttons — pill style */
    #page-week .ctrl .btn {
      height: 36px;
      padding: 0 14px !important;
      border-radius: 8px !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      border: 1.5px solid #e2ddf0 !important;
      background: #fff !important;
      color: #7c6e9a !important;
      transition: all .14s;
      box-shadow: 0 1px 2px rgba(26,9,56,.04);
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    #page-week .ctrl .btn:hover {
      background: #f4f2fa !important;
      border-color: #c4b5fd !important;
      color: #5b21b6 !important;
      transform: none;
      box-shadow: 0 1px 4px rgba(124,58,237,.1);
    }

    #page-week .ctrl .btn.active {
      background: #1a0938 !important;
      border-color: #1a0938 !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(26,9,56,.22) !important;
    }

    /* Cicir filter — danger accent */
    #page-week .ctrl .btn.btn-red {
      color: #b91c1c !important;
      border-color: #fecaca !important;
      background: #fff5f5 !important;
    }

    #page-week .ctrl .btn.btn-red:hover {
      background: #fef2f2 !important;
      border-color: #fca5a5 !important;
      color: #991b1b !important;
    }

    #page-week .ctrl .btn.btn-red.active {
      background: #dc2626 !important;
      border-color: #dc2626 !important;
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(220,38,38,.25) !important;
    }

    /* ══════════════════════════════════════════════════════════════
       5. MAIN TABLE
    ══════════════════════════════════════════════════════════════ */
    #page-week .tbl-wrap {
      border: 1px solid rgba(220,215,240,.7);
      border-radius: 14px;
      box-shadow: 0 1px 4px rgba(26,9,56,.05), 0 6px 20px rgba(26,9,56,.04);
      overflow: hidden;
    }

    /* Table header row */
    #page-week .week-hdr {
      background: linear-gradient(to bottom, #f8f5ff, #f3f0fb);
      border-bottom: 2px solid rgba(210,205,235,.85);
      padding: 12px 16px;
      gap: 5px;
    }

    /* Column header cells */
    #page-week .wh {
      font-size: 10px !important;
      font-weight: 800 !important;
      letter-spacing: .65px !important;
      color: rgba(124,110,154,.70) !important;
      text-transform: uppercase;
      line-height: 1.3;
    }

    /* Day-of-week date sub-labels (8/3, 9/3 etc.) */
    #page-week .week-hdr .wh span {
      font-size: 12px !important;
      font-weight: 600 !important;
      color: #1a0938 !important;
      opacity: .75;
      display: block;
      margin-top: 2px;
    }

    /* Category group sticky header */
    #page-week .week-cat-hdr {
      background: linear-gradient(to right, rgba(124,58,237,.06), rgba(124,58,237,.02));
      border-bottom: 2px solid rgba(124,58,237,.10);
      padding: 7px 16px;
      gap: 5px;
    }

    /* Data rows */
    #page-week .week-row {
      padding: 11px 16px;
      gap: 5px;
      border-bottom: 1px solid rgba(220,215,240,.40);
      transition: background .12s;
      min-height: 50px;
    }

    #page-week .week-row:hover {
      background: rgba(124,58,237,.028) !important;
    }

    #page-week .week-row:last-child {
      border-bottom: none;
    }

    /* Default / Cicir rows */
    #page-week .week-row.wr-default {
      background: rgba(254,242,242,.6) !important;
    }

    #page-week .week-row.wr-default:hover {
      background: rgba(254,226,226,.5) !important;
    }

    /* ── Patient name bold, IC muted ─────────────────────────── */
    #page-week .week-row .pl-name,
    #page-week .week-row [style*="font-weight:700"],
    #page-week .week-row [style*="font-weight: 700"] {
      font-weight: 700 !important;
      font-size: 13.5px !important;
      color: #1a0938 !important;
    }

    #page-week .week-row .pl-ic {
      font-size: 11.5px !important;
      color: #9d8cc0 !important;
      font-family: var(--mono) !important;
    }

    /* ── CATEGORY BADGES (Kategori column) ───────────────────── */
    #page-week .chip {
      border-radius: 20px !important;
      padding: 3px 10px !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: .3px;
    }

    /* ── DOS value ────────────────────────────────────────────── */
    #page-week .doseval {
      font-size: 14px !important;
      font-weight: 800 !important;
      color: #1a0938 !important;
    }

    /* ── ML column — right-align, slightly bold ──────────────── */
    #page-week .v-total,
    #page-week .v-dot,
    #page-week .v-ta {
      font-family: var(--mono) !important;
      font-size: 13px !important;
      font-weight: 700 !important;
    }

    #page-week .v-dot  { color: var(--green) !important; }
    #page-week .v-ta   { color: var(--blue)  !important; }
    #page-week .v-total{ color: #1a0938      !important; font-weight: 800 !important; }

    #page-week .v-zero {
      font-family: var(--mono) !important;
      font-size: 13px !important;
      color: #d4cfe8 !important;
    }

    /* ── Catatan column — muted secondary text ───────────────── */
    #page-week .week-row > div:last-child,
    #page-week .week-row [class*="catatan"],
    #page-week .week-row span[style*="color:var(--ink3)"],
    #page-week .week-row span[style*="color: var(--ink3)"] {
      font-size: 11.5px !important;
      color: #9d8cc0 !important;
      font-style: normal;
    }

    /* ══════════════════════════════════════════════════════════════
       6. DAY STATUS CELLS (DOT / TA / ABS / NA)
    ══════════════════════════════════════════════════════════════ */
    #page-week .dc {
      width: 34px;
      height: 26px;
      border-radius: 6px !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      letter-spacing: .3px;
      transition: transform .1s, box-shadow .1s;
    }

    #page-week .dc:hover {
      transform: scale(1.08);
    }

    /* DOT — green filled */
    #page-week .dc-dot {
      background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
      color: #065f46 !important;
      border: 1px solid #6ee7b7 !important;
      box-shadow: 0 1px 3px rgba(6,95,70,.12);
    }

    /* TA — blue filled */
    #page-week .dc-ta {
      background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
      color: #1e40af !important;
      border: 1px solid #93c5fd !important;
      box-shadow: 0 1px 3px rgba(30,64,175,.10);
    }

    /* Absent — red soft */
    #page-week .dc-abs {
      background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
      color: #991b1b !important;
      border: 1px solid #fca5a5 !important;
      box-shadow: 0 1px 3px rgba(153,27,27,.10);
    }

    /* N/A — ghost */
    #page-week .dc-na {
      background: transparent !important;
      border: 1px solid rgba(196,187,223,.45) !important;
      color: #c5bbdf !important;
    }

    /* Today highlight */
    #page-week .dc-today {
      outline: 2px solid #7c3aed !important;
      outline-offset: -1px;
    }

    /* Day cell group spacing */
    #page-week .dcs {
      gap: 3px;
    }

    /* ══════════════════════════════════════════════════════════════
       7. PESAKIT LUAR (EXT) SECTION
    ══════════════════════════════════════════════════════════════ */
    #page-week .ext-section {
      border: 1px solid rgba(220,215,240,.7);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(26,9,56,.04);
      margin-top: 20px;
    }

    #page-week .ext-hdr {
      background: linear-gradient(to bottom, #f8f5ff, #f3f0fb);
      border-bottom: 1px solid rgba(220,215,240,.7);
      padding: 14px 18px;
      border-radius: 14px 14px 0 0 !important;
    }

    #page-week .ext-hdr-row {
      background: linear-gradient(to bottom, #f8f5ff, #f3f0fb);
      border-bottom: 2px solid rgba(210,205,235,.85);
      padding: 10px 16px;
    }

    #page-week .week-ext-body {
      background: var(--white);
      border-top: none;
      border-radius: 0 0 14px 14px;
      min-height: 40px;
    }

    #page-week .week-ext-tbl {
      border: none;
      border-radius: 0;
      box-shadow: none;
      overflow-x: auto;
    }

    #page-week .week-ext-tbl .tbl-scroll-inner {
      min-width: 0;
    }

    #page-week .week-ext-hdr {
      border-bottom: 2px solid rgba(210,205,235,.85);
    }

    #page-week .week-ext-row {
      display: grid;
      grid-template-columns: 36px 1fr 100px 60px 60px repeat(7, 44px) 80px;
      padding: 11px 16px;
      gap: 5px;
      align-items: center;
      border-bottom: 1px solid rgba(220,215,240,.40);
      transition: background .12s;
      min-height: 50px;
    }

    #page-week .week-ext-row:hover {
      background: rgba(124,58,237,.028);
    }

    #page-week .week-ext-row:last-child {
      border-bottom: none;
    }

    #page-week .week-ext-num {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--ink3);
    }

    #page-week .week-ext-sub {
      font-size: 11.5px;
      color: #9d8cc0;
      margin-top: 1px;
      line-height: 1.35;
    }

    #page-week .week-ext-jenis {
      display: flex;
      flex-direction: column;
      gap: 3px;
      align-items: flex-start;
    }

    #page-week .week-ext-kat {
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      display: inline-block;
      line-height: 1.2;
    }

    #page-week .week-ext-dose {
      text-align: center;
      font-family: var(--head);
      font-weight: 800;
      font-size: 14px;
      color: #1a0938;
    }

    #page-week .week-ext-dose-unit {
      font-size: 11px;
      font-family: var(--sans);
      font-weight: 400;
      color: var(--ink3);
    }

    #page-week .week-ext-ml {
      text-align: center;
      font-family: var(--mono);
      font-size: 13px;
      color: var(--ink2);
    }

    #page-week .week-ext-day {
      width: 40px;
      min-height: 28px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      line-height: 1.15;
      text-align: center;
      gap: 1px;
      justify-self: center;
    }

    #page-week .week-ext-day--dot {
      background: var(--green-bg);
      color: var(--green);
      border: 1px solid var(--green-b);
      font-size: 10px;
    }

    #page-week .week-ext-day--ta {
      background: var(--blue-bg);
      color: var(--blue);
      border: 1px solid var(--blue-b);
      font-size: 10px;
    }

    #page-week .week-ext-day--abs {
      background: var(--red-bg);
      color: var(--red);
      border: 1px solid var(--red-b);
      font-size: 10px;
    }

    #page-week .week-ext-day--warn {
      background: var(--red-bg);
      color: var(--red);
      border: 1px solid var(--red-b);
    }

    #page-week .week-ext-day--late {
      background: var(--amber-bg);
      color: var(--amber);
      border: 1px solid var(--amber-b);
    }

    #page-week .week-ext-day--spub {
      background: var(--purple-bg);
      color: var(--purple);
      border: 1px solid var(--purple-b);
      font-size: 9px;
    }

    #page-week .week-ext-day--na {
      background: var(--bg);
      border: 1px solid var(--rule);
      color: var(--ink3);
      font-size: 11px;
      font-weight: 500;
    }

    #page-week .week-ext-day--today {
      outline: 2px solid #7c3aed;
      outline-offset: -1px;
    }

    #page-week .week-ext-day .wed-late {
      color: var(--amber);
      font-size: 8px;
      font-weight: 800;
    }

    #page-week .week-ext-day .wed-dot {
      color: var(--green);
      font-size: 9px;
      font-weight: 800;
    }

    #page-week .week-ext-day .wed-ta {
      color: var(--blue);
      font-size: 8px;
      font-weight: 700;
    }

    #page-week .week-ext-day .wed-khas,
    #page-week .week-ext-day .wed-spub {
      font-size: 7px;
      font-weight: 700;
      line-height: 1;
    }

    #page-week .week-ext-day .wed-spub {
      color: var(--purple);
    }

    #page-week .week-ext-actions {
      display: flex;
      gap: 3px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }

    #page-week .week-ext-act-btn {
      font-size: 12px;
      padding: 3px 6px;
      color: var(--blue);
      border-color: rgba(59,130,246,.3);
    }

    #page-week .week-ext-act-btn--del {
      color: var(--red);
      border-color: var(--red-b);
    }

    #page-week .week-ext-locked {
      font-size: 11px;
      color: var(--ink3);
    }

    #page-week .week-ext-empty {
      padding: 20px;
      color: var(--ink3);
      font-size: 13px;
    }

    /* ══════════════════════════════════════════════════════════════
       8. RESPONSIVE
    ══════════════════════════════════════════════════════════════ */
    /* ---- Inline style block #7 ---- */
/* ════════════════════════════════════════════════════════════════
       REKOD MINGGUAN — MOBILE LAYOUT REFINEMENT
       Scope: #page-week only, max-width 640px. CSS layout only.
    ════════════════════════════════════════════════════════════════ */
    #page-newpat .reg-card {
            background: var(--white);
            border-radius: 16px;
            border: 1.5px solid var(--rule);
            box-shadow: 0 2px 8px rgba(26,9,56,.05), 0 8px 24px rgba(26,9,56,.04);
            overflow: hidden;
            margin-bottom: 12px;
          }
          #page-newpat .reg-section-head {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 20px 12px;
            border-bottom: 1.5px solid var(--rule);
            background: linear-gradient(135deg, #faf9ff 0%, #f5f3ff 100%);
          }
          #page-newpat .reg-section-icon {
            width: 32px; height: 32px;
            border-radius: 8px;
            background: var(--purple-bg);
            border: 1.5px solid var(--purple-b);
            display: flex; align-items: center; justify-content: center;
            font-size: 15px; flex-shrink: 0;
          }
          #page-newpat .reg-section-title {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .8px;
            color: var(--purple);
          }
          #page-newpat .reg-section-sub {
            font-size: 11px;
            color: var(--ink3);
            margin-top: 1px;
          }
          #page-newpat .reg-body {
            padding: 20px;
          }
          /* 2-col grid */
          #page-newpat .reg-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
          }
          #page-newpat .reg-grid .reg-full { grid-column: 1 / -1; }
          /* Field label */
          #page-newpat .reg-label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .5px;
            color: var(--ink2);
            margin-bottom: 6px;
          }
          #page-newpat .reg-label .reg-req {
            color: var(--purple);
            font-size: 14px;
            line-height: 1;
          }
          #page-newpat .reg-label .reg-hint {
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0;
            color: var(--ink3);
            font-size: 11px;
          }
          /* Input wrapper with icon */
          #page-newpat .reg-input-wrap {
            position: relative;
          }
          #page-newpat .reg-input-wrap .reg-icon {
            position: absolute;
            left: 11px; top: 50%; transform: translateY(-50%);
            font-size: 14px; pointer-events: none; opacity: .5;
          }
          #page-newpat .reg-input-wrap.has-icon .minp,
          #page-newpat .reg-input-wrap.has-icon input,
          #page-newpat .reg-input-wrap.has-icon select,
          #page-newpat .reg-input-wrap.has-icon textarea {
            padding-left: 34px !important;
          }
          #page-newpat .reg-input-wrap.has-icon textarea {
            padding-top: 10px !important;
          }
          /* Enhanced inputs */
          #page-newpat .reg-field {
            width: 100%;
            padding: 10px 13px;
            border: 1.5px solid var(--rule2);
            border-radius: 10px;
            font-family: var(--sans);
            font-size: 14px;
            color: var(--ink);
            background: var(--white);
            transition: border-color .18s, box-shadow .18s;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
          }
          #page-newpat .reg-field::placeholder { color: #b0a8c8; }
          #page-newpat .reg-field:hover { border-color: var(--purple-b); }
          #page-newpat .reg-field:focus {
            border-color: var(--purple);
            box-shadow: 0 0 0 3px rgba(124,58,237,.12);
          }
          #page-newpat select.reg-field {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237c3aed' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 32px;
          }
          #page-newpat input[type="date"].reg-field {
            padding-right: 10px;
          }
          /* Segmented radio buttons */
          #page-newpat .reg-segment {
            display: flex;
            gap: 0;
            border: 1.5px solid var(--purple-b);
            border-radius: 10px;
            overflow: hidden;
          }
          #page-newpat .reg-segment-lbl {
            flex: 1;
            position: relative;
            cursor: pointer;
          }
          #page-newpat .reg-segment-lbl input[type="radio"] {
            position: absolute;
            opacity: 0;
            width: 0; height: 0;
          }
          #page-newpat .reg-segment-lbl .reg-seg-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 700;
            color: var(--purple);
            background: var(--white);
            border-right: 1.5px solid var(--purple-b);
            transition: background .15s, color .15s;
            user-select: none;
          }
          #page-newpat .reg-segment-lbl:last-child .reg-seg-inner { border-right: none; }
          #page-newpat .reg-segment-lbl input:checked ~ .reg-seg-inner {
            background: var(--purple);
            color: #fff;
          }
          #page-newpat .reg-segment-lbl:hover .reg-seg-inner {
            background: var(--purple-bg);
          }
          #page-newpat .reg-segment-lbl input:checked ~ .reg-seg-inner:hover {
            background: var(--purple);
          }
          /* Dose input row */
          #page-newpat .reg-dose-row {
            display: flex;
            gap: 8px;
            align-items: stretch;
          }
          #page-newpat .reg-dose-row .reg-field { flex: 1; }
          #page-newpat .reg-ml-badge {
            display: flex;
            align-items: center;
            padding: 0 14px;
            border: 1.5px solid var(--rule2);
            border-radius: 10px;
            background: var(--bg);
            font-size: 13px;
            font-weight: 700;
            color: var(--ink2);
            white-space: nowrap;
            min-width: 72px;
            justify-content: center;
            transition: border-color .18s;
          }
          #page-newpat .reg-ml-note {
            margin-top: 5px;
            font-size: 11.5px;
            color: var(--ink3);
          }
          #page-newpat .reg-ml-note span { font-weight: 700; color: var(--purple); }
          /* Transfer / Restart info boxes */
          #page-newpat .reg-info-box {
            border-radius: 10px;
            padding: 14px 16px;
          }
          #page-newpat .reg-info-box.green {
            background: var(--green-bg);
            border: 1.5px solid var(--green-b);
          }
          #page-newpat .reg-info-box.amber {
            background: #fffbeb;
            border: 1.5px solid #fcd34d;
          }
          #page-newpat .reg-info-box .reg-info-title {
            font-weight: 800;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .5px;
            margin-bottom: 8px;
          }
          #page-newpat .reg-info-box.green .reg-info-title { color: var(--green); }
          #page-newpat .reg-info-box.amber .reg-info-title { color: #b45309; }
          #page-newpat .reg-info-box ul {
            margin: 0; padding-left: 16px;
            font-size: 12.5px; line-height: 1.75;
          }
          #page-newpat .reg-info-box.green ul { color: #065f46; }
          #page-newpat .reg-info-box.amber ul { color: #78350f; }
          /* Action buttons */
          #page-newpat .reg-actions {
            display: flex;
            gap: 10px;
            padding: 16px 20px;
            background: linear-gradient(135deg, #faf9ff 0%, #f5f3ff 100%);
            border-top: 1.5px solid var(--rule);
          }
          #page-newpat .reg-btn-submit {
            flex: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 20px;
            background: var(--purple);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-family: var(--sans);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: transform .15s, box-shadow .15s, background .15s;
            box-shadow: 0 2px 8px rgba(124,58,237,.3);
          }
          #page-newpat .reg-btn-submit:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 16px rgba(124,58,237,.4);
            background: #6d28d9;
          }
          #page-newpat .reg-btn-reset {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px 16px;
            background: var(--white);
            color: var(--ink2);
            border: 1.5px solid var(--rule2);
            border-radius: 10px;
            font-family: var(--sans);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform .15s, border-color .15s, background .15s;
          }
          #page-newpat .reg-btn-reset:hover {
            transform: scale(1.02);
            border-color: var(--purple-b);
            background: var(--purple-bg);
          }
          /* Nota box */
          #page-newpat .reg-nota {
            display: flex;
            gap: 10px;
            padding: 12px 16px;
            background: var(--blue-bg);
            border-radius: 10px;
            border: 1.5px solid var(--blue-b);
            font-size: 12.5px;
            color: var(--blue);
            line-height: 1.6;
            margin: 0 20px 20px;
          }
          #page-newpat .reg-nota-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ---- Inline style block #9 ---- */
/* ══════════════════════════════════════════════════════════════
     KAWALAN STOK — ENHANCED DASHBOARD UI (CSS ONLY, NO LOGIC)
  ══════════════════════════════════════════════════════════════ */

  /* ── Hero stat cards: bigger numbers, cleaner hierarchy ── */
  #page-stok .hero-stats {
    gap: 0 !important;
  }
  #page-stok .hstat {
    padding: 14px 20px !important;
    border-right: 1px solid rgba(255,255,255,.1);
    position: relative;
  }
  #page-stok .hstat:last-child { border-right: none; }

  #page-stok .hstat-v {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
    line-height: 1.1 !important;
    display: block;
    margin-bottom: 4px !important;
  }
  #page-stok .hstat-l {
    font-size: 10px !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .55;
    font-weight: 600;
  }

  /* ── Main content area ── */
  #page-stok .main {
    padding: 20px 24px !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  #page-stok .main > * { margin-bottom: 0 !important; }

  /* ── Action buttons row ── */
  #page-stok .main > div:first-child {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
  }
  #page-stok .main > div:first-child button {
    border-radius: 10px !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    font-weight: 700 !important;
    transition: transform .15s, box-shadow .15s, opacity .15s !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
  }
  #page-stok .main > div:first-child button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
    opacity: .93 !important;
  }

  /* ── Info bar ── */
  #stok-info-bar, #page-stok .main > div:nth-child(2) {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%) !important;
    border: 1.5px solid #bfdbfe !important;
    border-left: 4px solid #2563eb !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 12.5px !important;
  }

  /* ── Daily CF Panel ── */
  #daily-cf-panel {
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(26,9,56,.06), 0 8px 24px rgba(26,9,56,.04) !important;
    border: 1.5px solid var(--rule) !important;
    border-top: 3px solid var(--purple) !important;
  }

  /* CF breakdown cells */
  #dcf-breakdown > div {
    transition: background .18s;
  }
  #dcf-breakdown > div:hover {
    background: #faf9ff !important;
  }
  #dcf-opening  { font-size: 16px !important; letter-spacing: -.3px; }
  #dcf-stockin  { font-size: 16px !important; letter-spacing: -.3px; }
  #dcf-usage    { font-size: 16px !important; letter-spacing: -.3px; }
  #dcf-spub-in  { font-size: 16px !important; letter-spacing: -.3px; }
  #dcf-spub-out { font-size: 16px !important; letter-spacing: -.3px; }
  #dcf-book-bal { font-size: 16px !important; letter-spacing: -.3px; }

  @media (max-width: 900px) {
    #dcf-breakdown {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    #dcf-breakdown > div {
      border-right: none !important;
      border-bottom: 1px solid var(--rule);
    }
  }

  /* Status badge pill */
  #dcf-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1.5px solid #bbf7d0 !important;
    width: fit-content !important;
  }

  /* ── Stok table wrapper ── */
  #page-stok .main > div:last-child {
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(26,9,56,.06), 0 8px 24px rgba(26,9,56,.04) !important;
    border: 1.5px solid var(--rule) !important;
    border-top: 3px solid #7c3aed !important;
    /* overflow: hidden removed — it was blocking the mobile horizontal-scroll table. *
     * Mobile @media (max-width:640px) block sets overflow-x:auto on this element.
     * On desktop, border-radius renders fine without needing overflow:hidden. */
  }

  /* Table column headers */
  #page-stok .main > div:last-child .stok-scroll-wrap > div:first-child > div {
    font-size: 10px !important;
    letter-spacing: .7px !important;
  }

  /* Table rows: hover effect */
  #stok-table-body tr {
    transition: background .15s !important;
  }
  #stok-table-body tr:hover td {
    background: rgba(124,58,237,.04) !important;
    cursor: default;
  }

  /* Table cells */
  #stok-table-body td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
    transition: background .15s !important;
  }

  /* Quantity cells — cleaner alignment */
  #stok-table-body .c-qty-in,
  #stok-table-body .c-qty-out,
  #stok-table-body .c-baki {
    text-align: right !important;
  }

  /* Badge in jenis column */
  #stok-table-body .badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 9px !important;
    border-radius: 20px !important;
    letter-spacing: .2px !important;
    white-space: nowrap !important;
  }

  /* Baki stok pill chips */
  #stok-table-body span[style*="border-radius:5px"] {
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    letter-spacing: -.2px !important;
  }

  /* Low stock badge */
  #stok-low-badge {
    font-size: 9px !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    letter-spacing: .5px !important;
    animation: pulse-badge 2s infinite !important;
  }
  @keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: .65; }
  }

  /* Reorder badge */
  #stok-reorder-badge {
    font-size: 11px !important;
    background: rgba(220,38,38,.1) !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(220,38,38,.2) !important;
  }

  /* note-tag inside table */
  #stok-table-body .note-tag {
    display: inline-block !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    background: rgba(14,116,144,.1) !important;
    color: #0e7490 !important;
    border: 1px solid rgba(14,116,144,.15) !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    vertical-align: middle !important;
  }

  /* Table header bar */
  #page-stok .main > div:last-child > div:first-child {
    background: linear-gradient(135deg, #f8f6f2 0%, #f3f0fb 100%) !important;
  }

  /* Divider between panels — subtle */
  #page-stok .main > *:not(:last-child)::after {
    display: none;
  }

  /* ── Result row (after CF done) ── */
  #dcf-result-row {
    background: linear-gradient(135deg, #f8fffe 0%, #f0fdf4 100%) !important;
    border-bottom: 1.5px solid #d1fae5 !important;
    padding: 12px 20px !important;
  }

  #dcf-result-row strong {
    font-weight: 800 !important;
  }

/* ---- Inline style block #10 ---- */
/* ══════════════════════════════════════════════════════════════
       PAGE-STOK — KPI STRIP (mirrors Rekod Mingguan style)
    ══════════════════════════════════════════════════════════════ */
    #page-stok .wk-kpi-strip {
      display: flex;
      position: relative;
      z-index: 1;
      border-top: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.018);
    }
    #page-stok .wk-kpi {
      flex: 1;
      padding: 18px 20px 20px;
      text-align: center;
      position: relative;
      cursor: default;
      border-right: 1px solid rgba(255,255,255,.06);
      transition: background .18s;
    }
    #page-stok .wk-kpi:last-child { border-right: none; }
    #page-stok .wk-kpi:hover { background: rgba(255,255,255,.04); }
    #page-stok .wk-kpi::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 32px; height: 2px;
      border-radius: 0 0 4px 4px;
      opacity: 0;
      transition: opacity .2s;
    }
    #page-stok .wk-kpi:hover::before { opacity: 1; }
    #page-stok .wk-kpi-green::before  { background: #34d399; }
    #page-stok .wk-kpi-red::before    { background: #f87171; }
    #page-stok .wk-kpi-violet::before { background: #c4b5fd; }
    #page-stok .wk-kpi-amber::before  { background: #fcd34d; }
    #page-stok .wk-kpi-v {
      font-family: var(--head);
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1;
      display: block;
      margin-bottom: 7px;
    }
    #page-stok .wk-kpi-green .wk-kpi-v  { color: #4ade98; }
    #page-stok .wk-kpi-red .wk-kpi-v    { color: #f87171; }
    #page-stok .wk-kpi-violet .wk-kpi-v { color: #c084fc; }
    #page-stok .wk-kpi-amber .wk-kpi-v  { color: #fcd34d; }
    #page-stok .wk-kpi-l {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .75px;
      text-transform: uppercase;
      color: rgba(255,255,255,.28);
      display: block;
    }
    #page-stok .wk-vol-bar {
      position: relative;
      z-index: 1;
      border-top: 1px solid rgba(255,255,255,.055);
      background: rgba(103,232,249,.04);
      padding: 12px 32px;
    }
    #page-stok .wk-vol-inner {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    #page-stok .wk-vol-icon { font-size: 14px; flex-shrink:0; opacity:.7; }
    #page-stok .wk-vol-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .75px;
      text-transform: uppercase;
      color: rgba(255,255,255,.28);
      white-space: nowrap;
    }
    #page-stok .wk-vol-v {
      font-family: var(--head);
      font-size: 20px;
      font-weight: 800;
      color: #67e8f9;
      letter-spacing: -.5px;
      line-height: 1;
      margin-left: auto;
    }
    #page-stok .hero-inner {
      position: relative;
      z-index: 1;
      padding: 28px 32px 20px;
    }

/* ---- Inline style block #11 ---- */
/* ── Hero area ─────────────────────────────────────── */
#page-users .hero { padding-bottom: 0 !important; }
#page-users .hero-inner { padding-bottom: 4px !important; }
#page-users .hero-stats { display: none !important; } /* hide old stat row if present */

/* ── Stat cards row ────────────────────────────────── */
#page-users .u-stats-row {
  position: relative; z-index: 1;
  display: flex !important; gap: 0;
  padding: 24px 32px 0 !important;
  overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid rgba(255,255,255,.08);
}
#page-users .u-stats-row::-webkit-scrollbar { display: none; }

#page-users .u-sc {
  flex: 1 !important; min-width: 110px;
  padding: 18px 20px 22px !important;
  position: relative; cursor: default;
  transition: transform .2s, background .2s;
  border-right: 1px solid rgba(255,255,255,.06);
  text-align: left !important;
}
#page-users .u-sc:last-child { border-right: none !important; }
#page-users .u-sc:hover { background: rgba(255,255,255,.04) !important; }
#page-users .u-sc::before {
  content: ''; position: absolute;
  top: 0; left: 20px; right: 20px; height: 3px;
  border-radius: 0 0 4px 4px; opacity: 0; transition: opacity .2s;
}
#page-users .u-sc:hover::before { opacity: 1 !important; }
#page-users .u-sc.usc-green::before  { background: #34d399; }
#page-users .u-sc.usc-indigo::before { background: #818cf8; }
#page-users .u-sc.usc-amber::before  { background: #fbbf24; }
#page-users .u-sc.usc-orange::before { background: #fb923c; }

#page-users .u-sc-icon {
  width: 32px !important; height: 32px !important;
  border-radius: 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 15px !important; margin-bottom: 10px !important;
}
#page-users .u-sc.usc-green  .u-sc-icon { background: rgba(52,211,153,.15) !important; }
#page-users .u-sc.usc-indigo .u-sc-icon { background: rgba(129,140,248,.15) !important; }
#page-users .u-sc.usc-amber  .u-sc-icon { background: rgba(251,191,36,.15) !important; }
#page-users .u-sc.usc-orange .u-sc-icon { background: rgba(251,146,60,.15) !important; }

#page-users .u-sc-v {
  font-family: 'Sora', sans-serif !important;
  font-size: 30px !important; font-weight: 800 !important;
  line-height: 1 !important; display: block !important;
  margin-bottom: 6px !important; letter-spacing: -1px !important;
}
#page-users .u-sc.usc-green  .u-sc-v { color: #34d399 !important; }
#page-users .u-sc.usc-indigo .u-sc-v { color: #818cf8 !important; }
#page-users .u-sc.usc-amber  .u-sc-v { color: #fbbf24 !important; }
#page-users .u-sc.usc-orange .u-sc-v { color: #fb923c !important; }

#page-users .u-sc-l {
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: .8px !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important; display: block !important;
}

/* hero gradient bar */
#page-users .u-hero-bar {
  height: 3px !important;
  background: linear-gradient(90deg, #7c3aed 0%, #4f46e5 40%, #0ea5e9 100%) !important;
  opacity: .35 !important; margin-top: 20px !important;
}

/* ── Main content background ───────────────────────── */
#page-users .main {
  background: #f3f4f8 !important;
  padding: 28px 32px 80px !important;
}

/* ── Form & List cards ─────────────────────────────── */
#page-users .u-card,
#page-users .u-list-card {
  background: #fff !important;
  border: 1px solid #e2e5ef !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(15,7,38,.06), 0 1px 3px rgba(15,7,38,.04) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
#page-users .u-list-card { margin-bottom: 0 !important; }

#page-users .u-card-header {
  background: #f8f7fb !important;
  border-bottom: 1.5px solid #e8e4f2 !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#page-users .u-card-header-title {
  font-size: 15px !important; font-weight: 700 !important;
  color: #2d1b69 !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
}
#page-users .u-card-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
  flex-shrink: 0 !important; display: inline-block !important;
}
#page-users .u-card-body { padding: 22px 24px !important; }

/* ── Form labels ───────────────────────────────────── */
#page-users .u-field-label {
  display: block !important;
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .6px !important;
  color: #6b7280 !important; margin-bottom: 7px !important;
}
#page-users .u-field-note {
  font-weight: 400 !important; text-transform: none !important;
  letter-spacing: 0 !important; color: #9ca3af !important; font-size: 10px !important;
}

/* ── Buttons ───────────────────────────────────────── */
#page-users .u-btn-primary {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  background: linear-gradient(135deg, #6d28d9, #4f46e5) !important;
  color: #fff !important; border: none !important; border-radius: 10px !important;
  padding: 11px 22px !important; font-size: 13.5px !important; font-weight: 700 !important;
  cursor: pointer !important; letter-spacing: .2px !important;
  box-shadow: 0 2px 8px rgba(109,40,217,.28) !important;
  transition: opacity .18s, transform .12s !important;
}
#page-users .u-btn-primary:hover { opacity: .9 !important; transform: translateY(-1px) !important; }

#page-users .u-btn-secondary {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  background: #fff !important; color: #4b5563 !important;
  border: 1.5px solid #d1d5db !important; border-radius: 10px !important;
  padding: 11px 18px !important; font-size: 13.5px !important; font-weight: 600 !important;
  cursor: pointer !important;
}
#page-users .u-btn-secondary:hover { background: #f9fafb !important; }

#page-users .u-btn-cancel {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  background: #fff !important; color: #7c3aed !important;
  border: 1.5px solid #c4b5fd !important; border-radius: 10px !important;
  padding: 8px 14px !important; font-size: 13px !important; font-weight: 600 !important;
  cursor: pointer !important;
}

/* ── User list header ──────────────────────────────── */
#page-users .u-list-header {
  background: #f8f7fb !important;
  border-bottom: 1.5px solid #e8e4f2 !important;
  padding: 11px 20px !important;
  display: grid !important;
  grid-template-columns: 1fr 150px 160px 130px !important;
  gap: 8px !important; align-items: center !important;
}
#page-users .u-col-label {
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .7px !important;
  color: #9181b0 !important;
}
#page-users .u-col-label.centered { text-align: center !important; }

/* ── User rows (JS-generated) ──────────────────────── */
#page-users #u-list .u-user-row {
  display: grid !important;
  grid-template-columns: 1fr 150px 160px 130px !important;
  gap: 8px !important; padding: 14px 20px !important;
  border-bottom: 1px solid #f0eef8 !important;
  align-items: center !important;
  transition: background .15s !important;
  background: #fff !important;
}
#page-users #u-list .u-user-row:last-child { border-bottom: none !important; }
#page-users #u-list .u-user-row:hover { background: #faf9fd !important; }
#page-users #u-list .u-user-row.is-self { background: rgba(109,40,217,.03) !important; }

#page-users #u-list .u-user-name {
  font-size: 14px !important; font-weight: 700 !important;
  color: #1f1235 !important; line-height: 1.3 !important;
}
#page-users #u-list .u-user-id {
  font-family: var(--mono) !important;
  font-size: 12px !important; color: #9181b0 !important; margin-top: 2px !important;
}
#page-users #u-list .u-self-tag {
  display: inline-block !important;
  font-size: 10px !important; font-weight: 700 !important;
  color: #059669 !important; background: #d1fae5 !important;
  border: 1px solid #a7f3d0 !important; border-radius: 20px !important;
  padding: 1px 7px !important; margin-left: 6px !important;
  vertical-align: middle !important; letter-spacing: .3px !important;
}
#page-users #u-list .u-role-text {
  font-size: 13px !important; color: #4b5563 !important; font-weight: 500 !important;
}

/* ── Access badges ─────────────────────────────────── */
#page-users #u-list .u-badge {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 4px 12px !important; border-radius: 20px !important;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: .3px !important;
}
#page-users #u-list .badge-penuh {
  background: #d1fae5 !important; color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
}
#page-users #u-list .badge-terhad {
  background: #fef3c7 !important; color: #92400e !important;
  border: 1px solid #fde68a !important;
}
#page-users #u-list .badge-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
}
#page-users #u-list .badge-penuh  .badge-dot { background: #10b981 !important; }
#page-users #u-list .badge-terhad .badge-dot { background: #f59e0b !important; }

/* ── Action buttons ────────────────────────────────── */
#page-users #u-list .u-act-edit {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  background: #fff !important; color: #4f46e5 !important;
  border: 1.5px solid #c7d2fe !important; border-radius: 8px !important;
  padding: 5px 11px !important; font-size: 12px !important; font-weight: 600 !important;
  cursor: pointer !important;
}
#page-users #u-list .u-act-edit:hover { background: #eef2ff !important; }

#page-users #u-list .u-act-del {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  background: #fff !important; color: #dc2626 !important;
  border: 1.5px solid #fecaca !important; border-radius: 8px !important;
  padding: 5px 11px !important; font-size: 12px !important; font-weight: 600 !important;
  cursor: pointer !important;
}
#page-users #u-list .u-act-del:hover { background: #fef2f2 !important; }
#page-users #u-list .u-act-del:disabled { opacity: .4 !important; cursor: not-allowed !important; }

/* ── Role info banner ──────────────────────────────── */
#page-users #u-role-info {
  padding: 10px 14px !important; border-radius: 10px !important;
  font-size: 13px !important;
  border: 1px solid rgba(109,40,217,.15) !important;
  background: rgba(109,40,217,.04) !important; color: #5b21b6 !important;
}

/* ── Responsive mobile ─────────────────────────────── */
/* ---- Inline style block #12 ---- */
/* ─────────────────────────────────────────────────────────────
   TABLET PORTRAIT + LANDSCAPE  (769px – 1024px)
   Sidebar becomes a collapsible off-canvas drawer.
   Main content fills the full viewport width.
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   TABLET PORTRAIT ONLY  (769px – 1180px, portrait)
   Narrows to single column for patient cards.
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   TABLET LANDSCAPE ONLY  (769px – 1180px, landscape)
   Sidebar drawer stays hidden; 2+ col patient cards.

/* ---- Inline style block #14 ---- */
/* ─────────────────────────────────────────────────────────────────
     DESIGN TOKENS — single source of truth for all card geometry
  ───────────────────────────────────────────────────────────────── */
  :root {
    --card-radius:    12px;           /* was 18px — more structured, less bubbly */
    --card-shadow:
      0 1px 3px rgba(0,0,0,0.06),
      0 4px 16px rgba(0,0,0,0.07);   /* unified, subtle depth */
    --card-shadow-hover:
      0 2px 6px rgba(0,0,0,0.08),
      0 10px 30px rgba(0,0,0,0.10);  /* gentle lift, no colour bleed */
    --card-border:    1px solid rgba(0,0,0,0.07);
    --card-pad:       18px 18px 16px;
  }

  /* ─────────────────────────────────────────────────────────────────
     COMPLIANCE RISK CARDS  (.prc-card / #crd-high / #crd-mod / #crd-good)
  ───────────────────────────────────────────────────────────────── */

  /* Reset base card to clean tokens */
  .prc-card {
    border-radius: var(--card-radius) !important;
    padding: var(--card-pad) !important;
    backdrop-filter: none !important;              /* remove blur — cleaner glass effect via bg only */
    -webkit-backdrop-filter: none !important;
    transition:
      transform 0.22s cubic-bezier(.22,1,.36,1),
      box-shadow 0.22s cubic-bezier(.22,1,.36,1) !important;
  }

  /* Standardize hover — no scale, only lift */
  .prc-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--card-shadow-hover) !important;
  }

  /* Remove ::before orb glow and ::after shimmer — too decorative */
  .prc-card::before,
  .prc-card::after {
    display: none !important;
  }

  /* Mute the status dot animation — professional, not distracting */
  .prc-dot {
    animation: none !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;              /* square-ish badge, not full circle */
    font-size: 12px !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* RED card — cleaner background, tighter border */
  #crd-high {
    background:
      linear-gradient(160deg,
        rgba(255,248,248,1.00) 0%,
        rgba(255,237,237,0.95) 100%) !important;
    border: 1px solid rgba(220,38,38,0.14) !important;
    box-shadow: var(--card-shadow) !important;
  }
  #crd-high:hover {
    border-color: rgba(220,38,38,0.22) !important;
    box-shadow: var(--card-shadow-hover) !important;
  }

  /* AMBER card */
  #crd-mod {
    background:
      linear-gradient(160deg,
        rgba(255,253,245,1.00) 0%,
        rgba(255,248,225,0.95) 100%) !important;
    border: 1px solid rgba(202,138,4,0.14) !important;
    box-shadow: var(--card-shadow) !important;
  }
  #crd-mod:hover {
    border-color: rgba(202,138,4,0.22) !important;
    box-shadow: var(--card-shadow-hover) !important;
  }

  /* GREEN card */
  #crd-good {
    background:
      linear-gradient(160deg,
        rgba(247,254,250,1.00) 0%,
        rgba(235,252,243,0.95) 100%) !important;
    border: 1px solid rgba(22,163,74,0.14) !important;
    box-shadow: var(--card-shadow) !important;
  }
  #crd-good:hover {
    border-color: rgba(22,163,74,0.22) !important;
    box-shadow: var(--card-shadow-hover) !important;
  }

  /* Header spacing */
  .prc-header {
    margin-bottom: 12px !important;
    align-items: flex-start !important;
  }

  /* Label — slightly smaller, better uppercase weight */
  .prc-label {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.9px !important;
    line-height: 1.4 !important;
  }

  /* Big count — tighten slightly for balance */
  .prc-count {
    font-size: 36px !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
    line-height: 1 !important;
  }

  .prc-unit {
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 0.55 !important;
  }

  .prc-count-row {
    gap: 5px !important;
    margin-bottom: 8px !important;
    align-items: baseline !important;
  }

  /* Threshold badge — simplified, no emoji, soft fill */
  .prc-threshold {
    padding: 2px 8px !important;
    border-radius: 5px !important;           /* pill → subtle rect badge */
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    margin-bottom: 12px !important;
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    color: inherit !important;
    opacity: 0.80;
  }
  /* Override per-card threshold colours (keep readable, remove heavy fills) */
  #crd-high .prc-threshold { color: #991b1b !important; }
  #crd-mod  .prc-threshold { color: #78350f !important; }
  #crd-good .prc-threshold { color: #14532d !important; }

  /* Divider — subtler */
  .prc-divider {
    background: rgba(0,0,0,0.06) !important;
    margin-bottom: 10px !important;
  }

  /* Sparkline wrap — tighter */
  .prc-sparkline-wrap {
    margin-bottom: 10px !important;
  }

  /* ── CTA Button — clean healthcare style ── */
  .prc-cta {
    padding: 7px 11px !important;
    border-radius: 7px !important;           /* tighter, more structured */
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15px !important;
    border: 1px solid transparent !important;
    transition:
      background 0.16s ease,
      border-color 0.16s ease,
      box-shadow 0.16s ease !important;
  }
  /* Override hover — no scale, just subtle fill shift */
  .prc-cta:hover {
    transform: none !important;
  }
  .prc-cta:active {
    transform: none !important;
    opacity: 0.85 !important;
  }
  .prc-cta-arrow {
    font-size: 12px !important;
    opacity: 0.7;
  }
  .prc-cta:hover .prc-cta-arrow {
    transform: translateX(2px) !important;
  }

  /* RED CTA */
  #crd-high .prc-cta {
    background: rgba(220,38,38,0.07) !important;
    color: #b91c1c !important;
    border-color: rgba(220,38,38,0.12) !important;
  }
  #crd-high .prc-cta:hover {
    background: rgba(220,38,38,0.12) !important;
    border-color: rgba(220,38,38,0.20) !important;
    box-shadow: 0 1px 6px rgba(220,38,38,0.10) !important;
  }
  /* AMBER CTA */
  #crd-mod .prc-cta {
    background: rgba(202,138,4,0.07) !important;
    color: #92400e !important;
    border-color: rgba(202,138,4,0.12) !important;
  }
  #crd-mod .prc-cta:hover {
    background: rgba(202,138,4,0.12) !important;
    border-color: rgba(202,138,4,0.20) !important;
    box-shadow: 0 1px 6px rgba(202,138,4,0.10) !important;
  }
  /* GREEN CTA */
  #crd-good .prc-cta {
    background: rgba(22,163,74,0.07) !important;
    color: #14532d !important;
    border-color: rgba(22,163,74,0.12) !important;
  }
  #crd-good .prc-cta:hover {
    background: rgba(22,163,74,0.12) !important;
    border-color: rgba(22,163,74,0.20) !important;
    box-shadow: 0 1px 6px rgba(22,163,74,0.10) !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     KPI CHIPS  (.ckpi-chip)
  ───────────────────────────────────────────────────────────────── */

  .ckpi-chip {
    border-radius: var(--card-radius) !important;   /* matches risk cards */
    padding: 13px 14px 12px !important;
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: none !important;               /* remove heavy blur */
    -webkit-backdrop-filter: none !important;
    border: var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    transition:
      transform 0.20s cubic-bezier(.22,1,.36,1),
      box-shadow 0.20s ease,
      border-color 0.20s ease !important;
  }

  /* Softer, consistent hover */
  .ckpi-chip:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--card-shadow-hover) !important;
    border-color: rgba(0,0,0,0.11) !important;
  }

  /* Remove internal overlay glow */
  .ckpi-chip::before {
    display: none !important;
  }

  /* Stripe — keep as-is (the only colour accent, tasteful) */
  .ckpi-chip .ckpi-stripe {
    height: 3px !important;
    border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
  }

  /* Icon badge — slightly tighter */
  .ckpi-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    margin-bottom: 9px !important;
  }

  /* Label — clean, readable */
  .ckpi-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    color: #9ca3af !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  /* Value — balanced size */
  .ckpi-value {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    margin-bottom: 3px !important;
    letter-spacing: -0.5px !important;
  }

  /* Special case: teal chip has string value — keep readable */
  .ckpi-chip.ckpi-teal .ckpi-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }

  /* Sub text */
  .ckpi-sub {
    font-size: 9px !important;
    color: #b0b7c3 !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }

  /* LIVE pill — keep, just slightly subdued */
  .ckpi-live-pill {
    background: rgba(34,197,94,0.08) !important;
    border: 1px solid rgba(34,197,94,0.20) !important;
    font-size: 9px !important;
    padding: 2px 6px 2px 4px !important;
    border-radius: 4px !important;           /* rect pill, consistent with badges */
  }

  /* Colour stripe gradients — keep hues but soften saturation */
  .ckpi-chip.ckpi-emerald .ckpi-stripe { background: linear-gradient(90deg,#34d399,#6ee7b7) !important; }
  .ckpi-chip.ckpi-rose    .ckpi-stripe { background: linear-gradient(90deg,#fb7185,#fda4af) !important; }
  .ckpi-chip.ckpi-indigo  .ckpi-stripe { background: linear-gradient(90deg,#818cf8,#a5b4fc) !important; }
  .ckpi-chip.ckpi-amber   .ckpi-stripe { background: linear-gradient(90deg,#fbbf24,#fcd34d) !important; }
  .ckpi-chip.ckpi-violet  .ckpi-stripe { background: linear-gradient(90deg,#a78bfa,#c4b5fd) !important; }
  .ckpi-chip.ckpi-teal    .ckpi-stripe { background: linear-gradient(90deg,#2dd4bf,#67e8f9) !important; }

  /* Icon background opacity — unified subtle */
  .ckpi-chip.ckpi-emerald .ckpi-icon { background: rgba(16,185,129,0.09) !important; }
  .ckpi-chip.ckpi-rose    .ckpi-icon { background: rgba(244,63,94,0.08) !important; }
  .ckpi-chip.ckpi-indigo  .ckpi-icon { background: rgba(99,102,241,0.09) !important; }
  .ckpi-chip.ckpi-amber   .ckpi-icon { background: rgba(245,158,11,0.09) !important; }
  .ckpi-chip.ckpi-violet  .ckpi-icon { background: rgba(124,58,237,0.09) !important; }
  .ckpi-chip.ckpi-teal    .ckpi-icon { background: rgba(20,184,166,0.09) !important; }

/* ---- Inline style block #15 ---- */
/* ── USERS PAGE REDESIGN STYLES ─────────────────────────────── */
        #page-users .hero { padding-bottom: 0; }
        #page-users .hero-inner { padding-bottom: 0; }

        /* Stat cards row — matches prm-stats-row style from Laporan */
        #page-users .u-stats-row {
          display: flex;
          gap: 0;
          padding: 24px 32px 0;
          overflow-x: auto;
          scrollbar-width: none;
        }
        #page-users .u-stats-row::-webkit-scrollbar { display: none; }

        #page-users .u-sc {
          flex: 1;
          min-width: 110px;
          padding: 18px 20px 22px;
          position: relative;
          cursor: default;
          transition: transform .2s, background .2s;
          border-right: 1px solid rgba(255,255,255,.06);
        }
        #page-users .u-sc:last-child { border-right: none; }
        #page-users .u-sc:hover { background: rgba(255,255,255,.04); }
        #page-users .u-sc::before {
          content: '';
          position: absolute;
          top: 0; left: 20px; right: 20px;
          height: 3px;
          border-radius: 0 0 4px 4px;
          opacity: 0;
          transition: opacity .2s;
        }
        #page-users .u-sc:hover::before { opacity: 1; }

        #page-users .u-sc.usc-green::before  { background: #34d399; }
        #page-users .u-sc.usc-indigo::before { background: #818cf8; }
        #page-users .u-sc.usc-amber::before  { background: #fbbf24; }
        #page-users .u-sc.usc-orange::before { background: #fb923c; }

        #page-users .u-sc-icon {
          width: 32px; height: 32px;
          border-radius: 8px;
          display: flex; align-items: center; justify-content: center;
          font-size: 15px;
          margin-bottom: 10px;
        }
        #page-users .u-sc.usc-green  .u-sc-icon { background: rgba(52,211,153,.15); }
        #page-users .u-sc.usc-indigo .u-sc-icon { background: rgba(129,140,248,.15); }
        #page-users .u-sc.usc-amber  .u-sc-icon { background: rgba(251,191,36,.15); }
        #page-users .u-sc.usc-orange .u-sc-icon { background: rgba(251,146,60,.15); }

        #page-users .u-sc-v {
          font-family: 'Sora', sans-serif;
          font-size: 28px; font-weight: 800; line-height: 1;
          display: block; margin-bottom: 5px; letter-spacing: -1px;
        }
        #page-users .u-sc.usc-green  .u-sc-v { color: #34d399; }
        #page-users .u-sc.usc-indigo .u-sc-v { color: #818cf8; }
        #page-users .u-sc.usc-amber  .u-sc-v { color: #fbbf24; }
        #page-users .u-sc.usc-orange .u-sc-v { color: #fb923c; }

        #page-users .u-sc-l {
          font-size: 10px; font-weight: 600;
          letter-spacing: .8px; text-transform: uppercase;
          color: rgba(255,255,255,.3); display: block;
        }

        /* Decorative bottom bar */
        #page-users .u-hero-bar {
          height: 3px;
          background: linear-gradient(90deg, #7c3aed 0%, #4f46e5 40%, #0ea5e9 100%);
          opacity: .35;
          margin-top: 20px;
        }

        /* Main content area */
        #page-users .main {
          background: #f3f4f8;
          padding: 28px 32px !important;
        }

        /* Form card */
        .u-card {
          background: #fff;
          border: 1px solid #e2e5ef;
          border-radius: 16px;
          box-shadow: 0 2px 12px rgba(15,7,38,.06), 0 1px 3px rgba(15,7,38,.04);
          overflow: hidden;
          margin-bottom: 20px;
        }
        .u-card-header {
          background: #f8f7fb;
          border-bottom: 1.5px solid #e8e4f2;
          padding: 14px 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .u-card-header-title {
          font-family: var(--head);
          font-size: 15px;
          font-weight: 700;
          color: #2d1b69;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .u-card-header-title .u-card-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          background: linear-gradient(135deg, #7c3aed, #4f46e5);
          flex-shrink: 0;
        }
        .u-card-body { padding: 22px 24px; }

        /* Form field labels */
        .u-field-label {
          display: block;
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: .6px;
          color: #6b7280;
          margin-bottom: 7px;
        }
        .u-field-note {
          font-weight: 400;
          text-transform: none;
          letter-spacing: 0;
          color: #9ca3af;
          font-size: 10px;
        }

        /* Role info banner */
        #u-role-info {
          padding: 10px 14px !important;
          border-radius: 10px !important;
          font-size: 13px !important;
          border: 1px solid rgba(109,40,217,.15);
          background: rgba(109,40,217,.04);
          color: #5b21b6;
        }

        /* Button styles */
        .u-btn-primary {
          display: inline-flex; align-items: center; gap: 7px;
          background: linear-gradient(135deg, #6d28d9, #4f46e5);
          color: #fff;
          border: none;
          border-radius: 10px;
          padding: 10px 20px;
          font-size: 13.5px;
          font-weight: 700;
          cursor: pointer;
          letter-spacing: .2px;
          transition: opacity .18s, transform .12s, box-shadow .18s;
          box-shadow: 0 2px 8px rgba(109,40,217,.28);
        }
        .u-btn-primary:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(109,40,217,.35); }
        .u-btn-primary:active { transform: translateY(0); }

        .u-btn-secondary {
          display: inline-flex; align-items: center; gap: 6px;
          background: #fff;
          color: #4b5563;
          border: 1.5px solid #d1d5db;
          border-radius: 10px;
          padding: 10px 16px;
          font-size: 13.5px;
          font-weight: 600;
          cursor: pointer;
          transition: background .15s, border-color .15s;
        }
        .u-btn-secondary:hover { background: #f9fafb; border-color: #9ca3af; }

        .u-btn-cancel {
          display: inline-flex; align-items: center; gap: 6px;
          background: #fff;
          color: #7c3aed;
          border: 1.5px solid #c4b5fd;
          border-radius: 10px;
          padding: 8px 14px;
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          transition: background .15s;
        }
        .u-btn-cancel:hover { background: #faf5ff; }

        /* User list card */
        .u-list-card {
          background: #fff;
          border: 1px solid #e2e5ef;
          border-radius: 16px;
          box-shadow: 0 2px 12px rgba(15,7,38,.06), 0 1px 3px rgba(15,7,38,.04);
          overflow: hidden;
        }
        .u-list-header {
          background: #f8f7fb;
          border-bottom: 1.5px solid #e8e4f2;
          padding: 11px 20px;
          display: grid;
          grid-template-columns: 1fr 150px 160px 130px;
          gap: 8px;
          align-items: center;
        }
        .u-col-label {
          font-size: 10px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: .7px;
          color: #9181b0;
        }
        .u-col-label.centered { text-align: center; }

        /* User row */
        .u-user-row {
          display: grid;
          grid-template-columns: 1fr 150px 160px 130px;
          gap: 8px;
          padding: 14px 20px;
          border-bottom: 1px solid #f0eef8;
          align-items: center;
          transition: background .15s;
        }
        .u-user-row:last-child { border-bottom: none; }
        .u-user-row:hover { background: #faf9fd; }
        .u-user-row.is-self { background: rgba(109,40,217,.03); }
        .u-user-row.is-self:hover { background: rgba(109,40,217,.05); }

        .u-user-name {
          font-size: 14px;
          font-weight: 700;
          color: #1f1235;
          line-height: 1.3;
        }
        .u-user-id {
          font-family: var(--mono);
          font-size: 12px;
          color: #9181b0;
          margin-top: 2px;
        }
        .u-self-tag {
          display: inline-block;
          font-size: 10px;
          font-weight: 700;
          color: #059669;
          background: #d1fae5;
          border: 1px solid #a7f3d0;
          border-radius: 20px;
          padding: 1px 7px;
          margin-left: 6px;
          vertical-align: middle;
          letter-spacing: .3px;
        }
        .u-role-text {
          font-size: 13px;
          color: #4b5563;
          font-weight: 500;
        }

        /* Access badge pills */
        .u-badge {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: .3px;
        }
        .u-badge.badge-penuh {
          background: #d1fae5;
          color: #065f46;
          border: 1px solid #a7f3d0;
        }
        .u-badge.badge-terhad {
          background: #fef3c7;
          color: #92400e;
          border: 1px solid #fde68a;
        }
        .u-badge .badge-dot {
          width: 6px; height: 6px;
          border-radius: 50%;
          flex-shrink: 0;
        }
        .badge-penuh .badge-dot  { background: #10b981; }
        .badge-terhad .badge-dot { background: #f59e0b; }

        /* Action buttons in list */
        .u-act-edit {
          display: inline-flex; align-items: center; gap: 4px;
          background: #fff;
          color: #4f46e5;
          border: 1.5px solid #c7d2fe;
          border-radius: 8px;
          padding: 5px 11px;
          font-size: 12px;
          font-weight: 600;
          cursor: pointer;
          transition: background .14s, border-color .14s;
        }
        .u-act-edit:hover { background: #eef2ff; border-color: #818cf8; }

        .u-act-del {
          display: inline-flex; align-items: center; gap: 4px;
          background: #fff;
          color: #dc2626;
          border: 1.5px solid #fecaca;
          border-radius: 8px;
          padding: 5px 11px;
          font-size: 12px;
          font-weight: 600;
          cursor: pointer;
          transition: background .14s, border-color .14s;
        }
        .u-act-del:hover { background: #fef2f2; border-color: #f87171; }
        .u-act-del:disabled { opacity: .4; cursor: not-allowed; }

        /* Pending panel */
        #pending-panel .u-card-header {
          background: #fffbeb;
          border-bottom: 1.5px solid #fde68a;
        }
        #pending-panel .u-card-header-title {
          color: #92400e;
        }
        #pending-panel .u-card-dot {
          background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        }

        /* Responsive */
        /* ---- Inline style block #16 ---- */
/* ═══ TREND KEHADIRAN — Premium Healthcare Analytics ═══ */
              #trend-kehadiran-section {
                position: relative;
                overflow: hidden;
                border-radius: 16px;
                border: 1px solid rgba(124,58,237,0.13);
                background: linear-gradient(145deg,
                  rgba(250,248,255,0.97) 0%,
                  rgba(243,240,255,0.94) 40%,
                  rgba(237,233,254,0.90) 100%);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                box-shadow:
                  0 0 0 1px rgba(255,255,255,0.55) inset,
                  0 1px 0 rgba(255,255,255,0.75) inset,
                  0 4px 16px rgba(124,58,237,0.07),
                  0 16px 48px rgba(124,58,237,0.09),
                  0 32px 64px rgba(0,0,0,0.05);
                margin-bottom: 24px;
                animation: tkFadeUp 0.55s cubic-bezier(.22,1,.36,1) both;
              }
              @keyframes tkFadeUp {
                from { opacity:0; transform:translateY(10px); }
                to   { opacity:1; transform:translateY(0); }
              }
              #trend-kehadiran-section::after {
                content: '';
                position: absolute;
                bottom: 0; left: 0; right: 0;
                height: 2px;
                background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,0.30) 30%, rgba(167,139,250,0.45) 50%, rgba(124,58,237,0.30) 70%, transparent 100%);
                pointer-events: none; z-index: 1;
              }

              /* ── Header ── */
              #tk-header {
                position: relative; z-index: 2;
                padding: 16px 20px 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 10px;
                border-bottom: 1px solid rgba(124,58,237,0.08);
              }
              #tk-header-left { display: flex; align-items: center; gap: 10px; }
              #tk-icon-wrap {
                width: 34px; height: 34px;
                border-radius: 9px;
                background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
                box-shadow: 0 3px 10px rgba(124,58,237,0.30);
                display: flex; align-items: center; justify-content: center; flex-shrink: 0;
              }
              #tk-title-group { display: flex; flex-direction: column; gap: 1px; }
              #tk-title {
                font-size: 13px; font-weight: 800; color: var(--ink);
                letter-spacing: -0.2px; display: flex; align-items: center; gap: 7px;
              }
              #tk-subtitle { font-size: 10px; color: var(--ink3); font-weight: 500; }
              .tk-live-dot {
                width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
                animation: tkPulse 2.4s ease-in-out infinite; flex-shrink: 0;
              }
              .tk-live-label {
                font-size: 9px; font-weight: 700; color: #16a34a;
                background: rgba(220,252,231,0.75); border: 1px solid #bbf7d0;
                border-radius: 20px; padding: 2px 7px; letter-spacing: 0.3px;
              }
              @keyframes tkPulse {
                0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
                50%     { box-shadow: 0 0 0 4px rgba(34,197,94,0.00); }
              }
              #tk-header-right { display: flex; align-items: center; gap: 12px; }
              #tk-avg-badge { display: flex; flex-direction: column; align-items: flex-end; }
              #tk-avg-label { font-size: 9px; color: var(--ink3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
              #tk-avg-value { font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -1px; }

              /* ── Period toggle buttons ── */
              #tk-period-toggle {
                display: flex; align-items: center;
                background: rgba(124,58,237,0.07);
                border: 1px solid rgba(124,58,237,0.12);
                border-radius: 8px;
                padding: 3px;
                gap: 2px;
              }
              .tk-period-btn {
                font-size: 10px; font-weight: 700;
                color: var(--ink3);
                background: transparent;
                border: none; border-radius: 6px;
                padding: 5px 10px;
                cursor: pointer;
                transition: background 0.18s, color 0.18s, box-shadow 0.18s;
                white-space: nowrap;
                letter-spacing: 0.1px;
              }
              .tk-period-btn:hover { color: var(--ink2); background: rgba(124,58,237,0.08); }
              .tk-period-btn.active {
                background: #ffffff;
                color: #7c3aed;
                box-shadow: 0 1px 4px rgba(124,58,237,0.18), 0 1px 2px rgba(0,0,0,0.06);
              }

              /* Hidden select kept for JS compatibility */
              #trend-days-select { display: none !important; }

              /* ── KPI Strip ── */
              #tk-kpi-strip {
                position: relative; z-index: 2;
                display: flex; gap: 0;
                padding: 10px 20px;
                border-bottom: 1px solid rgba(124,58,237,0.07);
              }
              .tk-kpi {
                flex: 1; display: flex; flex-direction: column; gap: 2px;
                padding: 7px 12px; border-radius: 9px;
                transition: background 0.18s; cursor: default;
              }
              .tk-kpi:hover { background: rgba(124,58,237,0.05); }
              .tk-kpi + .tk-kpi { border-left: 1px solid rgba(124,58,237,0.08); }
              .tk-kpi-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ink3); font-weight: 600; }
              .tk-kpi-value { font-size: 17px; font-weight: 900; color: var(--ink); letter-spacing: -0.5px; line-height: 1.15; }
              .tk-kpi-sub   { font-size: 9px; color: var(--ink3); font-weight: 500; }
              .tk-kpi-delta {
                display: inline-flex; align-items: center; gap: 3px;
                font-size: 10px; font-weight: 700; border-radius: 5px;
                padding: 1px 6px; margin-top: 2px; width: fit-content;
              }
              .tk-delta-up   { color:#16a34a; background:rgba(220,252,231,0.65); }
              .tk-delta-down { color:#dc2626; background:rgba(254,226,226,0.65); }
              .tk-delta-flat { color:#7c6e9a; background:rgba(237,233,254,0.45); }

              /* ── Chart body ── */
              #tk-chart-body { position: relative; z-index: 2; padding: 18px 20px 14px; }
              #tk-chart-wrap { position: relative; width: 100%; height: 240px; }
              @media (min-width: 768px)  { #tk-chart-wrap { height: 300px; } }
              @media (min-width: 1200px) { #tk-chart-wrap { height: 320px; } }

              /* Custom tooltip */
              #tk-custom-tooltip {
                position: absolute; pointer-events: none; z-index: 100;
                opacity: 0; transform: translateY(4px);
                transition: opacity 0.18s ease, transform 0.18s ease;
                min-width: 158px;
              }
              #tk-custom-tooltip.visible { opacity: 1; transform: translateY(0); }
              #tk-tooltip-inner {
                background: linear-gradient(145deg, rgba(26,9,56,0.97) 0%, rgba(45,20,90,0.97) 100%);
                border: 1px solid rgba(167,139,250,0.28);
                border-radius: 11px; padding: 11px 13px;
                box-shadow: 0 8px 28px rgba(0,0,0,0.28), 0 2px 6px rgba(124,58,237,0.18);
              }
              .tk-tt-date {
                font-size: 10px; font-weight: 700; color: rgba(167,139,250,0.88);
                text-transform: uppercase; letter-spacing: 0.5px;
                border-bottom: 1px solid rgba(167,139,250,0.12);
                padding-bottom: 6px; margin-bottom: 7px;
              }
              .tk-tt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
              .tk-tt-row:last-child { margin-bottom: 0; }
              .tk-tt-key { font-size: 9px; color: rgba(255,255,255,0.45); font-weight: 500; }
              .tk-tt-val { font-size: 11px; color: #fff; font-weight: 800; }
              .tk-tt-delta-pos { color: #4ade80; }
              .tk-tt-delta-neg { color: #f87171; }

              /* ── Footer ── */
              #tk-footer {
                position: relative; z-index: 2;
                padding: 9px 20px;
                display: flex; align-items: center; justify-content: space-between;
                flex-wrap: wrap; gap: 6px;
                border-top: 1px solid rgba(124,58,237,0.07);
              }
              #tk-footer-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
              .tk-legend-item { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--ink3); font-weight: 600; }
              .tk-legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
              #tk-timestamp   { font-size: 9px; color: var(--ink3); opacity: 0.65; }

              /* Mobile */
              /* ---- Inline style block #17 ---- */
/* ─────────────────────────────────────────────────────────────
                 HIERARCHY: chart → summary pills/bar → KPI chips → risk cards
              ───────────────────────────────────────────────────────────── */

              /* 1. compliance-trend-strip: elevated as chart hero */
              #compliance-trend-strip {
                border-radius: 13px !important;
                border: 1px solid rgba(124,58,237,0.12) !important;
                background: linear-gradient(150deg,
                  rgba(248,246,255,0.92) 0%,
                  rgba(243,240,255,0.86) 100%) !important;
                box-shadow:
                  0 1px 0 rgba(255,255,255,0.72) inset,
                  0 2px 10px rgba(109,40,217,0.07),
                  0 8px 28px rgba(109,40,217,0.09) !important;
                padding: 16px 18px 14px !important;
                margin-bottom: 16px !important;
              }

              /* 2. Risk cards: slightly softer, clearly secondary */
              #compliance-risk-cards {
                gap: 10px !important;
                opacity: 0.94;
              }
              .prc-card {
                border-radius: 13px !important;
                padding: 15px 15px 13px !important;
              }
              .prc-count { font-size: 34px !important; }
              .prc-header { margin-bottom: 8px !important; }

              /* 3. KPI row: compact secondary status row */
              #compliance-kpi-row {
                margin-top: 10px !important;
                gap: 7px !important;
              }
              .ckpi-chip {
                padding: 9px 11px 10px !important;
                border-radius: 11px !important;
              }
              .ckpi-value { font-size: 16px !important; }
              .ckpi-icon  {
                width: 24px !important; height: 24px !important;
                font-size: 12px !important; margin-bottom: 5px !important;
              }

              /* 4. Gauge: compact, clearly supporting role beside chart */
              .cts-gauge-card {
                min-width: 110px !important;
                padding: 10px 14px 8px !important;
              }
              .cts-gauge-svg-wrap,
              .cts-gauge-svg-wrap svg {
                width: 78px !important; height: 78px !important;
              }
              .cts-gauge-pct { font-size: 17px !important; }

              /* 5. Pills: horizontal, compact */
              .cts-pills-row {
                gap: 7px !important;
                margin-bottom: 12px !important;
              }
              .cts-pill {
                padding: 7px 11px !important;
                border-radius: 8px !important;
              }
              .cts-pill-count { font-size: 12px !important; }

              /* 6. Health bar: thinner, secondary */
              .cts-health-track { height: 9px !important; }
              .cts-bar-section  { margin-top: 2px !important; }

              /* 7. Body padding consistent */
              #compliance-dashboard > div:nth-child(2) {
                padding: 14px 16px 16px !important;
              }

              /* 8. Overall outer card: lean border */
              #compliance-dashboard {
                border: 1px solid rgba(200,192,228,0.50) !important;
                border-radius: 14px !important;
                box-shadow:
                  0 1px 3px rgba(0,0,0,0.04),
                  0 4px 16px rgba(109,40,217,0.055) !important;
              }

/* ---- Inline style block #18 ---- */
/* ── Panel base ── */
                  #compliance-trend-strip {
                    position: relative;
                    overflow: hidden;
                    border-radius: 14px !important;
                    border: 1px solid rgba(124,58,237,0.18) !important;
                    background: linear-gradient(135deg,rgba(245,243,255,0.92) 0%,rgba(237,233,254,0.80) 50%,rgba(221,214,254,0.70) 100%) !important;
                    backdrop-filter: blur(12px);
                    -webkit-backdrop-filter: blur(12px);
                    box-shadow:
                      0 2px 8px rgba(124,58,237,0.08),
                      0 8px 28px rgba(124,58,237,0.10),
                      inset 0 1px 0 rgba(255,255,255,0.75),
                      inset 0 -1px 0 rgba(124,58,237,0.06) !important;
                    padding: 16px 18px 18px !important;
                    margin-bottom: 16px !important;
                    animation: trendFadeIn 0.55s cubic-bezier(.22,1,.36,1) both;
                  }
                  /* floating light orb top-right */
                  #compliance-trend-strip::before {
                    content: '';
                    position: absolute;
                    top: -28px; right: -28px;
                    width: 110px; height: 110px;
                    background: radial-gradient(circle,rgba(167,139,250,0.28) 0%,transparent 70%);
                    pointer-events: none;
                    border-radius: 50%;
                  }
                  /* subtle bottom shimmer */
                  #compliance-trend-strip::after {
                    content: '';
                    position: absolute;
                    bottom: 0; left: 0; right: 0;
                    height: 2px;
                    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.35), transparent);
                    pointer-events: none;
                  }
                  @keyframes trendFadeIn {
                    from { opacity:0; transform:translateY(8px); }
                    to   { opacity:1; transform:translateY(0);   }
                  }

                  /* ── Panel header row ── */
                  .cts-header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 14px;
                    flex-wrap: wrap;
                    gap: 8px;
                  }
                  .cts-title-group {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                  }
                  .cts-title-text {
                    font-size: 10px;
                    font-weight: 800;
                    color: var(--ink2);
                    text-transform: uppercase;
                    letter-spacing: 0.7px;
                  }
                  /* pulsing live dot */
                  .cts-live-dot {
                    width: 7px; height: 7px;
                    border-radius: 50%;
                    background: #22c55e;
                    box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
                    animation: ctsPulse 2s ease-in-out infinite;
                    flex-shrink: 0;
                  }
                  @keyframes ctsPulse {
                    0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.50); }
                    50%     { box-shadow: 0 0 0 5px rgba(34,197,94,0.00); }
                  }
                  .cts-live-label {
                    font-size: 9px;
                    font-weight: 700;
                    color: #16a34a;
                    background: rgba(220,252,231,0.75);
                    border: 1px solid #bbf7d0;
                    border-radius: 20px;
                    padding: 1px 7px;
                    letter-spacing: 0.3px;
                  }
                  /* avg percentage badge top-right */
                  .cts-avg-badge {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    gap: 1px;
                  }
                  .cts-avg-label {
                    font-size: 9px;
                    color: var(--ink3);
                    text-transform: uppercase;
                    letter-spacing: 0.4px;
                    font-weight: 600;
                  }
                  .cts-avg-value {
                    font-size: 22px;
                    font-weight: 900;
                    color: var(--ink);
                    line-height: 1;
                    letter-spacing: -0.5px;
                  }

                  /* ── Category stat pills ── */
                  .cts-pills-row {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;
                    margin-bottom: 14px;
                  }
                  .cts-pill {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    border-radius: 10px;
                    padding: 8px 14px;
                    flex: 1;
                    min-width: 90px;
                    position: relative;
                    overflow: hidden;
                    transition: transform 0.18s ease, box-shadow 0.18s ease;
                    cursor: default;
                  }
                  .cts-pill:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
                  }
                  .cts-pill-high {
                    background: linear-gradient(135deg,#fff1f2 0%,#ffe4e6 100%);
                    border: 1px solid #fecaca;
                    box-shadow: 0 2px 8px rgba(239,68,68,0.10);
                  }
                  .cts-pill-mod {
                    background: linear-gradient(135deg,#fffbeb 0%,#fef9c3 100%);
                    border: 1px solid #fde68a;
                    box-shadow: 0 2px 8px rgba(234,179,8,0.10);
                  }
                  .cts-pill-good {
                    background: linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);
                    border: 1px solid #bbf7d0;
                    box-shadow: 0 2px 8px rgba(34,197,94,0.10);
                  }
                  /* left accent line */
                  .cts-pill::before {
                    content: '';
                    position: absolute;
                    left: 0; top: 0; bottom: 0;
                    width: 3px;
                    border-radius: 10px 0 0 10px;
                  }
                  .cts-pill-high::before  { background: linear-gradient(180deg,#f87171,#dc2626); }
                  .cts-pill-mod::before   { background: linear-gradient(180deg,#fbbf24,#ca8a04); }
                  .cts-pill-good::before  { background: linear-gradient(180deg,#4ade80,#16a34a); }

                  .cts-pill-icon { font-size: 16px; flex-shrink: 0; }
                  .cts-pill-info { display: flex; flex-direction: column; gap: 1px; }
                  .cts-pill-count {
                    font-size: 14px;
                    font-weight: 800;
                    line-height: 1.1;
                  }
                  .cts-pill-high  .cts-pill-count { color: #dc2626; }
                  .cts-pill-mod   .cts-pill-count { color: #ca8a04; }
                  .cts-pill-good  .cts-pill-count { color: #16a34a; }
                  .cts-pill-name {
                    font-size: 9px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 0.4px;
                    opacity: 0.75;
                  }
                  .cts-pill-high  .cts-pill-name { color: #991b1b; }
                  .cts-pill-mod   .cts-pill-name { color: #854d0e; }
                  .cts-pill-good  .cts-pill-name { color: #166534; }

                  /* ── Segmented Compliance Health Bar ── */
                  .cts-bar-section { margin-top: 4px; }
                  .cts-bar-meta {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 6px;
                  }
                  .cts-bar-label {
                    font-size: 9px;
                    font-weight: 700;
                    color: var(--ink3);
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                  }
                  .cts-bar-legend {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                  }
                  .cts-bar-leg-item {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    font-size: 9px;
                    color: var(--ink3);
                    font-weight: 600;
                  }
                  .cts-bar-leg-dot {
                    width: 7px; height: 7px;
                    border-radius: 50%;
                    flex-shrink: 0;
                  }

                  /* outer track */
                  .cts-health-track {
                    height: 12px;
                    background: rgba(200,190,230,0.30);
                    border-radius: 20px;
                    overflow: hidden;
                    position: relative;
                    box-shadow: inset 0 1px 3px rgba(0,0,0,0.10);
                  }
                  /* segmented fill wrapper — flex row inside the track */
                  .cts-health-fill-row {
                    display: flex;
                    height: 100%;
                    width: 100%;
                    border-radius: 20px;
                    overflow: hidden;
                  }
                  /* individual segment */
                  .cts-seg {
                    height: 100%;
                    transition: width 1.0s cubic-bezier(.22,1,.36,1);
                    position: relative;
                    overflow: hidden;
                  }
                  .cts-seg::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(180deg,rgba(255,255,255,0.35) 0%,transparent 60%);
                    pointer-events: none;
                  }
                  .cts-seg-high {
                    background: linear-gradient(90deg, #f87171, #ef4444);
                    box-shadow: inset 0 0 6px rgba(239,68,68,0.30);
                  }
                  .cts-seg-mod {
                    background: linear-gradient(90deg, #fbbf24, #eab308);
                    box-shadow: inset 0 0 6px rgba(234,179,8,0.30);
                  }
                  .cts-seg-good {
                    background: linear-gradient(90deg, #4ade80, #22c55e);
                    box-shadow: inset 0 0 6px rgba(34,197,94,0.30), 0 0 8px rgba(34,197,94,0.20);
                  }
                  /* glowing tip on the rightmost (good) segment */
                  .cts-seg-good-glow {
                    position: absolute;
                    right: -4px; top: 50%;
                    transform: translateY(-50%);
                    width: 18px; height: 18px;
                    border-radius: 50%;
                    background: radial-gradient(circle,rgba(74,222,128,0.60),transparent 70%);
                    pointer-events: none;
                  }

                  /* gap dividers between segments */
                  .cts-seg-gap {
                    width: 2px;
                    height: 100%;
                    background: rgba(255,255,255,0.60);
                    flex-shrink: 0;
                  }

                  /* percentage label below bar */
                  .cts-bar-pcts {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 5px;
                  }
                  .cts-bar-pct-item {
                    display: flex;
                    align-items: center;
                    gap: 3px;
                    font-size: 9px;
                    font-weight: 700;
                  }
                  .cts-bar-pct-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0; }
                  .cts-bar-pct-high-dot { background:#ef4444; }
                  .cts-bar-pct-mod-dot  { background:#eab308; }
                  .cts-bar-pct-good-dot { background:#22c55e; }
                  .cts-bar-pct-high-txt { color:#dc2626; }
                  .cts-bar-pct-mod-txt  { color:#ca8a04; }
                  .cts-bar-pct-good-txt { color:#16a34a; }
                  .cts-bar-pct-right { margin-left: auto; font-size:9px;color:var(--ink3);font-weight:600; }

/* ---- Inline style block #19 ---- */
/* ── Gauge wrapper card ── */
                    .cts-gauge-card {
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      gap: 0;
                      position: relative;
                      padding: 14px 20px 10px;
                      border-radius: 16px;
                      background: linear-gradient(145deg,
                        rgba(255,255,255,0.85) 0%,
                        rgba(240,235,255,0.75) 50%,
                        rgba(221,214,254,0.65) 100%);
                      border: 1px solid rgba(139,92,246,0.20);
                      backdrop-filter: blur(14px);
                      -webkit-backdrop-filter: blur(14px);
                      box-shadow:
                        0 2px 8px rgba(109,40,217,0.10),
                        0 8px 24px rgba(109,40,217,0.12),
                        inset 0 1px 0 rgba(255,255,255,0.90),
                        inset 0 -1px 0 rgba(139,92,246,0.08);
                      min-width: 128px;
                      animation: gaugeCardIn 0.6s cubic-bezier(.22,1,.36,1) both;
                    }
                    @keyframes gaugeCardIn {
                      from { opacity:0; transform:scale(0.88) translateY(6px); }
                      to   { opacity:1; transform:scale(1)    translateY(0);   }
                    }

                    /* subtle corner orb */
                    .cts-gauge-card::before {
                      content: '';
                      position: absolute;
                      top: -18px; right: -18px;
                      width: 70px; height: 70px;
                      border-radius: 50%;
                      background: radial-gradient(circle, rgba(167,139,250,0.32) 0%, transparent 70%);
                      pointer-events: none;
                    }

                    /* ── SVG ring container ── */
                    .cts-gauge-svg-wrap {
                      position: relative;
                      width: 90px;
                      height: 90px;
                      flex-shrink: 0;
                    }
                    .cts-gauge-svg-wrap svg {
                      width: 90px;
                      height: 90px;
                      transform: rotate(-90deg);
                      overflow: visible;
                    }

                    /* track ring */
                    .cts-gauge-track {
                      fill: none;
                      stroke: rgba(167,139,250,0.18);
                      stroke-width: 8;
                      stroke-linecap: round;
                    }

                    /* animated progress ring */
                    .cts-gauge-ring {
                      fill: none;
                      stroke-width: 8;
                      stroke-linecap: round;
                      stroke: url(#gaugeGradient);
                      stroke-dasharray: 220;
                      stroke-dashoffset: 220;
                      transition: stroke-dashoffset 1.35s cubic-bezier(.22,1,.36,1);
                      filter: drop-shadow(0 0 5px rgba(74,222,128,0.55));
                    }

                    /* ── Centered text overlay ── */
                    .cts-gauge-center {
                      position: absolute;
                      inset: 0;
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-content: center;
                      gap: 0;
                      pointer-events: none;
                    }
                    .cts-gauge-pct {
                      font-size: 20px;
                      font-weight: 900;
                      letter-spacing: -0.8px;
                      line-height: 1;
                      background: linear-gradient(135deg, #16a34a 0%, #22c55e 60%, #4ade80 100%);
                      -webkit-background-clip: text;
                      -webkit-text-fill-color: transparent;
                      background-clip: text;
                      transition: color 0.4s;
                    }
                    .cts-gauge-pct.warn {
                      background: linear-gradient(135deg, #ca8a04 0%, #fbbf24 100%);
                      -webkit-background-clip: text;
                      background-clip: text;
                    }
                    .cts-gauge-pct.alert {
                      background: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
                      -webkit-background-clip: text;
                      background-clip: text;
                    }
                    .cts-gauge-micro {
                      font-size: 7.5px;
                      font-weight: 700;
                      letter-spacing: 0.6px;
                      text-transform: uppercase;
                      color: rgba(109,40,217,0.50);
                      margin-top: 1px;
                    }

                    /* ── Label below ring ── */
                    .cts-gauge-label-main {
                      font-size: 9.5px;
                      font-weight: 800;
                      text-transform: uppercase;
                      letter-spacing: 0.7px;
                      color: rgba(55,35,95,0.60);
                      text-align: center;
                      margin-top: 6px;
                      line-height: 1.2;
                    }

                    /* ── Status pill below label ── */
                    .cts-gauge-status {
                      display: inline-flex;
                      align-items: center;
                      gap: 4px;
                      margin-top: 5px;
                      padding: 2px 9px;
                      border-radius: 20px;
                      font-size: 8.5px;
                      font-weight: 700;
                      letter-spacing: 0.3px;
                      background: rgba(220,252,231,0.85);
                      color: #15803d;
                      border: 1px solid rgba(187,247,208,0.90);
                      transition: background 0.4s, color 0.4s;
                      white-space: nowrap;
                    }
                    .cts-gauge-status.warn {
                      background: rgba(254,243,199,0.90);
                      color: #854d0e;
                      border-color: rgba(253,230,138,0.90);
                    }
                    .cts-gauge-status.alert {
                      background: rgba(254,226,226,0.90);
                      color: #991b1b;
                      border-color: rgba(254,202,202,0.90);
                    }
                    /* pulsing dot inside status pill */
                    .cts-gauge-dot {
                      width: 5px; height: 5px;
                      border-radius: 50%;
                      background: currentColor;
                      opacity: 0.8;
                      animation: gaugeDotPulse 2.2s ease-in-out infinite;
                    }
                    @keyframes gaugeDotPulse {
                      0%,100% { transform: scale(1);   opacity:0.80; }
                      50%     { transform: scale(1.55); opacity:0.40; }
                    }

                    /* ── Glow pulse on the whole card — when good ── */
                    @keyframes gaugeGlowGood {
                      0%,100% { box-shadow: 0 2px 8px rgba(34,197,94,0.12), 0 8px 24px rgba(34,197,94,0.14), inset 0 1px 0 rgba(255,255,255,0.90); }
                      50%     { box-shadow: 0 2px 8px rgba(34,197,94,0.22), 0 10px 32px rgba(34,197,94,0.22), inset 0 1px 0 rgba(255,255,255,0.90); }
                    }
                    .cts-gauge-card.good-glow {
                      animation: gaugeCardIn 0.6s cubic-bezier(.22,1,.36,1) both,
                                 gaugeGlowGood 3.5s ease-in-out 0.8s infinite;
                    }

/* ---- Inline style block #20 ---- */
/* Chart hero container */
                    #cts-chart-hero {
                      position: relative;
                      margin: 14px 0 18px;
                      border-radius: 10px;
                      overflow: hidden;
                      background: rgba(255,255,255,0.55);
                      border: 1px solid rgba(124,58,237,0.08);
                      padding: 4px 2px 2px;
                    }
                    #cts-chart-canvas-wrap {
                      position: relative;
                      width: 100%;
                      height: 200px;
                    }
                    @media (min-width: 600px) {
                      #cts-chart-canvas-wrap { height: 230px; }
                    }
                    @media (min-width: 900px) {
                      #cts-chart-canvas-wrap { height: 250px; }
                    }

                    /* Axis label row */
                    #cts-chart-meta {
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      padding: 8px 10px 6px;
                      border-top: 1px solid rgba(124,58,237,0.06);
                    }
                    .cts-chart-legend {
                      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                    }
                    .cts-chart-leg-item {
                      display: flex; align-items: center; gap: 5px;
                      font-size: 9px; color: rgba(61,42,107,0.55); font-weight: 600;
                    }
                    .cts-chart-leg-dot {
                      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
                    }
                    #cts-chart-period {
                      font-size: 9px; color: rgba(61,42,107,0.40); font-weight: 500;
                    }

                    /* Custom tooltip */
                    #cts-chart-tooltip {
                      position: absolute;
                      pointer-events: none;
                      z-index: 50;
                      opacity: 0;
                      transform: translateY(4px);
                      transition: opacity 0.16s ease, transform 0.16s ease;
                      min-width: 148px;
                    }
                    #cts-chart-tooltip.visible {
                      opacity: 1; transform: translateY(0);
                    }
                    #cts-tooltip-box {
                      background: linear-gradient(145deg, rgba(22,10,50,0.96) 0%, rgba(40,18,80,0.96) 100%);
                      border: 1px solid rgba(167,139,250,0.25);
                      border-radius: 10px;
                      padding: 10px 12px;
                      box-shadow: 0 6px 24px rgba(0,0,0,0.25), 0 2px 6px rgba(109,40,217,0.18);
                    }
                    .cts-tt-date  { font-size: 9px; font-weight: 700; color: rgba(167,139,250,0.85); text-transform: uppercase; letter-spacing: 0.4px; padding-bottom: 5px; margin-bottom: 6px; border-bottom: 1px solid rgba(167,139,250,0.12); }
                    .cts-tt-row   { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 3px; }
                    .cts-tt-row:last-child { margin-bottom: 0; }
                    .cts-tt-key   { font-size: 9px; color: rgba(255,255,255,0.45); font-weight: 500; }
                    .cts-tt-val   { font-size: 11px; color: #fff; font-weight: 800; }
                    .cts-tt-good  { color: #4ade80; }
                    .cts-tt-warn  { color: #fbbf24; }
                    .cts-tt-alert { color: #f87171; }
                    .cts-tt-delta-pos { color: #4ade80; }
                    .cts-tt-delta-neg { color: #f87171; }

/* ---- Inline style block #21 ---- */
/* ── Card grid ── */
                  #compliance-risk-cards {
                    display: grid;
                    grid-template-columns: repeat(3,1fr);
                    gap: 14px;
                  }

                  /* ── Base card ── */
                  .prc-card {
                    position: relative;
                    border-radius: 18px;
                    padding: 18px 18px 16px;
                    cursor: pointer;
                    overflow: hidden;
                    backdrop-filter: blur(14px);
                    -webkit-backdrop-filter: blur(14px);
                    transition:
                      transform 0.28s cubic-bezier(.22,1,.36,1),
                      box-shadow 0.28s cubic-bezier(.22,1,.36,1);
                    animation: prcFadeUp 0.45s cubic-bezier(.22,1,.36,1) both;
                  }
                  .prc-card:hover {
                    transform: translateY(-5px) scale(1.015);
                  }
                  /* stagger fade-in */
                  .prc-card:nth-child(1) { animation-delay: 0.05s; }
                  .prc-card:nth-child(2) { animation-delay: 0.12s; }
                  .prc-card:nth-child(3) { animation-delay: 0.20s; }
                  @keyframes prcFadeUp {
                    from { opacity:0; transform:translateY(14px); }
                    to   { opacity:1; transform:translateY(0); }
                  }

                  /* ── Light orb (top-right glow) ── */
                  .prc-card::before {
                    content: '';
                    position: absolute;
                    top: -30px; right: -30px;
                    width: 100px; height: 100px;
                    border-radius: 50%;
                    pointer-events: none;
                    transition: opacity 0.3s;
                  }
                  /* ── Bottom shimmer line ── */
                  .prc-card::after {
                    content: '';
                    position: absolute;
                    bottom: 0; left: 10%; right: 10%;
                    height: 2px;
                    border-radius: 2px;
                    pointer-events: none;
                    opacity: 0.6;
                  }

                  /* ── RED — Risiko Tinggi ── */
                  #crd-high {
                    background: linear-gradient(145deg,rgba(255,241,242,0.97) 0%,rgba(254,226,226,0.85) 60%,rgba(252,165,165,0.30) 100%);
                    border: 1px solid rgba(252,165,165,0.55);
                    box-shadow:
                      0 1px 0 rgba(255,255,255,0.80) inset,
                      0 4px 14px rgba(220,38,38,0.10),
                      0 12px 32px rgba(220,38,38,0.10);
                  }
                  #crd-high::before { background: radial-gradient(circle,rgba(248,113,113,0.30) 0%,transparent 70%); }
                  #crd-high::after  { background: linear-gradient(90deg,transparent,rgba(220,38,38,0.45),transparent); }
                  #crd-high:hover   {
                    box-shadow:
                      0 1px 0 rgba(255,255,255,0.90) inset,
                      0 8px 24px rgba(220,38,38,0.18),
                      0 20px 48px rgba(220,38,38,0.14),
                      0 0 0 3px rgba(252,165,165,0.35);
                  }

                  /* ── YELLOW — Sederhana ── */
                  #crd-mod {
                    background: linear-gradient(145deg,rgba(255,253,235,0.97) 0%,rgba(254,249,195,0.85) 60%,rgba(253,224,71,0.22) 100%);
                    border: 1px solid rgba(253,224,71,0.55);
                    box-shadow:
                      0 1px 0 rgba(255,255,255,0.80) inset,
                      0 4px 14px rgba(202,138,4,0.10),
                      0 12px 32px rgba(202,138,4,0.10);
                  }
                  #crd-mod::before { background: radial-gradient(circle,rgba(251,191,36,0.28) 0%,transparent 70%); }
                  #crd-mod::after  { background: linear-gradient(90deg,transparent,rgba(202,138,4,0.45),transparent); }
                  #crd-mod:hover   {
                    box-shadow:
                      0 1px 0 rgba(255,255,255,0.90) inset,
                      0 8px 24px rgba(202,138,4,0.18),
                      0 20px 48px rgba(202,138,4,0.14),
                      0 0 0 3px rgba(253,224,71,0.35);
                  }

                  /* ── GREEN — Baik ── */
                  #crd-good {
                    background: linear-gradient(145deg,rgba(240,253,244,0.97) 0%,rgba(220,252,231,0.85) 60%,rgba(134,239,172,0.25) 100%);
                    border: 1px solid rgba(134,239,172,0.55);
                    box-shadow:
                      0 1px 0 rgba(255,255,255,0.80) inset,
                      0 4px 14px rgba(22,163,74,0.10),
                      0 12px 32px rgba(22,163,74,0.10);
                  }
                  #crd-good::before { background: radial-gradient(circle,rgba(74,222,128,0.28) 0%,transparent 70%); }
                  #crd-good::after  { background: linear-gradient(90deg,transparent,rgba(22,163,74,0.45),transparent); }
                  #crd-good:hover   {
                    box-shadow:
                      0 1px 0 rgba(255,255,255,0.90) inset,
                      0 8px 24px rgba(22,163,74,0.18),
                      0 20px 48px rgba(22,163,74,0.14),
                      0 0 0 3px rgba(134,239,172,0.35);
                  }

                  /* ── Header row (label + status dot) ── */
                  .prc-header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 14px;
                  }
                  .prc-label {
                    font-size: 10px;
                    font-weight: 800;
                    text-transform: uppercase;
                    letter-spacing: 0.7px;
                  }
                  .prc-dot {
                    width: 28px; height: 28px;
                    border-radius: 50%;
                    display: flex; align-items: center; justify-content: center;
                    font-size: 13px;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
                    flex-shrink: 0;
                  }

                  /* ── Big count ── */
                  .prc-count-row {
                    display: flex;
                    align-items: baseline;
                    gap: 6px;
                    margin-bottom: 4px;
                  }
                  .prc-count {
                    font-size: 42px;
                    font-weight: 900;
                    line-height: 1;
                    letter-spacing: -1px;
                    transition: color 0.3s;
                  }
                  .prc-unit {
                    font-size: 12px;
                    font-weight: 600;
                    opacity: 0.65;
                    margin-bottom: 3px;
                  }

                  /* ── Threshold badge ── */
                  .prc-threshold {
                    display: inline-flex;
                    align-items: center;
                    gap: 4px;
                    padding: 3px 9px;
                    border-radius: 20px;
                    font-size: 10px;
                    font-weight: 700;
                    margin-bottom: 14px;
                    letter-spacing: 0.2px;
                  }

                  /* ── Sparkline row ── */
                  .prc-sparkline-wrap {
                    margin-bottom: 14px;
                    position: relative;
                  }
                  .prc-sparkline {
                    width: 100%;
                    height: 32px;
                    display: block;
                  }

                  /* ── Divider ── */
                  .prc-divider {
                    height: 1px;
                    background: linear-gradient(90deg,transparent,rgba(0,0,0,0.08),transparent);
                    margin-bottom: 12px;
                  }

                  /* ── CTA button ── */
                  .prc-cta {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 8px 12px;
                    border-radius: 10px;
                    font-size: 11px;
                    font-weight: 700;
                    border: none;
                    cursor: pointer;
                    width: 100%;
                    transition:
                      background 0.18s,
                      transform 0.18s,
                      box-shadow 0.18s;
                    letter-spacing: 0.2px;
                  }
                  .prc-cta:hover {
                    transform: scale(1.02);
                  }
                  .prc-cta:active {
                    transform: scale(0.97);
                  }
                  .prc-cta-arrow {
                    font-size: 14px;
                    transition: transform 0.18s;
                  }
                  .prc-cta:hover .prc-cta-arrow {
                    transform: translateX(3px);
                  }

                  /* RED CTA */
                  #crd-high .prc-cta {
                    background: rgba(220,38,38,0.09);
                    color: #b91c1c;
                  }
                  #crd-high .prc-cta:hover {
                    background: rgba(220,38,38,0.16);
                    box-shadow: 0 2px 10px rgba(220,38,38,0.15);
                  }
                  /* YELLOW CTA */
                  #crd-mod .prc-cta {
                    background: rgba(202,138,4,0.09);
                    color: #92400e;
                  }
                  #crd-mod .prc-cta:hover {
                    background: rgba(202,138,4,0.16);
                    box-shadow: 0 2px 10px rgba(202,138,4,0.15);
                  }
                  /* GREEN CTA */
                  #crd-good .prc-cta {
                    background: rgba(22,163,74,0.09);
                    color: #14532d;
                  }
                  #crd-good .prc-cta:hover {
                    background: rgba(22,163,74,0.16);
                    box-shadow: 0 2px 10px rgba(22,163,74,0.15);
                  }

                  /* ── Glow pulse on status dot ── */
                  @keyframes prcGlowPulse {
                    0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 0 currentColor; }
                    50%     { box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 5px transparent; }
                  }
                  .prc-dot { animation: prcGlowPulse 2.8s ease-in-out infinite; }

                  /* ── Responsive: stack on very narrow ── */
                  /* ---- Inline style block #22 ---- */
/* ── KPI Row wrapper ── */
                  #compliance-kpi-row {
                    margin-top: 14px;
                    display: flex;
                    gap: 10px;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    overflow-y: visible;
                    padding: 4px 2px 10px;
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                    scroll-snap-type: x mandatory;
                  }
                  #compliance-kpi-row::-webkit-scrollbar { display: none; }

                  /* ── Individual KPI chip ── */
                  .ckpi-chip {
                    flex: 0 0 auto;
                    min-width: 138px;
                    max-width: 160px;
                    background: rgba(255,255,255,0.72);
                    backdrop-filter: blur(16px) saturate(180%);
                    -webkit-backdrop-filter: blur(16px) saturate(180%);
                    border: 1px solid rgba(124,58,237,0.13);
                    border-radius: 14px;
                    padding: 11px 13px 10px;
                    box-shadow:
                      0 2px 12px rgba(109,40,217,0.08),
                      0 1px 3px rgba(0,0,0,0.06);
                    cursor: default;
                    scroll-snap-align: start;
                    transition:
                      transform 0.22s cubic-bezier(.34,1.56,.64,1),
                      box-shadow 0.22s ease,
                      border-color 0.22s ease;
                    position: relative;
                    overflow: hidden;
                  }
                  .ckpi-chip::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    border-radius: 14px;
                    opacity: 0;
                    transition: opacity 0.22s ease;
                    pointer-events: none;
                  }
                  .ckpi-chip:hover {
                    transform: translateY(-3px) scale(1.025);
                    box-shadow:
                      0 8px 28px rgba(109,40,217,0.16),
                      0 2px 8px rgba(0,0,0,0.08);
                    border-color: rgba(124,58,237,0.30);
                  }
                  .ckpi-chip:hover::before { opacity: 1; }

                  /* Accent stripe at top */
                  .ckpi-chip .ckpi-stripe {
                    position: absolute;
                    top: 0; left: 0; right: 0;
                    height: 3px;
                    border-radius: 14px 14px 0 0;
                  }

                  /* Icon badge */
                  .ckpi-icon {
                    width: 28px;
                    height: 28px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    margin-bottom: 8px;
                    flex-shrink: 0;
                  }

                  /* Label */
                  .ckpi-label {
                    font-size: 9.5px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    color: #6b7280;
                    margin-bottom: 3px;
                    line-height: 1.3;
                  }

                  /* Value */
                  .ckpi-value {
                    font-size: 18px;
                    font-weight: 800;
                    line-height: 1;
                    margin-bottom: 4px;
                    font-variant-numeric: tabular-nums;
                    letter-spacing: -0.5px;
                  }

                  /* Sub-text */
                  .ckpi-sub {
                    font-size: 9px;
                    color: #9ca3af;
                    font-weight: 500;
                    line-height: 1.3;
                  }

                  /* ── LIVE pill ── */
                  .ckpi-live-pill {
                    display: inline-flex;
                    align-items: center;
                    gap: 4px;
                    background: rgba(34,197,94,0.12);
                    border: 1px solid rgba(34,197,94,0.30);
                    border-radius: 20px;
                    padding: 2px 7px 2px 5px;
                    font-size: 9px;
                    font-weight: 700;
                    color: #15803d;
                    margin-top: 5px;
                  }
                  .ckpi-live-dot {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: #22c55e;
                    flex-shrink: 0;
                    animation: ckpiPulse 1.8s ease-in-out infinite;
                  }
                  @keyframes ckpiPulse {
                    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
                    50%       { opacity: 0.7; transform: scale(1.15); box-shadow: 0 0 0 4px rgba(34,197,94,0); }
                  }

                  /* ── Chip colour variants ── */
                  /* Highest day — emerald */
                  .ckpi-chip.ckpi-emerald .ckpi-stripe { background: linear-gradient(90deg,#10b981,#34d399); }
                  .ckpi-chip.ckpi-emerald .ckpi-icon   { background: rgba(16,185,129,0.12); }
                  .ckpi-chip.ckpi-emerald .ckpi-value  { color: #059669; }
                  .ckpi-chip.ckpi-emerald::before      { background: linear-gradient(135deg,rgba(16,185,129,0.06),transparent); }

                  /* Lowest day — rose */
                  .ckpi-chip.ckpi-rose .ckpi-stripe { background: linear-gradient(90deg,#f43f5e,#fb7185); }
                  .ckpi-chip.ckpi-rose .ckpi-icon   { background: rgba(244,63,94,0.10); }
                  .ckpi-chip.ckpi-rose .ckpi-value  { color: #e11d48; }
                  .ckpi-chip.ckpi-rose::before      { background: linear-gradient(135deg,rgba(244,63,94,0.05),transparent); }

                  /* Weekly avg — indigo */
                  .ckpi-chip.ckpi-indigo .ckpi-stripe { background: linear-gradient(90deg,#6366f1,#818cf8); }
                  .ckpi-chip.ckpi-indigo .ckpi-icon   { background: rgba(99,102,241,0.12); }
                  .ckpi-chip.ckpi-indigo .ckpi-value  { color: #4338ca; }
                  .ckpi-chip.ckpi-indigo::before      { background: linear-gradient(135deg,rgba(99,102,241,0.06),transparent); }

                  /* Improvement — amber */
                  .ckpi-chip.ckpi-amber .ckpi-stripe { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
                  .ckpi-chip.ckpi-amber .ckpi-icon   { background: rgba(245,158,11,0.12); }
                  .ckpi-chip.ckpi-amber .ckpi-value  { color: #b45309; }
                  .ckpi-chip.ckpi-amber::before      { background: linear-gradient(135deg,rgba(245,158,11,0.06),transparent); }

                  /* Active ratio — violet */
                  .ckpi-chip.ckpi-violet .ckpi-stripe { background: linear-gradient(90deg,#7c3aed,#a78bfa); }
                  .ckpi-chip.ckpi-violet .ckpi-icon   { background: rgba(124,58,237,0.12); }
                  .ckpi-chip.ckpi-violet .ckpi-value  { color: #6d28d9; }
                  .ckpi-chip.ckpi-violet::before      { background: linear-gradient(135deg,rgba(124,58,237,0.06),transparent); }

                  /* Live status — teal */
                  .ckpi-chip.ckpi-teal .ckpi-stripe { background: linear-gradient(90deg,#14b8a6,#2dd4bf); }
                  .ckpi-chip.ckpi-teal .ckpi-icon   { background: rgba(20,184,166,0.12); }
                  .ckpi-chip.ckpi-teal .ckpi-value  { color: #0f766e; font-size:13px; }
                  .ckpi-chip.ckpi-teal::before      { background: linear-gradient(135deg,rgba(20,184,166,0.06),transparent); }

                  /* ── Animated counter ── */
                  .ckpi-value[data-target] { transition: none; }

                  /* ── Desktop: even grid ── */
                  @media (min-width: 700px) {
                    #compliance-kpi-row {
                      flex-wrap: wrap;
                      overflow-x: visible;
                    }
                    .ckpi-chip {
                      flex: 1 1 130px;
                      min-width: 120px;
                      max-width: none;
                    }
                  }

/* ---- Inline style block #23 ---- */
@keyframes ls-logo-pulse {

          0%,
          100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(139, 111, 214, 0);
          }

          50% {
            transform: scale(1.06);
            box-shadow: 0 0 20px 6px rgba(139, 111, 214, .35);
          }
        }

        @keyframes ls-fadein {
          from {
            opacity: 0;
            transform: scale(.98);
          }

          to {
            opacity: 1;
            transform: scale(1);
          }
        }

/* ---- Inline style block #24 ---- */
/* ══ MEMO PAGE LAYOUT ══════════════════════════════════════════ */
        #page-memo { display:none; flex-direction:column; min-height:100%; background:var(--bg); }
        #page-memo.active { display:flex; }

        /* Hero */
        .memo-hero { background:radial-gradient(ellipse at 80% 0%,rgba(124,58,237,.35) 0%,transparent 55%),linear-gradient(135deg,#1a0938 0%,#2d1b5e 100%); padding:18px 28px 14px; flex-shrink:0; }
        .memo-hero-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
        .memo-hero-eyebrow { font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:rgba(196,181,253,.7); margin-bottom:3px; }
        .memo-hero-title { font-size:20px; font-weight:800; color:#fff; line-height:1.2; }
        .memo-hero-sub { font-size:12px; color:rgba(255,255,255,.5); margin-top:2px; }
        .memo-hero-badge { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
        .memo-hero-badge span { font-size:11px; font-weight:700; color:rgba(255,255,255,.5); }
        .memo-hero-badge strong { font-size:14px; font-weight:800; color:#c4b5fd; }

        /* Main 2-column split: form 3fr, preview 2fr */
        .memo-main { display:grid; grid-template-columns:3fr 2fr; flex:1; min-height:0; overflow:hidden; }

        /* LEFT — Form panel */
        .memo-form-panel { border-right:1px solid var(--rule); overflow-y:auto; padding:18px 20px 48px; background:var(--bg); display:flex; flex-direction:column; gap:12px; }

        /* RIGHT — Preview panel */
        .memo-preview-panel { overflow-y:auto; background:#dde0ec; display:flex; flex-direction:column; }
        .memo-preview-toolbar { background:var(--white); border-bottom:1px solid var(--rule); padding:8px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; position:sticky; top:0; z-index:10; }
        .memo-preview-toolbar-title { font-size:12px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:6px; }
        .memo-preview-doc-wrap { flex:1; padding:16px; overflow-x:hidden; overflow-y:auto; min-height:0; }
        .memo-a4-scaler { display:block; }
        .memo-a4 { width:794px; max-width:none; min-height:297mm; height:auto; max-height:none; background:#fff; box-shadow:0 4px 32px rgba(0,0,0,.22); border-radius:3px; padding:20mm 18mm; font-family:'Times New Roman',Times,serif; font-size:11pt; color:#111; line-height:1.5; position:relative; box-sizing:border-box; overflow:visible; -webkit-print-color-adjust:exact; print-color-adjust:exact; }

        /* Cards */
        .memo-card { background:var(--white); border:1px solid var(--rule); border-radius:10px; padding:14px 16px; box-shadow:var(--sh); }
        .memo-card-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ink3); margin-bottom:10px; display:flex; align-items:center; gap:6px; }

        /* Fields */
        .memo-field-group { display:flex; flex-direction:column; gap:9px; }
        .memo-field { display:flex; flex-direction:column; gap:3px; }
        .memo-field label { font-size:11px; font-weight:600; color:var(--ink2); }
        .memo-field input,.memo-field select,.memo-field textarea { padding:7px 10px; border:1.5px solid var(--rule2); border-radius:7px; font-family:var(--sans); font-size:12.5px; color:var(--ink); background:var(--white); outline:none; transition:border-color .15s; }
        .memo-field input:focus,.memo-field select:focus,.memo-field textarea:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,58,237,.1); }
        .memo-field textarea { resize:vertical; min-height:72px; line-height:1.5; }

        /* Patient search */
        .memo-search-wrap { position:relative; }
        .memo-search-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--white); border:1.5px solid var(--purple-b); border-radius:10px; box-shadow:var(--sh2); max-height:220px; overflow-y:auto; z-index:200; display:none; }
        .memo-search-results.open { display:block; }
        .memo-search-item { padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:8px; transition:background .1s; }
        .memo-search-item:last-child { border-bottom:none; }
        .memo-search-item:hover { background:var(--purple-bg); }
        .memo-search-item .msi-name { font-size:13px; font-weight:600; color:var(--ink); }
        .memo-search-item .msi-ic { font-size:11px; color:var(--ink3); }
        .memo-search-item .msi-badge { font-size:10px; font-weight:700; background:var(--purple-bg); color:var(--purple); padding:2px 6px; border-radius:5px; margin-left:auto; flex-shrink:0; }

        /* Patient chips — 3 columns now that form is wider */
        .memo-pat-info { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; margin-top:2px; }
        .memo-pat-chip { background:var(--purple-bg); border:1px solid var(--purple-b); border-radius:8px; padding:6px 10px; }
        .memo-pat-chip .mpc-label { font-size:10px; font-weight:700; color:var(--purple); text-transform:uppercase; letter-spacing:.8px; }
        .memo-pat-chip .mpc-val { font-size:12.5px; font-weight:600; color:var(--ink); margin-top:1px; }
        .memo-pat-chip.full { grid-column:1/-1; }
        .memo-compliance-bar { height:5px; border-radius:3px; background:var(--rule); overflow:hidden; margin-top:4px; }
        .memo-compliance-fill { height:100%; border-radius:3px; transition:width .3s; }

        /* Type grid — 4 columns with wider form */
        .memo-type-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
        .memo-type-btn { padding:8px 6px; border:1.5px solid var(--rule2); border-radius:8px; background:var(--white); font-family:var(--sans); font-size:11px; font-weight:600; color:var(--ink2); cursor:pointer; text-align:center; transition:all .15s; line-height:1.3; }
        .memo-type-btn:hover { border-color:var(--purple-b); background:var(--purple-bg); }
        .memo-type-btn.active { border-color:var(--purple); background:var(--purple); color:#fff; box-shadow:0 2px 8px rgba(124,58,237,.3); }

        /* Action row */
        .memo-action-row { display:flex; gap:7px; flex-wrap:wrap; }
        .memo-btn { display:flex; align-items:center; gap:5px; padding:8px 13px; border:none; border-radius:8px; font-family:var(--sans); font-size:12px; font-weight:700; cursor:pointer; transition:all .15s; white-space:nowrap; }
        .memo-btn:active { transform:scale(.97); }
        .memo-btn-primary { background:var(--purple); color:#fff; }
        .memo-btn-primary:hover { background:#6d28d9; }
        .memo-btn-cyan { background:var(--cyan); color:#fff; }
        .memo-btn-cyan:hover { background:#0e7490; }
        .memo-btn-blue { background:var(--blue); color:#fff; }
        .memo-btn-blue:hover { background:#1d4ed8; }
        .memo-btn-ghost { background:var(--white); color:var(--ink); border:1.5px solid var(--rule2); }
        .memo-btn-ghost:hover { border-color:var(--purple-b); background:var(--purple-bg); }

        /* ── Save Draft UX Enhancements ──────────────────────────────── */
        @keyframes memo-shake {
          0%,100%{transform:translateX(0)}
          20%{transform:translateX(-5px)}
          40%{transform:translateX(5px)}
          60%{transform:translateX(-4px)}
          80%{transform:translateX(4px)}
        }
        @keyframes memo-success-pulse {
          0%{box-shadow:0 0 0 0 rgba(5,150,105,.55)}
          70%{box-shadow:0 0 0 10px rgba(5,150,105,0)}
          100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}
        }
        @keyframes memo-form-flash {
          0%{opacity:1}
          35%{opacity:.35}
          100%{opacity:1}
        }
        @keyframes memo-spin {
          to{transform:rotate(360deg)}
        }
        .memo-shake { animation:memo-shake .42s ease; }
        .memo-btn-saving {
          background:#6d28d9 !important;
          cursor:not-allowed !important;
          opacity:.85;
          pointer-events:none;
        }
        .memo-btn-saved {
          background:var(--green) !important;
          animation:memo-success-pulse .6s ease;
          pointer-events:none;
        }
        .memo-form-resetting {
          animation:memo-form-flash .38s ease;
          pointer-events:none;
        }
        .memo-save-status-ok  { color:var(--green)  !important; font-weight:700; }
        .memo-save-status-err { color:var(--red)    !important; font-weight:700; }
        .memo-save-status-inf { color:var(--purple) !important; font-weight:600; }
        #memo-save-btn-spinner { display:inline-block; width:11px; height:11px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:memo-spin .65s linear infinite; vertical-align:middle; margin-right:5px; }
        #memo-new-memo-hint { font-size:11px; color:var(--green); font-weight:700; margin-top:6px; opacity:0; transition:opacity .4s; text-align:center; letter-spacing:.3px; }
        #memo-new-memo-hint.visible { opacity:1; }
        .memo-btn-danger { background:var(--red-bg); color:var(--red); border:1.5px solid var(--red-b); }
        .memo-btn-danger:hover { background:#fee2e2; }

        /* History */
        .memo-history-table { width:100%; border-collapse:collapse; font-size:12px; }
        .memo-history-table th { text-align:left; padding:6px 8px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--ink3); border-bottom:2px solid var(--rule); }
        .memo-history-table td { padding:7px 8px; border-bottom:1px solid var(--rule); vertical-align:middle; }
        .memo-history-table tr:hover td { background:var(--purple-bg); }
        .memo-history-table .mht-name { font-weight:600; color:var(--ink); }
        .memo-history-table .mht-type { font-size:11px; background:var(--blue-bg); color:var(--blue); padding:2px 6px; border-radius:5px; font-weight:600; }
        .memo-history-empty { text-align:center; padding:24px; color:var(--ink3); font-size:13px; }

        /* A4 letter interior styles */
        .memo-a4-header { border-bottom:2pt solid #1a0938; padding-bottom:10px; margin-bottom:12px; }
        .memo-a4-header-grid { display:flex; justify-content:space-between; align-items:flex-start; }
        .memo-a4-klinik-name { font-size:14pt; font-weight:700; color:#1a0938; text-transform:uppercase; letter-spacing:1px; }
        .memo-a4-klinik-sub { font-size:9pt; color:#444; margin-top:2px; }
        .memo-a4-logo-placeholder { width:80px; height:80px; border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .memo-a4-logo-img { width:80px; height:80px; object-fit:contain; flex-shrink:0; display:block; }
        .memo-a4-ref-block { margin-bottom:14px; font-size:10pt; }
        .memo-a4-ref-label { font-size:9pt; color:#555; }
        .memo-a4-subject { font-size:12pt; font-weight:700; text-decoration:underline; text-align:center; margin:16px 0 14px; color:#1a0938; }
        .memo-a4-salutation { margin-bottom:10px; }
        .memo-a4-body { text-align:justify; }
        .memo-a4-pat-table { width:100%; border-collapse:collapse; margin:12px 0; font-size:10pt; }
        .memo-a4-pat-table td { padding:5px 8px; border:1pt solid #999; }
        .memo-a4-pat-table .ptt-label { font-weight:700; background:#f5f3ff; width:28%; }
        .memo-a4-footer { margin-top:32px; }
        .memo-a4-sig-block { margin-top:28px; }
        .memo-a4-sig-line { border-bottom:1pt solid #333; width:200px; margin-bottom:4px; height:32px; }
        .memo-a4-watermark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-30deg); font-size:90pt; font-weight:900; color:rgba(100,60,200,.08); letter-spacing:12px; text-transform:uppercase; pointer-events:none; user-select:none; white-space:nowrap; }
        .memo-a4-stamp-draft { position:absolute; top:80px; right:20mm; border:3pt solid #dc2626; color:#dc2626; font-size:18pt; font-weight:900; letter-spacing:4px; text-transform:uppercase; padding:4px 10px; border-radius:4px; transform:rotate(-8deg); opacity:.35; pointer-events:none; user-select:none; }
        .memo-a4-confidential { position:absolute; bottom:20mm; right:18mm; font-size:7.5pt; color:#777; text-transform:uppercase; letter-spacing:2px; }

        /* Responsive */
        @media(max-width:1100px){
          .memo-main { grid-template-columns:1fr 1fr; }
          .memo-type-grid { grid-template-columns:repeat(3,1fr); }
        }
        /* ════ MULTI-PAGE DOCUMENT PREVIEW ENHANCEMENT ════════════════════ */
        /* Professional print-preview with automatic pagination & paper styling */

        /* Preview container - centered with professional background */
        .memo-preview-doc-wrap {
          background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          padding: 24px !important;
          overflow-y: auto !important;
          overflow-x: hidden !important;
        }

        /* Pages container - manages vertical stack with perspective */
        .memo-pages-container {
          display: flex;
          flex-direction: column;
          gap: 28px;
          width: 100%;
          align-items: center;
          perspective: 1200px;
        }

        /* Individual page scaler - smooth animations */
        .memo-a4-scaler {
          width: 100%;
          display: flex;
          justify-content: center;
          animation: memo-page-appear 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
        }

        /* Stagger animation delays for multi-page cascade effect */
        .memo-a4-scaler:nth-child(1) { animation-delay: 0ms; }
        .memo-a4-scaler:nth-child(2) { animation-delay: 85ms; }
        .memo-a4-scaler:nth-child(3) { animation-delay: 170ms; }
        .memo-a4-scaler:nth-child(4) { animation-delay: 255ms; }
        .memo-a4-scaler:nth-child(5) { animation-delay: 340ms; }
        .memo-a4-scaler:nth-child(n+6) { animation-delay: 425ms; }

        /* Enhanced A4 paper styling with professional shadows */
        .memo-a4 {
          width: 794px !important;
          max-width: none !important;
          background: #ffffff !important;

          /* Multi-layer shadow for depth and authenticity */
          box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.18),
            0 8px 20px rgba(0, 0, 0, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;

          /* Subtle borders and rounding */
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-radius: 4px;

          /* Realistic A4 dimensions (297mm height with margins) */
          min-height: 1122px;
          height: auto;

          /* Consistent typography and formatting — matches print (20mm / 18mm) */
          padding: 20mm 18mm !important;
          overflow: visible !important;
          max-height: none !important;
          font-family: 'Times New Roman', Times, serif !important;
          font-size: 11pt !important;
          color: #111 !important;
          line-height: 1.5 !important;

          /* Print-accurate color rendering */
          -webkit-print-color-adjust: exact !important;
          print-color-adjust: exact !important;

          position: relative;
          box-sizing: border-box;
          transform: translateZ(0);
          backface-visibility: hidden;
          -webkit-font-smoothing: subpixel-antialiased;
        }

        /* Page number indicator */
        .memo-page-number {
          position: absolute;
          bottom: 12px;
          right: 20px;
          font-size: 9pt;
          color: #999;
          font-family: var(--sans);
          font-weight: 500;
          letter-spacing: 0.5px;
        }

        .memo-page-number.hidden {
          display: none;
        }

        /* Smooth page appearance animation */
        @keyframes memo-page-appear {
          from {
            opacity: 0;
            transform: translateY(20px) scale(0.98);
            filter: blur(3px);
          }
          to {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
          }
        }

        /* Content fade animation on update */
        @keyframes memo-content-fade {
          from { opacity: 0.7; }
          to { opacity: 1; }
        }

        .memo-a4 {
          animation: memo-content-fade 0.3s ease-out;
        }

        /* Responsive scaling for tablets */
        @media (max-width: 1100px) {
          .memo-pages-container {
            gap: 24px;
          }
        }

        /* Responsive layout for mobile devices */
        /* Responsive layout for small screens */
        /* Print media styles - clean output */
        @media print {
          .memo-preview-doc-wrap {
            background: transparent !important;
            padding: 0 !important;
          }

          .memo-pages-container {
            gap: 0 !important;
          }

          .memo-a4 {
            box-shadow: none !important;
            border: none !important;
            border-radius: 0 !important;
            break-inside: avoid;
            page-break-after: always;
            margin: 0 !important;
            padding: 22mm 20mm 22mm 25mm !important;
          }

          .memo-a4:last-child {
            page-break-after: auto;
          }

          .memo-page-number {
            display: block;
            position: absolute;
            color: #999;
          }
        }

        /* ════════════════════════════════════════════════════════════════
           GLOBAL HOLD STATUS UI STYLES - CICIR SEMENTARA
           Red banner, badge, green button, smooth transitions
           ════════════════════════════════════════════════════════════════ */

        /* HOLD STATUS BANNER - Red alert at top */
        .hold-status-banner {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 14px 16px;
          background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
          border-left: 5px solid #7F1D1D;
          border-radius: 6px;
          margin-bottom: 16px;
          box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
          animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .hold-banner-icon {
          font-size: 22px;
          flex-shrink: 0;
          animation: pulse 2s ease-in-out infinite;
        }

        .hold-banner-text {
          flex: 1;
          color: #fff;
        }

        .hold-banner-text strong {
          display: block;
          margin-bottom: 4px;
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0.3px;
        }

        .hold-banner-text small {
          opacity: 0.93;
          font-size: 12px;
          display: block;
        }

        /* RESOLVE BUTTON - Green CTA */
        .btn-hold-resolve {
          background: linear-gradient(135deg, #10B981 0%, #059669 100%);
          color: #fff;
          border: none;
          padding: 10px 18px;
          border-radius: 5px;
          cursor: pointer;
          font-weight: 600;
          font-size: 13px;
          white-space: nowrap;
          flex-shrink: 0;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .btn-hold-resolve:hover {
          background: linear-gradient(135deg, #059669 0%, #047857 100%);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }

        .btn-hold-resolve:active {
          transform: translateY(0);
          box-shadow: 0 1px 4px rgba(16, 185, 129, 0.3);
        }

        .btn-hold-resolve:disabled {
          opacity: 0.5;
          cursor: not-allowed;
          pointer-events: none;
        }

        /* TABLE BADGE - Persistent CICIR indicator */
        .badge-cicir-sementara {
          display: inline-block;
          background: #DC2626;
          color: #fff;
          padding: 5px 12px;
          border-radius: 12px;
          font-size: 11px;
          font-weight: 700;
          margin-left: 8px;
          letter-spacing: 0.3px;
          box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
        }

        /* DISABLED BUTTONS DURING HOLD */
        .btn-disabled-hold {
          opacity: 0.45 !important;
          cursor: not-allowed !important;
          pointer-events: none !important;
          filter: grayscale(0.5);
        }

        .btn-disabled-hold::after {
          content: ' (Hold Aktif)';
          font-size: 11px;
          opacity: 0.7;
        }

        /* PATIENT ROW HIGHLIGHT */
        tr.hold-active-row {
          background-color: rgba(220, 38, 38, 0.05) !important;
          border-left: 4px solid #DC2626;
        }

        /* ANIMATIONS */
        @keyframes slideDown {
          from {
            opacity: 0;
            transform: translateY(-16px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes pulse {
          0%, 100% {
            opacity: 1;
            transform: scale(1);
          }
          50% {
            opacity: 0.8;
            transform: scale(1.1);
          }
        }

        /* HOLD STATUS IN PATIENT STATUS DISPLAY */
        .patient-hold-status {
          color: #DC2626;
          font-weight: 700;
          padding: 6px 10px;
          background: rgba(220, 38, 38, 0.08);
          border-radius: 4px;
          display: inline-block;
          font-size: 12px;
          letter-spacing: 0.2px;
        }

        /* RESPONSIVE: Mobile */
        
/* ═══════════════════════════════════════════════════════════════════════
   KAWALAN STOK METHADONE — MOBILE OVERRIDES FOR MAIN.CSS DESKTOP RULES
   These @media blocks override the global (unscoped) desktop styles above
   that were blocking mobile.css from taking effect.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TABLET (≤ 900px) ─────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* KPI strip: 2-col flex wrap */
  #page-stok .wk-kpi-strip {
    flex-wrap: wrap !important;
  }
  #page-stok .wk-kpi {
    flex: 1 1 calc(50% - 1px) !important;
    min-width: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }
  #page-stok .wk-kpi-v {
    font-size: clamp(20px, 3.5vw, 26px) !important;
  }

  /* Hero inner: reduce padding */
  #page-stok .hero-inner {
    padding: 20px 20px 14px !important;
  }

  /* Vol bar: tighten */
  #page-stok .wk-vol-bar {
    padding: 10px 20px !important;
  }
}

/* ── MOBILE (≤ 640px) — main overrides ───────────────────────────────── */
@media (max-width: 640px) {

  /* ── Hero inner ── */
  #page-stok .hero-inner {
    padding: 14px 14px 0 !important;
  }

  /* ── Hero stat strip (hstat): 2×2 grid ── */
  #page-stok .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-stok .hstat {
    padding: 12px 10px 11px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 64px !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-stok .hstat:last-child {
    border-right: none !important;   /* overrides desktop :last-child rule */
  }

  /* Even children (right column): no right border */
  #page-stok .hstat:nth-child(2n) {
    border-right: none !important;
  }

  /* Hero values — clamp prevents 26px dominating small screen */
  #page-stok .hstat-v {
    font-size: clamp(17px, 5.2vw, 22px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    word-break: break-all !important;
    margin-bottom: 3px !important;
    letter-spacing: -.3px !important;
    display: block !important;
  }

  #page-stok .hstat-l {
    font-size: clamp(9px, 2.4vw, 11px) !important;
    letter-spacing: .3px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    display: block !important;
  }

  /* ── KPI strip — 2-col grid ── */
  #page-stok .wk-kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    flex-wrap: unset !important;
  }

  #page-stok .wk-kpi {
    flex: unset !important;
    padding: 14px 10px 16px !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    min-width: 0 !important;
    text-align: center !important;
  }

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

  /* Remove bottom border on last row */
  #page-stok .wk-kpi:nth-last-child(-n+2) {
    border-bottom: none !important;
  }

  /* KPI value: tame the 30px desktop size */
  #page-stok .wk-kpi-v {
    font-size: clamp(20px, 6vw, 26px) !important;
    letter-spacing: -.5px !important;
    margin-bottom: 5px !important;
    word-break: break-all !important;
  }

  #page-stok .wk-kpi-l {
    font-size: clamp(9px, 2.4vw, 10px) !important;
    letter-spacing: .5px !important;
  }

  /* ── Volume bar ── */
  #page-stok .wk-vol-bar {
    padding: 10px 14px !important;
  }

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

  #page-stok .wk-vol-v {
    font-size: clamp(16px, 5vw, 20px) !important;
  }

  #page-stok .wk-vol-label {
    font-size: 9px !important;
    letter-spacing: .5px !important;
  }

  /* ── Main content area ── */
  #page-stok .main {
    padding: 12px 12px 80px !important;
    gap: 12px !important;
    overflow-x: hidden !important;
  }

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

  /* ── Action buttons: wrap to 2-per-row ── */
  #page-stok .main > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #page-stok .main > div:first-child 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;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }

  /* ── Info bar ── */
  #stok-info-bar,
  #page-stok .main > div:nth-child(2) {
    font-size: 12px !important;
    padding: 10px 12px !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
  }

  /* ── Daily CF Panel ── */
  #daily-cf-panel {
    overflow-x: hidden !important;
  }

  /* CF breakdown: stack to 2-col or 1-col */
  #dcf-breakdown {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }

  #dcf-breakdown > div {
    padding: 10px 12px !important;
    border-right: 1px solid var(--rule) !important;
    border-bottom: 1px solid var(--rule) !important;
    box-sizing: border-box !important;
  }

  #dcf-breakdown > div:nth-child(2n) {
    border-right: none !important;
  }

  /* CF numbers — reduce from 16px desktop */
  #dcf-opening,
  #dcf-stockin,
  #dcf-usage,
  #dcf-book-bal {
    font-size: clamp(14px, 4.5vw, 16px) !important;
    word-break: break-all !important;
  }

  /* ── Stok table wrapper: CARD is the sole scroll owner ── */
  /* Override the desktop `overflow: hidden` (line ~7060) which clips the
     table on mobile. The 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;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Inner wrappers: NO nested scroll context ── */
  /* Both must expand to max-content width so the card can scroll over them.
     Setting overflow:auto here creates a new BFC that clips the header row
     (which lives as a sibling outside these elements). */
  .stok-scroll-wrap {
    overflow: visible !important;
    display: block !important;
    width: max-content !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }

  #stok-table-body {
    overflow: visible !important;
    display: block !important;
    width: max-content !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Header row + body rows: same width contract ── */
  /* The header sits as a direct child of the card, OUTSIDE .stok-scroll-wrap,
     so it must share the same min-width as the body rows or it won't line up. */
  #page-stok .main > div:last-child > div:first-child,
  #page-stok .main > div:last-child > div[style*="grid-template-columns"]:first-child {
    min-width: 540px !important;
    width: max-content !important;
    box-sizing: border-box !important;
  }

  /* Body rows */
  #stok-table-body > div,
  #stok-table-body tr {
    min-width: 540px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fallback: real <table> */
  #stok-table-body table {
    min-width: 540px !important;
    table-layout: auto !important;
    width: max-content !important;
  }

  /* Table cells: compact on mobile */
  #stok-table-body td {
    padding: 8px 10px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
  }

  /* Baki pill: slightly smaller */
  #stok-table-body span[style*="border-radius:5px"] {
    font-size: 12px !important;
    padding: 3px 8px !important;
  }

  /* Badge */
  #stok-table-body .badge {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }
}

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

  #page-stok .hstat-v {
    font-size: clamp(15px, 4.8vw, 19px) !important;
  }

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

  #page-stok .wk-kpi-v {
    font-size: clamp(18px, 5.5vw, 22px) !important;
  }

  #page-stok .wk-kpi {
    padding: 12px 8px 14px !important;
  }

  /* Buttons: full-width stack on very small screens */
  #page-stok .main > div:first-child button {
    flex: 1 1 100% !important;
    min-width: unset !important;
  }

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

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

  #page-stok .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #page-stok .hstat-v {
    font-size: 15px !important;
  }

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

  #page-stok .wk-kpi-v {
    font-size: 17px !important;
  }

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

  #dcf-breakdown {
    grid-template-columns: 1fr !important;
  }

  #dcf-breakdown > div:nth-child(2n) {
    border-right: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   KKPMS V2 UPGRADE — Patient Card, Modal & List Page
   Rule: CSS/layout only. No logic, IDs, or JS bindings changed.
═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   CSS VARIABLES (brand / status)
───────────────────────────────────────────────────────────────── */
:root {
  --v2-brand:        #0F6E56;
  --v2-brand-light:  #E1F5EE;
  --v2-brand-dark:   #085041;
  --v2-brand-mid:    #1D9E75;
  --v2-spub-bg:      #FAEEDA;
  --v2-spub-text:    #633806;
  --v2-cicir-bg:     #F1EFE8;
  --v2-cicir-text:   #5F5E5A;
  --v2-danger-text:  #A32D2D;
  --v2-border-card:  0.5px solid rgba(0,0,0,.08);
  --v2-radius-card:  12px;
  --v2-radius-el:    8px;
}

/* ─────────────────────────────────────────────────────────────────
   PATIENT CARD V2
───────────────────────────────────────────────────────────────── */

/* Override category border-left for v2 cards (using border-top instead) */
.pcard-v2.cat-fta,
.pcard-v2.cat-tw,
.pcard-v2.cat-dot,
.pcard-v2.cat-ds {
  border-left: none !important;
}

.pcard-v2 {
  border: var(--v2-border-card) !important;
  border-radius: var(--v2-radius-card) !important;
  /* border-top: 4px solid {color} is set inline per card */
}

.pcard-v2 .pcard-body {
  padding: 13px 15px 11px !important;
}

/* ── Card header: tarikh daftar micro-text ── */
.pcard-daftar-date {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 2px;
  letter-spacing: .2px;
}

/* ── Clinical zone: 3-column grid ── */
.pcard-clinical {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.pcard-zone-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .55px;
  color: #a0a8c0;
  margin-bottom: 4px;
}

.pcard-dose-val {
  font-size: 18px;
  font-weight: 500;
  color: #0F6E56;
  line-height: 1.1;
}

.pcard-dose-unit {
  font-size: 11px;
  font-weight: 400;
  color: #6b7280;
}

.pcard-dose-ml {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}

.pcard-preskripsi {
  font-size: 11.5px;
  font-weight: 600;
  color: #2a3050;
  word-break: break-all;
  line-height: 1.3;
}

/* ── DOT schedule pills row ── */
.pcard-dot-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}

.pcard-dot-row .dot-chip {
  min-width: 30px !important;
  width: 30px !important;
  height: 24px !important;
  font-size: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  padding: 0 !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}

.pcard-dot-row .dot-chip.active-day {
  background: #0F6E56 !important;
  color: #ffffff !important;
}

/* ── Info zone: alamat ── */
.pcard-alamat {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
  line-height: 1.4;
}

.pcard-alamat-icon {
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pcard-alamat-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* ── Info zone: catatan note box ── */
.pcard-catatan {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border-left: 2px solid #5DCAA5;
  background: #f8fdf9;
  padding: 5px 8px;
  border-radius: 0 6px 6px 0;
  font-size: 11px;
  color: #374151;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* ── Tags zone ── */
.pcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.pcard-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: .15px;
}

.pcard-tag-spub {
  background: #E6F1FB;
  color: #0C447C;
  border: 1px solid #85B7EB;
}

.pcard-tag-xfer {
  background: #FAEEDA;
  color: #633806;
  border: 1px solid #EF9F27;
}

.pcard-tag-dos {
  background: #F1EFE8;
  color: #444441;
  border: 1px solid #D3D1C7;
}

/* ── Action bar: primary + outline ── */
.pcard-v2 .pcard-actions .pcard-act-btn {
  height: 30px;
  font-size: 11px;
  border-radius: var(--v2-radius-el) !important;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.pcard-act-primary {
  background: #0F6E56 !important;
  color: #ffffff !important;
  border-color: #0F6E56 !important;
  font-weight: 700 !important;
}

.pcard-act-primary:hover {
  background: #085041 !important;
  border-color: #085041 !important;
  color: #fff !important;
}

.pcard-act-outline {
  background: #ffffff !important;
  color: #374151 !important;
  border-color: rgba(0,0,0,.14) !important;
  font-weight: 600 !important;
}

.pcard-act-outline:hover {
  background: var(--v2-brand-light) !important;
  border-color: #0F6E56 !important;
  color: #0F6E56 !important;
}

/* ─────────────────────────────────────────────────────────────────
   PESAKIT BERDAFTAR — Stats bar V2
───────────────────────────────────────────────────────────────── */

#page-reg .prm-sc {
  background: rgba(255,255,255,.07) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
}

/* Override stat value colors */
#page-reg .prm-sc:nth-child(1) .prm-sc-v { color: #1D9E75 !important; }
#page-reg .prm-sc:nth-child(2) .prm-sc-v { color: #185FA5 !important; }
#page-reg .prm-sc:nth-child(3) .prm-sc-v { color: #BA7517 !important; }
#page-reg .prm-sc:nth-child(4) .prm-sc-v { color: #534AB7 !important; }
#page-reg .prm-sc:nth-child(5) .prm-sc-v { color: #993556 !important; }

/* ── Stat label: uppercase + spaced ── */
#page-reg .prm-sc-l {
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
}

/* ─────────────────────────────────────────────────────────────────
   PESAKIT BERDAFTAR — Filter tabs (pills) V2
───────────────────────────────────────────────────────────────── */

#page-reg .pill.active {
  background: #0F6E56 !important;
  border-color: #0F6E56 !important;
  color: #ffffff !important;
}

#page-reg .pill.active .n {
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
  border-radius: 10px;
  padding: 0 5px;
  opacity: 1 !important;
}

#page-reg .pill {
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────
   MODAL V2 — Section labels
───────────────────────────────────────────────────────────────── */

.m-section-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #6b7280 !important;
}

/* ── Status toggle buttons (Aktif / Cicir) V2 ── */
.topt {
  height: 30px !important;
  font-size: 12px !important;
  border-radius: var(--v2-radius-el) !important;
  padding: 0 12px !important;
  font-weight: 600 !important;
}

.topt.ta {
  background: #E1F5EE !important;
  border: 1.5px solid #5DCAA5 !important;
  color: #085041 !important;
}

.topt.td {
  background: #F1EFE8 !important;
  border: 1.5px solid #B4B2A9 !important;
  color: #5F5E5A !important;
}

/* ── Jenis kes: amber alert when empty ── */
#m-jenis-kes-badge .v2-jk-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #FAEEDA;
  border: 1px solid #FAC775;
  color: #633806;
  border-radius: var(--v2-radius-el);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* ── DOT pills in modal: match V2 style for active ── */
.dot-day-selector.modal-variant .dot-day-btn.selected {
  background: #0F6E56 !important;
  border-color: #0F6E56 !important;
}

.dot-day-selector.modal-variant .dot-day-btn.selected:hover {
  background: #085041 !important;
  border-color: #085041 !important;
}

/* DOT preview pill in modal */
.dot-sel-preview {
  background: var(--v2-brand-light) !important;
  color: var(--v2-brand-dark) !important;
  border-color: #5DCAA5 !important;
}

/* ── Textarea labels in modal: uppercase + spaced ── */
#m-alamat, #m-notes {
  min-height: 64px;
}

/* ── Tindakan Lanjut section ── */
.modal-tindakan-lanjut {
  margin: 16px 0 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  overflow: hidden;
}

.modal-tindakan-lanjut-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  padding: 9px 14px 8px;
  background: #fafafa;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.modal-tindakan-lanjut-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* SPUB button V2 */
.btn-spub-v2 {
  width: 100%;
  background: transparent;
  border: 1.5px solid #85B7EB;
  color: #0C447C;
  border-radius: var(--v2-radius-el);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
  transition: all .14s;
  text-align: center;
}
.btn-spub-v2:hover {
  background: #E6F1FB;
}

/* Transfer OUT button V2 */
.btn-xfer-v2 {
  width: 100%;
  background: transparent;
  border: 1.5px solid #EF9F27;
  color: #633806;
  border-radius: var(--v2-radius-el);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
  transition: all .14s;
  text-align: center;
}
.btn-xfer-v2:hover {
  background: #FAEEDA;
}

/* ── Sticky modal footer ── */
.modal-footer-sticky {
  position: sticky;
  bottom: 0;
  background: var(--white, #fff);
  border-top: 1px solid #eef0f6;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  margin-top: 18px;
}

.modal-footer-spacer {
  flex: 1;
}

.btn-modal-padam {
  border: 1.5px solid #E24B4A;
  color: #A32D2D;
  background: transparent;
  border-radius: var(--v2-radius-el);
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  transition: background .14s;
}
.btn-modal-padam:hover {
  background: #fff5f5;
}

.btn-modal-batal {
  border: 1.5px solid rgba(0,0,0,.15);
  background: transparent;
  color: #374151;
  border-radius: var(--v2-radius-el);
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
  transition: background .14s;
}
.btn-modal-batal:hover {
  background: #f3f4f6;
}

.btn-modal-simpan {
  background: #0F6E56;
  color: #ffffff;
  border: none;
  border-radius: var(--v2-radius-el);
  height: 36px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  transition: background .14s;
}
.btn-modal-simpan:hover {
  background: #085041;
}

/* ─────────────────────────────────────────────────────────────────
   MODAL V2 — Clinical Profile Overview (from methadone_patient_profile)
───────────────────────────────────────────────────────────────── */

#modal-ov .modal {
  max-width: min(600px, 96vw);
  max-height: 90vh;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header stays fixed at top of the modal flex container */
#modal-ov .mhdr {
  flex: 0 0 auto;
}

/* Tab bar sits between header and scroll body */
#modal-ov .modal-tab-nav {
  flex: 0 0 auto;
}

/* Single continuous scroll lives in the body only */
#modal-ov .mbody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Footer stays fixed at bottom (no longer inside the scroll body) */
#modal-ov .modal-footer-sticky {
  position: static;
  flex: 0 0 auto;
  margin-top: 0;
  border-radius: 0 0 16px 16px;
}

/* ── Section A — Rekod Rawatan stat chips ── */
.m-rawatan-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.m-rawatan-chip {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 0;
}

.m-rawatan-chip-lbl {
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.m-rawatan-chip-val {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-rawatan-chip-val.green { color: #0F6E56; }
.m-rawatan-chip-val.blue  { color: #185FA5; }

.m-age-gender {
  font-size: 11px;
  color: #0F6E56;
  margin-bottom: 5px;
  font-weight: 500;
}

.m-hdr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

.m-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  background: #F1EFE8;
  color: #444441;
  letter-spacing: .2px;
}

.m-cat-badge.cat-fta {
  background: #E6F1FB;
  color: #0C447C;
}

.m-cat-badge.cat-tw {
  background: #FAEEDA;
  color: #633806;
}

.m-cat-badge.cat-taw {
  background: #f3e8ff;
  color: #7e22ce;
}

.m-cat-badge.cat-dot {
  background: #E1F5EE;
  color: #085041;
}

.m-prof-overview {
  background: #fafbfc;
  border: 0.5px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.m-prof-hdr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: flex-end;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid rgba(0,0,0,.07);
}

.m-prof-meta-pair {
  text-align: right;
}

.m-prof-meta-lbl {
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.m-prof-meta-val {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-top: 1px;
}

.m-prof-meta-val.green { color: #0F6E56; }
.m-prof-meta-val.blue  { color: #185FA5; }

.m-prof-dos-block {
  background: #f3f4f6;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.m-prof-dos-main {
  font-size: 28px;
  font-weight: 600;
  color: #0F6E56;
  line-height: 1;
}

.m-prof-dos-main span.unit {
  font-size: 16px;
  font-weight: 500;
}

.m-prof-dos-ml {
  font-size: 12px;
  color: #1D9E75;
  margin-top: 2px;
}

.m-prof-dos-right {
  text-align: right;
}

.m-prof-dos-cat {
  font-size: 11px;
  font-weight: 600;
  color: #185FA5;
  background: #E6F1FB;
  padding: 2px 8px;
  border-radius: 8px;
  display: inline-block;
}

.m-prof-dos-since {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 5px;
  line-height: 1.35;
}

.m-prof-sublbl {
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 5px;
}

.m-prof-dot-wrap {
  margin-bottom: 10px;
}

.m-prof-dot-row {
  display: flex;
  gap: 4px;
}

.m-prof-dot-row .dot-chip {
  flex: 1;
  min-width: 0;
  height: 28px;
  font-size: 9px !important;
  border-radius: 4px !important;
}

.m-prof-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.m-prof-panel {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,.08);
  border-radius: 8px;
  overflow: hidden;
}

.m-prof-panel.compact .m-prof-panel-body {
  padding: 10px 12px;
}

.m-prof-panel-head {
  padding: 8px 12px 6px;
  border-bottom: 0.5px solid rgba(0,0,0,.07);
  display: flex;
  align-items: center;
  gap: 6px;
}

.m-prof-panel-title {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

.m-prof-panel-body {
  padding: 10px 12px;
}

.m-prof-panel-body.flush {
  padding: 0;
}

.m-prof-attend-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.m-prof-att-stat {
  background: #f3f4f6;
  border-radius: 6px;
  padding: 8px 6px;
  text-align: center;
}

.m-prof-att-val {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

.m-prof-att-val.green { color: #0F6E56; }
.m-prof-att-val.red   { color: #A32D2D; }
.m-prof-att-val.amber { color: #854F0B; }

.m-prof-att-lbl {
  font-size: 9px;
  color: #9ca3af;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.m-prof-pres-field {
  margin-bottom: 6px;
}

.m-prof-pres-field:last-child {
  margin-bottom: 0;
}

.m-prof-pres-lbl {
  font-size: 9px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.m-prof-pres-val {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  margin-top: 1px;
}

.m-prof-streak-wrap {
  margin-bottom: 10px;
}

.m-prof-streak-lbl {
  font-size: 10px;
  color: #9ca3af;
  margin-bottom: 3px;
}

.m-prof-streak-bar {
  height: 6px;
  border-radius: 3px;
  background: #f3f4f6;
  overflow: hidden;
  margin-bottom: 3px;
}

.m-prof-streak-fill {
  height: 100%;
  border-radius: 3px;
  background: #0F6E56;
  transition: width .3s ease;
}

.m-prof-streak-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #9ca3af;
}

.m-prof-id-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 10px;
}

.m-prof-id-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}

.m-prof-id-icon {
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: .7;
}

.m-prof-id-field-lbl {
  font-size: 9px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.m-prof-id-field-val {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  line-height: 1.35;
  margin-top: 1px;
}

.m-prof-dose-hist {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,.08);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.m-prof-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.m-prof-hist-table th {
  font-size: 9px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  padding: 8px 12px 5px;
  text-align: left;
  border-bottom: 0.5px solid rgba(0,0,0,.07);
}

.m-prof-hist-table td {
  padding: 7px 12px;
  border-bottom: 0.5px solid rgba(0,0,0,.06);
  color: #374151;
  vertical-align: top;
}

.m-prof-hist-table tr:last-child td {
  border-bottom: none;
}

.m-prof-hist-table .chg-up   { color: #0F6E56; font-weight: 600; }
.m-prof-hist-table .chg-down { color: #A32D2D; font-weight: 600; }

.m-prof-note {
  background: #f3f4f6;
  border-left: 2px solid #5DCAA5;
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.5;
}

.m-prof-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
  color: #9ca3af;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.m-prof-divider::before,
.m-prof-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.08);
}

@media (max-width: 520px) {
  .m-prof-hdr-meta {
    justify-content: flex-start;
  }
  .m-prof-meta-pair {
    text-align: left;
  }
  .m-prof-grid-2 {
    grid-template-columns: 1fr;
  }
  .m-prof-dos-block {
    flex-direction: column;
    align-items: flex-start;
  }
  .m-prof-dos-right {
    text-align: left;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LAPORAN & TREND — KPI HERO CARDS UPGRADE
   Scoped to #page-laporan only — no other pages affected
   ══════════════════════════════════════════════════════════════════ */

/* --- Grid layout (replaces flex+scroll) --- */
#page-laporan .prm-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 24px 32px 32px;
  overflow-x: visible;
  scrollbar-width: none;
}

/* --- Individual card: glassmorphism base --- */
#page-laporan .prm-sc {
  flex: none;
  min-width: 0;
  padding: 22px 20px 18px;
  border-radius: 18px;
  border-right: none !important;
  background: rgba(255,255,255,.065);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  align-self: stretch;
  cursor: default;
}

#page-laporan .prm-sc:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);
}

/* Remove the tiny top-border hover accent (replaced by full gradient) */
#page-laporan .prm-sc::before { display: none !important; }

/* --- Per-colour gradient backgrounds --- */
#page-laporan .prm-sc.cc-green {
  background: linear-gradient(145deg, rgba(52,211,153,.14) 0%, rgba(255,255,255,.04) 100%);
  border-color: rgba(52,211,153,.22) !important;
}
#page-laporan .prm-sc.cc-green:hover  { background: linear-gradient(145deg, rgba(52,211,153,.20) 0%, rgba(255,255,255,.06) 100%); }

#page-laporan .prm-sc.cc-violet {
  background: linear-gradient(145deg, rgba(167,139,250,.14) 0%, rgba(255,255,255,.04) 100%);
  border-color: rgba(167,139,250,.22) !important;
}
#page-laporan .prm-sc.cc-violet:hover { background: linear-gradient(145deg, rgba(167,139,250,.20) 0%, rgba(255,255,255,.06) 100%); }

#page-laporan .prm-sc.cc-indigo {
  background: linear-gradient(145deg, rgba(129,140,248,.14) 0%, rgba(255,255,255,.04) 100%);
  border-color: rgba(129,140,248,.22) !important;
}
#page-laporan .prm-sc.cc-indigo:hover { background: linear-gradient(145deg, rgba(129,140,248,.20) 0%, rgba(255,255,255,.06) 100%); }

#page-laporan .prm-sc.cc-red {
  background: linear-gradient(145deg, rgba(248,113,113,.14) 0%, rgba(255,255,255,.04) 100%);
  border-color: rgba(248,113,113,.22) !important;
}
#page-laporan .prm-sc.cc-red:hover    { background: linear-gradient(145deg, rgba(248,113,113,.20) 0%, rgba(255,255,255,.06) 100%); }

#page-laporan .prm-sc.cc-yellow {
  background: linear-gradient(145deg, rgba(250,204,21,.14) 0%, rgba(255,255,255,.04) 100%);
  border-color: rgba(250,204,21,.22) !important;
}
#page-laporan .prm-sc.cc-yellow:hover { background: linear-gradient(145deg, rgba(250,204,21,.20) 0%, rgba(255,255,255,.06) 100%); }

/* --- Larger icon container --- */
#page-laporan .prm-sc-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
  font-size: 24px !important;
  margin-bottom: 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-laporan .prm-sc.cc-green  .prm-sc-icon { background: rgba(52,211,153,.18) !important;  box-shadow: 0 2px 10px rgba(52,211,153,.20); }
#page-laporan .prm-sc.cc-violet .prm-sc-icon { background: rgba(167,139,250,.18) !important; box-shadow: 0 2px 10px rgba(167,139,250,.20); }
#page-laporan .prm-sc.cc-indigo .prm-sc-icon { background: rgba(129,140,248,.18) !important; box-shadow: 0 2px 10px rgba(129,140,248,.20); }
#page-laporan .prm-sc.cc-red    .prm-sc-icon { background: rgba(248,113,113,.18) !important;  box-shadow: 0 2px 10px rgba(248,113,113,.20); }
#page-laporan .prm-sc.cc-yellow .prm-sc-icon { background: rgba(250,204,21,.18) !important;   box-shadow: 0 2px 10px rgba(250,204,21,.20); }

/* --- Prominent number --- */
#page-laporan .prm-sc-v {
  font-size: 40px !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  margin-bottom: 4px !important;
  line-height: 1 !important;
  display: block !important;
}

/* --- Label --- */
#page-laporan .prm-sc-l {
  font-size: 11px !important;
  letter-spacing: .6px !important;
  color: rgba(255,255,255,.42) !important;
  margin-bottom: 0 !important;
  display: block !important;
  text-transform: uppercase !important;
}

/* --- Comparison text row --- */
#page-laporan .prm-sc-cmp {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .2px;
}
#page-laporan .prm-sc-cmp.cmp-up   { color: #34d399; }
#page-laporan .prm-sc-cmp.cmp-down { color: #f87171; }
#page-laporan .prm-sc-cmp.cmp-same { color: rgba(255,255,255,.45); }

/* --- Responsive: tablet (3 columns) --- */
@media (max-width: 900px) {
  #page-laporan .prm-stats-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 20px 24px 24px;
  }
  #page-laporan .prm-sc-v { font-size: 34px !important; }
}

/* --- Responsive: mobile (2 columns) --- */
@media (max-width: 600px) {
  #page-laporan .prm-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 16px 16px 20px;
  }
  #page-laporan .prm-sc {
    padding: 18px 16px 14px;
    border-radius: 14px;
  }
  #page-laporan .prm-sc-v { font-size: 30px !important; }
  #page-laporan .prm-sc-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LAPORAN — RINGKASAN INSIGHT CARD
   ══════════════════════════════════════════════════════════════════ */

.lap-insight-card {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sh);
  margin-bottom: 24px;
  position: relative;
}

/* Subtle left accent stripe */
.lap-insight-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #7c3aed 0%, #a78bfa 50%, #6366f1 100%);
  border-radius: 12px 0 0 12px;
}

/* ── Header ── */
.lap-insight-header {
  background: #f8f6f2;
  border-bottom: 1.5px solid var(--rule);
  padding: 12px 18px 12px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lap-insight-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1a0b3d);
}

.lap-insight-sub {
  font-size: 11px;
  color: var(--ink3, #9ca3af);
  margin-top: 2px;
  font-weight: 500;
}

.lap-insight-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(124, 58, 237, .08);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, .18);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Body: insight rows grid ── */
.lap-insight-body {
  padding: 16px 18px 16px 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
}

.lap-insight-loading {
  font-size: 13px;
  color: var(--ink3);
  padding: 12px 0;
  grid-column: 1 / -1;
  text-align: center;
}

/* ── Individual insight row ── */
.lap-insight-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background .15s;
}
.lap-insight-row:hover {
  background: rgba(124, 58, 237, .04);
}

.lap-insight-icon {
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

.lap-insight-text {
  font-size: 12.5px;
  color: var(--ink2, #3d2d6b);
  line-height: 1.55;
  font-weight: 500;
}
.lap-insight-text strong {
  color: var(--ink, #1a0b3d);
  font-weight: 700;
}

/* ── Divider between rows (optional dot separator) ── */
.lap-insight-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--rule, #eef0f6);
  margin: 4px 0;
}

/* ── Responsive: single column on mobile ── */
@media (max-width: 640px) {
  .lap-insight-body {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 12px 14px 12px 20px;
  }
  .lap-insight-header {
    padding: 10px 14px 10px 20px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LAPORAN — ABOVE-THE-FOLD DENSITY OPTIMISATION
   All values override previous blocks for #page-laporan only.
   Target: 1920×1080 desktop shows hero + KPI + insight + stat header
   without scrolling.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Hero: reduce top/bottom breathing room ── */
#page-laporan .hero-inner {
  padding: 14px 28px 0 !important;
}
#page-laporan .hero-title {
  font-size: 20px !important;
  margin-bottom: 3px !important;
  line-height: 1.2 !important;
}
#page-laporan .hero-sub {
  font-size: 12px !important;
  margin-bottom: 0 !important;
}
#page-laporan .prm-eyebrow {
  font-size: 9px !important;
  padding: 3px 8px !important;
  margin-bottom: 6px !important;
}
#page-laporan .prm-hero-bar {
  margin-top: 12px !important;
}

/* ── 2. KPI stats row: tighter grid ── */
#page-laporan .prm-stats-row {
  gap: 10px !important;
  padding: 12px 24px 14px !important;
}

/* ── 3. KPI card: compact glassmorphism ── */
#page-laporan .prm-sc {
  padding: 12px 14px 10px !important;
  border-radius: 12px !important;
}
#page-laporan .prm-sc:hover {
  transform: translateY(-2px) !important;
}

/* ── 4. Icon: smaller but still visible ── */
#page-laporan .prm-sc-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  font-size: 15px !important;
  margin-bottom: 8px !important;
}

/* ── 5. Number: still prominent, just shorter ── */
#page-laporan .prm-sc-v {
  font-size: 28px !important;
  letter-spacing: -1px !important;
  margin-bottom: 2px !important;
}

/* ── 6. Label ── */
#page-laporan .prm-sc-l {
  font-size: 10px !important;
  letter-spacing: .5px !important;
  margin-bottom: 0 !important;
}

/* ── 7. Comparison text: tighter divider ── */
#page-laporan .prm-sc-cmp {
  font-size: 9.5px !important;
  padding-top: 6px !important;
  margin-top: 6px !important;
  letter-spacing: 0 !important;
}

/* ── 8. Insight card: compact header + tight body ── */
.lap-insight-card {
  margin-bottom: 14px !important;
  border-radius: 10px !important;
}
.lap-insight-header {
  padding: 8px 14px 8px 18px !important;
}
.lap-insight-title {
  font-size: 12.5px !important;
}
.lap-insight-sub {
  font-size: 10px !important;
  margin-top: 1px !important;
}
.lap-insight-badge {
  font-size: 10px !important;
  padding: 3px 9px !important;
}
.lap-insight-body {
  padding: 10px 14px 10px 18px !important;
  gap: 2px 16px !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
.lap-insight-row {
  padding: 5px 7px !important;
  border-radius: 6px !important;
  gap: 7px !important;
}
.lap-insight-icon {
  font-size: 13px !important;
  width: 18px !important;
  line-height: 1.5 !important;
}
.lap-insight-text {
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.lap-insight-divider {
  margin: 2px 0 !important;
}

/* ── 9. Main section spacing ── */
#page-laporan .main > div,
#page-laporan .main > [style] {
  margin-bottom: 14px !important;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES FOR DENSITY OPTIMISATION
   ═══════════════════════════════════════════════════════ */

/* Tablet (≤ 1024px): balanced density */
@media (max-width: 1024px) {
  #page-laporan .prm-stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 9px !important;
    padding: 12px 20px 14px !important;
  }
  #page-laporan .prm-sc-v { font-size: 26px !important; }
  .lap-insight-body {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile (≤ 600px): stack naturally */
@media (max-width: 600px) {
  #page-laporan .hero-inner { padding: 12px 16px 0 !important; }
  #page-laporan .hero-title  { font-size: 18px !important; }
  #page-laporan .prm-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px 14px 12px !important;
  }
  #page-laporan .prm-sc { padding: 10px 12px 8px !important; }
  #page-laporan .prm-sc-v { font-size: 24px !important; }
  #page-laporan .prm-sc-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }
  .lap-insight-body {
    grid-template-columns: 1fr !important;
    padding: 8px 12px 8px 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LAPORAN — CATEGORY DONUT CHART (Pecahan Kategori Pesakit Aktif)
   ══════════════════════════════════════════════════════════════════ */

.lap-cat-alert-row {
  align-items: stretch !important;
}

.cat-donut-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cat-donut-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  min-height: 220px;
}

.cat-donut-loading {
  text-align: center;
  color: var(--ink3, #9ca3af);
  font-size: 12px;
  padding: 12px 0;
  margin: auto;
}

.cat-donut-layout {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 8px 10px;
  align-items: stretch;
  min-height: 0;
}

.cat-donut-chart-box {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 180px;
  align-self: center;
  justify-self: center;
  max-width: 200px;
}

.cat-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1.1;
}

.cat-donut-total {
  font-family: 'Sora', var(--head, sans-serif);
  font-size: 26px;
  font-weight: 800;
  color: var(--ink, #1a0b3d);
  letter-spacing: -.5px;
}

.cat-donut-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink3, #9ca3af);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 1px;
}

.cat-donut-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 6px;
  align-content: center;
  min-width: 0;
  height: 100%;
}

.cat-donut-legend-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 5px;
  align-items: center;
  padding: 5px 7px;
  background: #f8f7fc;
  border: 1px solid var(--rule, #eef0f6);
  border-radius: 6px;
  min-width: 0;
}

.cat-donut-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  align-self: center;
}

.cat-donut-legend-label {
  font-weight: 600;
  color: var(--ink2, #3d2d6b);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.cat-donut-legend-val {
  font-size: 10.5px;
  white-space: nowrap;
  text-align: right;
}
.cat-donut-legend-val span {
  color: var(--ink3, #9ca3af);
  font-weight: 500;
  font-size: 10px;
}

@media (max-width: 900px) {
  .lap-cat-alert-row {
    grid-template-columns: 1fr !important;
  }
  .cat-donut-panel {
    min-height: 0;
  }
  .cat-donut-chart-box {
    min-height: 150px;
    max-width: 160px;
  }
}

@media (max-width: 640px) {
  .cat-donut-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cat-donut-chart-box {
    min-height: 140px;
    max-width: 180px;
    margin: 0 auto;
  }
  .cat-donut-legend {
    grid-template-columns: 1fr 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CLINICAL ALERT PANEL — Laporan & Trend (PRO MAX redesign)
   - Left-border accent cards (no redundant per-card severity badge)
   - Summary chips strip in header
   - Compact single-row card layout
   ══════════════════════════════════════════════════════════════════ */

.ca-panel-wrap {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Panel header ── */
.ca-panel-head {
  background: #fafaf9;
  border-bottom: 1.5px solid var(--rule);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
}

.ca-panel-head-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ca-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.ca-panel-scan-ts {
  font-size: 10px;
  color: var(--ink3);
  white-space: nowrap;
}

.ca-refresh-btn {
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Summary chips strip ── */
.ca-summary-chips {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
  background: #fafaf9;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.ca-summary-chips:empty {
  display: none;
  padding: 0;
  border-bottom: none;
}

.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.ca-chip-kritikal {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid rgba(220, 38, 38, .22);
}

.ca-chip-tindakan {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, .24);
}

.ca-chip-pemantauan {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid rgba(37, 99, 235, .20);
}

.ca-chip-ok {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, .22);
}

/* ── Scrollable alert body ── */
.ca-panel-body {
  padding: 10px 12px;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.ca-panel-empty {
  text-align: center;
  color: var(--ink3);
  font-size: 13px;
  padding: 28px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ca-panel-ok {
  text-align: center;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ── Section dividers (TCA Dr / Amaran Klinikal) ── */
.ca-section-hdr {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink3);
  padding: 2px 4px 5px;
  border-bottom: 1.5px solid var(--rule);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ca-section-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink2);
  background: var(--bg);
  padding: 1px 7px;
  border-radius: 10px;
}

/* ── Severity group ── */
.ca-sev-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ca-sev-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .55px;
  position: sticky;
  top: -1px;
  z-index: 2;
}

.ca-sev-header-badge {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ca-sev-count {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .60);
}

.ca-sev-kritikal-hdr {
  background: rgba(220, 38, 38, .09);
  color: #991b1b;
  border: 1px solid rgba(220, 38, 38, .16);
}

.ca-sev-tindakan-hdr {
  background: rgba(217, 119, 6, .09);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, .18);
}

.ca-sev-pemantauan-hdr {
  background: rgba(37, 99, 235, .07);
  color: #1e40af;
  border: 1px solid rgba(37, 99, 235, .14);
}

/* ── Alert card — left-border accent, clean white, no bg fill ── */
.ca-alert-card {
  border-radius: 0 8px 8px 0;
  border: 1px solid;
  border-left: 4px solid;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.45;
  background: #fff;
  transition: box-shadow .15s;
}

.ca-alert-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.ca-kritikal {
  border-color: rgba(220, 38, 38, .16);
  border-left-color: #dc2626;
  color: #7f1d1d;
}

.ca-tindakan {
  border-color: rgba(217, 119, 6, .18);
  border-left-color: #d97706;
  color: #78350f;
}

.ca-pemantauan {
  border-color: rgba(37, 99, 235, .14);
  border-left-color: #3b82f6;
  color: #1e3a8a;
}

/* ── Card row — icon + content + action in one horizontal line ── */
.ca-alert-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.ca-alert-icon {
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1.45;
}

.ca-alert-content {
  flex: 1;
  min-width: 0;
}

.ca-alert-tag {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .45px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .06);
  margin-bottom: 3px;
}

.ca-alert-msg {
  font-size: 12.5px;
  line-height: 1.5;
}

.ca-alert-msg strong {
  font-weight: 700;
}

.ca-alert-action {
  flex-shrink: 0;
  align-self: center;
}

.ca-alert-btn {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .85);
  cursor: pointer;
  color: inherit;
  transition: background .15s, box-shadow .12s;
  white-space: nowrap;
}

.ca-alert-btn:hover {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
}

.ca-kritikal .ca-alert-btn { border-color: rgba(220, 38, 38, .25); }
.ca-tindakan .ca-alert-btn { border-color: rgba(217, 119, 6, .28); }
.ca-pemantauan .ca-alert-btn { border-color: rgba(37, 99, 235, .22); }

/* ════════════════════════════════════════════════════════════════════
   LIVE NOTIFICATIONS — bell, dropdown, live indicator, toasts
   ════════════════════════════════════════════════════════════════════ */

/* ── New-alert fade-in (in-card) ─────────────────────────────────── */
@keyframes caAlertFadeIn {
  0%   { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ca-alert-card.ca-alert-new {
  animation: caAlertFadeIn .55s cubic-bezier(.22, 1, .36, 1) both;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, .45), 0 4px 14px rgba(0, 0, 0, .08);
}

/* ── Live indicator (replaces the old "Semak" button) ────────────── */
.ca-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  border: 1.5px solid rgba(16, 185, 129, .35);
  border-radius: 30px;
  background: rgba(16, 185, 129, .10);
  color: #047857;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.ca-live-indicator:hover { background: rgba(16, 185, 129, .18); }
.ca-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
  animation: caLivePulse 1.8s infinite;
}
@keyframes caLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ── Notification bell (top bar) ─────────────────────────────────── */
#ln-bell-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 10px;
}
#ln-bell-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s;
}
#ln-bell-btn:hover { background: rgba(124, 110, 154, .12); }
#ln-bell-btn.ln-bell-alert { color: #dc2626; }

.ln-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #6366f1;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--white);
}
.ln-badge.ln-badge-krit {
  background: #dc2626;
  animation: lnBadgePop 1.6s ease-in-out infinite;
}
.ln-badge.ln-badge-acct {
  background: #d97706;
  animation: lnBadgePop 1.6s ease-in-out infinite;
}
@keyframes lnBadgePop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

@keyframes lnBellShake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(13deg); }
  30% { transform: rotate(-11deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
#ln-bell-btn.ln-bell-shake svg { animation: lnBellShake .8s ease; transform-origin: 50% 10%; }

/* ── Dropdown ────────────────────────────────────────────────────── */
.ln-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(26, 9, 56, .22);
  z-index: 1200;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.ln-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.ln-dd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #faf9ff, #fff);
}
.ln-dd-title { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.ln-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(16, 185, 129, .12);
  color: #047857;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.ln-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  animation: caLivePulse 1.8s infinite;
}

.ln-dd-list { max-height: 60vh; overflow-y: auto; padding: 6px; }

.ln-dd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 16px;
  text-align: center;
  color: var(--ink3);
  font-size: 13px;
}
.ln-dd-empty-sub { font-size: 11.5px; color: var(--ink3); opacity: .75; }

.ln-dd-group { margin-bottom: 4px; }
.ln-dd-group-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.ln-dd-group-count {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 10.5px;
  text-align: center;
  background: rgba(0, 0, 0, .06);
}
.ln-dd-group.ln-krit .ln-dd-group-hdr { color: #b91c1c; }
.ln-dd-group.ln-tind .ln-dd-group-hdr { color: #b45309; }
.ln-dd-group.ln-pant .ln-dd-group-hdr { color: #1d4ed8; }

.ln-dd-item {
  display: flex;
  gap: 9px;
  padding: 9px 9px;
  border-radius: 9px;
  transition: background .12s;
}
.ln-dd-item-click { cursor: pointer; }
.ln-dd-item-click:hover { background: rgba(124, 110, 154, .08); }
.ln-dd-item-new { background: rgba(45, 212, 191, .10); }
.ln-dd-item-request { flex-direction: column; align-items: stretch; }
.ln-dd-item-request .ln-dd-dot { display: none; }
.ln-dd-item-request .ln-dd-body { width: 100%; }

.ln-dd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ln-dd-btn {
  border: none;
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.ln-dd-btn-ok { background: #10b981; color: #fff; }
.ln-dd-btn-ok:hover { background: #059669; }
.ln-dd-btn-no { background: #ef4444; color: #fff; }
.ln-dd-btn-no:hover { background: #dc2626; }
.ln-dd-btn-link {
  background: transparent;
  color: #6366f1;
  padding: 5px 6px;
}
.ln-dd-btn-link:hover { text-decoration: underline; }

.ln-dd-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
}
.ln-krit .ln-dd-dot { background: #dc2626; }
.ln-tind .ln-dd-dot { background: #d97706; }
.ln-pant .ln-dd-dot { background: #2563eb; }

.ln-dd-body { min-width: 0; }
.ln-dd-tag {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 1px;
}
.ln-dd-msg {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ln-dd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  color: var(--ink3);
  background: #faf9ff;
}
.ln-dd-clear {
  border: none;
  background: none;
  color: #6366f1;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.ln-dd-clear:hover { background: rgba(99, 102, 241, .1); }

/* ── Bottom-right KRITIKAL toasts ────────────────────────────────── */
.ln-toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.ln-toast {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(220, 38, 38, .25);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(26, 9, 56, .22);
  overflow: hidden;
  opacity: 0;
  transform: translateX(120%);
  transition: opacity .3s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
  pointer-events: auto;
}
.ln-toast.show { opacity: 1; transform: translateX(0); }
.ln-toast-bar { width: 5px; flex: 0 0 auto; background: #dc2626; }
.ln-toast-main { padding: 10px 12px 11px; min-width: 0; flex: 1; }
.ln-toast-hdr { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.ln-toast-icon { font-size: 14px; }
.ln-toast-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #b91c1c;
  text-transform: uppercase;
}
.ln-toast-msg {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ln-toast-action {
  margin-top: 7px;
  border: none;
  background: none;
  color: #dc2626;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}
.ln-toast-action:hover { text-decoration: underline; }
.ln-toast-close {
  flex: 0 0 auto;
  align-self: flex-start;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink3);
  cursor: pointer;
  padding: 8px 10px 8px 4px;
}
.ln-toast-close:hover { color: var(--ink); }

.ln-toast-acct { border-color: rgba(217, 119, 6, .35); }
.ln-toast-acct .ln-toast-bar { background: #d97706; }
.ln-toast-acct .ln-toast-title { color: #b45309; }
.ln-toast-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ln-toast-btn {
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.ln-toast-btn-ok { background: #10b981; color: #fff; }
.ln-toast-btn-ok:hover { background: #059669; }
.ln-toast-btn-no { background: #ef4444; color: #fff; }
.ln-toast-btn-no:hover { background: #dc2626; }

.ca-alert-action-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.ca-alert-btn-ok {
  background: #10b981 !important;
  color: #fff !important;
  border-color: #059669 !important;
}
.ca-alert-btn-ok:hover { background: #059669 !important; }
.ca-alert-btn-no {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}
.ca-alert-btn-no:hover { background: #dc2626 !important; }

@media (max-width: 480px) {
  .ln-toast-stack { left: 12px; right: 12px; width: auto; }
  .ln-dropdown { width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .ca-live-dot, .ln-live-dot, .ln-badge.ln-badge-krit,
  #ln-bell-btn.ln-bell-shake svg, .ca-alert-card.ca-alert-new { animation: none !important; }
}