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


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

@media (min-width: 641px) and (max-width: 1180px) {

      .topnav {
        padding: 0 16px
      }

      /* Mobile sidebar: override old display:none → use transform slide-in */
      #sidebar {
        display: flex !important;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        z-index: 350;
        width: var(--side-w) !important;
        max-width: 80vw;
      }

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

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

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

      #content-area {
        width: 100%;
        height: calc(100dvh - 52px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
      }

      .nav-brand {
        margin-right: 16px;
        font-size: 15px
      }

      /* ntab wrap/sizing — see dedicated sidebar block at end of file */

      .nav-date {
        display: none
      }

      /* GPU compositing — keep translateX for drawer slide (do not replace with translateZ alone) */
      #sidebar {
        -webkit-transform: translateX(-100%) translateZ(0);
        transform: translateX(-100%) translateZ(0);
      }

      #sidebar.mob-open {
        -webkit-transform: translateX(0) translateZ(0);
        transform: translateX(0) translateZ(0);
      }

      /* Topbar logout button — visible on iPad since sidebar hidden */
      #topbar-logout-btn {
        display: flex !important
      }

      .hero-inner {
        padding: 0 16px
      }

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

      .hstat {
        padding: 12px 16px
      }

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

      .main {
        padding: 16px
      }

      /* Patient grid — 2 columns */
      .pgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
      }

      /* Summary cards */
      .scards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
      }

      /* Table scroll on narrow tablets */
      .tbl-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
      }

      .week-hdr,
      .week-row {
        min-width: 660px
      }

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

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

    
@media (min-width: 1025px) and (max-width: 1180px) {
      #sidebar {
        height: 100dvh
      }

      .side-nav {
        flex: 1;
        min-height: 0;
        overflow-y: auto
      }

      #content-area {
        height: calc(100dvh - 52px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
      }
    }

    
@media (min-width: 641px) and (max-width: 1180px) {

      button,
      .btn,
      .pill,
      .pcard,
      .ntab,
      .topt,
      .pcard-act-btn,
      .lo-role {
        touch-action: manipulation;
      }

      /* NOTE: translateZ(0) removed from #content-area — breaks iOS touch scroll tracking */
    }

    
@media (min-width: 641px) and (max-width: 1180px) {
  #page-users .u-list-header,
  #page-users #u-list .u-user-row { grid-template-columns: 1fr 120px 140px 120px !important; }
}


@media (min-width: 769px) and (max-width: 1180px) {

  /* ── 1. SIDEBAR: off-canvas drawer, hidden by default ──────── */
  #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--side-w) !important;
    max-width: 80vw !important;
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1) !important;
    z-index: 1200 !important;
    will-change: transform;
  }

  /* Open state — triggered by existing .mob-open class */
  #sidebar.mob-open {
    transform: translateX(0) !important;
  }

  /* Collapsed state must NOT pin the sidebar on tablet */
  body.sidebar-collapsed #sidebar {
    transform: translateX(-100%) !important;
    width: var(--side-w) !important;
  }

  /* ── 2. BACKDROP: show when sidebar is open on tablet ──────── */
  #sidebar-backdrop {
    z-index: 1199 !important;
  }

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

  /* ── 3. TOPBAR: full width, no left offset ──────────────────── */
  #topbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  /* Collapsed sidebar must not push topbar either */
  body.sidebar-collapsed #topbar {
    left: 0 !important;
  }

  /* ── 4. CONTENT AREA: full width, no left margin ────────────── */
  #content-area {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Collapsed sidebar must not add back the left margin on tablet */
  body.sidebar-collapsed #content-area {
    margin-left: 0 !important;
  }

  /* ── 5. SIDEBAR-TOGGLE BUTTON: reposition into topbar on tablet */
  #sidebar-toggle {
    display: flex !important;
    position: fixed !important;
    top: 6px !important;
    left: 10px !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    z-index: 1300 !important; /* above backdrop (1199) AND sidebar (1200) so it's always tappable */
  }

  /* When sidebar is open: move toggle to top-right of drawer — not over the logo */
  body.mob-sidebar-open #sidebar-toggle {
    left: calc(min(var(--side-w), 80vw) - 22px) !important;
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28) !important;
  }

  #sidebar-toggle:hover {
    background: rgba(26,9,56,.07) !important;
    color: var(--ink) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.mob-sidebar-open #sidebar-toggle:hover {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .28) !important;
  }

  #sidebar-toggle:active {
    transform: scale(0.9) !important;
  }

  /* Topbar: add left padding to make room for the hamburger button */
  #topbar {
    padding-left: 58px !important;
  }

  /* Arrow icon: points right → "open drawer" */
  #sidebar-toggle svg {
    transform: rotate(180deg) !important;
    transition: transform .25s ease-in-out !important;
  }

  /* When sidebar is open, flip arrow to ← (close) */
  body.mob-sidebar-open #sidebar-toggle svg {
    transform: rotate(0deg) !important;
  }

  /* Collapsed class is desktop-only; reset on tablet */
  body.sidebar-collapsed #sidebar-toggle svg {
    transform: rotate(180deg) !important;
  }

  /* ── 6. HERO STATS: responsive grid stacking ──────────────── */
  /* Tablet landscape: 4 columns; portrait: 2×2 grid            */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: unset !important;
    overflow: hidden !important;
  }

  .hstat {
    flex: unset !important;
    width: auto !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
  }

  /* Remove incorrect nth-child border rules from the 2-col grid override */
  .hstat:nth-child(2n) {
    border-right: 1px solid rgba(255,255,255,.08) !important;
  }
  .hstat:nth-child(4n) {
    border-right: none !important;
  }

  /* ── 7. MAIN CONTENT PADDING: breathable on tablet ─────────── */
  .main {
    padding: 16px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ── 8. PATIENT GRID: 2 columns on tablet landscape ─────────── */
  .pgrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Summary stat cards: 2 per row on tablet */
  .scards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ── 9. CONTROL BAR: prevent overflow ───────────────────────── */
  .ctrl {
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .search-wrap {
    min-width: 160px !important;
    flex: 1 1 160px !important;
  }

  /* ── 10. PREVENT HORIZONTAL OVERFLOW on all children ─────────── */
  .main > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── 11. TABLE SCROLL on tablet ─────────────────────────────── */
  .tbl-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 12. NAV DATE: show on tablet (there's room with full width) */
  .nav-date {
    display: flex !important;
    font-size: 11px !important;
  }

  /* ── 13. Logout button: show on tablet (sidebar is hidden) ──── */
  #topbar-logout-btn {
    display: flex !important;
  }

  /* ── 14. Page overflow guard ────────────────────────────────── */
  .page, .page.active {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── 15. Patient Detail — elak 3 kad sebaris pada tablet ───── */
  #page-patient-detail .pd-col-left {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }

  #page-patient-detail .pd-col-right {
    position: static !important;
    max-height: none !important;
  }
}


@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {

  /* Stats: 2×2 grid stacks nicely in portrait */
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

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

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

  .hstat:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.08) !important;
  }

  /* Patient cards: 1 column in portrait for readability */
  .pgrid {
    grid-template-columns: 1fr !important;
  }

  /* Summary cards: 1 per row in portrait */
  .scards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Main padding: tighter in portrait */
  .main {
    padding: 14px 16px !important;
  }
}


@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {

  /* Sidebar stays off-canvas even in landscape on tablet */
  #sidebar {
    transform: translateX(-100%) !important;
  }

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

  /* Stats: 4 columns fits well in landscape */
  .hero-stats {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Patient grid: 2 columns (can fit 3 if cards are small) */
  .pgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Summary cards: up to 4 in landscape */
  .scards {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .main {
    padding: 16px 24px !important;
  }
}




@media (min-width: 641px) and (max-width: 1180px) {
          .u-list-header,
          .u-user-row { grid-template-columns: 1fr 130px 140px 120px; }
        }




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

@media (min-width: 641px) and (max-width: 900px) {
      #page-registry > div:first-child > div > div:last-child {
        grid-template-columns: repeat(4, 1fr) !important;
      }
    }

    


/* ═══════════════════════════════════════════════════════════════════
   PENGIRAAN DOS & KEHADIRAN — Tablet / iPad Responsive Fixes
   Targets: action toolbar overflow, button wrapping, container clipping
   Breakpoint: 641px – 1180px (iPad Mini → iPad Pro)
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 641px) and (max-width: 1180px) {

  /* ── 1. PAGE CONTAINER: ensure no overflow clipping ──────────── */
  #page-dos,
  #page-dispensing,
  [id*="dos"],
  [id*="dispensing"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── 2. WHITE CARD CONTAINER (the big rounded-corner inner card) ─ */
  #page-dos .main > div,
  #page-dispensing .main > div,
  [id*="dos"] .main > div,
  [id*="dispensing"] .main > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ── 3. ACTION TOOLBAR ROW ────────────────────────────────────── */
  /* Holds: date input | KHAMIS | Group TA | Batal |                 */
  /*        Borang SPUB | Tarikh Khas | Laporan | Reset              */
  .dos-toolbar,
  .dispensing-toolbar,
  .action-toolbar,
  .ctrl-bar,
  [class*="toolbar"],
  [class*="ctrl-row"],
  [class*="action-row"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: 8px 0 !important;
  }

  /* ── 4. DATE INPUT — bounded width ───────────────────────────── */
  input[type="date"],
  .date-input,
  [class*="date-pick"] {
    flex: 0 0 auto !important;
    min-width: 130px !important;
    max-width: 160px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  /* ── 5. ACTION BUTTONS — no fixed widths, allow flex-shrink ────  */
  .dos-toolbar button,
  .dispensing-toolbar button,
  .action-toolbar button,
  .ctrl-bar button,
  [class*="toolbar"] button,
  [class*="ctrl-row"] button,
  [class*="action-row"] button {
    flex: 0 0 auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ── 6. BADGE/COUNT inside buttons (e.g. "Tarikh Khas  3") ─────  */
  [class*="toolbar"] button .badge,
  [class*="toolbar"] button [class*="badge"],
  [class*="toolbar"] button [class*="count"] {
    flex-shrink: 0 !important;
    font-size: 10px !important;
  }

  /* ── 7. RIGHT-SIDE ICON STRIP — prevent absolute clipping ──────  */
  .dos-side-actions,
  .disp-side-icons,
  [class*="side-action"],
  [class*="float-action"] {
    position: relative !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  /* ── 8. SUMMARY STAT CARDS (DOT HARI INI, BOTOL TA, etc.) ──────  */
  [id*="dos"] .scards,
  [id*="dispensing"] .scards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ── Narrower tablets & large phones (641–768px) ─────────────────── */
@media (min-width: 641px) and (max-width: 768px) {

  input[type="date"],
  .date-input {
    min-width: 120px !important;
    max-width: 140px !important;
    font-size: 16px !important;
  }

  [class*="toolbar"] button {
    font-size: 11px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  [id*="dos"] .scards,
  [id*="dispensing"] .scards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ── iPad portrait: comfortable two-row button wrap ─────────────── */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {

  [class*="toolbar"] {
    gap: 6px !important;
  }

  [id*="dos"] .scards,
  [id*="dispensing"] .scards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ── iPad landscape: prefer single row, scroll if truly tight ───── */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {

  [class*="toolbar"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
  }

  [id*="dos"] .scards,
  [id*="dispensing"] .scards {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   FIX: #page-disp ACTION TOOLBAR OVERFLOW — PRECISE TARGETED RULES
   
   ROOT CAUSES IDENTIFIED IN main.css:
   1. @media (769px-1366px landscape): .datebar { flex-wrap: nowrap !important }
      → This kills wrapping on iPad Air landscape. Must be overridden.
   2. .db-actions { flex:1; justify-content:flex-end } — no flex-wrap set
   3. .db-row { width:100%; justify-content:space-between } — single rigid row
   4. .btn-action has fixed height:36px but no max-width/flex-shrink override
   
   All rules use higher specificity (#page-disp + class) and !important
   to beat the landscape media query override in main.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Applies to ALL tablet widths: portrait AND landscape ────────── */
@media (min-width: 641px) and (max-width: 1180px) {

  /* 1. DATEBAR: allow wrapping — overrides the nowrap landscape rule */
  #page-disp .datebar {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  /* 2. DB-ROW: allow wrapping, don't force single line */
  #page-disp .db-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. DB-ACTIONS: the button group — wrap and contain */
  #page-disp .db-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }

  /* Also override the datebar > div:last-child nowrap from landscape query */
  #page-disp .datebar > div:last-child {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  /* 4. BUTTON GROUP CONTAINERS (the rounded pill-group wrappers) */
  #page-disp .db-actions > div {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 5. INDIVIDUAL ACTION BUTTONS — prevent overflow, allow shrink */
  #page-disp .btn-action {
    flex: 0 0 auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    font-size: 11.5px !important;
    padding: 7px 11px !important;
    height: auto !important;       /* release fixed 36px height */
    min-height: 34px !important;
  }

  /* 6. DATE INPUT — bounded width */
  #page-disp .date-inp {
    min-width: 125px !important;
    max-width: 150px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  /* 7. DAY BADGE (KHAMIS pill) — no shrink */
  #page-disp .day-badge {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* 8. DB-LABEL (PILIH TARIKH text) — no shrink */
  #page-disp .db-label {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

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


/* ── Narrow tablets / large phones (641–768px): tighter sizing ───── */
@media (min-width: 641px) and (max-width: 768px) {

  #page-disp .btn-action {
    font-size: 11px !important;
    padding: 6px 9px !important;
    gap: 4px !important;
  }

  #page-disp .date-inp {
    min-width: 115px !important;
    max-width: 135px !important;
    font-size: 12px !important;
  }

  #page-disp .scards {
    display: none !important;
  }
}

/* ── iPad landscape: override the main.css nowrap rule directly ──── */
/* This media query EXACTLY matches the offending rule in main.css    */
/* so specificity wins: #page-disp beats generic .datebar             */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {

  /* Override: main.css sets .datebar { flex-wrap: nowrap !important } */
  /* We narrow scope to iPad (≤1180px) within that landscape range     */
  #page-disp .datebar {
    flex-wrap: wrap !important;
  }

  #page-disp .db-actions {
    flex-wrap: wrap !important;
  }

  #page-disp .datebar > div:last-child {
    flex-wrap: wrap !important;
  }

  /* On larger landscape (1181–1366px) a single row is fine — revert  */
  /* The iPad Air max is 1180px so this already scopes correctly       */
}

@media (min-width: 1181px) and (max-width: 1366px) and (orientation: landscape) {
  /* Desktop-class landscape: restore single-row nowrap               */
  #page-disp .datebar {
    flex-wrap: nowrap !important;
  }
  #page-disp .db-actions {
    flex-wrap: nowrap !important;
  }
}


/* ── iPad portrait: 2-row wrap is comfortable ───────────────────── */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {

  #page-disp .scards {
    display: none !important;
  }

  #page-disp .db-actions {
    gap: 6px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR NAV — text wrap & overflow fix (tablet / iPad)
   Breakpoint: 641px – 1180px (iPad Mini → iPad Pro)
   Desktop (≥1181px) unchanged — keeps --side-w and nowrap labels.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 641px) and (max-width: 1180px) {

  /* Sidebar column: nav scrolls, brand + user panel stay pinned */
  #sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .side-brand,
  .side-user {
    flex-shrink: 0 !important;
  }

  /* Brand header: safe-area top + room so toggle never clips logo/title */
  .side-brand {
    padding-top: max(18px, calc(env(safe-area-inset-top, 0px) + 10px)) !important;
    padding-right: 44px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .side-brand-text {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .side-brand-text strong,
  .side-brand-text span {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .side-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
  }

  /* Menu item — allow multi-line labels, contain within sidebar width */
  #sidebar .ntab {
    white-space: normal !important;
    align-items: center !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 8px 10px !important;
    margin-bottom: 2px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
  }

  #sidebar .ntab .ntab-icon {
    flex-shrink: 0 !important;
    align-self: center !important;
    width: 18px !important;
    line-height: 1 !important;
  }

  #sidebar .ntab .ntab-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
  }

  /* Active indicator spans full item height (incl. two-line labels) */
  #sidebar .ntab.active {
    border-left: 2px solid #2dd4bf !important;
    padding-left: 8px !important;
    font-weight: 600 !important;
  }

  /* User profile — keep visible, wrap long names/roles */
  .side-user-info {
    min-width: 0 !important;
  }

  .side-user-info > div:not(.side-avatar) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .side-user-name,
  .side-user-role {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Slightly tighter font on narrower tablets (large phones / Mini portrait) */
@media (min-width: 641px) and (max-width: 820px) {

  #sidebar .ntab {
    font-size: 11.5px !important;
    padding: 7px 9px !important;
    gap: 7px !important;
  }
}