/* ═══════════════════════════════════════════════════
   ALKADHUMIA GOLD — MOBILE OVERRIDES
   Loaded after styles.css. Adapts the desktop-first UI
   for iOS + Android native (Capacitor) shells, plus any
   narrow browser viewport for testing.
   ═══════════════════════════════════════════════════ */

/* --- Desktop chrome is gone: no OS window frame, no title bar --- */
#titleBar { display: none !important; }
.fl-window-controls,
.fl-wc-btn { display: none !important; }

/* Reclaim the space previously taken by the 36px title bar.
   box-sizing:border-box keeps the padding INSIDE the 100dvh height so
   #mainContent (a flex child) still has room to show and scroll. */
#appLayout {
    height: 100vh;
    height: 100dvh; /* modern viewport unit — accounts for mobile browser chrome */
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Prevent iOS from auto-zooming when focusing an input whose font-size < 16px. */
input, select, textarea {
    font-size: max(16px, 1em);
}

/* ── No text selection / no long-press callouts (touch devices) ──────────────
   A finger drag or press-and-hold must never show the selection handles, the
   loupe or the Copy / Look Up menu anywhere except INSIDE editable fields.
   WebKit notes: -webkit-user-select and -webkit-touch-callout are inherited, so
   the rule lives on the root and flows down; exceptions must say "text" (under a
   "none" ancestor "auto" computes to "none"); -webkit-user-drag is NOT inherited
   and is set per element below. No !important needed: an inherited "none" never
   beats a declaration on the element itself. */
html, body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Editable controls opt back in. This is also the fix for the classic iOS bug
   where an input under a user-select:none ancestor cannot be focused or typed
   in and .select()/setSelectionRange() paint nothing. */
input,
textarea,
select,
[contenteditable]:not([contenteditable="false"]) {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* Display-only and button-like inputs stay inert. */
input[readonly],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="file"],
[contenteditable="false"] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Opt-in island for text the user may copy by long-press (support phone). */
.selectable,
.support-phone {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* Images / links / vector art: no drag-lift (iOS 15+ / iPadOS drag-and-drop),
   no Save Image sheet, no Live Text long-press. */
img, svg, canvas, video, a {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Tap targets: no double-tap zoom, rapid taps register as taps. */
button,
[role="button"],
.ql-pad button,
.action-sheet,
.sb-nav-item,
.sb-qbtn,
.tb-btn,
.ql-screen,
.ql-dots {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Momentum scrolling ONLY on the known scroll containers. Applying this
   globally to `*` creates stacking-context overflow on every element and
   breaks vertical swipe on iOS. */
#mainContent,
.sb-nav,
.modal-content,
.cp-table-wrap,
.cap-table-wrap,
.calc-history,
.autocomplete-items,
table { -webkit-overflow-scrolling: touch; }

/* ═══ PHONE SCROLL MODEL ═══
   On phones we swap the PC's "fixed viewport with one inner scroller" design for a
   simpler "the page itself scrolls" model. iOS WKWebView handles native body-level
   scrolling reliably; nested overflow-y:auto inside overflow:hidden parents is
   famously flaky on iOS (content frozen, no momentum, gesture stolen by a parent).
   Spot bar stays visible via position:sticky instead of the flex-column fixed row. */
@media (max-width: 600px) {
    html, body {
        overflow: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100% !important;
        /* iOS native momentum + pull-to-refresh contained within the page. */
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
    }
    #appLayout {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }
    #appBody {
        overflow: visible !important;
        display: block !important; /* escape PC's flex:row — sidebar is fixed anyway */
    }
    #mainContent {
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
    }
    /* Spot bar stays at the top of the viewport while the page scrolls underneath.
       The bar itself carries the safe-area top padding (notch / dynamic island) so
       when it's the only thing at the top, the inset never becomes a dead gap above
       scrolled-away content. */
    /* Safe-area top inset is carried by #spotBar itself in the consolidated
       block below, so zero it out on #appLayout to avoid doubling. */
    #appLayout {
        padding-top: 0 !important;
    }
    /* Touch-action hints: allow vertical pan naturally. */
    body, #appLayout, #appBody, #mainContent { touch-action: pan-y !important; }
}

/* Avoid long-press callout menu on non-text elements. */
img, button, .sb-nav-item, .sb-qbtn, .tb-btn, .fl-wc-btn {
    -webkit-touch-callout: none;
}

/* Larger tap targets everywhere. */
button, .sb-nav-item, .sb-qbtn {
    min-height: 40px;
}

/* --- Spot bar base: wrap ALLOWED so the phone two-row layout can take effect.
       The phone-specific block below puts the ounce price alone on line 1 and the
       rest of the items on line 2. Desktop still gets a single flex row via
       styles.css's centered flex definition. --- */
#spotBar {
    overflow-x: hidden;
    gap: 12px;
    padding: 6px 10px;
}

/* ═══ PHONE LAYOUT (≤ 820px) ═══
   Turn the sidebar into an off-canvas drawer.
   mobile-shim.js toggles `body.mobile-nav-open` + injects a hamburger
   button into #spotBar. */

@media (max-width: 600px) {

    /* Sidebar drawer base. The actual slide-up motion + dimensions live in
       the FINAL OVERRIDE block at the bottom of this file (translateY-based
       bottom sheet). All horizontal translateX rules removed — they would
       fight the final block during the open/close transition and produce
       diagonal motion. */
    #sidebar {
        position: fixed;
        z-index: 2000;
    }

    /* Sidebar labels always visible in drawer mode — ignore `.collapsed` class. */
    #sidebar.collapsed {
        width: 260px !important;
        min-width: 260px !important;
    }
    #sidebar.collapsed .sb-nav-label,
    #sidebar.collapsed .sb-bal-label,
    #sidebar.collapsed .sb-bal-val small { display: inline !important; }

    /* Hide the desktop collapse toggle — drawer is controlled by the hamburger. */
    .sb-collapse-btn { display: none !important; }

    /* Backdrop behind drawer. */
    body.mobile-nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1900;
        animation: fadeIn 0.2s ease;
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* Hamburger button injected into the top bar. */
    .mobile-menu-btn {
        position: relative;
        width: 40px;
        height: 40px;
        border: 0.5px solid var(--glass-border);
        background: var(--glass-bg);
        color: var(--text-color);
        border-radius: 10px;
        font-size: 18px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        z-index: 10;
    }
    .mobile-menu-btn:active { transform: scale(0.94); }

    /* App body takes full width since sidebar floats above. */
    #appBody { display: block; }
    #sidebar { display: flex; }

    /* Spot bar typography sizes live in the consolidated two-row block below. */

    /* Modals: full width minus small margin on phones. */
    .modal-content {
        width: calc(100% - 20px) !important;
        max-width: 560px !important;
        margin: 0 auto !important;
        padding: 18px !important;
        max-height: 90vh !important;
    }

    /* Action sheet: bottom sheet style on phones. */
    .action-sheet {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        max-width: none !important;
        width: auto !important;
    }

    /* Page content scrolls vertically only — no horizontal sliding.
       Wide tables get their own internal scroll container (see the
       `table { display: block; overflow-x: auto }` rule further below)
       so they remain usable without making the whole view shift. */
    #mainContent, .view, .dashboard-wrap, .client-ledger-wrap {
        overflow-x: hidden !important;
    }
    table { max-width: 100%; }
}

/* ═══ PHONE LAYOUT — additions for PC v2.0.24 UI elements ═══ */
@media (max-width: 600px) {

    /* Balance cards (Jeweler mode capital + today's flow) — stack rows vertically, shrink padding. */
    .sb-bal-card {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }
    .sb-bal-card-title { font-size: 12px !important; }
    .sb-bal-row {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 6px 0 !important;
    }
    .sb-bal-label { font-size: 12px !important; }
    .sb-bal-val   { font-size: 13px !important; }
    .sb-bal-val small { font-size: 10px !important; }

    /* Scrap-layout "current" clickable row wraps on narrow widths. */
    .sb-bal-current {
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        font-size: 12px !important;
    }
    .sb-bal-current > div { min-width: 0 !important; flex: 1 1 48% !important; }

    /* Sidebar navigation — tighter spacing so all items fit without overflow scroll. */
    .sb-nav-item { padding: 8px 12px !important; }
    .sb-nav-icon { font-size: 16px !important; }
    .sb-nav-label { font-size: 13px !important; }

    /* Main content — clip overlong rows instead of forcing horizontal scroll of the whole view. */
    #mainContent { padding: 8px !important; }
    .view { padding: 0 !important; }

    /* Trading form inputs: keep HORIZONTAL so the currency toggle stays right
       beside the price field, weight + received sit side-by-side, etc. Wrap to
       the next line if something actually doesn't fit rather than force a stack.
       CRITICAL: `:not(.jeweler-only):not(.scrap-only)` — without this, an input
       row that's mode-gated (set to `display: none` by applyBusinessTypeUI)
       gets forced back to `display: flex` by the `!important` below and the
       jeweler-only wage-type buttons would leak into scrap mode. */
    .trade-form-row:not(.jeweler-only):not(.scrap-only),
    .form-row:not(.jeweler-only):not(.scrap-only),
    .input-row:not(.jeweler-only):not(.scrap-only) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .trade-form-row > input, .form-row > input, .input-row > input,
    .trade-form-row > select, .form-row > select, .input-row > select {
        flex: 1 1 140px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .trade-form-row > button, .form-row > button, .input-row > button {
        flex: 0 0 auto !important;
    }

    /* Inputs + selects use full available width so they don't overflow. */
    input[type="text"], input[type="number"], input[type="email"],
    input[type="password"], input[type="tel"], select, textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Dashboard / accounting cards — one column on phones. */
    .dashboard-wrap, .dash-grid, .stat-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 10px !important;
    }
    .stat-card, .dash-card, .info-card {
        padding: 12px !important;
        min-width: 0 !important;
    }

    /* Tables: give them their own horizontal scroll container so they don't push layout. */
    table { display: block; overflow-x: auto; white-space: nowrap; width: 100%; }
    table thead, table tbody, table tr { width: 100%; }
    table th, table td {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    /* Trade cards in the daily list — ensure they fit viewport. */
    .trade-card, .swipe-wrapper {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .trade-card { padding: 10px !important; }

    /* Account / device management page — PC layout has wide rows, compress them. */
    .sync-header-row { flex-wrap: wrap !important; gap: 8px !important; }
    .btn-sync-pull, .btn-sync-push { flex: 1 1 auto !important; min-width: 0 !important; }

    /* Client list + customer profile */
    .client-ledger-wrap { padding: 8px !important; }

    /* Receipt / invoice preview — constrain width so PDF preview fits. */
    #receiptPreview, .receipt-preview, .invoice-preview {
        max-width: 100% !important;
        font-size: 11px !important;
    }

    /* Any absolute-positioned floating buttons — keep inside safe area. */
    .fab, .floating-btn {
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        inset-inline-end: 16px !important;
    }

    /* News ticker — shorter on phones. */
    #newsTicker .nt-label { font-size: 10px !important; padding: 2px 6px !important; }
    #newsTicker .nt-text  { font-size: 12px !important; }
}

/* ═══ VERY NARROW (≤ 400px) ═══ */
@media (max-width: 400px) {
    /* Hide the 24K gram pill on very narrow screens — 21K is what matters for IQD. */
    .spot-bar-24 { display: none !important; }

    /* Smaller nav labels. */
    .sb-nav-label { font-size: 12px !important; }
    .sb-qbtn { min-width: 36px !important; min-height: 36px !important; font-size: 14px !important; }

    /* Modal padding tighter. */
    .modal-content { padding: 12px !important; }
    .modal-btns { flex-direction: column !important; gap: 6px !important; }
    .modal-btns > * { width: 100% !important; }
}

/* Safe-area top-inset for native shells (Capacitor iOS / Android).
   The phone-layout block below already handles this universally via env()
   on #spotBar for every mobile viewport, including Expo WebView. */
html.platform-ios #appLayout,
html.platform-android #appLayout { padding-top: 0; }

/* ═══════════════════════════════════════════════════
   BUTTON FEEDBACK — kill iOS's black tap overlay
   WKWebView applies -webkit-tap-highlight-color by default, which paints
   a ~rgba(0,0,0,0.3) square over any tapped element (button / a / role=button).
   That's the "buttons go black" the user noticed. We remove the native
   overlay universally and replace the stuck :hover state on touch devices
   with a proper :active press animation (subtle scale + glow) that
   releases cleanly when the finger lifts.
   ═══════════════════════════════════════════════════ */

/* Universal: no native tap highlight ON ANY ELEMENT. iOS applies the
   0.3-alpha black overlay to the first interactive ancestor of wherever
   you tap, so we need to cover every element, not just a class list. */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent !important;
}

/* Strip iOS's NATIVE button chrome. Without this, `<button>` elements
   retain `-webkit-appearance: button` which iOS paints a dark overlay on
   when pressed — the "all buttons go dark" symptom — regardless of our
   background color. Once `-webkit-appearance: none` is set, the browser
   stops rendering any pressed-state chrome and only our CSS :active
   feedback (scale + glow) applies. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-touch-callout: none;
    outline: none;
}
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
[role="button"]:focus {
    outline: none;
}

/* Touch-primary devices: kill ONLY the properties that iOS's stuck :hover
   turns into visible dimming (opacity, filter). DO NOT touch background
   or color — the original button style there is exactly what we want to
   preserve. Press feedback is a pulse animation — a single scale bounce
   that plays on :active, so tapping a button feels tactile without
   changing its color at all. */
@media (hover: none) {
    button, a, [role="button"] {
        transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    }

    button:hover, button:focus, button:focus-visible,
    a:hover, a:focus,
    [role="button"]:hover, [role="button"]:focus,
    .spot-bar-main:hover, .spot-bar-main:focus,
    .trade-card:hover, .cap-drop-card:hover,
    tr:hover, tr:hover td, .cp-sheet tbody tr:hover td {
        opacity: 1 !important;
        filter: none !important;
        outline: none !important;
    }

    /* Press feedback intentionally REMOVED per user request — no scale, no
       pulse, no transform, no animation. Buttons stay completely still
       while pressed; only the underlying hover-stuck dimming is neutralized
       above (opacity:1, filter:none). */
    button:active,
    a:active,
    [role="button"]:active,
    .spot-bar-main:active,
    .karat-btn:active,
    .calc-btn:active,
    .sb-nav-item:active,
    .sb-qbtn:active {
        animation: none !important;
        transform: none !important;
    }
}

/* ⚙️ Rates button is phone-only — hidden on desktop where the adjust/rate
   inputs live inline in the spot bar. The `@media (max-width: 600px)` block
   above already styles + shows it for mobile viewports. */
.spot-rates-btn { display: none; }

/* ═══════════════════════════════════════════════════
   BATCH v2 — spot bar two-row, floating sidebar button,
   news ticker proximity, active trades density, field
   wipe buttons, received/paid state colors, safe-area
   polish for iPhone 17 Pro Max (dynamic island / 6.9").
   ═══════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* ═══ SPOT BAR — SINGLE ROW, COMPACT ═══
       One horizontal strip with just the four prices + a ⚙️ Rates button.
       The adjust-amount and exchange-rate inputs live only in the Rates
       modal on mobile (hidden from the bar via `.spot-bar-adj { display:none }`
       — mobile-shim.js reparents them when the modal opens).
       The hamburger stays fixed at top-start (z 1000). */
    #spotBar {
        display: flex !important;
        /* Two-row layout — ounce on top, the three gram pills (24K / 21K / IQD)
           on a second row below. Achieved via flex-wrap with .spot-bar-main
           forced to a 100% basis so it claims line 1 by itself. */
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
        padding: calc(env(safe-area-inset-top) + 6px) 12px 8px 12px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        background: var(--sidebar-bg) !important;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
        overflow: hidden !important;
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        backdrop-filter: blur(18px) saturate(180%);
    }
    #spotBar::-webkit-scrollbar { display: none !important; }
    /* Push content below the now-fixed spot bar so nothing hides under it.
       ~50px content + safe-area-top + a little breathing room. */
    body {
        /* Bumped from 56px to ~88px to clear the new two-row spot bar. */
        padding-top: calc(env(safe-area-inset-top) + 88px) !important;
    }

    /* Status dot — inline, right before the main price. */
    #wsStatus { flex: 0 0 auto !important; }

    /* Row 1 — ounce price gets its own line. flex-basis: 100% forces every
       sibling onto the next row regardless of width. */
    .spot-bar-main {
        flex: 0 0 100% !important;
        display: flex !important;
        align-items: baseline !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    .spot-bar-price {
        font-size: 18px !important;
        font-weight: 900 !important;
        letter-spacing: -0.02em;
    }
    .spot-bar-label {
        font-size: 9px !important;
        font-weight: 700 !important;
        opacity: 0.7;
        letter-spacing: 0.04em;
    }

    /* Row 2 — the three gram pills (24K, 21K, IQD). Separators hidden.
       All three share the same gold-tinted style now (per user request:
       "make the 24K look the same as 21K / IQD"). Sizes bumped ~10%. */
    .spot-bar-sep { display: none !important; }
    .spot-bar-gram {
        flex: 0 0 auto !important;
        font-size: 13px !important;          /* was 11 → ~10–15% bigger */
        font-weight: 800 !important;
        white-space: nowrap !important;
        background: rgba(255, 159, 10, 0.10) !important;     /* uniform gold tint */
        padding: 6px 11px !important;        /* was 4 / 8 → ~10% bigger */
        border-radius: 8px;
        gap: 4px !important;
        border: 0.5px solid rgba(255, 159, 10, 0.22) !important;
        color: var(--accent-gold) !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    .spot-bar-gram small {
        font-size: 10px !important;          /* was 8.5 → ~10% bigger */
        font-weight: 700;
        opacity: 0.7;
    }
    /* IQD slightly more saturated since it's the user's primary reference. */
    .spot-bar-gram.spot-bar-iqd {
        background: rgba(255, 159, 10, 0.16) !important;
        border-color: rgba(255, 159, 10, 0.34) !important;
    }

    /* The 24K + IQD pills are tappable shortcuts to the Rates modal —
       24K opens the spot-adjust input, IQD opens the exchange-rate input.
       Add a pointer cursor + subtle tap feedback so it's discoverable. */
    .spot-bar-gram.spot-bar-24,
    .spot-bar-gram.spot-bar-iqd {
        cursor: pointer;
        transition: background 0.12s ease;
    }
    .spot-bar-gram.spot-bar-24:active {
        background: rgba(255, 255, 255, 0.12) !important;
    }
    .spot-bar-gram.spot-bar-iqd:active {
        background: rgba(255, 159, 10, 0.22) !important;
    }

    /* Adjust + rate pills — INLINE versions hidden on mobile. They're
       reparented into #spotRatesModal when the user taps a price pill. */
    #spotBar > .spot-bar-adj { display: none !important; }
    /* The old standalone Rates button (now removed from the HTML) — keep
       this rule as a safety net so any cached older page still hides it. */
    .spot-rates-btn { display: none !important; }

    /* ⚙️ Rates button — sits INSIDE the spot bar as the last item, matching
       the height/shape of the gram pills so everything on the single row
       reads as one consistent strip. Blue accent keeps it distinct from
       the price pills. */
    .spot-rates-btn {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 4px 8px !important;
        background: rgba(0, 122, 255, 0.12) !important;
        border: 0.5px solid rgba(0, 122, 255, 0.3) !important;
        border-radius: 7px !important;
        color: #0a84ff !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
    }
    .spot-rates-btn:active { transform: scale(0.96); }
    .spot-rates-btn .sr-icon { font-size: 12px; }

    /* Reset adjust pill styling when it's INSIDE the modal (mobile-shim.js
       moves the live DOM nodes there, so no class rename needed). */
    #spotRatesBody .spot-bar-adj {
        display: flex !important;
        align-items: center;
        gap: 8px;
        background: rgba(0, 0, 0, 0.25);
        padding: 10px 12px;
        border-radius: 12px;
        border: 0.5px solid var(--glass-border);
        width: 100%;
        box-sizing: border-box;
    }
    #spotRatesBody .spot-bar-adj > span { display: inline !important; font-size: 12px !important; font-weight: 700; color: var(--secondary-text); }
    #spotRatesBody .adj-input { width: 100% !important; flex: 1 1 auto !important; height: 38px !important; font-size: 16px !important; }
    #spotRatesBody .adj-btn { width: 38px !important; height: 38px !important; font-size: 18px !important; flex: 0 0 auto; }

    /* Rates modal — bottom-sheet style, matches the settle modal pattern. */
    .spot-rates-modal {
        position: fixed;
        inset: 0;
        z-index: 5000;
        background: rgba(0, 0, 0, 0.55);
        display: none;
        align-items: flex-end;
        justify-content: center;
    }
    .spot-rates-modal.sr-open { display: flex; }
    .spot-rates-sheet {
        width: 100%;
        max-width: 640px;
        background: var(--glass-bg);
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        border-top: 0.5px solid var(--glass-border);
        box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.4);
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom);
        animation: mbSheetUp 0.22s ease;
    }
    .spot-rates-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 10px;
        border-bottom: 0.5px solid var(--glass-border);
    }
    .spot-rates-header h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--accent-gold); }
    .spot-rates-close {
        width: 32px; height: 32px;
        border-radius: 8px;
        border: 0.5px solid var(--glass-border);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text-color);
        font-size: 15px;
        cursor: pointer;
    }
    .spot-rates-body {
        padding: 14px 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .spot-rates-row-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--secondary-text);
        margin-bottom: 4px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    /* ── Hamburger ── fixed at the very top-start of the viewport, always
       visible above the spot bar. z-index 1000 beats #spotBar (100) so
       tapping it never hits spot-bar content by accident. */
    .mobile-menu-btn.outside {
        position: fixed !important;
        top: calc(env(safe-area-inset-top) + 6px) !important;
        inset-inline-start: 10px !important;
        z-index: 1000 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        background: var(--glass-bg) !important;
        border: 0.5px solid var(--glass-border) !important;
        backdrop-filter: blur(30px) saturate(150%);
        -webkit-backdrop-filter: blur(30px) saturate(150%);
        color: var(--text-color) !important;
        font-size: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* ── News ticker: FIXED to the bottom of the screen on phones. ────
       JS toggles its inline `display` between 'none' (no news) and 'flex'
       (news active) — we do NOT force display here. When visible, it sits
       at the bottom edge above the home-indicator safe area. When hidden
       the main content uses the full screen height.
       body padding-bottom is dynamically added only when the ticker shows,
       via the `:has()` selector below, so the layout doesn't leave a
       permanent gap at the bottom when there's no news. */
    /* Phone news popup — compact bottom-right card, lifted above the iOS bottom-nav
       (74px) plus the home-indicator safe area. The desktop popup style in styles.css
       handles everything else; we only nudge the offsets and width for phone screens. */
    #newsTicker {
        bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
        inset-inline-end: 12px !important;
        left: auto !important;
        top: auto !important;
        width: min(320px, calc(100vw - 24px)) !important;
        font-size: 12px !important;
    }

    /* ── Active trades list: compress. ─────────────────
       Tighter padding, smaller font, remove the dead-space around cards. */
    .dash-right { padding: 0 !important; margin-top: 6px !important; }
    .dash-right .section-title { font-size: 13px !important; margin: 6px 4px !important; }
    #historyContainer { padding: 0 !important; }
    .trade-card { padding: 8px 10px !important; margin-bottom: 6px !important; border-radius: 10px !important; }
    .tc-name, .trade-client-name { font-size: 14px !important; }
    .tc-note-val { font-size: 12px !important; }
    /* Internal sub-rows of a trade card: shrink gaps and fonts. */
    .trade-card .tc-row, .trade-card .tc-foot, .trade-card > div { gap: 4px !important; }

    /* ── Received + Amount-Paid: green-hashed when empty, red when filled. ──
       Uses :placeholder-shown — the input has a placeholder so when it's shown,
       the field is empty. When user types, :not(:placeholder-shown) kicks in. */
    #receivedWeight:placeholder-shown,
    #amountPaid:placeholder-shown {
        background: repeating-linear-gradient(
            45deg,
            rgba(48, 209, 88, 0.10),
            rgba(48, 209, 88, 0.10) 6px,
            rgba(48, 209, 88, 0.04) 6px,
            rgba(48, 209, 88, 0.04) 12px
        ) !important;
        border-color: rgba(48, 209, 88, 0.3) !important;
        color: var(--accent-green) !important;
    }
    #receivedWeight:not(:placeholder-shown),
    #amountPaid:not(:placeholder-shown) {
        background: rgba(255, 69, 58, 0.08) !important;
        border-color: rgba(255, 69, 58, 0.45) !important;
        color: var(--accent-red) !important;
    }

    /* ── Universal wipe ✕ button (injected by mobile-shim.js per input). ──── */
    .mb-field-wrap { position: relative; display: inline-block; width: 100%; }
    .mb-wipe-x {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        display: none;
        align-items: center;
        justify-content: center;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        color: var(--secondary-text);
        border-radius: 50%;
        font-size: 12px;
        cursor: pointer;
        z-index: 2;
        padding: 0;
    }
    .mb-wipe-x:active { transform: translateY(-50%) scale(0.9); }
    .mb-field-wrap.has-value .mb-wipe-x,
    input.mb-has-value + .mb-wipe-x { display: flex; }
    /* Account for the ✕ — give inputs a little right padding when wipe is active. */
    .mb-field-wrap > input, .mb-field-wrap > select, .mb-field-wrap > textarea {
        padding-right: 32px !important;
    }
    html[dir="rtl"] .mb-wipe-x { right: auto; left: 6px; }
    html[dir="rtl"] .mb-field-wrap > input,
    html[dir="rtl"] .mb-field-wrap > select,
    html[dir="rtl"] .mb-field-wrap > textarea {
        padding-right: 10px !important;
        padding-left: 32px !important;
    }

    /* ── Extra bottom safe-area so home-indicator doesn't clip sticky footer bars. ── */
    body { padding-bottom: env(safe-area-inset-bottom) !important; }
}

/* ═══════════════════════════════════════════════════
   DATA MANAGEMENT PAGE — modern redesign
   - Cloud-first hero card with pull/push + status
   - 3-tile Backup grid
   - Isolated red danger zone at the bottom
   ═══════════════════════════════════════════════════ */
.dm2-wrap {
    max-width: 580px;
    margin: 12px auto;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Hero */
.dm2-hero {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(0, 122, 255, 0.02));
    border: 1px solid rgba(0, 122, 255, 0.28);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.08);
}
.dm2-hero-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.dm2-hero-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 122, 255, 0.15);
    border-radius: 12px;
    flex: 0 0 auto;
}
.dm2-hero-info { flex: 1; min-width: 0; }
.dm2-hero-title { font-size: 15px; font-weight: 800; color: var(--text-color); }
.dm2-hero-sub   { font-size: 11px; color: var(--secondary-text); margin-top: 2px; }
.dm2-status-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.dm2-hero-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}
.dm2-btn {
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 0.5px solid transparent;
    transition: transform 0.12s;
}
.dm2-btn:active { transform: scale(0.97); }
.dm2-btn-pull {
    background: rgba(48, 209, 88, 0.12);
    color: var(--accent-green);
    border-color: rgba(48, 209, 88, 0.35);
}
.dm2-btn-push {
    background: rgba(0, 122, 255, 0.14);
    color: #0a84ff;
    border-color: rgba(0, 122, 255, 0.35);
}
.dm2-btn-stop {
    width: 100%;
    background: rgba(255, 69, 58, 0.08);
    color: var(--accent-red);
    border-color: rgba(255, 69, 58, 0.28);
}
.dm2-btn-stop:disabled { opacity: 0.4; cursor: not-allowed; }
.dm2-hero-note {
    display: block;
    font-size: 10px;
    color: var(--secondary-text);
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

/* Section wrapper */
.dm2-section { }
.dm2-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--secondary-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px 4px;
}
.dm2-section-title-danger { color: var(--accent-red); }

/* 3-tile backup grid */
.dm2-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.dm2-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 14px 8px 12px;
    background: var(--glass-bg);
    border: 0.5px solid var(--glass-border);
    border-radius: 14px;
    color: var(--text-color);
    cursor: pointer;
    transition: transform 0.12s, background 0.15s;
    min-width: 0;
}
.dm2-tile:active { transform: scale(0.97); }
.dm2-tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.dm2-tile-blue  { background: rgba(0, 122, 255, 0.15);  color: #0a84ff; }
.dm2-tile-green { background: rgba(48, 209, 88, 0.15);  color: var(--accent-green); }
.dm2-tile-gold  { background: rgba(255, 159, 10, 0.15); color: var(--accent-gold); }
.dm2-tile-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -0.01em;
    text-align: center;
}
.dm2-tile-sub {
    font-size: 10px;
    color: var(--secondary-text);
    text-align: center;
    line-height: 1.25;
}

/* Danger zone */
.dm2-danger-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 69, 58, 0.06);
    border: 1px solid rgba(255, 69, 58, 0.25);
    border-radius: 14px;
    color: var(--accent-red);
    cursor: pointer;
    text-align: start;
    transition: background 0.15s;
}
.dm2-danger-btn:active { background: rgba(255, 69, 58, 0.14); }
.dm2-danger-icon {
    font-size: 22px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 69, 58, 0.15);
    border-radius: 10px;
    flex: 0 0 auto;
}
.dm2-danger-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dm2-danger-title { font-size: 14px; font-weight: 800; }
.dm2-danger-sub   { font-size: 11px; color: rgba(255, 69, 58, 0.7); }

/* Tighter tiles on very narrow phones */
@media (max-width: 400px) {
    .dm2-tile { padding: 12px 4px 10px; }
    .dm2-tile-icon { width: 36px; height: 36px; font-size: 18px; }
    .dm2-tile-title { font-size: 11px; }
    .dm2-tile-sub   { font-size: 9px; }
}

/* ═══════════════════════════════════════════════════
   SETTINGS PAGE — modern redesign (works everywhere)
   - Segmented language picker
   - Theme selector as mini app-screenshot previews
   - Spot Price Code collapsed into a disclosure card
   ═══════════════════════════════════════════════════ */
.settings-wrap {
    max-width: 560px;
    margin: 12px auto;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settings-card {
    background: var(--glass-bg);
    border: 0.5px solid var(--glass-border);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.settings-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.settings-ico {
    font-size: 22px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 159, 10, 0.1);
    border: 0.5px solid rgba(255, 159, 10, 0.25);
    border-radius: 10px;
    flex: 0 0 auto;
}
.settings-title-wrap { flex: 1 1 auto; min-width: 0; }
.settings-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -0.01em;
}
.settings-sub {
    font-size: 11px;
    color: var(--secondary-text);
    margin-top: 1px;
}

/* Language — segmented pill buttons */
.settings-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.settings-lang-btn {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.settings-lang-btn:active { transform: scale(0.97); }
.settings-lang-btn.active,
html[dir="ltr"] .settings-lang-btn[data-lang="en"].active,
html[dir="rtl"] .settings-lang-btn[data-lang="ar"].active {
    background: rgba(255, 159, 10, 0.14);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* Theme preview grid — three mini screenshots side by side */
.theme-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.theme-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: transparent;
    border: 0.5px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.15s;
}
.theme-preview:active { transform: scale(0.97); }
.theme-preview.active {
    border-color: var(--accent-gold);
    background: rgba(255, 159, 10, 0.08);
}
.tp-card {
    width: 100%;
    aspect-ratio: 9 / 14;
    border-radius: 10px;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.tp-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 5px;
    border-radius: 5px;
}
.tp-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.tp-price { letter-spacing: -0.02em; }
.tp-lines { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tp-line {
    height: 5px; border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
}
.tp-line.short { width: 58%; }
.tp-pill {
    height: 10px; width: 60%; align-self: center;
    border-radius: 5px; background: rgba(255, 159, 10, 0.55);
}
/* Per-theme color palettes for the previews */

.tp-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: -0.01em;
}

/* Collapse / disclosure card — shares the USD-ledger animation */
.settings-collapse .settings-collapse-head {
    cursor: pointer;
    margin-bottom: 0;
    user-select: none;
}
.settings-chev {
    font-size: 11px;
    color: var(--secondary-text);
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}
.settings-collapse.open .settings-chev { transform: rotate(90deg); }
.settings-collapse-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}
.settings-collapse.open .settings-collapse-body {
    max-height: 300px;
    margin-top: 12px;
}

/* ═══════════════════════════════════════════════════
   DEVICES PAGE — grid of cards (works on desktop too)
   ═══════════════════════════════════════════════════ */
.dm-devices-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 12px 0;
}
.dm-device-card {
    position: relative;
    background: var(--glass-bg);
    border: 0.5px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px 12px 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.dm-device-card:active { transform: scale(0.98); }
.dm-device-card.dm-this {
    border-color: rgba(255, 159, 10, 0.45);
    box-shadow: 0 4px 16px rgba(255, 159, 10, 0.15);
    background: linear-gradient(135deg, rgba(255, 159, 10, 0.08), var(--glass-bg));
}
.dm-device-card.dm-online { border-color: rgba(48, 209, 88, 0.35); }
.dm-device-card.dm-this.dm-online {
    border-color: rgba(255, 159, 10, 0.55);
}
.dm-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.dm-card-icon { font-size: 26px; }
.dm-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.dm-dot-online  { background: var(--accent-green); box-shadow: 0 0 6px rgba(48, 209, 88, 0.6); }
.dm-dot-offline { background: rgba(255,255,255,0.18); }
.dm-card-action {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 0.5px solid var(--glass-border);
    background: rgba(255,255,255,0.05);
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    margin-inline-start: auto;
}
.dm-card-rename { color: var(--accent-gold); border-color: rgba(255, 159, 10, 0.3); }
.dm-card-revoke { color: var(--accent-red);  border-color: rgba(255, 69, 58, 0.3); }
.dm-card-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-color);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dm-card-model { font-size: 11px; color: var(--secondary-text); }
.dm-card-meta  {
    font-size: 10px;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}
.dm-card-meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    background: rgba(255,255,255,0.04);
    padding: 1px 5px;
    border-radius: 4px;
}
.dm-this-badge {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    background: var(--accent-gold);
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
@media (max-width: 600px) {
    .dm-devices-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
    .dm-devices-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════
   DASHBOARD / TRADING VIEW — phone-fit overrides (≤ 820px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Main grid: stack left (trade entry) above right (today's trades). */
    .dash-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Activity strip: 3 equal columns on phone (still readable). */
    .dash-activity {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    .act-card   { padding: 8px 6px !important; min-width: 0 !important; }
    .act-label  { font-size: 10px !important; }
    .act-value  { font-size: 16px !important; }
    .act-sub    { font-size: 10px !important; }
    .act-iqd    { font-size: 11px !important; }

    /* Trade form layout: stack the karat column UNDER the input column. All 8
       karat buttons fit as a single row — compressed height + small font so
       iPhone 17 Pro Max width (≈430pt) is more than enough. */
    .trade-form-layout {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .karat-col {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 4px !important;
    }
    .karat-btn {
        width: auto !important;
        min-width: 0 !important;
        padding: 8px 2px !important;
        font-size: 12px !important;
        letter-spacing: -0.02em;
    }

    /* Trade inputs column: claim the full width. */
    .trade-inputs { flex: 1 1 100% !important; min-width: 0 !important; }

    /* Buy / Sell buttons: big thumb-friendly size. */
    .trade-buttons { gap: 8px !important; }
    .btn-buy, .btn-sell { padding: 14px 10px !important; font-size: 17px !important; }
    .btn-eod { padding: 12px !important; font-size: 15px !important; }

    /* Average strip: allow horizontal scroll instead of cramming. */
    .avg-strip {
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    .avg-strip::-webkit-scrollbar { display: none; }
    .avg-box { flex: 0 0 auto !important; min-width: 110px !important; padding: 6px 8px !important; }
    .avg-label { font-size: 10px !important; }
    .avg-val   { font-size: 14px !important; }

    /* Profit row: stack label above numbers on very narrow widths. */
    .profit-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        font-size: 13px !important;
    }

    /* Capital management: input row wraps so description, amount, and + button don't overlap. */
    .cap-input-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .cap-input-row input { flex: 1 1 45% !important; min-width: 0 !important; }
    .cap-drop-head { flex-wrap: wrap !important; gap: 6px !important; padding: 10px !important; }
    .cap-drop-title { font-size: 13px !important; flex: 1 1 auto !important; min-width: 0 !important; }
    .cap-drop-total { font-size: 13px !important; }

    /* EOD card: compress for phones. */
    .eod-card-premium { padding: 10px !important; margin-bottom: 8px !important; }

    /* Profit & Loss grid: stack cards. */
    .pl-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .pl-big { font-size: 20px !important; }
    .pl-label { font-size: 11px !important; }

    /* Calculator view: bump button size for thumb hit-targets. */
    #calculatorView button { padding: 14px 0 !important; font-size: 18px !important; }
    .calc-display { font-size: 24px !important; padding: 12px !important; }

    /* Settings: constrain deeply nested rows. */
    #settingsView .settings-group > * { max-width: 100% !important; box-sizing: border-box !important; }
}

/* ═══════════════════════════════════════════════════
   CLIENTS PAGE — phone-fit overrides (≤ 820px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Toolbar — single wrapping row: filter chips + compact sort + search with wipe. */
    .client-toolbar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px !important;
        align-items: center !important;
    }
    .client-toolbar ._cat-tab {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 14px !important;
    }
    .client-toolbar-spacer { display: none !important; }
    /* Arrange/sort — small, sits right next to the filter chips. */
    .client-sort-select {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 90px !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }
    /* Search takes the rest of the row. */
    .client-search-inline { flex: 1 1 160px !important; position: relative !important; }
    .client-search-inline input { width: 100% !important; padding-right: 32px !important; }
    /* Small ✕ that appears once the user types something. */
    .client-search-inline .mb-wipe-x {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        display: none;
        align-items: center;
        justify-content: center;
        border: none;
        background: rgba(255,255,255,0.08);
        color: var(--secondary-text);
        border-radius: 50%;
        font-size: 12px;
        cursor: pointer;
    }
    .client-search-inline.has-value .mb-wipe-x { display: flex; }
    .btn-add-client { flex: 0 0 auto !important; }
    #clientLayoutBtn { flex: 0 0 auto !important; padding: 6px 10px !important; font-size: 13px !important; }

    /* Distinct color per filter category — tapped = filled, untapped = faint border. */
    .client-toolbar ._cat-tab[data-cat="all"]   { border-color: rgba(90, 200, 250, 0.35); color: #5ac8fa; }
    .client-toolbar ._cat-tab[data-cat="gold"]  { border-color: rgba(255, 159, 10, 0.35); color: var(--accent-gold); }
    .client-toolbar ._cat-tab[data-cat="iqd"]   { border-color: rgba(48, 209, 88, 0.35);  color: var(--accent-green); }
    .client-toolbar ._cat-tab[data-cat="usd"]   { border-color: rgba(191, 90, 242, 0.35); color: #bf5af2; }
    .client-toolbar ._cat-tab[data-cat="all"]._cat-active  { background: rgba(90, 200, 250, 0.18);  color: #5ac8fa; }
    .client-toolbar ._cat-tab[data-cat="gold"]._cat-active { background: rgba(255, 159, 10, 0.20);  color: var(--accent-gold); }
    .client-toolbar ._cat-tab[data-cat="iqd"]._cat-active  { background: rgba(48, 209, 88, 0.20);   color: var(--accent-green); }
    .client-toolbar ._cat-tab[data-cat="usd"]._cat-active  { background: rgba(191, 90, 242, 0.20);  color: #bf5af2; }

    /* Client grid: 2 columns on phones, 1 on very narrow. */
    .client-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .client-card-premium { min-height: 0 !important; }
    .ccp-inner { padding: calc(10px * var(--ccp-scale, 1)) calc(6px * var(--ccp-scale, 1)) !important; gap: 4px !important; }
    /* Base bumped 12→14px (user request: bigger, more noticeable names) and the
       card-zoom multiplier from the +/− toolbar buttons applies here too. */
    .ccp-name { font-size: calc(14px * var(--ccp-scale, 1)) !important; padding: calc(4px * var(--ccp-scale, 1)) calc(7px * var(--ccp-scale, 1)) !important; }
    .ccp-bal { font-size: calc(12.5px * var(--ccp-scale, 1)) !important; }

    /* Global debt card: tighter. */
    .global-debt-card .debt-header { padding: 10px !important; }
    .global-debt-card h3 { font-size: 14px !important; margin: 0 !important; }
    .debt-row { padding: 6px 8px !important; font-size: 12px !important; }
    .debt-mid, .debt-col-mid { min-width: 80px !important; }
    .debt-net { font-size: 11px !important; }

    /* Customer profile header — wrap so Rename + Statement buttons fit. */
    .cp-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .cp-name-col { flex: 1 1 100% !important; order: 2 !important; }
    .btn-back { flex: 0 0 auto !important; order: 1 !important; }
    .btn-icon-gold, .btn-icon-green { flex: 0 0 auto !important; order: 3 !important; }
    .cp-title { font-size: 18px !important; }

    /* Balance hero grid: one row on phone (3 cols shrunk) or stacked if too narrow. */
    .cp-balance-hero {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
    }
    .cp-bal-col { padding: 10px 8px !important; }
    .cp-bal-label { font-size: 11px !important; }
    .cp-bal-value { font-size: 16px !important; }

    /* Hide the inline settle row + its desktop toolbar (the + opener and the
       green تسوية submit button) on phones. Mobile users use the modal
       triggered by .mb-settle-trigger instead. */
    .cp-settle-inline-row { display: none !important; }
    .cp-add-settle-bar    { display: none !important; }

    /* Time line under the date in the ledger — keep it readable on phones. */
    .cp-sheet .cp-time { font-size: 12px !important; }

    /* Customer profile table: compress columns. */
    .cp-sheet th, .cp-sheet td {
        padding: 8px 4px !important;
        font-size: 15px !important;
    }

    /* Column resize handle — wider tap-zone + visible on phones so users
       know they can drag it. Desktop shows the handle on hover; phones
       need a persistent hint. */
    .cp-sheet .cp-th-resize::after {
        width: 10px !important;
        background: rgba(255, 159, 10, 0.2) !important;
        height: 80% !important;
        top: 10% !important;
    }
    .cp-sheet .cp-th-resize::before {
        content: '⋮';
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        color: rgba(255, 159, 10, 0.6);
        pointer-events: none;
        z-index: 6;
    }
}

@media (max-width: 400px) {
    .client-grid { grid-template-columns: 1fr !important; }
    .cp-title { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════
   SETTLEMENT — mobile modal
   Desktop: inline settle row inside the customer profile table.
   Mobile: dedicated ⚖️ trigger button opens a bottom-sheet modal.
   ═══════════════════════════════════════════════════ */

/* Trigger is hidden on desktop. */
.mb-settle-trigger { display: none !important; }

@media (max-width: 600px) {
    .mb-settle-trigger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: calc(100% - 16px);
        margin: 10px 8px;
        padding: 12px 16px;
        background: linear-gradient(135deg, rgba(255, 159, 10, 0.14), rgba(255, 159, 10, 0.08));
        border: 0.5px solid rgba(255, 159, 10, 0.3);
        border-radius: 12px;
        color: var(--accent-gold);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }
    .mb-settle-trigger:active { transform: scale(0.98); }
    .mb-settle-body .mb-hint { display: block; flex: 1 0 100%; box-sizing: border-box; min-height: 14px; font-size: 12px; color: var(--accent-gold); margin: -4px 0 0; padding-inline-start: 78px; }   /* f44 */
    .live-alert .la-close { padding: 10px 12px; font-size: 16px; }
    .cp-sheet .st-rate-tag { font-size: 12px; }
    .mb-transfer-trigger { margin-top: 0; background: linear-gradient(135deg, rgba(90, 200, 250, 0.14), rgba(90, 200, 250, 0.08)); border-color: rgba(90, 200, 250, 0.3); color: var(--accent-blue, #5ac8fa); }
    .mb-settle-ico { font-size: 18px; }
}

/* Modal overlay + bottom-sheet. */
.mb-settle-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.mb-settle-modal[aria-hidden="false"],
.mb-settle-modal.mb-open { display: flex; }

/* When the settle modal is open, hide the iOS bottom nav. backdrop-filter
   on the nav creates a stacking context that paints OVER the modal's
   sticky submit button (despite z-index ordering), so the gold "Record
   Settlement" button gets clipped behind it. Removing the nav while the
   modal is open is cleaner than fighting compositing rules. The user can
   still close the modal via its ✕ button. */
body:has(.mb-settle-modal.mb-open) .ios-bottom-nav,
body:has(.mb-settle-modal[aria-hidden="false"]) .ios-bottom-nav {
    display: none !important;
}

.mb-settle-sheet {
    width: 100%;
    max-width: 640px;
    background: var(--glass-bg);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-top: 0.5px solid var(--glass-border);
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.4);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    animation: mbSheetUp 0.22s ease;
}
@keyframes mbSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.mb-settle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 0.5px solid var(--glass-border);
}
.mb-settle-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-gold);
}
.mb-settle-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0.5px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    font-size: 15px;
    cursor: pointer;
}

.mb-settle-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 20px;
    min-height: 0;
    flex: 1 1 auto;
}
.mb-settle-body .mb-row {
    display: flex;
    flex-wrap: wrap;   /* f44: hint / karat echo go to their own line instead of squeezing the field */
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.mb-settle-body .mb-row label {
    flex: 0 0 70px;
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary-text);
}
.mb-settle-body .mb-row input,
.mb-settle-body .mb-row select {
    flex: 1 1 auto;
    min-width: 0;
}

/* New: each amount row has [input | Full Settle | ↓/↑ direction] tucked
   inside .mb-row-controls. The input still flexes to take remaining space;
   the two buttons stay compact on the right (or left in RTL). */
.mb-settle-body .mb-row-controls {
    flex: 1 1 0;   /* f44: never sized by the input's intrinsic width */
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}
.mb-settle-body .mb-row-controls input,
.mb-settle-body .mb-row-controls select {
    flex: 1 1 auto;
    min-width: 0;
    /* Override any flat / borderless styling inherited from .cps-input-flat
       so the input is visible inside the modal. */
    border: 0.5px solid var(--input-border) !important;
    background: var(--input-bg) !important;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    color: var(--text-color);
    text-align: start;
}
.mb-fill-btn {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 7px;
    border: none;
    background: var(--accent-gold);
    color: #000;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
    cursor: pointer;
}
.mb-fill-btn:active { opacity: 0.85; }
.mb-arrow-btn {
    flex: 0 0 auto;
    min-width: 56px;
    height: 32px;
    padding: 0 10px;
    border-radius: 16px;
    border: 0.5px solid var(--input-border);
    /* Default direction = RECEIVED ("↓ لنا" — customer owes us). Colored
       GREEN to match the rest of the app: the customer-profile sheet's
       settlement rows (cell-pos), the balance display, and the desktop
       لنا/علينا dropdown (.cps-dir-select.dir-lana) all use green for لنا.
       The .given override below flips to RED for علينا. */
    background: rgba(48, 209, 88, 0.18);
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.mb-arrow-btn.given {
    /* GIVEN = "↑ علينا" (we owe them) — RED, matching cell-neg / .dir-alayna. */
    background: rgba(255, 69, 58, 0.18);
    color: var(--accent-red);
}
.mb-settle-submit {
    width: 100%;
    margin-top: 12px;
    padding: 13px;
    border-radius: 12px;
    background: var(--accent-gold);
    color: #000;
    font-size: 15px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    /* Pin the button to the bottom of the (scrollable) modal body so it
       stays visible even when the form has more rows than fit on screen.
       Without this, taller forms made the user scroll down inside the
       sheet to reveal the Submit button. */
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -12px 18px -10px rgba(0, 0, 0, 0.5);
}
/* The body needs a bit of breathing room below the last input row so the
   sticky button doesn't visually cover content when the body is short. */
.mb-settle-body { padding-bottom: 8px !important; }
/* And we need the sheet's body to actually be a flex column that grows
   to its max content while keeping the submit pinned at the visible
   bottom. The earlier `flex: 1 1 auto` on .mb-settle-body achieves this. */

/* ═══════════════════════════════════════════════════
   iOS-style bottom tab bar (phones only)
   Replaces the hamburger as primary nav. Sidebar still exists off-canvas
   so the "More" tab can open it for the secondary items.
   ═══════════════════════════════════════════════════ */

.ios-bottom-nav { display: none; }

@media (max-width: 600px) {
    .ios-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Height = 50px tab row + the home-indicator inset. The inset is
           trimmed by 8px so the icons sit where native iOS tabs do instead of
           floating above the edge; max() keeps it at 0 on non-notch phones. */
        height: auto;
        min-height: 50px;
        padding-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 8px));
        transition: transform 0.18s ease-out;
        background: rgba(20, 20, 22, 0.92);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        backdrop-filter: blur(18px) saturate(180%);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 1500;
    }

    /* Override the sidebar's .sb-nav-item styling for buttons that also live
       in the bottom bar. The selectors are scoped under .ios-bottom-nav so
       the real sidebar items (in #sidebar) are unaffected. */
    .ios-bottom-nav .ios-tab,
    .ios-bottom-nav .sb-nav-item.ios-tab {
        flex: 1 1 0 !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 4px 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: auto !important;
        min-height: 0 !important;
        height: 50px !important;
        color: rgba(255, 255, 255, 0.55) !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        cursor: pointer;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-align: center !important;
    }

    .ios-bottom-nav .ios-tab-icon {
        font-size: 22px;
        line-height: 1;
        filter: grayscale(0.15);
    }

    .ios-bottom-nav .ios-tab-label {
        font-size: 10.5px;
        line-height: 1;
        letter-spacing: 0.1px;
        white-space: nowrap;
    }

    .ios-bottom-nav .ios-tab.active,
    .ios-bottom-nav .sb-nav-item.ios-tab.active {
        color: var(--accent-gold, #FFB020) !important;
        background: transparent !important;
    }
    .ios-bottom-nav .ios-tab.active .ios-tab-icon {
        filter: none;
        transform: translateY(-1px);
    }

    .ios-bottom-nav .ios-tab:active {
        opacity: 0.6;
    }

    /* Live update banner rides above the bottom tab bar. */
    .live-alert { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 10px; width: calc(100vw - 20px); }

    /* Lift the page content above the bar so nothing sits behind it. */
    body {
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px) + 8px) !important;
    }

    /* On-screen keyboard open (set by mobile-shim.js): slide the bar off-screen
       so it does not ride on top of the keyboard. */
    body.kb-open .ios-bottom-nav {
        transform: translateY(110%);
        pointer-events: none;
    }

    /* Hamburger replaced by the bottom "More" tab — hide all variants
       (the .outside modifier has its own display:flex !important rule). */
    .mobile-menu-btn,
    .mobile-menu-btn.outside { display: none !important; }

    /* Side drawer rules removed — sidebar slides UP from the bottom now,
       handled in the FINAL OVERRIDE block at the end of this file. */
}

/* RTL — bar stays bottom-pinned, but flip the order so the first nav item
   sits on the right (consistent with Arabic reading direction). */
@media (max-width: 600px) {
    html[dir="rtl"] .ios-bottom-nav {
        flex-direction: row-reverse;
    }
}

/* ═══════════════════════════════════════════════════
   Modern drawer (Phase 2)
   Glassmorphism + smooth motion + stagger animation on items.
   Applies on phones (≤820px) where the sidebar acts as a slide-in
   drawer triggered by the bottom-bar "More" tab.
   ═══════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* Glass sidebar — semi-transparent, blurred, soft inner edge. */
    #sidebar {
        background: rgba(18, 18, 20, 0.78) !important;
        -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
        backdrop-filter: blur(28px) saturate(180%) !important;
        border-left: 0.5px solid rgba(255, 255, 255, 0.08) !important;
        border-right: none !important;
        /* Rounded inner edge (the side facing the visible content). */
        border-radius: 20px 0 0 20px !important;
        /* Smoother slide-in/out — iOS-style spring easing. */
        transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.28, 1) !important;
        /* Top: clear the notch + give the quick buttons breathing room.
           Bottom: clear the home-indicator. */
        padding: calc(env(safe-area-inset-top) + 18px) 0 calc(env(safe-area-inset-bottom) + 8px) 0 !important;
        box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55) !important;
    }

    /* Quick action buttons (Language / Quick Save / Refresh) — tighter. */
    #sidebar .sb-quick-btns {
        padding: 0 8px 8px !important;
        gap: 6px !important;
    }
    #sidebar .sb-qbtn {
        flex: 1 !important;
        min-height: 36px !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 0.5px solid rgba(255, 255, 255, 0.08) !important;
        color: var(--text-color) !important;
        font-weight: 600 !important;
        transition: background 0.15s ease !important;
    }
    #sidebar .sb-qbtn:active {
        transform: scale(0.94);
        background: rgba(255, 255, 255, 0.12) !important;
    }

    /* Nav items — pill-style with rounded backgrounds on active.
       Tightened margins/padding/font for a more compact More-drawer look. */
    #sidebar .sb-nav-item {
        margin: 1px 6px !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
        border-left: none !important;
        border-right: none !important;
        gap: 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.78) !important;
        transition: background 0.18s ease, color 0.18s ease !important;
    }

    #sidebar .sb-nav-icon {
        font-size: 18px !important;
        width: 24px !important;
        text-align: center !important;
        flex-shrink: 0;
    }

    #sidebar .sb-nav-item:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }

    /* Active item — gold-tinted gradient with soft glow. */
    #sidebar .sb-nav-item.active {
        background: linear-gradient(135deg,
            rgba(255, 176, 32, 0.20),
            rgba(255, 176, 32, 0.06)) !important;
        color: var(--accent-gold, #FFB020) !important;
        box-shadow: 0 0 22px rgba(255, 176, 32, 0.18),
                    inset 0 0 0 0.5px rgba(255, 176, 32, 0.25);
    }
    #sidebar .sb-nav-item.active .sb-nav-icon {
        transform: scale(1.08);
    }

    /* Tap feedback — subtle squish + dim. */
    #sidebar .sb-nav-item:active {
        transform: scale(0.97);
        opacity: 0.85;
    }

    /* Section divider between Calculator and Data — thinner inset. */
    #sidebar .sb-nav-divider {
        height: 1px !important;
        background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent) !important;
        margin: 6px 14px !important;
    }

    /* Stagger / horizontal slide-in animations removed — they were producing
       sideways motion inside the drawer that the user explicitly didn't want. */

    /* Quick buttons fade-in too, slightly before the items. */
    body.mobile-nav-open #sidebar .sb-quick-btns {
        animation: sbQuickIn 0.35s cubic-bezier(0.32, 0.72, 0.28, 1) backwards;
        animation-delay: 0.02s;
    }
    @keyframes sbQuickIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Backdrop — softer blur, smoother fade. */
    body.mobile-nav-open::before {
        background: rgba(0, 0, 0, 0.45) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
        animation: drawerBackdropIn 0.32s ease forwards !important;
    }
    @keyframes drawerBackdropIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Balance footer — compact card inside the drawer. */
    #sidebar .sb-balance-footer {
        margin: 8px 6px !important;
        padding: 8px 10px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 0.5px solid rgba(255, 255, 255, 0.06) !important;
        border-top: 0.5px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL OVERRIDE — DRAWER SLIDES UP/DOWN, NO ITEM ANIMATIONS
   The earlier blocks slide #sidebar in horizontally (translateX) like a
   side drawer. The user wants iOS-style up/down motion: the sidebar
   becomes a BOTTOM SHEET that comes up from below the screen.
   This block is last in the file so its rules win the cascade.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* Reposition: pinned to bottom edge, full width, sized to the content
       (capped at 78vh) so there's no empty padding below the menu items. */
    #sidebar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: 78vh !important;
        max-height: 78dvh !important;

        /* Hidden state: translated DOWN by its own height. Visible on .open. */
        transform: translateY(100%) !important;
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.28, 1) !important;

        /* Bottom-sheet styling — rounded TOP corners (the edge that meets
           the spot bar when open), shadow on top, no left/right borders. */
        border-radius: 18px 18px 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 0.5px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.55) !important;

        padding-top: 18px !important;
        padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* RTL irrelevant for bottom-sheet — same up/down motion in both directions. */
    html[dir="rtl"] #sidebar {
        left: 0 !important;
        right: 0 !important;
        transform: translateY(100%) !important;
        box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.55) !important;
        border-radius: 18px 18px 0 0 !important;
    }

    /* Open state — slide up to fully visible. */
    body.mobile-nav-open #sidebar {
        transform: translateY(0) !important;
    }

    /* Disable the staggered horizontal item slide-in animations from the
       earlier "Phase 2" rules. Keep things simple: items just appear. */
    #sidebar .sb-nav-item,
    #sidebar .sb-quick-btns,
    #sidebar .sb-balance-footer,
    body.mobile-nav-open #sidebar .sb-nav-item,
    body.mobile-nav-open #sidebar .sb-quick-btns,
    body.mobile-nav-open #sidebar .sb-balance-footer {
        animation: none !important;
        animation-delay: 0s !important;
        transform: none !important;
    }

    /* A small grab-handle at the top of the sheet (visual cue that it slides). */
    #sidebar::before {
        content: '';
        display: block;
        width: 38px;
        height: 4px;
        background: rgba(255, 255, 255, 0.22);
        border-radius: 3px;
        margin: 0 auto 12px;
        flex: 0 0 auto;
    }

    /* ── Apps-launcher 4-column grid for nav items.
         Tighter than the previous 3-col layout: smaller icons, smaller active
         pill, more items visible without scroll. Smoother transitions on
         tap-feedback so the drawer feels more responsive on Android. */
    #sidebar .sb-nav {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 6px 8px !important;
        flex: 0 0 auto !important;
        overflow-y: visible !important;
    }
    #sidebar .sb-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 9px 4px !important;
        border-radius: 11px !important;
        background: rgba(255, 255, 255, 0.035) !important;
        border: 0.5px solid rgba(255, 255, 255, 0.05) !important;
        font-size: 10px !important;
        text-align: center !important;
        line-height: 1.15 !important;
        min-height: 64px !important;
        will-change: transform, background, opacity !important;
        transition:
            background 0.18s ease,
            transform 0.16s cubic-bezier(0.32, 0.72, 0.28, 1),
            box-shadow 0.18s ease,
            opacity 0.15s ease !important;
    }
    #sidebar .sb-nav-icon {
        font-size: 19px !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        line-height: 1 !important;
        margin: 0 !important;
        transition: transform 0.18s cubic-bezier(0.32, 0.72, 0.28, 1) !important;
    }
    #sidebar .sb-nav-label {
        white-space: normal !important;
        word-break: keep-all !important;
        font-weight: 600 !important;
        font-size: 10px !important;
        letter-spacing: 0.01em !important;
    }
    /* Active tile — slimmer gold pill, lighter glow than the old style. */
    #sidebar .sb-nav-item.active {
        background: linear-gradient(135deg, rgba(255, 176, 32, 0.16), rgba(255, 176, 32, 0.04)) !important;
        border-color: rgba(255, 176, 32, 0.28) !important;
        color: var(--accent-gold, #FFB020) !important;
        box-shadow: 0 0 14px rgba(255, 176, 32, 0.10) !important;
    }
    #sidebar .sb-nav-item.active .sb-nav-icon { transform: scale(1.04) !important; }
    /* Tap feedback — softer squish so it feels smooth on Android. */
    #sidebar .sb-nav-item:active {
        transform: scale(0.96) !important;
        background: rgba(255, 255, 255, 0.07) !important;
    }
    /* Hide the old desktop section divider — looks weird inside a grid. */
    #sidebar .sb-nav-divider { display: none !important; }

    /* Quick-action row also tightens up so it doesn't dwarf the smaller tiles. */
    #sidebar .sb-quick-btns {
        padding: 6px 8px !important;
        gap: 6px !important;
    }
    #sidebar .sb-qbtn {
        min-height: 32px !important;
        padding: 4px 6px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   iPad / TABLET LAYOUT — use the desktop top-menu look.
   Above 820px (every iPad in landscape, most iPads even in portrait),
   the phone-specific @media (max-width: 600px) block above does NOT apply,
   so the styles.css top-menu treatment already lays out the sidebar as a
   horizontal strip. This block only hides the phone-shell artifacts that
   get injected/styled unconditionally (the floating hamburger, the drawer
   backdrop, etc.) so they don't leak onto the tablet view.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 601px) {
    /* Hamburger button is for the phone drawer — hide on tablet+. */
    .mobile-menu-btn { display: none !important; }
    /* iOS bottom-nav stays hidden on tablets (styles.css default already does
       this, but be explicit so any future override can't reintroduce it). */
    .ios-bottom-nav { display: none !important; }
    /* Sidebar = the top horizontal nav strip on tablet, like PC. Locks out any
       drawer-style positioning that might bleed in from tablet-aware overrides. */
    #sidebar {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        bottom: auto !important;
        top: auto !important;
        border-radius: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        z-index: auto !important;
    }
    /* Drawer-open backdrop is meaningless when the sidebar is permanently
       visible — never let it appear on tablet sizes. */
    body.mobile-nav-open::before { display: none !important; }
    body.mobile-nav-open { padding-bottom: 0 !important; }
    /* Grab handle (visual cue at the top of the bottom-sheet drawer) is
       irrelevant on tablet — it'd show as a stray pill in the top bar. */
    #sidebar::before { display: none !important; }
    /* Outline icons for nav are already inherited from styles.css's
       OUTLINE NAV ICONS block. Just make sure phone-side iOS-tab styling
       isn't accidentally still applied. */
    .ios-tab { display: none !important; }
}

/* Client filter tabs: mobile.css re-colors these at higher specificity than the
   generic ._cat-tab patch, so they need matching specificity here. */

/* Karat strip on phones: 8 preset keys + the "•••" custom key = 9 cells.
   Keeps everything on ONE row (the custom key opens in place, never adds a row). */
@media (max-width: 600px) {
    .karat-col { grid-template-columns: repeat(9, 1fr) !important; }
    .karat-btn { padding: 8px 0 !important; font-size: 11px !important; }
    .karat-more-wrap > .karat-custom { font-size: 12px !important; padding: 0 !important; }
}

/* ─── "?" support key on phones ───
   The base rule (styles.css) pins it absolute at the bar's vertical center,
   but the phone bar is a fixed 3-row stack padded by the dynamic-island
   safe-area, and row 3 (gram pills) can reach the edge with wide IQD values.
   So on phones, ride the centered ounce row (row 2) instead: its text is
   ~120px wide, leaving both sides of the row free. */
@media (max-width: 600px) {
    .tb-keys {
        top: calc(env(safe-area-inset-top) + 32px);
        transform: none;
    }
    .tb-keys-right { right: 12px; }
    .tb-keys-left { left: 12px; }
}