/* ============================================================
   MOBILE.CSS — EFF Hub360 Mobile Experience
   Banking-app style UI for screens ≤768px
   All rules scoped inside @media — desktop is NEVER affected
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────────────────
       CAPACITOR SYSTEM BAR STRIPS — fixed at body level
       Always visible on top of everything (z-index: 99999)
    ────────────────────────────────────────────────────────── */
    body.capacitor::before,
    body.capacitor::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        background: #1a1a1a;
        z-index: 99999;
        pointer-events: none;
    }
    /* Top strip — covers system status bar area */
    body.capacitor::before {
        top: 0;
        height: calc(12px + env(safe-area-inset-top, 0px));
    }
    /* Bottom strip — covers system navigation bar area */
    body.capacitor::after {
        bottom: 0;
        height: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    /* ──────────────────────────────────────────────────────────
       A. BOTTOM TAB BAR
       Fixed bottom navigation — 5 tabs like a native banking app
    ────────────────────────────────────────────────────────── */

    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        min-height: 64px;
        background: linear-gradient(to bottom, #F4F0E9, #F4F0E9);
        border-top: 1px solid rgba(30, 99, 50, 0.1);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
        z-index: 1060;
        align-items: center;
        justify-content: space-around;
        padding-top: 4px;
        padding-bottom: 0;
    }
    /* Capacitor system bar strips moved to body level — see end of section A */

    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        outline: none;
        color: #6c757d;
        font-size: 10px;
        font-weight: 500;
        font-family: var(--bs-font-sans-serif);
        padding: 6px 0;
        min-width: 56px;
        min-height: 44px;
        cursor: pointer;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }

    .mobile-tab i {
        font-size: 18px;
        line-height: 1;
    }

    .mobile-tab span {
        font-size: 10px;
        letter-spacing: 0.2px;
    }

    .mobile-tab.active {
        color: var(--eff-primary, #1E6332);
    }

    .mobile-tab.active i {
        transform: scale(1.1);
    }

    .mobile-tab.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        background: var(--eff-primary, #1E6332);
        border-radius: 0 0 4px 4px;
    }

    .mobile-tab:active {
        transform: scale(0.9);
    }

    .mobile-tab i {
        transition: transform 0.2s ease;
    }

    /* Center "+" button — raised green circle */
    .mobile-tab-center {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(145deg, #18A74B, var(--eff-primary, #1E6332));
        color: #ffffff;
        border: 4px solid #ffffff;
        box-shadow: 0 4px 16px rgba(30, 99, 50, 0.4);
        font-size: 22px;
        cursor: pointer;
        margin-top: -24px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }

    .mobile-tab-center:active {
        transform: scale(0.88);
        box-shadow: 0 2px 8px rgba(30, 99, 50, 0.25);
    }

    .mobile-tab-center i {
        font-size: 22px;
        line-height: 1;
    }

    /* Records popover — floating above the Records tab */
    .records-popover {
        position: absolute;
        bottom: calc(100% + 10px);
        left: 12%;
        opacity: 0;
        pointer-events: none;
        background: #ffffff;
        border-radius: 14px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
        padding: 6px;
        min-width: 170px;
        z-index: 1090;
        transform: translateY(6px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .records-popover.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .records-popover-arrow {
        position: absolute;
        bottom: -5px;
        left: 28px;
        width: 10px;
        height: 10px;
        background: #ffffff;
        transform: rotate(45deg);
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.06);
    }

    .records-popover-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 12px 14px;
        border: none;
        background: none;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        color: #212529;
        font-family: var(--bs-font-sans-serif);
        cursor: pointer;
        transition: background 0.15s;
        -webkit-tap-highlight-color: transparent;
    }

    .records-popover-item:active {
        background: #ecfdf5;
    }

    .records-popover-item i {
        font-size: 17px;
        color: #1E6332;
        width: 22px;
        text-align: center;
    }

    .records-popover-item span {
        font-size: 15px;
        letter-spacing: 0;
    }


    /* ──────────────────────────────────────────────────────────
       B. MOBILE HEADER — Clean banking-app style
    ────────────────────────────────────────────────────────── */

    .main-header {
        position: relative !important;
        height: auto !important;
        min-height: 56px !important;
        padding: 0 16px !important;
        background: #ffffff !important;
        border-bottom: none !important;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04) !important;
    }
    /* Extra top padding for Capacitor — pushes content below the fixed dark strip */
    body.capacitor .main-header {
        padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    }
    /* Extra bottom padding for Capacitor — pushes tab content above the fixed dark strip */
    body.capacitor .mobile-bottom-nav {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* More menu also needs bottom padding in Capacitor */
    body.capacitor .mobile-more-menu {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Hide desktop header elements */
    .main-header .mobile-menu-toggle,
    .main-header .header-mobile-logo,
    .main-header .global-search-container,
    .main-header .btn-success,
    .main-header .dropdown {
        display: none !important;
    }

    /* Hide the About/Support button (? icon) */
    .main-header a[title="About & Support"] {
        display: none !important;
    }

    /* Page title — centered, clean. min-width:0 lets it shrink (a flex item's
       automatic minimum is its content size, which would otherwise push the
       icon cluster off-screen on long titles like "Resource Center"). */
    .main-header .current-page-title {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        text-align: center;
        justify-content: center;
        margin: 0 6px;
        overflow: hidden;
    }

    .main-header .current-page-title #currentPageName {
        font-size: 16px;
        font-weight: 700;
        color: #1a1a1a;
        letter-spacing: -0.2px;
        display: block;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .main-header .current-page-title #currentPageIcon {
        display: none;
    }

    /* Mobile header avatar — injected by mobile.js */
    .mobile-header-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--eff-primary, #1E6332), #2F8542);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(30, 99, 50, 0.25);
        letter-spacing: 0.5px;
    }

    /* Notification bell button */
    .main-header .notification-dropdown {
        display: flex !important;
    }

    /* Six header icons have to share a phone-width bar with the page title, so
       the horizontal padding is trimmed. The touch target is bought back
       VERTICALLY instead (the bar is 56px tall and the icons only used ~30),
       which costs nothing in width. */
    .notif-bell-btn {
        padding: 6px 5px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .notif-badge {
        font-size: 9px !important;
        min-width: 15px !important;
        height: 15px !important;
        padding: 0 3px !important;
        border-width: 1.5px !important;
    }

    /* Notification panel — full-width bottom sheet on mobile */
    .notif-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        border-radius: 20px 20px 0 0 !important;
        transform-origin: bottom center !important;
        max-height: 80dvh !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 10100 !important;
    }

    @keyframes notifSheetIn {
        0%   { opacity: 0; transform: translateY(60px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes notifSheetOut {
        0%   { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(60px); }
    }

    .notif-panel.panel-entering {
        animation: notifSheetIn 0.28s cubic-bezier(0.34, 1.1, 0.64, 1) forwards !important;
    }

    .notif-panel.panel-leaving {
        animation: notifSheetOut 0.2s ease-in forwards !important;
    }

    /* Pull handle on mobile */
    .notif-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 10px auto -4px;
        flex-shrink: 0;
    }

    .notif-panel-body {
        flex: 1;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        /* bottom clearance for mobile nav */
        padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important;
    }

    /* Backdrop covers entire screen including bottom nav */
    .notif-backdrop {
        z-index: 10099 !important;
        background: rgba(0, 0, 0, 0.35) !important;
    }

    /* Close button — larger touch target on mobile */
    .notif-panel-close {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        z-index: 5 !important;
        position: relative !important;
    }

    /* Type tabs — compact on mobile */
    .notif-type-tab {
        font-size: 0.7rem !important;
        padding: 8px 10px 7px !important;
    }

    /* Item touch targets */
    .notif-item {
        padding: 14px 14px 13px !important;
    }

    /* Footer above mobile nav */
    .notif-panel-footer {
        padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
    }

    /* Header right section — proper spacing for badges.
       The icon cluster (dev console, notifications, calendar, tour, resource
       centre, recent items) must NEVER be the thing that overflows the page:
       it keeps its natural size and the page TITLE gives way instead (it
       ellipsises below). Gap is tightened so all icons fit at 360px. */
    .main-header > div > div:last-child {
        gap: 4px !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }

    /* Left group (avatar + page title). Without min-width:0 its automatic
       minimum size is its content, so a long page title ("Resource Center")
       pushes the icon cluster past the right edge of the screen. */
    .main-header > div > div:first-child {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
    }


    /* ──────────────────────────────────────────────────────────
       C. HIDE DESKTOP ELEMENTS
    ────────────────────────────────────────────────────────── */

    .app-sidebar {
        display: none !important;
    }

    .sidebar-overlay {
        display: none !important;
    }

    .main-footer {
        display: none !important;
    }

    .main-content-wrapper {
        margin-left: 0 !important;
        padding-bottom: 92px !important;
    }
    body.capacitor .main-content-wrapper {
        padding-bottom: 116px !important;
    }

    body.sidebar-collapsed .main-content-wrapper {
        margin-left: 0 !important;
    }

    /* Dev console FAB — hide floating button on mobile (moved to header) */
    .dev-console-fab {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        border-radius: 0 !important;
        font-size: 18px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #374151 !important;
        padding: 6px !important;
        z-index: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
    }

    .dev-console-fab:hover,
    .dev-console-fab:active {
        transform: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .dev-console-fab-badge {
        position: absolute !important;
        top: -2px !important;
        right: -4px !important;
        left: auto !important;
        bottom: auto !important;
        min-width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
        padding: 0 3px !important;
        border-radius: 10px !important;
        border: 1.5px solid #fff !important;
        z-index: 2 !important;
    }

    /* AI Chat Panel — full screen on mobile.
       🔴 transform:none is REQUIRED. On desktop the panel is a centered modal
       (top/left 50% + translate(-50%,-50%)), and BOTH the base rule and the
       aiChatPop/aiChatPopOut keyframes carry that translate. Pinning top/left
       to 0 here without clearing the transform left the panel shifted half a
       screen up and to the left, so only its bottom-right corner was on
       screen — Mo was effectively unusable on a phone. The two mobile
       keyframes below replace the translate-based ones. */
    .ai-chat-panel,
    .ai-chat-panel.expanded {
        position: fixed !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        z-index: 10000 !important;
        transform: none !important;
        animation: aiChatPopMobile 0.26s cubic-bezier(0.34, 1.28, 0.64, 1) !important;
    }

    .ai-chat-panel.closing {
        animation: aiChatPopOutMobile 0.18s ease-in forwards !important;
    }

    @keyframes aiChatPopMobile {
        from { opacity: 0; transform: scale(0.97); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes aiChatPopOutMobile {
        from { opacity: 1; transform: none; }
        to   { opacity: 0; transform: scale(0.98); }
    }

    .ai-chat-header {
        border-radius: 0 !important;
        padding: 10px 12px !important;
        min-height: 52px !important;
    }

    .ai-chat-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .ai-chat-header-title {
        font-size: 15px !important;
    }

    .ai-chat-header-status {
        font-size: 10px !important;
    }

    .ai-chat-header-actions {
        gap: 2px !important;
    }

    .ai-chat-header-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    /* (Expand button removed in #1581 — chat is always full-size now.) */

    /* Red "End conversation" — keep it tappable but icon-only on mobile so
       the three header buttons all fit in the narrow header. */
    #aiChatEndBtn {
        width: 32px !important;
        padding: 0 !important;
    }
    #aiChatEndBtn span { display: none !important; }

    /* Messages area — full height minus header and input */
    .ai-chat-messages {
        padding: 12px !important;
    }

    /* Input area */
    .ai-chat-input-area {
        padding: 8px 12px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 16px is deliberate — anything smaller makes iOS Safari zoom the page in
       when the field is focused (same rule as every other mobile input here). */
    .ai-chat-input {
        font-size: 16px !important;
        padding: 10px 14px !important;
        border-radius: 20px !important;
        min-height: 42px !important;
    }

    .ai-chat-send-btn {
        width: 38px !important;
        height: 38px !important;
    }

    /* Welcome and prompts */
    .ai-chat-welcome-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
    }

    .ai-chat-welcome h3 {
        font-size: 16px !important;
    }

    .ai-chat-welcome p {
        font-size: 12px !important;
    }

    .ai-chat-prompts-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .ai-chat-prompt-card {
        padding: 10px 12px !important;
    }

    .ai-chat-prompt-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .ai-chat-prompt-text {
        font-size: 12px !important;
    }

    /* Message bubbles */
    .ai-chat-msg-bubble {
        padding: 10px 14px !important;
        font-size: 13.5px !important;
        max-width: 92% !important;
    }

    /* Charts */
    .ai-chat-chart-container {
        max-height: 180px !important;
    }

    /* Export bar */
    .ai-chat-export-bar {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .ai-chat-export-bar button {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    /* Interactive prompt cards */
    .ai-chat-prompt-options {
        padding-left: 0 !important;
    }

    .ai-chat-prompt-option {
        padding: 10px !important;
    }

    /* Backdrop */
    .ai-chat-backdrop {
        display: none !important;
    }

    /* Impersonating offset */
    body.impersonating .ai-chat-panel,
    body.impersonating .ai-chat-panel.expanded {
        top: 32px !important;
        max-height: calc(100dvh - 32px) !important;
        height: calc(100dvh - 32px) !important;
    }

    /* Recent conversations */
    .ai-chat-recent-item {
        padding: 10px 12px !important;
    }

    /* History view */
    .ai-chat-history-view {
        padding: 12px !important;
    }


    /* ──────────────────────────────────────────────────────────
       D. MORE MENU — Slide-up overlay
    ────────────────────────────────────────────────────────── */

    .mobile-more-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1070;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-more-backdrop.open {
        display: block;
        opacity: 1;
    }

    .mobile-more-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
        z-index: 1080;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        max-height: 75vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-more-menu.open {
        transform: translateY(0);
    }

    .more-menu-handle {
        width: 36px;
        height: 4px;
        background: #dee2e6;
        border-radius: 2px;
        margin: 10px auto 4px;
    }

    .more-menu-items {
        padding: 0 12px 16px;
    }

    /* Section labels */
    .more-menu-section-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #9ca3af;
        padding: 14px 6px 6px;
        margin: 0;
    }

    /* Card-style group container */
    .more-menu-group {
        background: #f9fafb;
        border-radius: 14px;
        border: 1px solid #f0f0f0;
        overflow: hidden;
    }

    .more-menu-group-logout {
        margin-top: 8px;
        background: transparent;
        border: none;
    }

    /* Menu items */
    .more-menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 11px 12px;
        background: none;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 0;
        font-size: 15px;
        font-weight: 500;
        color: #212529;
        font-family: var(--bs-font-sans-serif);
        cursor: pointer;
        transition: background 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        text-align: left;
    }

    .more-menu-group .more-menu-item:last-child {
        border-bottom: none;
    }

    .more-menu-item:active {
        background: #f0f7f4;
    }

    /* Colored icon circles */
    .more-menu-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
        font-size: 15px;
        flex-shrink: 0;
    }

    .more-menu-icon i {
        width: auto;
        font-size: inherit;
        color: inherit;
    }

    /* Text column — title + description */
    .more-menu-text {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .more-menu-title {
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
        line-height: 1.3;
    }

    .more-menu-desc {
        font-size: 11px;
        color: #9ca3af;
        line-height: 1.3;
        margin-top: 1px;
    }

    /* Chevron arrow */
    .more-menu-arrow {
        font-size: 11px !important;
        color: #d1d5db !important;
        width: auto !important;
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Logout item */
    .more-menu-item-logout {
        border-bottom: none;
        justify-content: center;
        padding: 12px;
    }

    .more-menu-item-logout .more-menu-title {
        font-weight: 600;
    }

    /* Old divider — no longer used */
    .more-menu-divider {
        display: none;
    }

    /* Hide Analytics from More menu on mobile */
    .more-menu-item[onclick*="analytics"] {
        display: none !important;
    }

    /* Loading-data state for More menu items (Analytics/Reports) */
    .more-menu-item.loading-data {
        opacity: 0.45;
        pointer-events: none;
        cursor: default;
    }
    .more-menu-link-spinner {
        width: 14px;
        height: 14px;
        border: 2px solid rgba(30, 99, 50,0.2);
        border-top-color: #1E6332;
        border-radius: 50%;
        animation: progressSpin 0.8s linear infinite;
        margin-left: auto;
        flex-shrink: 0;
    }

    /* ──────────────────────────────────────────────────────────
       E. GENERAL MOBILE POLISH
    ────────────────────────────────────────────────────────── */

    /* Content area — edge-to-edge, no side gaps, no bottom cap */
    .main-content {
        padding: 10px 0 0 0 !important;
        padding-bottom: 0 !important;
        background: #f5f6f8 !important;
    }

    /* All dashboard-content sections — reduce padding */
    .dashboard-content {
        padding: 0 !important;
    }

    /* Toast positioning — right-aligned, above bottom nav */
    #toastContainer.toast-container,
    .toast-container {
        position: fixed !important;
        bottom: 80px !important;
        right: 16px !important;
        left: unset !important;
        max-width: calc(100vw - 32px) !important;
        width: auto !important;
    }

    .toast-notification {
        min-width: auto !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        border-left-width: 4px !important;
    }

    /* Loading overlay — mobile-optimized */
    .loading-overlay {
        padding: 0 20px !important;
    }

    .loading-logo-wrapper {
        width: 90px !important;
        height: 90px !important;
    }

    .loading-glow {
        width: 90px !important;
        height: 90px !important;
    }

    .loading-ring {
        width: 100px !important;
        height: 100px !important;
    }

    .loading-avatar {
        width: 56px !important;
        height: 56px !important;
        font-size: 18px !important;
    }

    .loading-content {
        gap: 1.2rem !important;
    }

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

    .loading-substatus {
        font-size: 11px !important;
    }

    /* Impersonation banner — mobile layout */
    .impersonate-banner {
        height: auto !important;
        min-height: 32px !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 8px !important;
        z-index: 1100 !important;
    }

    .impersonate-banner .imp-user-email {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .impersonate-banner .imp-exit-btn {
        padding: 2px 10px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
        margin-left: 0 !important;
    }

    /* Push mobile header + content down when impersonating */
    body.impersonating .main-header {
        top: 32px !important;
    }

    body.impersonating .main-content-wrapper {
        padding-top: 32px !important;
    }

    body.impersonating .mobile-bottom-nav {
        /* Bottom nav stays at bottom — no shift needed */
    }

    /* Data loading progress banner — mobile: full width, no sidebar offset */
    .load-progress-banner {
        left: 0 !important;
        top: 52px !important; /* mobile header is 52px */
        height: 28px !important;
        font-size: 11px !important;
        padding: 0 12px !important;
    }
    body.impersonating .load-progress-banner {
        top: 84px !important; /* 52px header + 32px impersonate */
    }

    /* Touch-friendly button minimum */
    .btn {
        min-height: 42px;
        border-radius: 10px;
    }

    /* Rounder cards on mobile */
    .card,
    .stat-card,
    .dashboard-card {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    }

    /* Status badges — polished */
    .badge {
        font-size: 11px;
        padding: 4px 10px;
        border-radius: 8px;
        font-weight: 600;
    }

    /* Page section — no bottom cap on any page */
    .page-section {
        padding-bottom: 0 !important;
    }

    /* Notification menu — full width bottom sheet style */
    .notification-menu {
        position: fixed !important;
        top: 56px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: 70vh;
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        border: none !important;
    }

    /* Impersonate banner adjustments */
    body.impersonating .main-content-wrapper {
        margin-left: 0 !important;
    }

    /* Modal improvements — bottom sheet feel */
    .modal-dialog {
        margin: auto 12px 0 !important;
        max-width: calc(100% - 24px) !important;
        padding-bottom: env(safe-area-inset-bottom, 12px);
    }

    .modal-content {
        border-radius: 20px 20px 16px 16px !important;
        border: none !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
        overflow: hidden;
    }

    .modal-header {
        padding: 16px 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .modal-body {
        padding: 16px 20px !important;
        max-height: 65vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 12px 20px 16px !important;
        border-top: 1px solid #f0f0f0 !important;
    }

    .modal-footer .btn {
        min-height: 44px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        flex: 1;
    }

    .modal-confirm,
    .add-user-modal {
        padding: 16px !important;
    }

    .modal-confirm .modal-content,
    .add-user-modal .add-user-modal-content {
        border-radius: 20px !important;
        margin: auto;
        max-height: 85vh;
        border: none !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
    }

    /* Document management modal — bottom sheet */
    #docManagementModal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        min-height: auto;
        align-items: flex-end;
        display: flex;
    }

    #docManagementModal .modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh;
    }

    /* Scrollable overflow for page content */
    .page-section.active {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Global font size bump for readability */
    .form-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #374151 !important;
    }

    .form-control,
    .form-select {
        border-radius: 10px !important;
        border: 1.5px solid #e2e5e9 !important;
        font-size: 14px !important;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--eff-primary, #1E6332) !important;
        box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.1) !important;
    }


    /* ──────────────────────────────────────────────────────────
       F. DASHBOARD PAGE — Premium Banking App Style
    ────────────────────────────────────────────────────────── */

    /* ── Welcome Banner — Hero Card ─────────────────────── */

    /* ── Announcement Banner Strip ── */
    .ann-banner-strip {
        margin-bottom: 8px !important;
        gap: 6px !important;
    }
    .ann-banner-item {
        border-radius: 10px !important;
    }
    .ann-banner-item::after {
        display: none !important;
    }
    .ann-banner-accent {
        width: 4px !important;
    }
    .ann-banner-content {
        padding: 8px 10px !important;
        gap: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    .ann-banner-megaphone {
        display: none !important;
    }
    .ann-banner-body {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .ann-banner-top {
        gap: 5px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    .ann-banner-title {
        font-size: 0.78rem !important;
        flex: 1 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .ann-banner-cat {
        font-size: 0.52rem !important;
        padding: 1px 5px !important;
        flex-shrink: 0 !important;
    }
    .ann-banner-pri {
        font-size: 0.5rem !important;
        padding: 1px 5px !important;
        flex-shrink: 0 !important;
    }
    .ann-banner-preview {
        display: none !important;
    }
    .ann-banner-right {
        display: flex !important;
        gap: 4px !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    .ann-banner-meta {
        display: none !important;
    }
    .ann-banner-ack {
        font-size: 0.5rem !important;
        padding: 2px 6px !important;
    }
    .ann-banner-chevron {
        font-size: 9px !important;
    }

    /* ── Announcement Popover — bottom sheet on mobile ── */
    .ann-popover-anchor {
        position: static !important;
    }
    .ann-popover {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 70vh !important;
        border-radius: 20px 20px 0 0 !important;
        z-index: 10100 !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.18) !important;
        border: none !important;
    }
    .ann-popover-arrow {
        display: none !important;
    }
    .ann-popover::before {
        content: '' !important;
        display: block !important;
        width: 40px !important;
        height: 4px !important;
        background: #d1d5db !important;
        border-radius: 4px !important;
        margin: 10px auto 6px !important;
    }
    .ann-popover-scroll {
        max-height: calc(70vh - 40px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }
    .ann-popover .ann-feed {
        padding: 8px !important;
    }
    .ann-popover .ann-card {
        padding: 0.7rem 0.85rem !important;
        border-radius: 12px !important;
        margin-bottom: 6px !important;
    }
    .ann-popover .ann-section-label {
        padding: 8px 8px 4px !important;
        font-size: 0.65rem !important;
    }

    /* ── Welcome right-actions group ── */
    .welcome-right-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        position: relative;
        z-index: 1;
    }

    /* ── Announcement Inline Trigger (inside welcome banner) ── */
    .ann-inline-trigger {
        padding: 5px 10px !important;
        border-radius: 10px !important;
        gap: 6px !important;
        background: #f0fdf4 !important;
        border-color: #d1fae5 !important;
    }
    .ann-inline-icon {
        width: 24px !important;
        height: 24px !important;
        border-radius: 7px !important;
        font-size: 0.6rem !important;
        background: #1E6332 !important;
        color: #fff !important;
    }
    .ann-inline-label {
        font-size: 0.7rem !important;
        color: #1E6332 !important;
    }
    .ann-inline-chevron {
        font-size: 0.55rem !important;
        color: #6b7280 !important;
    }
    .ann-board-badge {
        font-size: 0.52rem !important;
        padding: 1px 5px !important;
        min-width: 15px !important;
    }

    /* ── Announcement Cards (feed items) ── */
    .ann-card {
        padding: 0.75rem 0.9rem !important;
        border-radius: 12px !important;
        margin-bottom: 0.5rem !important;
    }
    .ann-card-layout {
        gap: 0.65rem !important;
    }
    .ann-card-cat-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        font-size: 0.82rem !important;
    }
    .ann-card-meta {
        gap: 0.3rem !important;
        margin-bottom: 0.3rem !important;
    }
    .ann-cat-chip {
        font-size: 0.56rem !important;
        padding: 2px 6px !important;
    }
    .ann-priority-badge {
        font-size: 0.52rem !important;
        padding: 2px 6px !important;
    }
    .ann-new-badge {
        font-size: 0.48rem !important;
        padding: 2px 5px !important;
    }
    .ann-card-time {
        font-size: 0.62rem !important;
    }
    .ann-card-title {
        font-size: 0.84rem !important;
    }
    .ann-card-content {
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
    }
    .ann-card-footer {
        margin-top: 0.4rem !important;
        padding-top: 0.4rem !important;
    }
    .ann-card-author {
        display: none !important;
    }
    .ann-card-author-avatar {
        display: none !important;
    }
    .ann-card-open-link {
        font-size: 0.6rem !important;
        padding: 3px 8px !important;
    }
    .ann-card-content.ann-collapsed {
        max-height: 80px !important;
    }

    /* ── Announcement Empty State ── */
    .ann-empty {
        padding: 2rem 1rem !important;
    }
    .ann-empty-icon {
        font-size: 1.8rem !important;
    }
    .ann-empty-title {
        font-size: 0.9rem !important;
    }
    .ann-empty-text {
        font-size: 0.75rem !important;
    }

    .welcome-banner-compact {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
        position: relative;
        overflow: hidden !important;
    }

    /* Hide decorative circles on mobile */
    .welcome-banner-compact::before,
    .welcome-banner-compact::after {
        display: none !important;
    }

    .welcome-main {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        text-align: left !important;
        position: relative;
        z-index: 1;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .welcome-greeting-compact h2 {
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: -0.2px !important;
        margin: 0 !important;
        color: #1a1a1a !important;
    }

    .welcome-greeting-compact .welcome-date {
        font-size: 10px !important;
        opacity: 1 !important;
        color: #9ca3af !important;
        letter-spacing: 0.2px !important;
        margin-top: 1px !important;
    }

    /* Hide stat pills and action buttons on mobile — redundant */
    .welcome-stats-inline {
        display: none !important;
    }
    .welcome-actions-compact {
        display: none !important;
    }
    /* Hide unread messages button on mobile — bottom nav badge is enough */
    .dash-unread-msg-btn {
        display: none !important;
    }

    /* ── Announcement Board (mobile) ────────────────── */
    .announcement-board {
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }

    .announcement-board-header {
        padding: 0.6rem 1rem !important;
    }

    .announcement-post-form textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
    }

    .announcement-post-actions {
        flex-direction: row !important;
    }

    .announcement-attach-name {
        max-width: 120px !important;
    }

    .announcement-post-btn {
        justify-content: center;
    }

    .announcement-list {
        max-height: 300px !important;
    }

    .announcement-item-media img {
        max-width: 100% !important;
        max-height: 180px !important;
    }

    .announcement-item-delete {
        opacity: 1 !important; /* Always visible on mobile */
    }

    /* ── Stat Cards — 2×2 Grid ────────────────── */
    .dashboard-stats-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    /* Hide the funded amount card — redundant with financial ledger */
    .dash-stat-card.highlight {
        display: none !important;
    }

    .dash-stat-card {
        padding: 10px 8px !important;
        border-radius: 12px !important;
        border: none !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
        position: relative;
        overflow: hidden;
        background: #ffffff !important;
        gap: 3px !important;
    }

    .dash-stat-card::after {
        display: none !important;
    }

    .dash-stat-card:hover {
        transform: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }

    .dash-stat-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 10px !important;
        border-radius: 7px !important;
        flex-shrink: 0 !important;
        margin-bottom: 1px !important;
    }

    .dash-stat-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
    }

    .dash-stat-value {
        font-size: 20px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        letter-spacing: -0.5px !important;
    }

    .dash-stat-label {
        font-size: 8.5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        color: #9ca3af !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* Trend/progress/badge overlays — hidden for clean card look */
    .dash-stat-trend,
    .dash-stat-progress,
    .dash-stat-badge {
        display: none !important;
    }

    /* ── Financial Ledger — Premium Card with Title ─────── */
    .financial-ledger-wrapper {
        padding: 18px 20px !important;
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
        margin-bottom: 4px !important;
        background: #ffffff !important;
        position: relative !important;
    }

    /* Hide CSS pseudo-element title — replaced by real HTML header with dropdown */
    .financial-ledger-wrapper::before {
        display: none !important;
    }

    .financial-ledger-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .financial-ledger-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
    }

    .financial-ledger-title i {
        color: #1E6332 !important;
        font-size: 12px !important;
    }

    .financial-ledger {
        font-size: 14px !important;
    }

    .fl-row {
        padding: 10px 0 !important;
    }

    .fl-label {
        font-size: 13.5px !important;
        color: #6b7280 !important;
    }

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

    .fl-row.fl-subtract .fl-value {
        font-size: 14px !important;
    }

    .fl-row.fl-total {
        margin-top: 6px !important;
        padding-top: 14px !important;
        border-top: 2px solid var(--eff-primary, #1E6332) !important;
    }

    .fl-row.fl-total .fl-label {
        color: var(--eff-primary, #1E6332) !important;
        font-weight: 700 !important;
        font-size: 14px !important;
    }

    .fl-row.fl-total .fl-value {
        font-size: 20px !important;
        color: var(--eff-primary, #1E6332) !important;
        letter-spacing: -0.5px !important;
    }

    /* ── Main Layout — Single Column ─────────────────────── */
    .dashboard-main-layout {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .dashboard-left-column {
        width: 100% !important;
        flex: none !important;
    }

    /* ── Right Column on Mobile — show Recent Claims, hide AI ── */
    .dashboard-right-column {
        width: 100% !important;
        flex: none !important;
    }

    .dashboard-right-column .smart-insights-panel {
        display: none !important;
    }

    .dashboard-right-column .recent-claims-card {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    }

    .dashboard-right-column .recent-claims-card .recent-claims-list {
        max-height: none !important;
    }

    .recent-claim-item {
        padding: 12px 16px !important;
        gap: 12px !important;
    }

    .claim-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.75rem !important;
        border-radius: 10px !important;
    }

    .claim-name {
        font-size: 0.82rem !important;
    }

    .claim-item-top .claim-amount {
        font-size: 0.85rem !important;
    }

    .claim-detail-row {
        font-size: 0.7rem !important;
    }

    .claim-date {
        font-size: 0.65rem !important;
    }

    .claim-item-bottom .status-badge {
        font-size: 0.58rem !important;
    }

    /* ── Claims Overview Card — Premium ───────────────────── */
    .dash-card {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden;
        background: #ffffff !important;
    }

    .dash-card-header {
        padding: 16px 18px 12px !important;
    }

    .dash-card-header h5 {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
    }

    .dash-period-select {
        font-size: 12px !important;
        padding: 5px 10px !important;
        border-radius: 8px !important;
        border: 1.5px solid #e5e7eb !important;
        background: #f9fafb !important;
        font-weight: 500 !important;
    }

    .dash-card-body {
        padding: 4px 18px 16px !important;
    }

    /* Overview stats — compact inline row */
    .claims-overview-stats {
        display: flex !important;
        justify-content: center !important;
        gap: 0 !important;
        margin-bottom: 14px !important;
        padding: 0 !important;
        background: #f8f9fa !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .overview-stat {
        text-align: center;
        flex: 1;
        padding: 10px 4px !important;
        background: transparent !important;
        border-radius: 0 !important;
        border-right: 1px solid #e9ecef;
    }

    .overview-stat:last-child {
        border-right: none;
    }

    .overview-stat-value {
        font-size: 22px !important;
        font-weight: 800 !important;
        letter-spacing: -0.5px !important;
        line-height: 1.1 !important;
    }

    .overview-stat-label {
        font-size: 8.5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        color: #9ca3af !important;
        font-weight: 600 !important;
        margin-top: 3px !important;
    }

    /* Mini bar chart — contained, no overflow */
    .mini-bar-chart {
        min-height: 100px !important;
        max-height: 110px !important;
        height: 110px !important;
        padding: 0.5rem 0.25rem 0.4rem !important;
        margin: 0 -4px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .mini-bar-wrapper {
        padding: 0 2px !important;
        overflow: hidden !important;
    }

    .mini-bar-value {
        font-size: 0.6rem !important;
        padding: 0px 4px !important;
        border-radius: 4px !important;
        margin-bottom: 2px !important;
        line-height: 1.4 !important;
    }

    .mini-bar-label {
        font-size: 0.6rem !important;
        margin-top: 4px !important;
    }

    .mini-bar {
        max-width: 44px !important;
        border-radius: 5px 5px 0 0 !important;
        max-height: 65px !important;
    }

    /* Hide the decorative line behind bars */
    .mini-bar-chart::before {
        display: none !important;
    }

    /* Claims overview inline (inside merged ledger wrapper) */
    .claims-overview-inline {
        margin-top: 14px !important;
        padding-top: 12px !important;
    }

    /* Hide "View Full Analytics" footer on mobile */
    .claims-overview .dash-card-footer,
    .claims-overview-inline .dash-card-footer {
        display: none !important;
    }

    /* ── Recent Messages — compact on mobile ──────────────── */
    .recent-messages-card {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    }

    .recent-messages-list {
        max-height: none !important;
    }

    .recent-msg-item {
        padding: 10px 14px !important;
    }

    .msg-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.65rem !important;
    }

    .recent-msg-claim {
        font-size: 0.78rem !important;
    }

    .recent-msg-preview {
        font-size: 0.72rem !important;
    }

    /* ── Docs dropdown — bottom sheet on mobile ────────────── */
    .docs-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        z-index: 1080 !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease, visibility 0.3s ease !important;
    }

    .docs-dropdown::before {
        display: none !important;
    }

    .docs-dropdown.show {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .docs-dropdown-header {
        border-radius: 20px 20px 0 0 !important;
        padding: 18px 20px !important;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .docs-dropdown-body {
        max-height: none !important;
        padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    }

    .docs-dropdown-item {
        padding: 14px 20px !important;
        min-height: 44px !important;
    }

    .docs-dropdown-footer {
        padding: 14px 20px !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        position: sticky;
        bottom: 0;
        z-index: 2;
    }

    /* Backdrop for docs bottom sheet */
    .docs-dropdown-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1079;
    }

    .docs-dropdown-backdrop.show {
        display: block;
    }

    /* ── Left stack layout ────────────────────────────────── */
    .dashboard-left-bottom {
        flex-direction: column !important;
    }


    /* ──────────────────────────────────────────────────────────
       G. CLAIMS PAGE — Simplified Mobile Layout
    ────────────────────────────────────────────────────────── */

    #page-claims {
        padding: 0 !important;
    }

    .claims-page {
        padding: 0 !important;
        border-radius: 0 !important;
        background: #f5f6f8 !important;
    }

    .claims-content {
        padding-top: 0 !important;
    }

    /* ── Filter bar — flush to header ──────────────────────── */
    .claims-content .claims-filter-bar,
    .claims-filter-bar {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 12px 12px 0 !important;
        gap: 10px !important;
        z-index: 5;
        border-bottom: none !important;
        background: #f5f6f8 !important;
        box-shadow: none !important;
    }

    .filter-bar-top {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 0 !important;
        border-bottom: none !important;
        width: 100% !important;
    }

    /* Search — full width with rounded style */
    .filter-bar-top .filter-search-box,
    .filter-search-box {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        order: -1;
        border-radius: 12px !important;
        height: 44px !important;
        background: #ffffff !important;
        border: 1.5px solid #e5e7eb !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
    }

    .filter-search-box:focus-within {
        border-color: #1E6332 !important;
        box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.1) !important;
    }

    .filter-search-box input {
        font-size: 15px !important;
    }

    /* ── Hide desktop filter/sort buttons — simplify ────────── */
    .filter-bar-actions {
        display: none !important;
    }

    /* ── Quick filter presets — status toggles only ──────────── */
    .quick-filter-presets {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding: 8px 12px 12px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: #f5f6f8;
    }

    .quick-filter-presets::-webkit-scrollbar {
        display: none;
    }

    .quick-filter-chip {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 8px 14px !important;
        border-radius: 24px !important;
        font-weight: 600 !important;
        background: #ffffff !important;
        border: 2px solid #e5e7eb !important;
        color: #6b7280 !important;
        transition: all 0.15s ease !important;
    }

    .quick-filter-chip .qf-dot {
        width: 8px !important;
        height: 8px !important;
    }

    .quick-filter-chip .chip-count {
        font-size: 10px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
    }

    /* Status filter CHECKBOXES on mobile — strip the pill look (override the
       !important pill rules above). Matches claims.css .qf-checkbox. */
    .quick-filter-chip.qf-checkbox {
        background: transparent !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 6px 8px !important;
        color: #374151 !important;
    }
    .quick-filter-chip.qf-checkbox .qf-box {
        width: 18px !important;
        height: 18px !important;
        border: 2px solid #cbd5e1 !important;
        border-radius: 4px !important;
        background: #fff !important;
    }
    .quick-filter-chip.qf-checkbox.status-in-process .qf-label { color: #c19a6b !important; }
    .quick-filter-chip.qf-checkbox.status-funded .qf-label { color: #1e6332 !important; }
    .quick-filter-chip.qf-checkbox.status-closed .qf-label { color: #475453 !important; }
    .quick-filter-chip.qf-checkbox.status-withdrawn .qf-label { color: #db0000 !important; }
    .quick-filter-chip.qf-checkbox.status-in-process.active .qf-box { background: #c19a6b !important; border-color: #c19a6b !important; }
    .quick-filter-chip.qf-checkbox.status-funded.active .qf-box { background: #1e6332 !important; border-color: #1e6332 !important; }
    .quick-filter-chip.qf-checkbox.status-closed.active .qf-box { background: #475453 !important; border-color: #475453 !important; }
    .quick-filter-chip.qf-checkbox.status-withdrawn.active .qf-box { background: #db0000 !important; border-color: #db0000 !important; }

    /* ── Withdrawn toggle — compact for mobile scroll ────────── */
    .withdrawn-toggle-divider {
        width: 1px !important;
        height: 18px !important;
        margin: 0 2px !important;
    }

    .withdrawn-toggle {
        flex-shrink: 0 !important;
        padding: 6px 10px !important;
        border-radius: 20px !important;
        gap: 6px !important;
    }

    .withdrawn-toggle-slider {
        width: 28px !important;
        height: 16px !important;
    }

    .withdrawn-toggle-slider::after {
        width: 12px !important;
        height: 12px !important;
        top: 2px !important;
        left: 2px !important;
    }

    .withdrawn-toggle input:checked + .withdrawn-toggle-slider::after {
        transform: translateX(12px) !important;
    }

    .withdrawn-toggle-text {
        font-size: 11px !important;
    }

    /* ── Saved Filters Row — horizontal scroll on mobile ────── */
    .saved-filters-row {
        padding: 6px 12px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .saved-filters-label {
        font-size: 11px !important;
    }
    .saved-filters-label span {
        display: none !important;
    }
    .saved-filter-chip {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
    }
    .saved-filter-chip .saved-filter-delete {
        opacity: 1 !important;
        font-size: 10px !important;
        padding: 4px !important;
    }
    .save-filter-btn {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
    }
    .save-filter-btn span {
        display: none !important;
    }
    .saved-filter-prompt input {
        width: 120px !important;
        font-size: 16px !important;
        padding: 6px 10px !important;
    }
    .saved-filter-confirm-btn,
    .saved-filter-cancel-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    /* ── Active filters row ──────────────────────────────────── */
    .active-filters-row {
        padding: 6px 16px !important;
        flex-wrap: wrap !important;
        background: #f5f6f8;
    }

    .active-filters-chips {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* ── Advanced filters — bottom sheet overlay ─────────────── */
    .advanced-filters-panel {
        border-radius: 0 !important;
        max-height: calc(100dvh - 120px) !important;
    }

    .advanced-filters-panel.open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1070 !important;
        border-radius: 0 !important;
        max-height: none !important;
        background: #ffffff !important;
        overflow-y: auto !important;
    }

    .advanced-filters-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .filter-section {
        border-radius: 14px !important;
        border: 1px solid #f0f0f0 !important;
    }

    .filter-panel-actions {
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    }

    .filter-panel-btn {
        min-height: 46px !important;
        border-radius: 12px !important;
        flex: 1 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    /* ── Sort panel — bottom sheet ───────────────────────────── */
    .sort-control {
        display: none !important;
    }

    .sort-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
        z-index: 1075 !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    .sort-preset-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Hide desktop-only elements ──────────────────────────── */

    /* Export button — hide on mobile */
    .claims-action-btn {
        display: none !important;
    }

    /* Table view — always cards on mobile */
    .claims-table-container {
        display: none !important;
    }

    .view-toggle-group {
        display: none !important;
    }

    /* ── Claims cards container ──────────────────────────────── */
    .claims-cards-container {
        display: block !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .claims-cards-header {
        padding: 10px 12px 6px !important;
        background: transparent !important;
        border-bottom: none !important;
    }

    .claims-cards-header h5 {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #6b7280 !important;
    }

    .claims-cards-header h5 i {
        display: none !important;
    }

    /* ── Claim cards — compact chips ─────────────────────────── */
    .claims-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 0 12px 12px !important;
    }

    .claim-card {
        border-radius: 16px !important;
        padding: 0 !important;
        border: 1.5px solid #e5e7eb !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        background: #ffffff !important;
        transition: transform 0.1s ease !important;
        overflow: visible !important;
    }

    /* Cards with AI badge need top margin so the badge doesn't overlap the card above */
    .claim-card.has-ai-alert {
        margin-top: 6px !important;
    }

    .claim-card:active {
        transform: scale(0.98);
    }

    /* Card header — tighter */
    .claim-card-header {
        padding: 10px 12px 6px !important;
        gap: 8px !important;
    }

    .claim-card-header .claim-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 0.75rem !important;
        flex-shrink: 0;
    }

    .claim-card .claim-name,
    .claim-card-decedent {
        font-size: 14px !important;
    }

    .claim-card .claim-id,
    .claim-card-id {
        font-size: 10.5px !important;
    }

    .claim-card .claim-meta {
        font-size: 11px !important;
        color: #6b7280 !important;
    }

    /* Card body — compact */
    .claim-card-body {
        padding: 4px 12px 8px !important;
    }

    .claim-card-info-row {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }

    .claim-card-info-row i {
        font-size: 10px !important;
    }

    .claim-card-policies {
        margin-top: 3px !important;
    }

    .claim-card-policy-chip {
        font-size: 10px !important;
        padding: 1px 7px !important;
    }

    /* IC badge — slightly smaller on mobile */
    .ic-logo {
        height: 26px !important;
        max-width: 48px !important;
    }
    .ic-logo-fallback {
        font-size: 16px !important;
    }
    .ic-badge {
        gap: 5px !important;
    }

    /* Ledger — slightly smaller */
    .claim-card-ledger {
        width: 100px !important;
    }

    .claim-card-ledger-row {
        font-size: 11px !important;
        padding: 1px 0 !important;
    }

    .claim-card-amount-value {
        font-size: 15px !important;
    }

    .claim-card-amount-label {
        font-size: 10px !important;
    }

    .claim-card .claim-amount {
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    /* Status badges — pill style */
    .claim-card .claim-status,
    .claim-card .status-badge,
    .claim-card-status {
        font-size: 10.5px !important;
        padding: 3px 9px !important;
        border-radius: 20px !important;
        font-weight: 600 !important;
    }

    /* Steps indicator — compact */
    .claim-card-steps {
        padding: 6px 12px !important;
    }

    .claim-step-dot {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.5rem !important;
    }

    .claim-step-label {
        font-size: 0.5rem !important;
    }

    /* Footer buttons — compact */
    .claim-card-footer {
        padding: 8px 10px !important;
        margin-top: 0 !important;
        gap: 5px !important;
        border-top: 1px solid #f0f1f3 !important;
    }

    .claim-card-btn {
        padding: 6px 0 !important;
        font-size: 11px !important;
        border-radius: 10px !important;
    }

    .claim-card-footer .claim-date {
        font-size: 11px !important;
        color: #9ca3af !important;
    }

    /* Docs needed badge */
    .claim-card .docs-badge {
        font-size: 10px !important;
        padding: 2px 7px !important;
        border-radius: 8px !important;
    }

    /* Quick action buttons on cards */
    .claim-card .claim-actions {
        gap: 5px !important;
    }

    .claim-card .claim-actions .btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        min-height: 30px !important;
    }

    /* AI/processing badge — compact inline */
    .claim-card-ai-alert {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* Quick action buttons on cards (if using .claim-actions layout) */
    .claim-card .claim-actions {
        gap: 4px !important;
    }

    .claim-card .claim-actions .btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        min-height: 28px !important;
    }

    /* ── Pagination bar — stacked on mobile ───────────────────── */
    .claims-pagination-bar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
        padding-bottom: calc(12px + 64px) !important;
    }

    .claims-per-page {
        font-size: 13px !important;
    }

    .claims-per-page select {
        font-size: 13px !important;
        padding: 6px 8px !important;
        min-height: 34px !important;
    }

    .claims-pagination-nav {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 0 !important;
    }

    .claims-pagination-nav .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .claims-pagination-nav .page-link {
        min-width: 38px !important;
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        font-size: 13px !important;
    }

    .claims-pagination-nav .page-item.active .page-link {
        background: #1E6332 !important;
        border-color: #1E6332 !important;
    }


    /* ──────────────────────────────────────────────────────────
       H. MESSAGING PAGE — Native Chat Experience
    ────────────────────────────────────────────────────────── */

    /* Messaging page — no extra padding */
    #page-messaging {
        padding: 0 !important;
    }

    .messaging-page {
        flex-direction: column !important;
        height: calc(100dvh - 56px - 64px) !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }

    /* Conversation list — full screen by default */
    .messaging-sidebar {
        width: 100% !important;
        max-height: none !important;
        height: 100% !important;
        border-right: none !important;
        border-bottom: none !important;
        background: #ffffff !important;
        overflow-y: auto !important;
    }

    /* Chat panel — hidden by default */
    .messaging-main {
        width: 100% !important;
        display: none;
    }

    /* ── When conversation is open — fixed layout ──────────── */
    .messaging-page.mobile-chat-open .messaging-sidebar {
        display: none !important;
    }

    .messaging-page.mobile-chat-open .messaging-empty {
        display: none !important;
    }

    .messaging-page.mobile-chat-open .messaging-main {
        display: block !important;
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 64px !important;
        width: 100% !important;
        height: auto !important;
        z-index: 50 !important;
        background: #ffffff !important;
    }

    .messaging-page.mobile-chat-open .messaging-chat {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .messaging-page.mobile-chat-open .chat-header-compact {
        flex-shrink: 0 !important;
    }

    .messaging-page.mobile-chat-open .chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }

    .messaging-page.mobile-chat-open .chat-input-area {
        flex-shrink: 0 !important;
        background: #ffffff !important;
        border-top: 1px solid #e5e7eb !important;
    }

    /* Mobile back button — inside header row */
    .mobile-chat-back {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0;
        background: rgba(0, 0, 0, 0.06);
        border: none;
        border-radius: 50%;
        color: #374151;
        cursor: pointer;
        font-family: var(--bs-font-sans-serif);
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }

    .mobile-chat-back:active {
        background: #e5e7eb;
    }

    .mobile-chat-back i {
        font-size: 13px;
    }

    /* Messaging sidebar header — premium */
    .messaging-sidebar-header {
        padding: 14px 16px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .messaging-sidebar-header h5 {
        font-size: 20px !important;
        font-weight: 700 !important;
    }

    .new-message-btn {
        width: 38px !important;
        height: 38px !important;
    }

    /* Search & filters */
    .messaging-search {
        margin: 0 14px 8px !important;
    }

    .messaging-search input {
        border-radius: 12px !important;
        height: 40px !important;
        font-size: 14px !important;
    }

    .messaging-filters {
        padding: 0 14px 8px !important;
        gap: 8px !important;
    }

    .msg-filter-btn {
        border-radius: 20px !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Conversation items — native feel */
    .conversation-item {
        padding: 12px 16px !important;
        min-height: 68px;
        border-bottom: 1px solid #f5f5f5 !important;
    }

    .conversation-item:active {
        background: #f5f7f5 !important;
    }

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

    .conv-name {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .conv-preview {
        font-size: 13px !important;
        color: #6b7280 !important;
    }

    .conv-time {
        font-size: 11px !important;
    }

    .conv-unread-badge {
        min-width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }

    /* ── Chat Header — compact single-row bar ─────────────── */
    .chat-header-compact {
        padding: 0 !important;
        flex-wrap: nowrap !important;
        border-bottom: 1px solid #e5e7eb !important;
        background: #ffffff !important;
        flex-shrink: 0 !important;
    }

    .chat-header-compact .chat-header-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        overflow: hidden !important;
    }

    /* Hide inline stats, divider on mobile chat header */
    .chat-header-compact .chat-stat-inline,
    .chat-header-compact .chat-header-divider {
        display: none !important;
    }

    /* Claim badge — small chip */
    .chat-header-compact .chat-claim-badge {
        font-size: 10px !important;
        padding: 2px 8px !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Name area — truncate to fit */
    .chat-header-compact .chat-header-name {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .chat-header-compact .chat-header-name span:first-child {
        font-size: 14px !important;
        font-weight: 600 !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .chat-header-compact .chat-funeral-home {
        font-size: 11px !important;
        color: #6b7280 !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Status badge — small inline */
    .chat-header-compact .mini-badge {
        font-size: 9px !important;
        padding: 2px 8px !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Action buttons — compact, right-aligned */
    .chat-header-compact .chat-header-actions {
        flex-shrink: 0 !important;
        gap: 4px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hide "View Detail" text, keep as icon-only */
    .chat-header-compact .chat-header-actions .btn-success {
        font-size: 0 !important;
        padding: 6px 8px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .chat-header-compact .chat-header-actions .btn-success i {
        font-size: 14px !important;
        margin: 0 !important;
    }

    .chat-header-compact .chat-header-actions .chat-action-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Messages area */
    .chat-messages {
        padding: 12px !important;
        gap: 8px !important;
    }

    .message {
        max-width: 85% !important;
    }

    .message-bubble {
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 18px !important;
    }

    .message.incoming .message-bubble {
        border-top-left-radius: 4px !important;
    }

    .message.outgoing .message-bubble {
        border-top-right-radius: 4px !important;
    }

    .message-avatar {
        width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }

    .message-sender {
        font-size: 11px !important;
    }

    .message-time {
        font-size: 10px !important;
    }

    /* ── Input area — native messaging feel ───────────────── */
    .chat-input-wrapper {
        padding: 6px 10px !important;
        gap: 8px !important;
        display: flex !important;
        align-items: flex-end !important;
    }

    .chat-textarea {
        min-height: 40px !important;
        max-height: 100px !important;
        border-radius: 20px !important;
        padding: 9px 14px !important;
        font-size: 16px !important;
        flex: 1 !important;
    }

    .chat-send-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    /* Empty state */
    .messaging-empty {
        padding: 40px 20px !important;
    }

    .messaging-empty i {
        font-size: 48px !important;
    }


    /* Smart template bar — compact for mobile */
    .smart-templates-bar {
        max-height: 90px !important;
        padding: 6px 8px !important;
        gap: 4px !important;
    }
    .smart-template-chip {
        padding: 3px 8px !important;
        font-size: 0.66rem !important;
        border-radius: 14px !important;
    }
    .tpl-divider { height: 14px !important; }
    /* Hide hover tooltip on touch devices */
    .template-preview-tooltip {
        display: none !important;
    }


    /* ──────────────────────────────────────────────────────────
       I. DOCUMENTS PAGE (Finder) — Clean Mobile Layout
    ────────────────────────────────────────────────────────── */

    /* Page wrapper */
    #page-documents .dashboard-content {
        padding: 0 !important;
    }

    .finder-window {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        height: auto !important;
        min-height: calc(100dvh - 56px - 64px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Hide finder sidebar on mobile */
    .finder-sidebar {
        display: none !important;
    }

    /* Title bar — compact, clean */
    .finder-titlebar {
        padding: 10px 14px !important;
        border-radius: 0 !important;
        background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%) !important;
        border-bottom: none !important;
    }

    .finder-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }

    .finder-title i {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .finder-action-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.18) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        backdrop-filter: blur(4px) !important;
    }

    .finder-action-btn:hover,
    .finder-action-btn:active {
        background: rgba(255, 255, 255, 0.3) !important;
    }

    /* Finder toolbar — clean stack */
    .finder-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e9ecef !important;
    }

    .finder-toolbar .finder-nav-buttons {
        display: none !important;
    }

    .finder-breadcrumb {
        flex: 1 1 100% !important;
        order: -1;
        font-size: 13px !important;
        padding: 6px 10px !important;
        background: #f8f9fa !important;
        border-radius: 10px !important;
        border: 1px solid #e9ecef !important;
    }

    .finder-toolbar .finder-search {
        flex: 1 !important;
    }

    .finder-toolbar .finder-search input {
        height: 40px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }

    .finder-toolbar .finder-view-options {
        display: none !important;
    }

    /* Info bar — compact chip style */
    .finder-info-bar {
        padding: 8px 12px !important;
        font-size: 12px !important;
        background: #f8f9fa !important;
        border-bottom: 1px solid #e9ecef !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .finder-info-bar .info-bar-left {
        font-size: 12px !important;
        color: #6b7280 !important;
    }

    .finder-info-bar .info-bar-right {
        font-size: 12px !important;
    }

    .finder-info-bar .sort-label {
        font-size: 11px !important;
    }

    .finder-info-bar .finder-sort {
        font-size: 12px !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        height: 32px !important;
    }

    /* Finder content — full width */
    .finder-main {
        flex-direction: column !important;
        flex: 1 !important;
    }

    .finder-content {
        width: 100% !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Document grid — 2 columns, clean spacing */
    .finder-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        flex: 1 !important;
    }

    /* Folder/document items — compact with rounded corners */
    .finder-folder,
    .finder-document {
        padding: 10px !important;
        border-radius: 14px !important;
        border: 1.5px solid #e5e7eb !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    }

    .finder-folder:active,
    .finder-document:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    .folder-name,
    .document-name {
        font-size: 12px !important;
    }

    .folder-meta,
    .document-meta {
        font-size: 10px !important;
    }

    /* List view items */
    .finder-list-item {
        padding: 10px 14px !important;
        border-radius: 0 !important;
    }

    .finder-list-header {
        padding: 8px 14px !important;
        font-size: 11px !important;
    }

    /* Empty state */
    .finder-empty {
        padding: 40px 20px !important;
    }

    .finder-empty-icon {
        font-size: 40px !important;
    }

    .finder-empty h3 {
        font-size: 16px !important;
    }

    .finder-empty p {
        font-size: 13px !important;
    }

    /* Preview panel — full screen overlay */
    .finder-preview {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw !important;
        max-width: none !important;
        z-index: 1065;
        border-radius: 0 !important;
    }

    .finder-preview .preview-header {
        padding: 12px 16px !important;
    }

    .finder-preview .preview-content {
        padding: 16px !important;
    }

    /* Pagination — compact single row */
    .finder-pagination {
        padding: 10px 12px !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        align-items: center !important;
        border-top: 1px solid #e9ecef !important;
        background: #f8f9fa !important;
    }

    .finder-pagination .pagination-info {
        font-size: 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .finder-pagination .pagination-info .pagination-select {
        height: 30px !important;
        font-size: 12px !important;
        padding: 2px 6px !important;
        border-radius: 8px !important;
    }

    .finder-pagination .pagination-pages {
        display: none !important;
    }

    .finder-pagination .pagination-controls {
        gap: 4px !important;
    }

    .pagination-btn {
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }

    /* Status bar — compact, clear of bottom nav */
    .finder-statusbar {
        padding: 8px 12px 12px !important;
        font-size: 11px !important;
        border-top: 1px solid #e9ecef !important;
        background: #ffffff !important;
        margin-bottom: 0 !important;
    }

    .finder-statusbar .statusbar-right {
        gap: 10px !important;
        font-size: 11px !important;
    }

    /* Upload modal — full-screen slide-up on mobile */
    #docUploadModal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .doc-upload-modal-enhanced {
        width: 100% !important;
        max-width: none !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        margin: 0 !important;
        overflow-y: auto !important;
    }

    .doc-upload-header-enhanced {
        padding: 14px 16px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
    }

    .doc-upload-header-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    .doc-upload-header-text h3 {
        font-size: 16px !important;
    }

    .doc-upload-header-text p {
        font-size: 12px !important;
    }

    .doc-upload-body-enhanced {
        padding: 12px !important;
    }

    .doc-upload-section-header {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .section-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

    .section-title span {
        font-size: 14px !important;
    }

    .section-title small {
        font-size: 11px !important;
    }

    .doc-upload-dropzone-enhanced {
        padding: 20px !important;
        border-radius: 12px !important;
    }

    .dropzone-icon i {
        font-size: 32px !important;
    }

    /* Multi-file list mobile */
    .file-list-items {
        max-height: 260px !important;
    }

    .file-list-item {
        padding: 6px 8px !important;
        gap: 8px !important;
    }

    .file-list-item-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
    }

    .file-list-item-name {
        font-size: 0.8rem !important;
    }

    .file-list-item-size {
        font-size: 0.7rem !important;
    }

    .file-list-item-type {
        font-size: 13px !important;
        padding: 5px 8px !important;
    }

    .file-list-add-btn,
    .file-list-clear-btn {
        font-size: 0.72rem !important;
        padding: 3px 8px !important;
    }

    .doc-upload-footer-enhanced {
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        position: sticky !important;
        bottom: 0 !important;
        gap: 8px !important;
    }

    .doc-upload-cancel-btn,
    .doc-upload-submit-btn {
        height: 44px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }

    /* Document preview modal — full screen */
    .doc-preview-modal {
        width: 100vw !important;
        height: 100dvh !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .doc-preview-header {
        padding: 10px 14px !important;
    }

    .doc-preview-icon-badge {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 8px !important;
    }

    .doc-preview-icon-badge i {
        font-size: 0.85rem !important;
    }

    .doc-preview-filename {
        font-size: 0.82rem !important;
        max-width: 170px !important;
    }

    .doc-preview-context {
        font-size: 0.68rem !important;
        max-width: 170px !important;
    }

    .doc-preview-actions {
        gap: 4px !important;
        margin-left: 8px !important;
    }

    .preview-action-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.78rem !important;
    }

    .doc-preview-details-row {
        padding: 0 12px !important;
        min-height: 32px !important;
        flex-wrap: wrap !important;
    }

    .preview-detail-chip {
        font-size: 0.72rem !important;
        padding: 3px 0 !important;
    }

    .preview-detail-chip .chip-value {
        font-size: 0.72rem !important;
    }

    .preview-detail-chip + .preview-detail-chip::before {
        margin-left: 6px !important;
        margin-right: 6px !important;
    }


    /* ──────────────────────────────────────────────────────────
       J. CREATE CLAIM PAGE — Clean Form Experience
    ────────────────────────────────────────────────────────── */

    /* Page container — force column layout */
    #page-create-claim.active {
        flex-direction: column !important;
        padding-top: 0 !important;
    }

    #page-create-claim .form-area {
        margin-left: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        flex: 1;
    }

    /* Step navigation — horizontal compact */
    .step-nav {
        padding: 12px 8px 14px !important;
        gap: 0 !important;
        justify-content: center;
        background: #ffffff !important;
        border-bottom: 1px solid #e9ecef !important;
        border-right: none !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        justify-content: space-evenly !important;
        padding: 10px 4px !important;
    }

    /* Step items — evenly distributed across full width */
    .step-nav .step-item {
        flex-direction: column;
        gap: 5px;
        padding: 4px 2px !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        flex-shrink: 1 !important;
        align-items: center;
    }

    .step-nav .step-number {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
        border-width: 2px !important;
        flex-shrink: 0;
        margin: 0 !important;
    }

    /* Step items — remove base.css padding-right and center everything */
    .step-nav .step-item {
        padding-right: 0 !important;
        padding-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Step labels — hide original text, show abbreviated via ::after */
    .step-nav .step-label {
        font-size: 0 !important;
        line-height: 1 !important;
        color: transparent !important;
        text-decoration: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Kill any active underline from desktop */
    .step-item.active .step-label,
    .step-item:hover .step-label {
        text-decoration: none !important;
        color: transparent !important;
    }

    /* Abbreviated label text via ::after */
    .step-item[data-step="1"] .step-label::after { content: 'HOME'; }
    .step-item[data-step="2"] .step-label::after { content: 'DECEDENT'; }
    .step-item[data-step="3"] .step-label::after { content: 'POLICIES'; }
    .step-item[data-step="4"] .step-label::after { content: 'BENEFIC.'; }
    .step-item[data-step="5"] .step-label::after { content: 'AMOUNT'; }

    .step-nav .step-label::after {
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        color: #6b7280;
        display: block;
        text-align: center;
        line-height: 1.2;
        white-space: nowrap;
    }

    .step-item.active .step-label::after {
        color: #1f2937;
    }

    .step-item.completed .step-label::after {
        color: #1E6332;
    }

    /* Connector line between steps */
    .step-item::before {
        display: none !important;
    }

    /* Step title — with breathing room from the step nav */
    .step-title {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        margin-top: 4px !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #e9ecef;
        color: #1f2937 !important;
    }

    /* Form area — compact background */
    .form-area {
        padding: 14px 14px 14px !important;
        background: #f5f6f8 !important;
    }

    .form-content {
        padding: 0 !important;
        max-width: none !important;
    }

    /* Form groups — compact card containers */
    .step-panel .mb-3,
    .step-panel .mb-4 {
        background: #ffffff;
        padding: 10px 14px;
        border-radius: 12px;
        margin-bottom: 6px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    }

    /* Nested mb-3 inside mb-3 shouldn't double-wrap */
    .step-panel .mb-3 .mb-3,
    .step-panel .mb-4 .mb-3,
    .step-panel .mb-3 .mb-4,
    .step-panel .row .mb-3 {
        background: transparent;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 8px !important;
    }

    /* Rows inside steps */
    .step-panel .row {
        background: #ffffff;
        padding: 10px 14px;
        border-radius: 12px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 6px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    }

    .step-panel .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Form inputs — comfortable but compact */
    .step-panel input.form-control,
    .step-panel select.form-select,
    .step-panel textarea.form-control {
        height: 42px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        padding: 8px 12px !important;
        border: 1.5px solid #e5e7eb !important;
        background: #fafbfc !important;
    }

    .step-panel input.form-control:focus,
    .step-panel select.form-select:focus,
    .step-panel textarea.form-control:focus {
        border-color: #1E6332 !important;
        box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.1) !important;
        background: #ffffff !important;
    }

    .step-panel textarea.form-control {
        height: auto !important;
        min-height: 70px !important;
    }

    /* Form labels — compact */
    .step-panel .form-label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
        color: #374151 !important;
    }

    /* Radio buttons — compact touch-friendly rows */
    .step-panel .form-check {
        padding: 9px 12px !important;
        padding-left: 36px !important;
        margin-bottom: 4px !important;
        background: #fafbfc;
        border: 1.5px solid #e5e7eb;
        border-radius: 10px;
        min-height: 40px;
        display: flex;
        align-items: center;
        transition: all 0.15s ease;
    }

    .step-panel .form-check:has(input:checked) {
        background: #F4F0E9;
        border-color: #1E6332;
    }

    .step-panel .form-check-input {
        width: 18px !important;
        height: 18px !important;
        margin-top: 0 !important;
        margin-left: -24px !important;
    }

    .step-panel .form-check-input:checked {
        background-color: #1E6332 !important;
        border-color: #1E6332 !important;
    }

    .step-panel .form-check-label {
        font-size: 13px !important;
        font-weight: 500 !important;
        cursor: pointer;
    }

    /* Form navigation — sticky bottom bar above bottom nav */
    .form-nav {
        position: sticky !important;
        bottom: 0;
        background: #ffffff;
        padding: 12px 16px !important;
        border-top: 1px solid #e9ecef;
        margin: 20px -16px 0;
        display: flex;
        gap: 10px;
        z-index: 10;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
    }

    .form-nav .btn {
        flex: 1;
        min-height: 48px;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 600;
    }

    /* Save draft link */
    .save-draft-link {
        position: absolute;
        top: -30px;
        right: 16px;
        font-size: 13px !important;
    }

    /* Insurance info panel — single column, cleaner */
    .ic-info-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .ic-info-panel {
        margin: 12px 0 !important;
        border-radius: 14px !important;
        padding: 14px !important;
    }

    .ic-info-header {
        gap: 10px !important;
    }

    .ic-info-item-label {
        min-width: auto !important;
        font-size: 12px !important;
    }

    .ic-info-item-value {
        font-size: 13px !important;
    }

    .ic-badges {
        gap: 6px !important;
    }

    /* Policy / Beneficiary cards */
    .policy-item .card-body,
    .beneficiary-item .card-body {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .add-card {
        padding: 14px !important;
        border-radius: 14px !important;
        border: 1.5px dashed #d1d5db !important;
        background: #fafbfc !important;
    }

    /* Custom IC dropdown mobile */
    .ic-dropdown-panel {
        max-height: 280px !important;
    }
    .ic-dropdown-options {
        max-height: 220px !important;
    }
    .ic-dropdown-search {
        font-size: 16px !important; /* prevents iOS zoom */
        padding: 8px 10px 8px 32px !important;
    }
    .ic-dropdown-item {
        padding: 10px 12px !important;
    }

    /* Custom FH dropdown mobile */
    .fh-dropdown-panel { max-height: 280px !important; }
    .fh-dropdown-options { max-height: 220px !important; }
    .fh-dropdown-search { font-size: 16px !important; padding: 8px 10px 8px 32px !important; }
    .fh-dropdown-item { padding: 10px 12px !important; }

    /* Info notes section */
    .info-notes {
        border-radius: 12px !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
        background: #F4F0E9 !important;
        border: 1px solid #E8DFD0 !important;
    }


    /* ──────────────────────────────────────────────────────────
       K. DETAIL PANELS — Full Screen Native Feel
    ────────────────────────────────────────────────────────── */

    /* Panel — true full screen */
    .detail-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
    }

    .detail-panel.show {
        transform: none !important;
    }

    /* Header — compact, clean stacked layout */
    .detail-panel-header {
        padding: 0 !important;
        min-height: 0;
        background: linear-gradient(145deg, #14613d 0%, #1E6332 50%, #1a9d5e 100%) !important;
        border-bottom: none !important;
        flex-shrink: 0;
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .detail-panel-close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.18) !important;
        backdrop-filter: blur(4px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        z-index: 2;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        color: #fff !important;
        transition: background 0.2s !important;
    }

    .detail-panel-close:active {
        background: rgba(255, 255, 255, 0.35) !important;
    }

    .detail-panel-close i::before {
        content: "\f00d"; /* fa-times (X) */
    }

    .detail-panel-header-info {
        padding: 14px 16px 10px 16px !important;
        min-width: 0;
        position: relative !important;
    }

    .detail-panel-id {
        font-size: 10.5px !important;
        opacity: 0.8;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
        padding-right: 40px;
    }

    .detail-panel-title {
        font-size: 19px !important;
        font-weight: 700 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        max-width: calc(100% - 140px);
    }

    .detail-panel-subtitle {
        font-size: 12px !important;
        opacity: 0.8;
        margin-top: 2px;
        max-width: calc(100% - 140px);
    }

    /* Status badge — responsive, positioned right side of header */
    .detail-panel-status {
        position: absolute !important;
        right: 42px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: clamp(11px, 3.5vw, 18px) !important;
        padding: 5px clamp(8px, 2vw, 16px) !important;
        border-radius: 10px !important;
        margin-top: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        text-transform: uppercase !important;
        background: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        white-space: nowrap !important;
        max-width: 40% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Header stats — clean bottom strip */
    .detail-panel-header-stats {
        display: flex !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        background: rgba(0, 0, 0, 0.15) !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .detail-panel-stat {
        flex: 1 1 0 !important;
        padding: 10px 8px !important;
        border-radius: 0 !important;
        background: transparent !important;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        min-width: 0 !important;
    }

    .detail-panel-stat:last-child {
        border-right: none;
    }

    .detail-panel-stat-value,
    .detail-panel-stat .stat-value {
        font-size: 20px !important;
        font-weight: 800 !important;
        letter-spacing: -0.3px;
        color: #fff !important;
        white-space: nowrap;
    }

    .detail-panel-stat-label,
    .detail-panel-stat .stat-label {
        font-size: 9px !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.65;
        margin-top: 2px;
    }

    /* ── Mobile detail tabs ─────────────────────────────────── */
    .mobile-detail-tabs {
        display: flex;
        background: #ffffff;
        border-bottom: 2px solid #f3f4f6;
        flex-shrink: 0;
        padding: 0 16px;
    }

    .mobile-detail-tab {
        flex: 1;
        padding: 11px 0 9px;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        color: #9ca3af;
        background: none;
        border: none;
        border-bottom: 2.5px solid transparent;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: -2px;
    }

    .mobile-detail-tab.active {
        color: #1E6332;
        border-bottom-color: #1E6332;
    }

    .mobile-detail-tab i {
        margin-right: 5px;
        font-size: 12px;
    }

    /* Tab content visibility */
    .detail-panel.mobile-tab-details .detail-panel-sidebar {
        display: none !important;
    }

    .detail-panel.mobile-tab-overview .detail-panel-main {
        display: none !important;
    }

    /* Detail panel body — single column, scrollable */
    .detail-panel-body {
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        background: #f5f6f8 !important;
    }

    /* Two-column layout → single column */
    .detail-panel-columns {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .detail-panel-col {
        width: 100% !important;
        flex: none !important;
    }

    .detail-panel-main {
        padding: 12px !important;
    }

    .detail-panel-main > div {
        width: 100% !important;
    }

    /* Detail sections — card style */
    .detail-section {
        margin-bottom: 10px !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        padding: 14px 16px !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    .detail-section-header {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }

    .detail-section-title {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        color: #374151 !important;
    }

    .detail-section-title i {
        font-size: 13px !important;
        color: #1E6332 !important;
        margin-right: 6px !important;
    }

    /* Detail rows — responsive labels */
    .detail-row {
        flex-direction: column !important;
        gap: 1px !important;
        padding: 6px 0 !important;
    }

    .detail-label {
        width: auto !important;
        min-width: auto !important;
        font-size: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        color: #9ca3af !important;
    }

    .detail-value {
        font-size: 13.5px !important;
        font-weight: 500 !important;
    }

    /* Detail panel sidebar — stack below main */
    .detail-panel-sidebar {
        width: 100% !important;
        border-left: none !important;
        border-top: none !important;
        padding: 0 12px 80px !important;
        background: transparent !important;
    }

    /* When Overview tab is active, sidebar is the only content */
    .detail-panel.mobile-tab-overview .detail-panel-sidebar {
        padding-top: 12px !important;
    }

    /* When Details tab is active, main gets proper padding */
    .detail-panel.mobile-tab-details .detail-panel-main {
        padding: 12px 12px 80px !important;
    }

    /* Quick Actions in sidebar — 2x2 grid */
    .quick-actions-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .quick-action-btn {
        padding: 12px 8px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        min-height: 44px !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }

    .quick-action-btn i {
        font-size: 16px !important;
    }

    /* Quick Actions in claim detail (d-grid) — horizontal icon row */
    .detail-section .d-grid.gap-2 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .detail-section .d-grid.gap-2 .btn {
        flex: 1 1 calc(50% - 4px) !important;
        padding: 10px 6px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
        min-height: 56px !important;
    }

    .detail-section .d-grid.gap-2 .btn i {
        margin: 0 !important;
        font-size: 16px !important;
    }

    /* Upload Document button — prominent */
    .detail-section .d-grid.gap-2 .btn-success {
        flex: 1 1 100% !important;
        flex-direction: row !important;
        min-height: 44px !important;
        font-size: 13px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }

    .detail-section .d-grid.gap-2 .btn-success i {
        font-size: 14px !important;
    }

    /* Document request banner */
    .docs-request-banner {
        border-radius: 12px !important;
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
        font-size: 13px !important;
    }

    /* Messages section in detail panel — polished */
    .claim-panel-messages {
        border-radius: 14px !important;
    }

    .panel-messages-container {
        max-height: 180px !important;
        border-radius: 10px !important;
        background: #f9fafb !important;
        border: 1px solid #f3f4f6;
    }

    .panel-messages-list .panel-msg {
        padding: 5px 10px !important;
    }

    .panel-msg-bubble {
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 16px 16px 16px 4px !important;
        max-width: 82% !important;
    }

    .panel-msg.outgoing .panel-msg-bubble {
        border-radius: 16px 16px 4px 16px !important;
    }

    .panel-msg-date {
        font-size: 9.5px !important;
        color: #9ca3af !important;
    }

    .panel-msg-avatar {
        width: 26px !important;
        height: 26px !important;
        font-size: 9px !important;
    }

    .panel-message-input {
        gap: 8px !important;
        padding: 8px 10px !important;
        border-top: 1px solid #f3f4f6;
    }

    .panel-message-input textarea {
        font-size: 13px !important;
        padding: 8px 14px !important;
        border-radius: 22px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        border: 1.5px solid #e5e7eb !important;
        background: #f9fafb !important;
    }

    .panel-message-input textarea:focus {
        border-color: #1E6332 !important;
        background: #ffffff !important;
    }

    .panel-message-input .btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    /* View Full Conversation button */
    .claim-panel-messages > .btn-outline-success {
        padding: 9px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        margin-top: 8px !important;
        border-width: 1.5px !important;
    }

    /* EFF Contact card — polished */
    .detail-section .detail-card .text-center {
        padding: 6px 0 !important;
    }

    .detail-section .detail-card .text-center p strong {
        font-size: 15px !important;
    }

    .detail-section .detail-card .text-center .text-muted {
        font-size: 12px !important;
    }

    /* Detail panel tabs — full width scrollable */
    .detail-panel .nav-tabs {
        display: flex;
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        background: #ffffff;
        border-radius: 12px;
        padding: 3px;
        margin-bottom: 10px;
    }

    .detail-panel .nav-tabs .nav-link {
        flex: 1;
        text-align: center;
        font-size: 12px !important;
        padding: 8px 6px !important;
        white-space: nowrap;
        border-radius: 8px !important;
        border: none !important;
    }

    .detail-panel .nav-tabs .nav-link.active {
        background: #1E6332 !important;
        color: #ffffff !important;
    }

    /* Detail info grid — single column */
    .detail-info-grid {
        grid-template-columns: 1fr !important;
    }

    /* Timeline — compact */
    .detail-timeline {
        padding-left: 18px !important;
    }

    .timeline-item {
        padding-bottom: 10px !important;
    }

    .timeline-content {
        padding: 8px 10px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }

    /* Deceased detail panel specifics */
    .deceased-header-compact {
        padding: 10px 16px !important;
    }

    .deceased-header-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .deceased-header-stats-compact {
        gap: 6px !important;
    }

    .deceased-stat-chip {
        padding: 4px 10px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    .deceased-name-title {
        font-size: 18px !important;
    }

    /* Overlay — ensure it covers everything */
    .detail-overlay {
        z-index: 9989 !important;
    }


    /* ──────────────────────────────────────────────────────────
       L. PROFILE PAGE — Clean Banking Profile
    ────────────────────────────────────────────────────────── */

    #page-profile .dashboard-content {
        padding: 0 !important;
    }

    .profile-page-container {
        max-width: none !important;
        padding: 0 !important;
    }

    /* Profile header — centered hero with gradient */
    .profile-header {
        text-align: center !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 28px 16px 24px !important;
        background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        color: #fff !important;
    }

    /* Avatar wrapper with camera button */
    .profile-avatar-wrapper {
        position: relative;
        display: inline-block;
    }

    .profile-header-avatar {
        width: 80px !important;
        height: 80px !important;
        border-radius: 50% !important;
        border: 3px solid rgba(255, 255, 255, 0.4) !important;
        object-fit: cover !important;
        background: #fff !important;
    }

    .profile-camera-btn {
        position: absolute;
        bottom: 0;
        right: -4px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid #1E6332;
        color: #1E6332;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .profile-camera-btn:active {
        transform: scale(0.9);
    }

    .profile-header-info {
        text-align: center !important;
    }

    .profile-header-info h2 {
        font-size: 20px !important;
        font-weight: 700 !important;
        margin-bottom: 2px !important;
        color: #fff !important;
    }

    .profile-header-info p {
        font-size: 13px !important;
        opacity: 0.85 !important;
        margin-bottom: 6px !important;
    }

    .profile-role-badge {
        font-size: 10px !important;
        padding: 4px 12px !important;
    }

    /* Profile tabs — scrollable pill style */
    .profile-tabs {
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .profile-tabs .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        border-bottom: none !important;
        gap: 6px !important;
        padding: 12px 12px 10px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e9ecef !important;
    }

    .profile-tabs .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .profile-tabs .nav-tabs .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px !important;
        padding: 7px 14px !important;
        border-radius: 20px !important;
        border: 1.5px solid #e5e7eb !important;
        font-weight: 600 !important;
        color: #4b5563 !important;
        background: #fff !important;
    }

    .profile-tabs .nav-tabs .nav-link i {
        margin-right: 4px !important;
        font-size: 11px !important;
    }

    .profile-tabs .nav-tabs .nav-link.active {
        background: #1E6332 !important;
        color: #ffffff !important;
        border-color: #1E6332 !important;
    }

    /* Tab content area */
    .profile-tab-content {
        padding: 12px !important;
    }

    /* Profile sections — card style */
    .profile-section {
        padding: 14px !important;
        border-radius: 14px !important;
        border: 1.5px solid #e5e7eb !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
        margin-bottom: 12px !important;
        background: #ffffff !important;
    }

    .profile-section-title {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    .profile-section-title i {
        font-size: 13px !important;
    }

    /* Form inputs — larger, mobile-friendly */
    .profile-section .form-floating-custom {
        margin-bottom: 12px !important;
    }

    .profile-section .form-floating-custom label {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        margin-bottom: 4px !important;
    }

    .profile-section .form-control {
        height: 44px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        border: 1.5px solid #e5e7eb !important;
        padding: 8px 12px !important;
    }

    .profile-section .form-control:focus {
        border-color: #1E6332 !important;
    }

    /* Security cards */
    .security-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .security-card h6 {
        font-size: 14px !important;
    }

    .security-card p {
        font-size: 12px !important;
    }

    .security-card .btn {
        width: 100% !important;
        height: 40px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
    }

    /* Preference items — stack on mobile */
    .preference-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px 0 !important;
    }

    .preference-info h6 {
        font-size: 14px !important;
    }

    .preference-info p {
        font-size: 12px !important;
        margin-bottom: 0 !important;
    }

    /* Settings dropdowns — full width */
    .preference-item .form-select {
        width: 100% !important;
        height: 40px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
    }

    /* Toggle switch — bigger for touch */
    .toggle-switch {
        flex-shrink: 0 !important;
    }

    /* SMS phone input */
    .preference-item .d-flex {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .preference-item .d-flex input[type="tel"] {
        width: 100% !important;
        flex: 1 !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    /* Save buttons — full width, sticky */
    .profile-tab-content > .btn-success {
        width: 100% !important;
        height: 46px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-top: 8px !important;
        margin-bottom: 16px !important;
    }

    /* Tables — horizontal scroll */
    .profile-section .table-responsive,
    .profile-section table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 12px !important;
    }

    /* Access control cards */
    .profile-tab-content .card {
        border-radius: 12px !important;
        border: 1.5px solid #e5e7eb !important;
    }

    .profile-tab-content .card-body {
        padding: 12px !important;
    }

    .profile-tab-content .card-body h6 {
        font-size: 13px !important;
    }

    .profile-tab-content .card-body p {
        font-size: 11px !important;
    }

    /* Alerts — compact */
    .profile-tab-content .alert {
        font-size: 12px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    /* Vendor/API section */
    .profile-tab-content .form-select {
        width: 100% !important;
        max-width: none !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    .api-key-input-wrapper {
        max-width: none !important;
        width: 100% !important;
    }


    /* ──────────────────────────────────────────────────────────
       M. ANALYTICS & REPORTS — Dashboard-style
    ────────────────────────────────────────────────────────── */

    /* Analytics filter toolbar */
    .analytics-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 0 !important;
    }

    .analytics-toolbar select,
    .analytics-toolbar .form-select {
        width: 100% !important;
        height: 44px !important;
        border-radius: 12px !important;
    }

    /* KPI cards — 2x2 premium */
    .analytics-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .analytics-kpi-card {
        padding: 14px !important;
        border-radius: 14px !important;
        border: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }

    .analytics-kpi-card:hover {
        transform: none !important;
    }

    .analytics-kpi-card .analytics-kpi-value,
    .kpi-value {
        font-size: 20px !important;
        font-weight: 800 !important;
    }

    .analytics-kpi-card .analytics-kpi-label,
    .kpi-label {
        font-size: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .kpi-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .kpi-trend {
        font-size: 11px !important;
    }

    /* Charts — full width, rounded */
    .chart-container {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
    }

    .chart-header {
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }

    .chart-header h5 {
        font-size: 14px !important;
    }

    .chart-toggle-group {
        gap: 4px !important;
    }

    .chart-toggle-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }

    .chart-body {
        min-height: 200px !important;
        gap: 6px !important;
    }

    /* Donut chart — stack on mobile */
    .donut-chart-container {
        flex-direction: column !important;
        gap: 14px !important;
    }

    .donut-chart {
        width: 150px !important;
        height: 150px !important;
    }

    .donut-center {
        width: 80px !important;
        height: 80px !important;
    }

    .donut-center-value {
        font-size: 20px !important;
    }

    .donut-legend {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .donut-legend-item {
        font-size: 12px !important;
    }

    /* Tables — scrollable */
    .analytics-table-wrapper,
    .reports-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px !important;
    }

    /* ── Reports Page — full mobile treatment ── */

    .reports-page {
        padding: 12px !important;
        border-radius: 0 !important;
        min-height: auto !important;
    }

    .reports-header {
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
        gap: 8px !important;
    }

    .reports-header h2 {
        font-size: 18px !important;
    }

    .reports-header h2 i {
        padding: 8px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
    }

    /* Reports toolbar — 2x2 grid for filters */
    .reports-toolbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        margin-bottom: 12px !important;
    }

    .reports-toolbar-section {
        width: 100% !important;
    }

    .reports-toolbar-label {
        font-size: 9px !important;
        margin-bottom: 2px !important;
    }

    .reports-filter-select {
        width: 100% !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        padding: 0 28px 0 10px !important;
        border: 1.5px solid #e5e7eb !important;
        min-width: 0 !important;
    }

    /* Action buttons — span full width */
    .reports-toolbar-actions {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-left: 0 !important;
    }

    .reports-action-btn {
        flex: 1 1 auto !important;
        font-size: 11px !important;
        padding: 7px 10px !important;
        border-radius: 10px !important;
        gap: 4px !important;
        white-space: nowrap !important;
        justify-content: center !important;
        border-width: 1.5px !important;
    }

    .reports-action-btn:hover {
        transform: none !important;
    }

    /* Hide columns & regenerate on mobile — not practical */
    .reports-toolbar-actions .column-manager {
        display: none !important;
    }

    .reports-toolbar-actions .reports-action-btn[onclick="resetAppData()"] {
        display: none !important;
    }

    /* Reports table container */
    .reports-table-container {
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        border: 1.5px solid #e5e7eb !important;
    }

    .reports-table-header {
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .reports-table-header h5 {
        font-size: 14px !important;
    }

    .reports-table-header h5 i {
        padding: 6px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
    }

    .reports-table-info {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* Table — horizontal scroll with compact cells */
    .reports-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: 50vh !important;
    }

    .reports-table {
        font-size: 12px !important;
        min-width: 700px !important;
    }

    .reports-table th {
        padding: 8px 10px !important;
        font-size: 10px !important;
        letter-spacing: 0.3px !important;
    }

    .reports-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .reports-table .compact-cell {
        max-width: 100px !important;
    }

    .reports-table tbody tr:hover {
        background: transparent !important;
    }

    /* Reports pagination — compact */
    .reports-pagination {
        padding: 10px 12px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .reports-pagination .pagination-info {
        font-size: 11px !important;
    }

    .reports-pagination .per-page-select {
        font-size: 11px !important;
        padding: 4px 6px !important;
        border-radius: 6px !important;
    }

    .reports-pagination .pagination-controls {
        gap: 4px !important;
    }

    .reports-pagination .pagination-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
    }

    /* Column manager — bottom sheet */
    .column-manager-dropdown {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: 80px !important;
        width: auto !important;
        max-height: 60vh;
        border-radius: 16px !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15) !important;
    }

    /* Export modal — mobile friendly */
    .export-options-content {
        width: calc(100% - 24px) !important;
        border-radius: 16px !important;
    }

    .export-options-header {
        padding: 14px 16px !important;
    }

    .export-options-body {
        padding: 16px !important;
    }

    .export-format-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .export-format-option {
        padding: 12px 8px !important;
        border-radius: 12px !important;
        border-width: 1.5px !important;
    }

    .export-format-option i {
        font-size: 24px !important;
        margin-bottom: 6px !important;
    }

    .export-format-option span {
        font-size: 12px !important;
    }

    .export-options-footer {
        padding: 12px 16px !important;
    }


    /* ──────────────────────────────────────────────────────────
       N. MY ACCOUNTS PAGE
    ────────────────────────────────────────────────────────── */

    .account-kpis-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .account-card {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }

    .account-card-header {
        padding: 14px 16px !important;
    }

    .account-card-body {
        padding: 14px 16px !important;
    }

    /* Account selector */
    .account-selector-wrapper {
        width: 100% !important;
        margin-bottom: 14px;
    }

    .account-selector-wrapper select {
        width: 100% !important;
        height: 44px !important;
        border-radius: 12px !important;
    }


    /* ──────────────────────────────────────────────────────────
       O. DRAFTS PAGE — Compact mobile layout
    ────────────────────────────────────────────────────────── */

    /* KPI cards — compact 2x2 grid */
    .drafts-kpis-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    .draft-kpi-card {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        gap: 8px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    }

    .draft-kpi-card:hover {
        transform: none !important;
    }

    .draft-kpi-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
    }

    .draft-kpi-value {
        font-size: 20px !important;
        line-height: 1.2;
    }

    .draft-kpi-label {
        font-size: 11px !important;
    }

    .draft-kpi-sub {
        font-size: 9px !important;
    }

    /* Tooltip on days-left badge — hide CSS tooltip on mobile (touch unfriendly) */
    .draft-expires-tip::after {
        display: none !important;
    }

    /* Tabs — pill chips like claims filters */
    .drafts-tabs {
        padding: 0 !important;
        background: transparent !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }

    .drafts-tabs::-webkit-scrollbar {
        display: none;
    }

    .drafts-tab {
        padding: 8px 16px !important;
        border-radius: 24px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        background: #ffffff !important;
        border: 1.5px solid #e5e7eb !important;
        color: #4b5563 !important;
        gap: 6px !important;
    }

    .drafts-tab i {
        display: none !important;
    }

    .drafts-tab.active {
        background: #1E6332 !important;
        border-color: #1E6332 !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    .drafts-tab .tab-badge {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        padding: 0 5px !important;
        border-radius: 10px !important;
    }

    .drafts-tab.active .tab-badge {
        background: rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
    }

    /* Filter bar — stacked on mobile (toggles top, controls bottom) */
    .drafts-filter-bar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px !important;
        margin-bottom: 8px !important;
    }

    /* Urgency toggles — horizontal scroll */
    .draft-urgency-toggles {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.375rem !important;
        width: 100%;
    }
    .draft-urgency-chip {
        white-space: nowrap;
        font-size: 0.7rem !important;
        padding: 0.3rem 0.6rem !important;
        flex-shrink: 0;
    }

    .drafts-filter-right {
        width: 100%;
        gap: 8px !important;
        flex-wrap: wrap;
    }

    .created-by-me-toggle {
        padding: 0.2rem 0.4rem !important;
    }
    .created-by-me-text {
        font-size: 0.7rem !important;
    }
    .created-by-me-divider {
        display: none !important;
    }

    .drafts-filter-bar .filter-group {
        flex: 1 1 auto !important;
        min-width: 0;
    }

    .drafts-filter-bar .filter-group label {
        display: none !important;
    }

    /* Draft sort trigger button — full width on mobile */
    .draft-sort-control {
        width: 100% !important;
        position: relative !important;
    }

    .draft-sort-trigger-btn {
        width: 100% !important;
        height: 38px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        border: 1.5px solid #e5e7eb !important;
        justify-content: space-between;
    }

    /* Sort panel opens upward on mobile to avoid off-screen clipping */
    .draft-sort-panel {
        bottom: calc(100% + 8px) !important;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        width: auto !important;
    }

    /* Hide view toggle on mobile */
    .drafts-filter-bar .view-toggle-group {
        display: none !important;
    }

    /* Draft cards — single column, chip style */
    .drafts-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .draft-card {
        border-radius: 16px !important;
        border: 1.5px solid #e5e7eb !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        background: #ffffff !important;
    }

    .draft-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* Draft card topmeta — compact for mobile */
    .draft-card-topmeta {
        top: 0.5rem !important;
        right: 0.6rem !important;
    }

    .draft-header-date {
        font-size: 0.5rem !important;
    }

    .draft-header-author {
        font-size: 0.5rem !important;
    }

    /* Drafts table — force cards view, hide table */
    .drafts-list-container {
        display: none !important;
    }

    .drafts-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Draft Family Pay badge */
    .draft-fp-badge {
        font-size: 0.55rem !important;
        padding: 0.15rem 0.35rem !important;
    }

    /* Draft policy count badge — compact on mobile */
    .draft-policy-count-badge {
        font-size: 0.65rem !important;
        padding: 1px 6px !important;
    }

    /* Draft financial summary row */
    .draft-financials-row {
        gap: 0.6rem !important;
        padding: 0.35rem 0.5rem !important;
    }
    .draft-fin-item { font-size: 0.7rem !important; }

    /* Dashboard content wrapper inside drafts */
    #page-drafts .dashboard-content {
        padding: 12px !important;
    }

    /* Draft document list items — mobile */
    .draft-doc-item { padding: 10px; }
    .draft-doc-remove { opacity: 1; }

    /* Draft upload modal — full screen on mobile */
    .draft-upload-modal { width: 100%; max-width: 100vw; max-height: 100vh; border-radius: 0; }
    .draft-upload-header { border-radius: 0; }
    .draft-upload-file-row { flex-wrap: wrap; }
    .draft-upload-file-row select { max-width: 100%; font-size: 14px; padding: 8px; }
    .draft-upload-file-name { max-width: 120px; }


    /* ──────────────────────────────────────────────────────────
       P. DECEASED PAGE — Compact mobile layout
    ────────────────────────────────────────────────────────── */

    #page-deceased .dashboard-content {
        padding: 12px !important;
    }

    /* Filters bar — CSS grid for 2x2 dropdowns */
    .deceased-filters-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 0 12px 0 !important; /* reset desktop negative margins */
    }

    /* Search — spans full width */
    .deceased-search-wrapper {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .deceased-search-input {
        width: 100% !important;
        height: 42px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        border: 1.5px solid #e5e7eb !important;
    }

    /* Each filter group takes one grid cell → 2x2 */
    .deceased-filter-group {
        width: 100% !important;
    }

    .deceased-filter-select {
        width: 100% !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        padding: 0 28px 0 10px !important;
        border: 1.5px solid #e5e7eb !important;
        background-color: #fff !important;
    }

    /* Sort control — trigger button fits grid cell, panel opens above */
    .dec-sort-control {
        width: 100% !important;
        position: relative !important;
        padding: 0 !important;
        border: none !important;
    }

    .dec-sort-trigger-btn {
        width: 100% !important;
        height: 38px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        border: 1.5px solid #e5e7eb !important;
        justify-content: flex-start !important;
    }

    .dec-sort-panel {
        bottom: calc(100% + 8px) !important;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        width: auto !important;
    }

    /* Action buttons — span full width */
    .deceased-filter-actions {
        grid-column: 1 / -1 !important;
        display: flex !important;
        gap: 6px !important;
    }

    .deceased-filter-actions .btn {
        flex: 1 !important;
        font-size: 12px !important;
        padding: 7px 12px !important;
        border-radius: 10px !important;
        height: 36px !important;
    }

    /* Cards grid — single column */
    .deceased-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Card — polished mobile look */
    .deceased-card {
        border-radius: 16px !important;
        border: 1.5px solid #e5e7eb !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        overflow: hidden !important;
    }

    .deceased-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        border-color: #e5e7eb !important;
    }

    .deceased-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease;
    }

    /* Card header — compact */
    .deceased-card-header {
        padding: 14px 16px !important;
    }

    .deceased-card-name {
        font-size: 16px !important;
    }

    .deceased-card-ssn {
        font-size: 12px !important;
    }

    /* Claims count badge */
    .deceased-card-policies-count {
        padding: 6px 10px !important;
        min-width: 44px !important;
        border-radius: 8px !important;
    }

    .deceased-card-policies-count .count-number {
        font-size: 18px !important;
    }

    .deceased-card-policies-count .count-label {
        font-size: 9px !important;
    }

    /* Card body — compact rows */
    .deceased-card-body {
        padding: 12px 16px !important;
    }

    .deceased-card-row {
        padding: 6px 0 !important;
    }

    .deceased-card-label {
        font-size: 13px !important;
    }

    .deceased-card-value {
        font-size: 13px !important;
    }

    .deceased-card-value.amount {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    /* Card footer — compact */
    .deceased-card-footer {
        padding: 10px 16px !important;
    }

    .deceased-card-policy-badge {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
    }

    .deceased-card-btn.view,
    .deceased-card-btn.add {
        font-size: 12px !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        min-height: 34px !important;
    }

    /* Claims section inside card */
    .deceased-card-claims-header {
        font-size: 11px !important;
        padding: 8px 16px 4px !important;
    }

    .deceased-card-claim-row {
        padding: 6px 16px !important;
        font-size: 12px !important;
    }

    /* Pagination bar — stacked on mobile */
    .deceased-pagination-bar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
        padding-bottom: calc(12px + 64px) !important;
    }

    .deceased-per-page {
        font-size: 13px !important;
    }

    /* "Still loading" inline banner — compact mobile version */
    .data-still-loading-banner {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 64px !important; /* clear bottom nav */
    }

    .deceased-per-page select {
        font-size: 13px !important;
        padding: 6px 8px !important;
        min-height: 34px !important;
    }

    .deceased-pagination-nav {
        padding: 0 !important;
    }

    .deceased-pagination-nav .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .deceased-pagination-nav .page-link {
        min-width: 38px !important;
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        padding: 4px 8px !important;
    }

    .deceased-pagination-nav .page-item.active .page-link {
        background: #1E6332 !important;
        border-color: #1E6332 !important;
    }

    /* Hide list/table toggle on mobile — cards only */
    .deceased-view-toggle-group {
        display: none !important;
    }

    /* Hide table view on mobile — force cards only */
    #deceasedTableContainer {
        display: none !important;
    }


    /* ──────────────────────────────────────────────────────────
       Q. ADMIN PANEL — NOT USABLE ON A PHONE
    ────────────────────────────────────────────────────────── */

    /* 🔴 This block used to hide #page-analytics and #page-my-accounts too.
       Both are listed in the mobile More menu, so tapping them landed the
       user on a blank grey screen that looked broken — AND both already had
       a full set of mobile styles further down this file (section M for
       Analytics: toolbar, KPI grid, chart + donut + legend; section Z for
       My Locations: stacked summary strip, card metrics, detail KPIs).
       That styling had simply been dead code behind this display:none.
       They are now shown, which is what those sections were written for.

       The Admin Panel genuinely has no mobile layout (its drag-reorder
       accordion needs a pointer), so it stays hidden — but a blank page is
       never an acceptable destination, so it explains itself instead. */
    #page-admin.active {
        display: block !important;
        padding: 28px 18px !important;
    }

    #page-admin.active > * {
        display: none !important;
    }

    #page-admin.active::before {
        content: 'The Admin Panel needs a larger screen';
        display: block;
        font-family: 'Futura PT', 'Jost', sans-serif;
        font-size: 17px;
        font-weight: 700;
        color: #1a1a1a;
        text-align: center;
        margin-top: 40px;
    }

    #page-admin.active::after {
        content: 'Managing contacts and locations involves wide tables and drag-and-drop, so it is only available on a computer or tablet. Everything else in the Hub works here on your phone.';
        display: block;
        font-family: 'Futura PT', 'Jost', sans-serif;
        font-size: 13.5px;
        line-height: 1.55;
        color: #6b7280;
        text-align: center;
        max-width: 320px;
        margin: 10px auto 0;
    }

    /* Dark theme: the page background is near-black, so the default near-black
       heading above would be invisible. */
    body.dark-theme #page-admin.active::before {
        color: #e2e8f0;
    }

    body.dark-theme #page-admin.active::after {
        color: #94a3b8;
    }


    /* ──────────────────────────────────────────────────────────
       R. CHANGELOG PAGE
    ────────────────────────────────────────────────────────── */

    /* Page container */
    #page-changelog .dashboard-content {
        padding: 0 12px !important;
    }

    /* Hide info banner on mobile — saves vertical space */
    .changelog-banner {
        display: none !important;
    }

    /* Header */
    .changelog-header {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .changelog-title-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
    }

    .changelog-title {
        font-size: 18px !important;
        gap: 8px !important;
    }

    .changelog-title i {
        font-size: 16px !important;
    }

    /* Type chips — horizontal scroll.
       min-width:0 is REQUIRED: a nowrap flex row has an automatic minimum size
       of max-content, which would size the whole flex line (and stretch the
       title with it) to ~612px and push the page off-screen. */
    .changelog-type-chips {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        gap: 6px !important;
        padding-bottom: 2px !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .changelog-type-chips::-webkit-scrollbar {
        display: none;
    }

    .cl-chip {
        flex-shrink: 0 !important;
        border-radius: 20px !important;
        font-size: 11px !important;
        padding: 5px 12px !important;
    }

    .cl-chip-count {
        font-size: 10px !important;
        padding: 1px 6px !important;
    }

    /* Filter row — 2 selects side by side, search full width */
    .changelog-filter-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        flex-direction: unset !important;
    }

    .changelog-search-wrapper {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .changelog-filter-row select,
    .changelog-filter-row .changelog-select {
        width: 100% !important;
        height: 40px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        min-width: 0 !important;
    }

    .changelog-search {
        height: 40px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
    }

    /* Day groups — compact */
    .changelog-day-group {
        margin-bottom: 14px !important;
    }

    .changelog-day-header {
        padding: 10px 12px !important;
        border-radius: 10px !important;
        margin-bottom: 8px !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .changelog-day-left {
        gap: 8px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .changelog-day-date {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .changelog-day-count {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }

    .changelog-day-summary {
        display: none !important;
    }

    /* Entry cards — compact */
    .changelog-entry {
        padding: 12px 14px !important;
        margin-bottom: 6px !important;
        border-radius: 0 10px 10px 0 !important;
    }

    .changelog-entry-header {
        margin-bottom: 4px !important;
    }

    .changelog-entry-badges {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .changelog-type-badge {
        font-size: 9px !important;
        padding: 2px 8px !important;
        border-radius: 5px !important;
    }

    .changelog-category-tag {
        font-size: 10px !important;
        padding: 2px 8px !important;
        border-radius: 5px !important;
    }

    .changelog-entry-title {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }

    .changelog-entry-desc {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .changelog-entry-chevron {
        font-size: 10px !important;
    }

    /* Before/After — stacked */
    .changelog-before-after {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .changelog-ba {
        padding: 10px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    .changelog-ba-label {
        font-size: 9px !important;
        margin-bottom: 4px !important;
    }

    /* File chips — compact, scroll */
    .changelog-files {
        gap: 4px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }

    .changelog-files::-webkit-scrollbar {
        display: none;
    }

    .changelog-file-chip {
        font-size: 10px !important;
        padding: 3px 8px !important;
        flex-shrink: 0 !important;
        border-radius: 5px !important;
    }

    /* Empty state */
    .changelog-empty {
        padding: 40px 20px !important;
    }

    .changelog-empty i {
        font-size: 32px !important;
    }


    /* ──────────────────────────────────────────────────────────
       S. SETTINGS PAGE — iOS-style Settings
    ────────────────────────────────────────────────────────── */

    /* Container */
    #page-settings .dashboard-content {
        padding: 0 !important;
        background: transparent !important;
    }

    .settings-container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .settings-container > h2 {
        font-size: 18px !important;
        padding: 16px 16px 12px !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }

    /* Settings cards */
    .settings-card {
        border-radius: 14px !important;
        border: 1.5px solid #e5e7eb !important;
        box-shadow: none !important;
        overflow: hidden !important;
        margin: 0 12px 14px !important;
        background: #fff !important;
    }

    .settings-card-header {
        padding: 12px 14px !important;
        background: #f9fafb !important;
        border-bottom: 1px solid #f0f0f0 !important;
        gap: 8px !important;
    }

    .settings-card-header i {
        font-size: 15px !important;
    }

    .settings-card-header h5 {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .settings-card-body {
        padding: 4px 14px !important;
    }

    /* Settings items — stack label above control */
    .settings-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }

    .settings-item:last-child {
        border-bottom: none !important;
        padding-bottom: 10px !important;
    }

    .settings-item:first-child {
        padding-top: 10px !important;
    }

    .settings-item-info {
        padding-right: 0 !important;
    }

    .settings-item-info h6 {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important;
        color: #1f2937 !important;
    }

    .settings-item-info p {
        font-size: 12px !important;
        color: #9ca3af !important;
        line-height: 1.3 !important;
    }

    /* Items with toggles — keep side by side */
    .settings-item:has(.toggle-switch) {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .settings-item:has(.toggle-switch) .settings-item-info {
        padding-right: 12px !important;
        flex: 1 !important;
    }

    /* Select dropdowns — full width, override inline 200px */
    .settings-card select,
    .settings-item select,
    .settings-item .form-select {
        width: 100% !important;
        max-width: 100% !important;
        height: 42px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        border: 1.5px solid #e5e7eb !important;
        padding: 0 12px !important;
        background-color: #f9fafb !important;
        color: #374151 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .settings-card select:focus,
    .settings-item select:focus,
    .settings-item .form-select:focus {
        border-color: #1E6332 !important;
        box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.1) !important;
    }

    /* Toggle switches — proper mobile sizing */
    .toggle-switch {
        width: 52px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
    }

    .toggle-slider {
        border-radius: 28px !important;
    }

    .toggle-slider:before {
        height: 22px !important;
        width: 22px !important;
        bottom: 3px !important;
        left: 3px !important;
    }

    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(24px) !important;
    }

    /* Save button — full width at bottom */
    .settings-container > .btn-success {
        display: block !important;
        width: calc(100% - 24px) !important;
        margin: 6px 12px 24px !important;
        height: 46px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    /* Preference items (shared with profile) */
    .preference-item {
        padding: 14px 0 !important;
    }

    .preference-item label {
        font-size: 14px !important;
    }


    /* ──────────────────────────────────────────────────────────
       T. PRIVACY POLICY PAGE
    ────────────────────────────────────────────────────────── */

    .privacy-container {
        padding: 16px !important;
    }

    .privacy-toc {
        padding: 14px !important;
        border-radius: 14px !important;
    }


    /* ──────────────────────────────────────────────────────────
       U. LOGIN PAGE — Mobile auth screens (Sign In, Sign Up, Forgot Password, Change Password)
    ────────────────────────────────────────────────────────── */

    /* Hide bottom nav / more menu until user is logged in */
    #appContainer:not(.active) ~ .mobile-bottom-nav,
    #appContainer:not(.active) ~ .mobile-more-backdrop,
    #appContainer:not(.active) ~ .mobile-more-menu {
        display: none !important;
    }

    /* Hide the app header on login screens */
    #appContainer:not(.active) .main-header {
        display: none !important;
    }

    /* ── Login Background — keep stars/aurora, hide icons/moon/ship ── */
    .login-floating-icons,
    .space-moon,
    .eff-ship-container {
        display: none !important;
    }

    /* ── Login Card — glass card base ── */
    .login-card {
        margin: 32px !important;
        padding: 32px 22px 28px !important;
        border-radius: 28px !important;
        max-width: none !important;
        width: calc(100% - 64px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow:
            0 12px 48px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(47, 133, 66, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        background: rgba(255, 255, 255, 0.97) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }

    /* ── Logo ── */
    .login-logo {
        max-width: 280px !important;
        margin-bottom: 1rem !important;
    }

    /* ── Titles & Subtitles ── */
    .login-title {
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.3 !important;
    }
    .login-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 1.25rem !important;
        color: #6c757d !important;
    }
    .login-card h1.login-title {
        font-size: 1.4rem !important;
    }
    .login-card h3,
    .login-card h4 {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
    }

    /* ── Form Labels ── */
    .login-card .form-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        margin-bottom: 6px !important;
    }

    /* ── Inputs ── */
    .login-card input,
    .login-card .form-control {
        height: 50px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
        border: 1.5px solid #e5e7eb !important;
        padding: 12px 16px !important;
        background: #f9fafb !important;
        color: #1f2937 !important;
        transition: all 0.2s ease !important;
        -webkit-appearance: none !important;
    }
    .login-card input:focus,
    .login-card .form-control:focus {
        border-color: #1E6332 !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12) !important;
    }
    .login-card input::placeholder {
        color: #9ca3af !important;
        font-size: 14px !important;
    }

    /* ── Password Toggle Button ── */
    .login-card .password-toggle,
    .login-card .input-with-toggle .password-toggle {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        border-radius: 10px !important;
        color: #9ca3af !important;
    }
    /* Input with toggle — give right padding for the eye icon */
    .login-card .input-with-toggle input {
        padding-right: 48px !important;
    }

    /* ── Buttons ── */
    .login-card .btn {
        height: 52px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        box-shadow: 0 4px 14px rgba(30, 99, 50, 0.25) !important;
        transition: all 0.2s ease !important;
    }
    .login-card .btn:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 8px rgba(30, 99, 50, 0.2) !important;
    }

    /* ── Error / Success Messages ── */
    #loginError,
    #signUpError,
    #resetMessage,
    #changePwError,
    #changePwSuccess {
        border-radius: 12px !important;
        font-size: 13px !important;
        padding: 12px 16px !important;
    }

    /* ── Sign In Panel ── */
    #signInPanel .mb-3,
    #signInPanel .mb-4 {
        margin-bottom: 14px !important;
    }
    /* Footer links row (Forgot Password? / Create Account) */
    #signInPanel .text-center[style*="display: flex"] {
        gap: 0 !important;
    }
    #signInPanel .text-center[style*="display: flex"] a {
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 8px 4px !important;
    }
    /* Privacy policy link — override inline white color for white card bg */
    #signInPanel a[href="privacy-policy.html"],
    #signUpPanel a[href="privacy-policy.html"] {
        color: #6c757d !important;
        font-size: 12px !important;
        padding: 6px !important;
    }

    /* ── Sign Up Panel ── */
    /* Icon circle at top */
    #signUpPanel > .text-center > div[style*="56px"] {
        width: 52px !important;
        height: 52px !important;
    }
    #signUpPanel > .text-center > div[style*="56px"] i {
        font-size: 20px !important;
    }
    /* Stack name fields vertically on mobile */
    #signUpPanel div[style*="display: flex"][style*="gap: 10px"] {
        flex-direction: column !important;
        gap: 0 !important;
    }
    /* Password requirements — single column */
    #signUpPanel div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        margin-bottom: 12px !important;
    }
    #signUpPanel .pw-req {
        font-size: 12px !important;
        padding: 4px 0 !important;
    }
    /* Password strength bar */
    #signUpPanel div[style*="height: 4px"] {
        height: 5px !important;
        border-radius: 3px !important;
    }
    /* "Already have an account?" link row */
    #signUpPanel > form > .text-center span,
    #signUpPanel > form > .text-center a {
        font-size: 14px !important;
    }
    #signUpPanel > form > .text-center a {
        font-weight: 700 !important;
    }

    /* ── Forgot Password Panel ── */
    #forgotPasswordPanel > .text-center > div[style*="56px"] {
        width: 52px !important;
        height: 52px !important;
    }
    #forgotPasswordPanel > .text-center > div[style*="56px"] i {
        font-size: 20px !important;
    }
    #forgotPasswordPanel p.login-subtitle {
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: 0 8px !important;
    }
    #forgotPasswordPanel .mb-4 {
        margin-bottom: 16px !important;
    }
    /* Back to Sign In link */
    #forgotPasswordPanel .text-center a {
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 8px !important;
        display: inline-block !important;
    }

    /* ── Change Password Panel (dynamically created) ── */
    #changePasswordPanel {
        padding-top: 8px !important;
    }
    #changePasswordPanel h4 {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
    }
    #changePasswordPanel p {
        font-size: 0.85rem !important;
    }
    /* Icon box */
    #changePasswordPanel div[style*="56px"][style*="border-radius:14px"] {
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
    }
    /* Strength bars */
    #changePasswordPanel #newPwStrength div[style*="display:flex"] {
        gap: 5px !important;
    }
    #changePasswordPanel #newPwStrength div[style*="display:flex"] > div {
        height: 5px !important;
        border-radius: 3px !important;
    }
    /* Inputs in change password */
    #changePasswordPanel input {
        height: 50px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
        border: 1.5px solid #e5e7eb !important;
        padding: 12px 48px 12px 16px !important;
        background: #f9fafb !important;
    }
    #changePasswordPanel input:focus {
        border-color: #1E6332 !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12) !important;
    }
    /* Password toggle in change password */
    #changePasswordPanel .password-toggle {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
    }
    /* Back to Sign In link */
    #changePasswordPanel .text-center a {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1E6332 !important;
        padding: 8px !important;
        display: inline-block !important;
    }

    /* ── Intro Overlay — smaller logo on mobile ── */
    .intro-logo {
        width: 140px !important;
        height: 140px !important;
    }
    .intro-logo-ring {
        width: 200px !important;
        height: 200px !important;
    }


    /* ──────────────────────────────────────────────────────────
       V. DEV CONSOLE — Full-screen mobile panel
    ────────────────────────────────────────────────────────── */

    .dev-console-panel {
        width: 100vw !important;
        height: 100dvh !important;
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
    }

    /* Header — compact */
    .dev-console-header {
        padding: 10px 14px !important;
    }

    .dev-console-title {
        font-size: 13px !important;
        gap: 6px !important;
    }

    .dev-console-connection {
        font-size: 10px !important;
    }

    .dev-console-actions {
        gap: 4px !important;
    }

    .dev-console-icon-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    /* AI dropdown */
    .dc-ai-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    .dc-ai-dropdown-menu {
        right: 0 !important;
        left: auto !important;
        min-width: 200px !important;
    }

    /* Stats row — scrollable */
    .dev-console-stats {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 2px !important;
        padding: 8px 10px !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }

    .dev-console-stats::-webkit-scrollbar {
        display: none;
    }

    .dev-console-stat {
        min-width: 54px;
        padding: 6px 8px !important;
        flex-shrink: 0;
    }

    .dev-console-stat-value {
        font-size: 15px !important;
    }

    .dev-console-stat-label {
        font-size: 9px !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Toolbar — stack search and filters */
    .dev-console-toolbar {
        flex-direction: column !important;
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .dev-console-search {
        width: 100% !important;
    }

    .dev-console-search input {
        font-size: 13px !important;
        height: 36px !important;
    }

    .dev-console-search {
        flex: 0 0 auto !important;
    }

    .dev-console-filters {
        flex: 0 0 auto !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 4px 0 6px !important;
        scrollbar-width: none;
        display: flex !important;
        width: 100% !important;
    }

    .dev-console-filters::-webkit-scrollbar {
        display: none;
    }

    .dc-filter-btn {
        font-size: 12px !important;
        padding: 7px 14px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 20px !important;
        min-height: 34px !important;
        height: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        border-width: 1.5px !important;
    }

    .dc-filter-btn i {
        font-size: 11px !important;
        margin-right: 0 !important;
    }

    .dc-filter-count {
        font-size: 9px !important;
        min-width: 16px !important;
        height: 16px !important;
    }

    /* Log entries — compact */
    .dev-console-entry-header {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .dc-seq {
        font-size: 9px !important;
        min-width: 28px !important;
    }

    .dc-badge {
        font-size: 9px !important;
        padding: 1px 5px !important;
    }

    .dev-console-entry-msg {
        font-size: 11px !important;
    }

    .dev-console-entry-meta {
        font-size: 9px !important;
    }

    .dev-console-entry-detail {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    /* Resize handle — hidden on mobile (full screen) */
    .dev-console-resize {
        display: none !important;
    }

    /* AI analysis panel */
    .dc-ai-panel {
        max-height: 40vh !important;
    }

    .dc-ai-body {
        font-size: 12px !important;
        padding: 10px !important;
    }


    /* ──────────────────────────────────────────────────────────
       W. EXPORT MODALS & KPI DRILLDOWNS
    ────────────────────────────────────────────────────────── */

    .export-options-content {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        border-radius: 20px !important;
    }

    .kpi-drilldown-content {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        border-radius: 20px !important;
        max-height: 80vh;
    }

    .analytics-modal-content {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        border-radius: 20px !important;
    }

    /* Drilldown table — scrollable */
    .drilldown-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* ──────────────────────────────────────────────────────────
       X. GLOBAL TOUCH & ANIMATION POLISH
    ────────────────────────────────────────────────────────── */

    /* Smooth page transitions */
    .page-section {
        animation: mobilePageIn 0.2s ease-out;
    }

    @keyframes mobilePageIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Tap highlight override */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent text selection on interactive elements */
    .mobile-tab,
    .mobile-tab-center,
    .more-menu-item,
    .claim-card,
    .draft-card,
    .deceased-card,
    .conversation-item {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Smooth scrolling everywhere */
    .main-content,
    .page-section,
    .conversations-list,
    .chat-messages {
        scroll-behavior: smooth;
    }


    /* ──────────────────────────────────────────────────────────
       Y. GUIDED TOUR — Mobile overrides
    ────────────────────────────────────────────────────────── */

    /* Popover — smaller, fits phone screens */
    .driver-popover {
        max-width: calc(100vw - 24px) !important;
        margin: 0 12px !important;
        border-radius: 14px !important;
        border-width: 1.5px !important;
    }

    .driver-popover-title {
        font-size: 15px !important;
        padding: 14px 14px 0 14px !important;
        gap: 8px !important;
    }

    .driver-popover-title .tour-icon-box {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 18px !important;
        margin-right: 8px !important;
    }

    .driver-popover-description {
        padding: 10px 14px !important;
        max-height: 45vh !important;
        font-size: 13px !important;
    }

    .driver-popover-footer {
        padding: 10px 14px !important;
    }

    .driver-popover-progress-text {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .driver-popover-prev-btn,
    .driver-popover-next-btn,
    .driver-popover-done-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* Tour content — compact */
    .tour-content p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .tour-content .tour-feature-item,
    .tour-welcome-content .tour-feature-item {
        font-size: 12px !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }

    .tour-content .tour-tip,
    .tour-welcome-content .tour-tip {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    .tour-content .tour-tip span,
    .tour-welcome-content .tour-tip span {
        font-size: 12px !important;
    }

    /* Welcome slide — compact */
    .tour-welcome-content .tour-logo {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 12px !important;
        border-radius: 14px !important;
    }

    .tour-welcome-content h3 {
        font-size: 18px !important;
        margin-bottom: 6px !important;
    }

    .tour-welcome-content p {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .tour-welcome-content .tour-duration {
        font-size: 12px !important;
        padding: 8px 16px !important;
    }

    /* Exit button — slightly larger for touch */
    .tour-exit-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 20px !important;
        top: 8px !important;
        right: 8px !important;
    }

    /* Exit confirmation — mobile full-width */
    .exit-tour-confirm-box {
        padding: 24px 20px !important;
        border-radius: 16px !important;
        max-width: calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
    }

    .exit-tour-confirm-icon {
        font-size: 40px !important;
        margin-bottom: 10px !important;
    }

    .exit-tour-confirm-title {
        font-size: 18px !important;
    }

    .exit-tour-confirm-text {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }

    .exit-tour-confirm-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .exit-tour-btn-cancel,
    .exit-tour-btn-confirm {
        padding: 12px 20px !important;
        border-radius: 10px !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Blocked popup — centered for touch */
    .tour-blocked-popup {
        font-size: 12px !important;
        padding: 6px 12px !important;
        border-radius: 16px !important;
    }

    /* Tour active state — mobile-specific */
    body.express-tour-mobile .mobile-bottom-nav {
        z-index: 100002 !important;
        position: relative !important;
    }

    body.express-tour-mobile .main-content-wrapper {
        overflow: visible !important;
    }

    body.express-tour-mobile .main-content {
        overflow: visible !important;
    }

    /* Ensure highlighted bottom tab is visible above overlay */
    body.express-tour-active .driver-active-element {
        z-index: 100000 !important;
    }

    /* Stage (highlight cutout) — slightly less padding on mobile */
    .driver-overlay .driver-overlay-stage {
        border-radius: 8px !important;
    }

    /* ──────────────────────────────────────────────────────────
       Z. MY ACCOUNTS — Portfolio snapshot mobile
    ────────────────────────────────────────────────────────── */

    /* Page container */
    #page-my-accounts {
        padding: 0.75rem !important;
    }

    /* Summary strip — single column stack on mobile */
    .acct-summary-strip {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }

    .acct-summary-item {
        padding: 0.75rem 1rem !important;
        gap: 0.75rem !important;
    }

    .acct-summary-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.95rem !important;
    }

    .acct-summary-value {
        font-size: 1.15rem !important;
    }

    .acct-summary-label {
        font-size: 0.6rem !important;
    }

    /* Controls — stack */
    .acct-controls {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .acct-search-wrap {
        max-width: 100% !important;
    }

    .acct-search-input {
        font-size: 16px !important; /* prevent iOS zoom */
    }

    .acct-controls-right {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .acct-controls-right .filter-select {
        flex: 1 !important;
    }

    /* Card grid — single column */
    .acct-grid {
        grid-template-columns: 1fr !important;
        gap: 0.625rem !important;
    }

    .acct-card {
        padding: 1rem !important;
    }

    .acct-card-name {
        font-size: 0.9rem !important;
    }

    .acct-card-metrics {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.25rem !important;
    }

    .acct-card-metric {
        padding: 0.4rem 0.25rem !important;
    }

    .acct-card-metric-value {
        font-size: 0.8rem !important;
    }

    .acct-card-metric-label {
        font-size: 0.55rem !important;
    }

    /* Primary account badges — compact */
    .acct-primary-badge { width: 20px; height: 20px; font-size: 0.6rem; }
    .acct-detail-primary-badge { font-size: 0.65rem; padding: 2px 8px; }

    /* Detail panel — full screen */
    .acct-detail-panel {
        width: 100vw !important;
        right: -100vw !important;
    }

    .acct-detail-panel.show {
        right: 0 !important;
    }

    .acct-detail-back {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .acct-detail-close {
        display: none !important;
    }

    .acct-detail-body {
        padding: 1rem !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Detail KPIs — 3-col row */
    .acct-detail-kpis {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }

    .acct-detail-kpi {
        padding: 0.625rem !important;
    }

    .acct-detail-kpi-value {
        font-size: 0.9rem !important;
    }

    .acct-detail-kpi-label {
        font-size: 0.6rem !important;
    }

    /* Detail donut */
    .acct-detail-donut-wrap {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .acct-detail-legend {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.35rem 0.75rem !important;
    }

    /* Detail claims table — horizontal scroll */
    .acct-detail-claims-table {
        font-size: 0.75rem !important;
    }

    .acct-detail-claims-table th,
    .acct-detail-claims-table td {
        white-space: nowrap !important;
        padding: 0.4rem 0.5rem !important;
    }

    /* Bottom padding for nav bar clearance */
    #page-my-accounts .dashboard-content {
        padding-bottom: 72px !important;
    }

    /* ──────────────────────────────────────────────────────────
       AA. PHOTO CROP EDITOR — full-screen on mobile
    ────────────────────────────────────────────────────────── */

    .photo-crop-container {
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    .photo-crop-canvas-wrap {
        flex: 1 !important;
        aspect-ratio: auto !important;
    }

    .photo-crop-header {
        padding: 14px 16px !important;
    }

    .photo-crop-controls {
        padding: 12px 16px 6px !important;
    }

    .photo-crop-zoom input[type="range"]::-webkit-slider-thumb {
        width: 26px !important;
        height: 26px !important;
    }

    .photo-crop-zoom input[type="range"]::-moz-range-thumb {
        width: 26px !important;
        height: 26px !important;
    }

    .photo-crop-actions {
        padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .photo-crop-actions .btn {
        flex: 1 !important;
        padding: 12px !important;
        font-size: 1rem !important;
    }

    /* ──────────────────────────────────────────────────────────
       AB. MODERN WIZARD V2 — premium mobile experience
    ────────────────────────────────────────────────────────── */

    /* --- Root layout: absolute fill (from desktop rule) needs no mobile override --- */

    /* Hide decorative mesh gradients on mobile (GPU performance) */
    .v2-wizard::before,
    .v2-wizard::after {
        display: none !important;
    }

    /* --- Progress Header: clean white, compact --- */
    .v2-progress-header {
        padding: 10px 12px 8px !important;
    }

    .v2-progress-bar-track {
        height: 2px !important;
    }

    .v2-progress-bar-fill {
        box-shadow: 0 0 8px rgba(47, 133, 66, 0.4) !important;
    }

    /* Steps indicator */
    .v2-steps-indicator {
        max-width: 100% !important;
        gap: 0 !important;
        padding: 10px 0 !important;
    }

    /* Connecting line repositioned for 28px dots */
    .v2-steps-indicator::before {
        top: 24px !important;
        left: 30px !important;
        right: 30px !important;
        height: 1.5px !important;
    }

    .v2-step-dot {
        gap: 4px !important;
    }

    .v2-dot-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
        border-width: 1.5px !important;
    }

    .v2-step-dot.active .v2-dot-circle {
        box-shadow: 0 0 0 3px rgba(47, 133, 66, 0.15), 0 0 12px rgba(47, 133, 66, 0.2) !important;
        transform: scale(1.05) !important;
    }

    .v2-step-dot.completed .v2-dot-circle::after {
        font-size: 10px !important;
    }

    .v2-dot-label {
        font-size: 8px !important;
        max-width: 52px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: 0.2px !important;
    }

    /* Step counter */
    .v2-step-counter {
        font-size: 9px !important;
        padding-bottom: 10px !important;
        letter-spacing: 1.2px !important;
    }

    /* --- Panels: tighter padding --- */
    .v2-panel-inner {
        max-width: 100% !important;
        padding: 20px 16px 100px !important;
    }

    .v2-panel-header {
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .v2-panel-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        font-size: 17px !important;
    }

    .v2-panel-title {
        font-size: 1.2rem !important;
    }

    .v2-panel-subtitle {
        font-size: 0.8rem !important;
    }

    /* --- Cards: glass effect with reduced padding --- */
    .v2-card {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }

    .v2-card:hover {
        transform: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    }

    .v2-section-label {
        font-size: 0.7rem !important;
        margin-bottom: 12px !important;
    }

    /* --- Form rows: stack on narrow screens --- */
    .v2-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .v2-row-3 {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .v2-row-3 > .v2-field {
        flex: 1 !important;
    }

    /* --- Input font size: 16px prevents iOS zoom --- */
    .v2-input,
    .v2-select,
    .v2-textarea {
        font-size: 16px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
    }

    .v2-select {
        padding-right: 36px !important;
    }

    .v2-input-prefix {
        font-size: 16px !important;
        padding: 0 10px !important;
        border-radius: 10px 0 0 10px !important;
    }

    .v2-input-prefix + .v2-input {
        border-radius: 0 10px 10px 0 !important;
    }

    /* --- Chip groups: touch-friendly spacing --- */
    .v2-chip-group {
        gap: 6px !important;
    }

    .v2-chip span {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }

    .v2-chip:hover span {
        transform: none !important;
    }

    .v2-chip input:checked + span {
        transform: none !important;
    }

    /* --- Toggle groups --- */
    .v2-toggle-btn span {
        padding: 9px 16px !important;
        font-size: 0.8rem !important;
    }



    /* --- Callout --- */
    .v2-callout {
        padding: 12px 14px !important;
        border-radius: 10px !important;
    }

    .v2-callout-body {
        font-size: 0.8rem !important;
    }

    /* --- Item cards (policies/beneficiaries) with accent borders --- */
    .v2-item-card {
        padding: 14px 14px 14px 16px !important;
        border-radius: 10px !important;
        gap: 10px !important;
    }

    .v2-item-card:hover {
        transform: none !important;
    }

    .v2-item-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
    }

    .v2-item-title {
        font-size: 0.875rem !important;
    }

    .v2-item-meta {
        font-size: 0.75rem !important;
    }

    .v2-icon-btn {
        width: 34px !important;
        height: 34px !important;
    }

    /* --- Add button --- */
    .v2-add-btn {
        padding: 14px !important;
        font-size: 0.875rem !important;
        border-radius: 10px !important;
    }

    .v2-add-btn:hover {
        transform: none !important;
    }

    /* --- Inline form (policy / beneficiary entry) --- */
    .v2-inline-form {
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }

    /* Green accent bar: match reduced padding */
    .v2-inline-form::before {
        left: 16px !important;
        right: 16px !important;
    }

    .v2-inline-form-header {
        font-size: 0.9rem !important;
        margin-bottom: 16px !important;
    }

    .v2-inline-form-actions {
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .v2-inline-form-actions .v2-btn {
        flex: 1 !important;
        padding: 12px 16px !important;
    }

    /* --- IC Info Panel --- */
    .v2-ic-info {
        padding: 14px 16px !important;
        border-radius: 10px !important;
    }

    .v2-ic-info-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .v2-ic-row {
        padding: 8px 10px !important;
        border-radius: 6px !important;
    }

    /* --- Policy checkboxes --- */
    .v2-policy-check {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    .v2-policy-check:hover {
        transform: none !important;
    }

    /* --- Review cards --- */
    .v2-review-card {
        border-radius: 12px !important;
    }

    .v2-review-card:hover {
        transform: none !important;
    }

    .v2-review-card-header {
        padding: 12px 16px !important;
        font-size: 0.85rem !important;
    }

    .v2-review-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 7px !important;
        font-size: 12px !important;
    }

    .v2-review-card-body {
        padding: 12px 16px !important;
        font-size: 0.8125rem !important;
    }

    .v2-review-card-body table {
        font-size: 0.75rem !important;
    }

    .v2-review-card-body table th,
    .v2-review-card-body table td {
        padding: 6px 6px !important;
    }

    /* --- Policy Checklist (inline form + tooltip) --- */
    .policy-checklist {
        padding: 10px 12px !important;
        border-radius: 8px !important;
    }

    .policy-checklist-label {
        font-size: 0.78rem !important;
    }

    .policy-checklist-row {
        font-size: 0.76rem !important;
        gap: 6px !important;
    }

    .policy-warn-badge {
        padding: 2px 6px !important;
        font-size: 0.68rem !important;
    }

    .policy-tooltip {
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
        left: 16px !important;
        right: 16px !important;
    }

    .policy-live-checklist {
        margin: 12px 0 6px !important;
    }

    .v2-submit-btn {
        padding: 16px 24px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }

    .v2-submit-btn:hover {
        transform: none !important;
    }

    /* --- Family Pay Chip UI (both wizards) --- */
    .fp-promo-chips {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .fp-chip {
        min-width: unset !important;
        max-width: unset !important;
        padding: 12px 8px !important;
    }

    .fp-chip:hover {
        transform: none !important;
    }

    .fp-chip-amount {
        font-size: 0.95rem !important;
    }

    .fp-custom-input {
        max-width: 100% !important;
    }

    .fp-custom-input input {
        font-size: 16px !important; /* prevents iOS zoom */
    }

    .fp-promo-logo {
        width: 30px !important;
        height: 30px !important;
    }

    .fp-promo-title {
        font-size: 1rem !important;
    }

    .fp-promo-context {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }

    /* Family Pay status indicator */
    .fp-status-wrap {
        text-align: center !important;
    }

    .fp-status-included {
        font-size: 0.82rem !important;
        padding: 8px 14px !important;
    }

    .fp-status-remove {
        display: block !important;
        margin: 6px auto 0 !important;
    }

    /* --- Policy Breakdown + Financial Summary (both wizards) --- */
    .fp-bd-group {
        padding: 10px !important;
    }

    .fp-bd-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    .fp-bd-total {
        font-size: 0.85rem !important;
    }

    .fp-bd-item {
        font-size: 0.78rem !important;
        padding: 4px 0 !important;
    }

    .fp-fs-header {
        padding: 10px 12px !important;
    }

    .fp-fs-title {
        font-size: 0.85rem !important;
    }

    .fp-fs-body {
        padding: 10px 12px !important;
    }

    .fp-fs-row {
        font-size: 0.82rem !important;
    }

    .fp-fs-total {
        padding: 10px 12px !important;
    }

    .fp-fs-total-label {
        font-size: 0.85rem !important;
    }

    .fp-fs-total-value {
        font-size: 1.05rem !important;
    }

    .fp-fs-net {
        padding: 10px 12px !important;
    }

    .fp-fs-net-label {
        font-size: 0.82rem !important;
    }

    .fp-fs-net-value {
        font-size: 0.95rem !important;
    }

    .fp-fs-usage {
        gap: 6px !important;
    }

    .fp-fs-usage-label {
        font-size: 0.72rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    .fp-fs-warning {
        font-size: 0.78rem !important;
        padding: 8px 10px !important;
    }

    .classic-action-buttons,
    .v2-action-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .classic-action-buttons .btn,
    .v2-action-btn {
        min-width: unset !important;
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 0.875rem !important;
    }

    .v2-action-btn:hover {
        transform: none !important;
    }

    /* --- Unsaved Changes Modal --- */
    .draft-unsaved-modal {
        padding: 24px 20px !important;
        max-width: 90% !important;
        border-radius: 14px !important;
    }

    .draft-unsaved-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
    }

    .draft-unsaved-title {
        font-size: 1.05rem !important;
    }

    .draft-unsaved-text {
        font-size: 0.82rem !important;
    }

    .draft-unsaved-btn {
        padding: 14px 16px !important;
        font-size: 0.875rem !important;
    }

    /* --- Bottom navigation: frosted glass above mobile tab bar --- */
    .v2-bottom-nav {
        padding: 10px 16px calc(10px + 60px + env(safe-area-inset-bottom, 0px)) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    body.capacitor .v2-bottom-nav {
        padding-bottom: calc(10px + 80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .v2-bottom-nav .v2-btn {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
    }

    .v2-bottom-nav-center {
        gap: 8px !important;
    }

    .v2-btn-danger-outline {
        font-size: 0.75rem !important;
        padding: 8px 10px !important;
        white-space: nowrap;
    }

    /* --- Wizard Selector Modal: stack options --- */
    .v2-selector-overlay {
        backdrop-filter: blur(4px) !important;
    }

    .v2-selector-modal {
        width: calc(100vw - 32px) !important;
        max-width: 100% !important;
        border-radius: 18px !important;
        margin: 16px !important;
    }

    .v2-selector-header {
        padding: 20px 20px 12px !important;
    }

    .v2-selector-title {
        font-size: 1.1rem !important;
    }

    .v2-selector-options {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 8px 20px 20px !important;
    }

    .v2-selector-option {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }

    .v2-selector-option:hover {
        transform: none !important;
    }

    .v2-selector-option-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
        border-radius: 14px !important;
        margin-bottom: 10px !important;
    }

    .v2-selector-option-title {
        font-size: 0.95rem !important;
    }

    .v2-selector-option-desc {
        font-size: 0.75rem !important;
    }

    .v2-selector-new-badge {
        top: -8px !important;
        right: -4px !important;
        font-size: 0.55rem !important;
        padding: 3px 10px !important;
    }

    /* --- Empty state --- */
    .v2-empty-state {
        padding: 24px 16px !important;
    }

    .v2-empty-state i {
        font-size: 28px !important;
    }

    /* --- Hints --- */
    .v2-hint {
        font-size: 0.75rem !important;
    }

    /* --- Divider --- */
    .v2-divider {
        margin: 16px 0 !important;
    }

    /* --- Loading overlay --- */
    #v2LoadingOverlay {
        border-radius: 0 !important;
    }

    /* ──────────────────────────────────────────────────────────
       AC. ADDRESS MAP + GOOGLE PLACES — mobile overrides
    ────────────────────────────────────────────────────────── */

    /* Shorter map on mobile to conserve screen space */
    .address-mini-map {
        height: 160px !important;
    }

    /* Google Places dropdown — full width, larger touch targets */
    .pac-container {
        width: calc(100vw - 32px) !important;
        left: 16px !important;
        right: 16px !important;
    }

    .pac-item {
        padding: 14px 16px !important;
        font-size: 15px !important;
    }

    .pac-item-query {
        font-size: 15px !important;
    }

    /* --- AD. PDF Beneficiary Picker --- */
    .pdf-bene-picker {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        height: 100dvh;
    }
    .pdf-bene-picker-footer {
        flex-direction: column;
        gap: 10px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    .pdf-bene-picker-footer > div:last-child {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    .pdf-bene-download-btn, .pdf-bene-merge-btn, .pdf-bene-cancel-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 14px;
    }
    .pdf-bene-name {
        font-size: 15px;
    }
    .pdf-bene-meta {
        font-size: 13px;
    }
    .pdf-bene-cb {
        width: 22px;
        height: 22px;
    }

    /* --- AE. eSign Modal --- */
    .esign-modal {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        height: 100dvh;
    }
    /* Confirm & Send — stack review over the PDF preview on phones */
    .esign-confirm-body {
        flex-direction: column;
        overflow-y: auto;
    }
    .esign-confirm-review {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid #ececec;
    }
    .esign-confirm-preview {
        flex: 0 0 auto;
        min-height: 70vh;
    }
    /* Keep the stacked mobile footer compact */
    .esign-footer-note { display: none; }
    .esign-modal-footer {
        flex-direction: column;
        gap: 10px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    .esign-send-btn, .esign-cancel-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 14px;
    }
    .esign-bene-name { font-size: 15px; }
    .esign-bene-meta { font-size: 13px; }
    .esign-bene-cb { width: 22px; height: 22px; }

    /* ──────────────────────────────────────────────────────────
       AD. Home V2 — Marketing Home Page
    ────────────────────────────────────────────────────────── */

    /* Page container */
    .home-page {
        padding: 0 !important;
    }


    /* Hero block */
    .hv2-hero {
        min-height: 260px !important;
        padding: 32px 16px !important;
    }
    .hv2-hero-title {
        font-size: 1.6rem !important;
    }
    .hv2-hero-subtitle {
        font-size: 0.95rem !important;
    }
    .hv2-hero-btn {
        padding: 10px 24px !important;
        font-size: 0.9rem !important;
    }

    /* Feature cards — single column */
    .hv2-features-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 12px !important;
    }
    .hv2-feature-card {
        padding: 20px 16px !important;
    }
    .hv2-feature-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    /* Rich text */
    .hv2-rich-text {
        padding: 20px 16px !important;
    }

    /* Image gallery — 2 columns */
    .hv2-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 12px !important;
    }
    .hv2-gallery-item {
        height: 140px !important;
    }
    .hv2-lightbox-content img {
        max-width: 95vw !important;
        max-height: 70vh !important;
    }

    /* Video embed */
    .hv2-video-wrap {
        padding: 0 12px !important;
    }

    /* CTA banner */
    .hv2-cta {
        padding: 28px 16px !important;
    }
    .hv2-cta-title {
        font-size: 1.3rem !important;
    }
    .hv2-cta-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .hv2-cta-btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Stats counter — 2 columns */
    .hv2-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 12px !important;
    }
    .hv2-stat-number {
        font-size: 1.8rem !important;
    }

    /* Testimonials */
    .hv2-testimonials-grid {
        grid-template-columns: 1fr !important;
        padding: 0 12px !important;
    }
    .hv2-carousel-track {
        padding: 0 12px !important;
    }

    /* Quick links — 2 columns */
    .hv2-quicklinks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 12px !important;
    }

    /* Image + Text — stack vertically */
    .hv2-imgtext {
        flex-direction: column !important;
        padding: 0 12px !important;
    }
    .hv2-imgtext.hv2-imgtext-reverse {
        flex-direction: column !important;
    }
    .hv2-imgtext-img,
    .hv2-imgtext-content {
        width: 100% !important;
        flex: none !important;
    }
    .hv2-imgtext-img {
        height: 200px !important;
    }

    /* Block spacing */
    .hv2-block {
        margin-bottom: 16px !important;
    }

    /* Announcement strip on home v2 */
    .hv2-announcements-strip {
        padding: 0 8px !important;
    }

    /* Home Builder — canvas builder mobile overrides */
    .hb-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 12px !important;
    }
    .hb-toolbar-left {
        justify-content: center !important;
    }
    .hb-toolbar-right {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .hb-toolbar-right .hb-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Canvas rows — compact on mobile */
    .hb-row-handle {
        min-width: 28px !important;
        padding: 6px 4px !important;
    }
    .hb-row-grip {
        font-size: 10px !important;
    }
    .hb-btn-icon-xs {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
    }
    .hb-cell-label {
        font-size: 11px !important;
    }
    .hb-cell-type-badge {
        font-size: 8px !important;
        padding: 1px 5px !important;
    }
    .hb-cell-summary {
        display: none !important;
    }
    .hb-canvas-cell {
        min-height: 56px !important;
    }

    /* Settings popover — full width on mobile */
    .hb-settings-popover {
        width: calc(100vw - 40px) !important;
        right: -10px !important;
        max-width: 280px !important;
    }

    /* Starter screen — 2 columns */
    .hb-starter-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .hb-starter {
        padding: 20px 12px !important;
    }

    /* Template overlay modal */
    .hb-template-modal {
        padding: 16px !important;
        max-height: 90vh !important;
    }
    .hb-template-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Editor fields */
    .hb-field-row-group {
        flex-direction: column !important;
    }
    .hb-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Section editor card */
    .hb-section-header {
        padding: 10px 12px !important;
    }
    .hb-section-body {
        padding: 0 12px 12px !important;
    }

    /* Type picker — bottom sheet on mobile */
    .hb-type-picker-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .hb-type-picker {
        max-width: 100% !important;
        border-radius: 14px 14px 0 0 !important;
    }
    .hb-type-picker-btn {
        padding: 12px 14px !important;
    }
    .hb-type-picker-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    /* Cell actions — compact on mobile */
    .hb-cell-actions {
        gap: 2px !important;
    }
    .hb-cell-action-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
    }

    /* Pattern picker — full width */
    .hb-pattern-picker {
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
    }
    .hb-pattern-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    /* ──────────────────────────────────────────────────────────
       AF. Draft Assignment Form Picker
    ────────────────────────────────────────────────────────── */

    .draft-assign-overlay {
        padding: 0 !important;
    }
    .draft-assign-modal {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        height: 100dvh;
    }
    .draft-assign-body {
        padding: 12px !important;
    }
    .draft-assign-pol-header {
        padding: 10px 12px !important;
    }
    .draft-assign-pol-title {
        font-size: 14px !important;
    }
    .draft-assign-bene-list {
        padding: 8px 10px !important;
    }
    .draft-assign-bene-row label {
        padding: 8px 0 !important;
        font-size: 13px !important;
    }
    .draft-assign-bene-row input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
    }
    .draft-assign-footer {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
    .draft-assign-footer > div {
        width: 100% !important;
    }
    .draft-assign-footer button {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* ──────────────────────────────────────────────────────────
       AG. NATIVE HOME PAGE (.hn-*) — the default landing page
       home-native.css carries its own responsive rules, but not for these
       two cases, where desktop grids collapsed into unreadable
       single-word columns at phone width.
    ────────────────────────────────────────────────────────── */

    /* "Continue Where You Left Off" rows.
       Desktop is `grid-template-columns: 1fr auto auto auto`; at phone width
       the three auto columns (pill + timestamp + chevron) claimed ~200px and
       left ~64px for the claim name, which then wrapped one word per line and
       made every row ~180px tall. Re-flow as two lines instead: name +
       location on top, status + timestamp + chevron underneath. */
    .hn-recent-item {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px 8px !important;
        padding: 10px 4px !important;
    }
    .hn-recent-item > div:first-child {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .hn-recent-item .hn-recent-name {
        font-size: 14.5px !important;
        line-height: 1.3 !important;
    }
    .hn-recent-item .hn-recent-id {
        font-size: 12px !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .hn-recent-item .hn-status-pill {
        font-size: 11px !important;
        padding: 3px 9px !important;
        flex: 0 0 auto !important;
    }
    .hn-recent-item .hn-recent-time {
        font-size: 11.5px !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .hn-recent-item .hn-recent-arrow {
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

    /* Card headers. On a phone the action buttons ("Catch Me Up",
       "View All / Add Event / Manage") squeezed the title into a 107-147px
       column, so "Continue Where You Left Off" broke across three lines.
       Allowing the header to wrap lets the ACTIONS drop to their own line
       while the title keeps one clean line. Titles that still don't fit
       ellipsise rather than stacking one word per line. */
    .hn-card-header {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }
    .hn-card-title {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 15.5px !important;
    }

    /* ──────────────────────────────────────────────────────────
       AI. E-SIGNATURES (.esm-*) — e-signatures.css has its own responsive
       rules, but never handled the list view at phone width
    ────────────────────────────────────────────────────────── */

    /* Cards only on a phone (forced in e-signatures.js `_restorePreferences`)
       — the list view's table is ~1100px wide. Hide the list/card toggle so
       we aren't offering a view the phone can't show properly. Same approach
       as Claims / Drafts / Decedent. */
    #esmListContainer,
    .esm-view-toggle {
        display: none !important;
    }

    /* Default browser checkboxes render 13x13 here, which is far too small to
       hit reliably with a thumb. Match the 22px the Hub uses elsewhere. */
    #page-e-signatures input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }

}

/* ──────────────────────────────────────────────────────────
   AH. VERY SMALL PHONES (≤360px — iPhone SE and similar)
────────────────────────────────────────────────────────── */

@media (max-width: 360px) {
    /* Six header icons plus the page title cannot share a 320px bar: the
       title was squeezed down to ~55px ("Reso…"), which is useless.
       Drop the two icons that are ALSO in the More menu — Guided Tour and
       Resource Center — so nothing becomes unreachable, and the page title
       gets its width back. Notifications, Calendar and Recent Items stay
       because the More menu has no equivalent entry for them. */
    #guidedTourBtn,
    #resourceLibraryBtn {
        display: none !important;
    }
}

/* ──────────────────────────────────────────────────────────
   DESKTOP: Hide mobile-only elements
────────────────────────────────────────────────────────── */

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

.mobile-more-backdrop {
    display: none;
}

.mobile-more-menu {
    display: none;
}

.mobile-header-avatar {
    display: none;
}

.mobile-chat-back {
    display: none;
}

@media (min-width: 769px) {
    .mobile-bottom-nav,
    .mobile-more-backdrop,
    .mobile-more-menu,
    .mobile-header-avatar,
    .mobile-chat-back {
        display: none !important;
    }
}