/* ============================================================
   FILE: mobile-app.css
   PURPOSE: Mobile / tablet app-shell layout
   USED ON: Layout, Create, Login, Submitted, Pending
   EDIT COLORS: prefer theme.css → ★ QUICK EDIT
   ============================================================ */

/* ============================================================
   XClient Mobile App Shell — v1
   Native-app feel on phones/tablets · CSS only
   ============================================================ */

:root {
    --app-header-h: 56px;
    --app-ticker-h: 0px; /* market ticker removed from app header */
    --app-header-total: var(--app-header-h);
    --app-nav-h: 72px;
    --app-nav-float: 12px;
    --app-radius-shell: 22px;
    --app-ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);
    --app-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Desktop: next-level depth & polish ─────────────────────── */
@media (min-width: 1025px) {
    body {
        background:
            radial-gradient(ellipse 90% 60% at 0% -10%, rgba(var(--ds-edit-mint-rgb), 0.14), transparent 55%),
            radial-gradient(ellipse 70% 50% at 100% 0%, rgba(var(--ds-edit-primary-rgb), 0.08), transparent 50%),
            linear-gradient(180deg, #F0F4F8 0%, #F4F6F9 40%, #EEF2F7 100%);
    }

    .main-wrap {
        background: transparent;
    }

    .page-content {
        animation: appFadeIn 0.45s var(--app-ease-out) both;
    }

    .card,
    .kpi-card,
    .fund-card,
    .filter-bar {
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .kpi-card {
        position: relative;
        overflow: hidden;
    }

    .kpi-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(var(--ds-edit-mint-rgb), 0.06) 0%, transparent 50%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .kpi-card:hover::before {
        opacity: 1;
    }

    .btn-primary {
        position: relative;
        overflow: hidden;
    }

    .btn-primary::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
        transform: translateX(-120%);
        transition: transform 0.55s ease;
    }

    .btn-primary:hover::after {
        transform: translateX(120%);
    }
}

@keyframes appFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE & TABLET — APP SHELL (≤1024px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    html {
        height: 100%;
        height: 100dvh;
    }

    /* App shell only — do not lock standalone Login / Create / Pending / Submitted */
    body:has(.main-wrap) {
        height: 100%;
        height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
        background: #E8EDF4;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    body:not(:has(.main-wrap)) {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 100dvh;
        height: auto;
    }

    /* Full-height scrollable app frame */
    .main-wrap {
        margin-left: 0 !important;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #E8EDF4;
    }

    /* ── Fixed header stack: blue bar + ticker band ─────────── */
    .app-header-stack {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        display: flex;
        flex-direction: column;
        padding-top: env(safe-area-inset-top, 0px);
        pointer-events: none;
    }

    .app-header-stack > * {
        pointer-events: auto;
    }

    .topbar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1;
        flex-shrink: 0;
        display: block !important;
        width: 100%;
        height: var(--app-header-h) !important;
        min-height: var(--app-header-h) !important;
        max-height: var(--app-header-h) !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible;
        background: transparent !important;
    }

    .topbar-main {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: var(--app-header-h);
        min-height: var(--app-header-h);
        max-height: var(--app-header-h);
        padding: 0 16px;
        box-sizing: border-box;
        position: relative;
        background: linear-gradient(135deg, var(--primary, var(--ds-edit-shell)) 0%, var(--primary-mid, var(--ds-edit-shell-mid)) 100%);
        box-shadow: 0 4px 16px rgba(8, 20, 38, 0.2);
    }

    .topbar-main::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(var(--ds-edit-mint-rgb), 0.35), transparent);
        pointer-events: none;
    }

    /* Ticker band — light row below header */
    .market-ticker-strip {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1;
        width: 100%;
        height: var(--app-ticker-h);
        min-height: var(--app-ticker-h);
        max-height: var(--app-ticker-h);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding: 8px 0;
        overflow: hidden;
        box-sizing: border-box;
        background: #F8FAFC !important;
        border-top: 1px solid rgba(var(--ds-edit-mint-rgb), 0.28);
        border-bottom: 1px solid #EEF2F6;
        border-radius: 0;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .market-ticker-strip .ticker-item {
        flex: 0 0 auto;
        flex-shrink: 0;
        min-width: max-content;
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 10.5px;
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 1px 4px rgba(15, 39, 68, 0.06) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .market-ticker-strip .ticker-name,
    .market-ticker-strip .ticker-val,
    .market-ticker-strip .ticker-chg {
        flex-shrink: 0;
        white-space: nowrap;
        overflow: visible;
    }

    .market-ticker-strip .ticker-val {
        font-variant-numeric: tabular-nums;
    }

    .market-ticker-strip .ticker-name {
        color: #64748B !important;
    }

    .market-ticker-strip .ticker-val {
        color: var(--ds-edit-shell) !important;
    }

    .market-ticker-strip .ticker-item.positive .ticker-chg {
        color: #059669 !important;
    }

    .market-ticker-strip .ticker-item.negative .ticker-chg {
        color: #DC2626 !important;
    }

    .market-ticker-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        height: 100%;
        width: max-content !important;
        flex-shrink: 0;
        animation: marketTickerMarquee 20s linear infinite !important;
        will-change: transform;
    }

    .market-ticker-strip:hover .market-ticker-track,
    .market-ticker-strip:focus-within .market-ticker-track,
    .market-ticker-strip:active .market-ticker-track {
        animation-play-state: paused !important;
    }

    .market-ticker-strip .market-ticker {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
        height: auto;
        padding: 0 16px;
    }

    @media (prefers-reduced-motion: reduce) {
        .market-ticker-track {
            animation: none !important;
        }

        .market-ticker-strip {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .market-ticker-strip::-webkit-scrollbar {
            display: none;
        }
    }

    .topbar-brand-mobile {
        display: none !important;
    }

    .topbar-app-name,
    .topbar-page-name {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .topbar-page-name {
        font-size: 14px;
        font-weight: 600;
        opacity: 0.95;
    }

    body:not(.client-create-page):not(.submitted-page):not(.login-page):not(.onboarding-pending-page) .topbar .brand-mark,
    body:has(.main-wrap) .mobile-brand-logo.brand-mark {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
        border-radius: 11px !important;
        box-shadow: 0 4px 14px rgba(103, 85, 203, 0.35), 0 0 0 2px rgba(154, 145, 227, 0.25);
        background: linear-gradient(135deg, #6755cb, #9a91e3) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        color: #FFFFFF !important;
    }

    body:not(.client-create-page):not(.submitted-page):not(.login-page):not(.onboarding-pending-page) .topbar .brand-mark svg {
        width: 20px;
        height: 20px;
    }

    .topbar-title {
        display: block !important;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: -0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

    .topbar-right {
        margin-left: auto;
        gap: 8px !important;
    }

    .icon-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(var(--ds-edit-mint-rgb), 0.22) !important;
        color: #fff !important;
        backdrop-filter: blur(8px);
    }

    .icon-btn:active {
        transform: scale(0.92);
    }

    .main-wrap .topbar .theme-switch {
        display: none !important;
    }

    .topbar-main .icon-btn {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(var(--ds-edit-mint-rgb), 0.22) !important;
        color: #fff !important;
    }

    /* ── Scrollable content sheet ─────────────────────────── */
    .page-content {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
        margin-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px) + 10px);
        padding:
            12px 14px
            calc(var(--app-nav-h) + var(--app-nav-float) * 2 + env(safe-area-inset-bottom, 0px) + 8px)
            14px !important;
        border-radius: var(--app-radius-shell) var(--app-radius-shell) 0 0;
        position: relative;
        z-index: 1;
    }

    /* Pull sheet overlap effect */
    .page-content::before {
        content: '';
        position: sticky;
        top: 0;
        display: block;
        height: 3px;
        margin: -14px -14px 12px;
        background: linear-gradient(90deg, transparent, rgba(var(--ds-edit-mint-rgb), 0.5), transparent);
        z-index: 5;
    }

    .page-content:has(.filter-bar) {
        margin-top: 0 !important;
        padding-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px) + 8px) !important;
    }

    /* ── Floating glass bottom tab bar ──────────────────────── */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        left: var(--app-nav-float) !important;
        right: var(--app-nav-float) !important;
        bottom: calc(var(--app-nav-float) + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        min-height: calc(var(--app-nav-h) + 14px) !important;
        height: auto !important;
        padding: 14px 0 10px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.82) !important;
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.95) !important;
        box-shadow:
            0 8px 32px rgba(15, 39, 68, 0.18),
            0 2px 8px rgba(15, 39, 68, 0.08),
            0 0 0 1px rgba(var(--ds-edit-mint-rgb), 0.12) inset !important;
        z-index: 300 !important;
        overflow: visible !important;
    }

    .mobile-bottom-nav::before {
        display: none !important;
    }

    .mobile-nav-items {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        align-items: flex-end !important;
        width: 100% !important;
        min-height: var(--app-nav-h) !important;
        height: auto !important;
        padding: 0 8px 2px !important;
        gap: 2px !important;
    }

    .mobile-nav-item {
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        min-height: 48px !important;
        padding: 6px 4px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em;
        color: #94A3B8 !important;
        text-decoration: none !important;
        transition: color 0.2s ease, transform 0.15s var(--app-ease-spring), background 0.2s ease !important;
    }

    .mobile-nav-item::before {
        display: none !important;
    }

    .mobile-nav-item svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 2 !important;
        transition: transform 0.2s var(--app-ease-spring), stroke 0.2s ease !important;
    }

    .mobile-nav-item:active {
        transform: scale(0.88) !important;
    }

    .mobile-nav-item.active {
        color: var(--primary, var(--ds-edit-shell)) !important;
        background: linear-gradient(160deg, rgba(var(--ds-edit-mint-rgb), 0.28), rgba(var(--ds-edit-mint-rgb), 0.12)) !important;
        box-shadow: 0 2px 12px rgba(var(--ds-edit-mint-rgb), 0.25) !important;
    }

    .mobile-nav-item.active svg {
        stroke: var(--secondary-darker, var(--ds-edit-mint-darker)) !important;
        transform: translateY(-1px) scale(1.06) !important;
        filter: drop-shadow(0 2px 6px rgba(var(--ds-edit-mint-rgb), 0.45)) !important;
    }

    /* Center Home tab — elevated FAB style */
    .mobile-nav-item.mobile-nav-home {
        position: relative;
        z-index: 3;
        align-self: center !important;
        justify-content: flex-end !important;
        margin-top: -18px !important;
        margin-bottom: 2px !important;
        padding: 0 4px 2px !important;
        min-height: 58px !important;
        gap: 5px !important;
        color: var(--primary, var(--ds-edit-shell)) !important;
        background: transparent !important;
        box-shadow: none !important;
        font-weight: 800 !important;
        font-size: 9.5px !important;
        letter-spacing: 0.03em;
    }

    .mobile-nav-home-ring {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(145deg, var(--secondary, var(--ds-edit-mint)), var(--secondary-dark, var(--ds-edit-mint-dark)));
        box-shadow:
            0 6px 20px rgba(var(--ds-edit-mint-rgb), 0.42),
            0 0 0 3px rgba(255, 255, 255, 0.98);
        z-index: 0;
        pointer-events: none;
        transition: transform 0.2s var(--app-ease-spring), box-shadow 0.2s ease;
    }

    .mobile-nav-item.mobile-nav-home svg {
        position: relative;
        z-index: 1;
        margin-top: 13px;
        stroke: var(--primary, var(--ds-edit-shell)) !important;
        width: 21px !important;
        height: 21px !important;
        filter: none !important;
        transform: none !important;
    }

    .mobile-nav-item.mobile-nav-home:active {
        transform: none !important;
    }

    .mobile-nav-item.mobile-nav-home:active .mobile-nav-home-ring {
        transform: translateX(-50%) scale(0.92);
    }

    .mobile-nav-item.mobile-nav-home.active {
        color: var(--primary, var(--ds-edit-shell)) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mobile-nav-item.mobile-nav-home.active svg {
        stroke: var(--primary, var(--ds-edit-shell)) !important;
        transform: none !important;
        filter: none !important;
    }

    .mobile-nav-item.mobile-nav-home.active .mobile-nav-home-ring {
        box-shadow:
            0 10px 26px rgba(var(--ds-edit-mint-rgb), 0.55),
            0 0 0 4px rgba(255, 255, 255, 1),
            0 0 0 6px rgba(var(--ds-edit-mint-rgb), 0.25);
    }

    .topbar-right {
        gap: 10px !important;
    }

    /* ── Profile mobile ─────────────────────────────────────── */
    .page-content:has(.profile-layout) {
        padding-bottom: calc(var(--app-nav-h) + 10px + var(--app-nav-float) * 2 + env(safe-area-inset-bottom, 0px) + 96px) !important;
        padding-top: 6px !important;
        margin-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px) + 16px) !important;
    }

    .page-content:has(.profile-layout)::before {
        display: none;
    }

    .profile-layout {
        gap: 14px !important;
    }

    .profile-sidebar-card {
        display: block !important;
        text-align: center !important;
        padding: 22px 16px 18px !important;
        margin-top: 0 !important;
        border-radius: 18px !important;
        box-shadow: 0 2px 16px rgba(15, 39, 68, 0.07) !important;
        overflow: visible !important;
    }

    .profile-avatar-wrap {
        grid-row: auto !important;
        margin: 0 auto 14px !important;
        display: block !important;
        position: relative;
        z-index: 1;
    }

    .profile-avatar {
        width: 72px !important;
        height: 72px !important;
        font-size: 22px !important;
    }

    .profile-verified-badge {
        font-size: 9px !important;
        padding: 3px 10px !important;
        bottom: -8px !important;
    }

    .profile-name {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }

    .profile-code {
        font-size: 11px !important;
        margin-bottom: 12px !important;
    }

    .profile-risk-badge {
        margin-bottom: 18px !important;
        font-size: 10px !important;
        padding: 5px 14px !important;
    }

    .profile-quick-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
        margin-top: 4px !important;
        padding-top: 14px !important;
        width: 100%;
        border-top: 1px solid #EEF2F6;
        position: relative;
        z-index: 2;
    }

    .pqs-item {
        padding: 14px 10px !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
        border: 1px solid #E8F0EE !important;
        box-shadow: 0 2px 8px rgba(15, 39, 68, 0.05) !important;
        min-height: 74px;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 0;
        overflow: hidden;
        position: relative;
    }

    .pqs-item:nth-child(1) {
        border-top: 3px solid var(--ds-edit-shell-action);
        background: linear-gradient(165deg, #FFFFFF 0%, #F0F7FF 100%) !important;
        box-shadow: 0 3px 12px rgba(var(--ds-edit-primary-rgb), 0.08) !important;
    }

    .pqs-item:nth-child(2) {
        border-top: 3px solid var(--ds-edit-mint);
        background: linear-gradient(165deg, #FFFFFF 0%, #F0FAF6 100%) !important;
        box-shadow: 0 3px 12px rgba(var(--ds-edit-mint-rgb), 0.12) !important;
    }

    .pqs-item:nth-child(3) {
        border-top: 2px solid var(--ds-edit-mint);
    }

    .pqs-item:nth-child(4) {
        border-top: 2px solid #CBD5E1;
    }

    .pqs-item:nth-child(1)::before,
    .pqs-item:nth-child(2)::before {
        content: '';
        position: absolute;
        top: 8px;
        right: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        opacity: 0.55;
    }

    .pqs-item:nth-child(1)::before {
        background: var(--ds-edit-shell-action);
    }

    .pqs-item:nth-child(2)::before {
        background: var(--ds-edit-mint);
    }

    .pqs-label {
        font-size: 9px !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: #64748B !important;
        margin-bottom: 6px !important;
        line-height: 1.2;
    }

    .pqs-item:nth-child(1) .pqs-label,
    .pqs-item:nth-child(2) .pqs-label {
        color: #475569 !important;
    }

    .pqs-val {
        font-size: 13px !important;
        font-weight: 800 !important;
        color: var(--ds-edit-shell) !important;
        line-height: 1.25 !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        width: 100%;
    }

    .pqs-item:nth-child(1) .pqs-val,
    .pqs-item:nth-child(2) .pqs-val {
        font-size: 15px !important;
        letter-spacing: -0.02em;
    }

    .pqs-val small {
        display: block !important;
        margin-top: 3px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        opacity: 0.9;
    }

    .pqs-val.text-green {
        color: #059669 !important;
    }

    .pqs-val.text-red {
        color: #DC2626 !important;
    }

    .profile-bank-card {
        text-align: left !important;
    }

    .profile-form-area .card {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    .profile-form-area .card-header {
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #F1F5F9;
    }

    .profile-form-area .card-title {
        font-size: 14px !important;
    }

    .profile-form-area .form-grid-2,
    .profile-form-area .form-grid-3 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .profile-form-area .form-group {
        margin-bottom: 0 !important;
        min-width: 0;
    }

    .profile-form-area .form-label {
        font-size: 10px !important;
        margin-bottom: 6px !important;
        color: #64748B !important;
    }

    /* Profile inputs/selects/date → profile-fields.css */

    /* ── Welcome hero (mobile only) ─────────────────────────── */
    .welcome-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 14px;
        padding: 18px 16px;
        border-radius: 18px;
        background: var(--ds-edit-welcome-mobile-bg) !important;
        box-shadow: var(--ds-edit-welcome-mobile-shadow) !important;
    }

    .welcome-greeting {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #fff !important;
        letter-spacing: 0.02em;
        line-height: 1.25;
    }

    .welcome-sub {
        font-size: 11.5px !important;
        color: rgba(255, 255, 255, 0.75) !important;
        margin-top: 4px;
    }

    .welcome-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        width: 100%;
    }

    .welcome-actions .btn {
        min-height: 44px;
        justify-content: center;
        border-radius: var(--ds-radius-xs);
        font-size: 12px;
    }

    .welcome-actions .btn-outline {
        color: #FFFFFF !important;
        background-color: rgba(255, 255, 255, 0.14) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: none;
    }

    .welcome-actions .btn-outline:hover {
        color: #FFFFFF !important;
        background-color: rgba(255, 255, 255, 0.22) !important;
        border-color: #FFFFFF !important;
    }

    .welcome-actions .btn-primary {
        color: #6755cb !important;
        background: #FFFFFF !important;
        border-color: #FFFFFF !important;
        box-shadow: 0 2px 8px rgba(17, 27, 61, 0.12) !important;
    }

    .welcome-actions .btn-primary:hover {
        color: #4a3fb5 !important;
        background: #FFFFFF !important;
        filter: none;
    }

    /* ── KPI stat tiles (app widgets) ───────────────────────── */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .kpi-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px !important;
        padding: 14px !important;
        border-radius: 16px !important;
        border: none !important;
        background: #fff !important;
        box-shadow: 0 2px 12px rgba(15, 39, 68, 0.07) !important;
    }

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

    .kpi-card::after {
        display: none;
    }

    .kpi-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 11px !important;
    }

    .kpi-value {
        font-size: 17px !important;
    }

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

    /* ── Content cards ──────────────────────────────────────── */
    .card,
    .filter-bar,
    .portfolio-summary-strip {
        border: none !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 2px 16px rgba(15, 39, 68, 0.07) !important;
    }

    .card {
        padding: 16px !important;
        margin-bottom: 0;
    }

    .dashboard-grid {
        gap: 12px !important;
    }

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

    /* ── Fund cards (app list items) ────────────────────────── */
    .fund-card {
        border: none !important;
        border-radius: var(--r-xs) !important;
        padding: 16px !important;
        box-shadow: 0 2px 16px rgba(15, 39, 68, 0.07) !important;
    }

    .fund-card::before {
        display: none;
    }

    .fund-card:active {
        transform: scale(0.985);
    }

    .fund-grid {
        gap: 12px !important;
    }

    /* ── Portfolio strip ────────────────────────────────────── */
    .portfolio-summary-strip {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 14px !important;
        background: #fff !important;
    }

    .ps-divider {
        display: none !important;
    }

    .ps-item {
        padding: 12px !important;
        border-radius: 14px !important;
        background: linear-gradient(145deg, #F8FAFC, var(--secondary-light, #E0FAF7)) !important;
        border: 1px solid rgba(var(--ds-edit-mint-rgb), 0.2) !important;
    }

    .ps-val {
        font-size: 16px !important;
    }

    /* ── Filter bar (Explore — sticky app search) ───────────── */
    .filter-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        margin: -8px -2px 14px !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(16px);
        box-shadow: 0 4px 20px rgba(15, 39, 68, 0.08) !important;
    }

    .filter-bar::before {
        display: none !important;
    }

    .search-input {
        min-height: 46px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
        background: #F1F5F9 !important;
        border-color: transparent !important;
    }

    .search-input:focus {
        background: #fff !important;
        border-color: var(--secondary, var(--ds-edit-mint)) !important;
        box-shadow: 0 0 0 4px rgba(var(--ds-edit-mint-rgb), 0.2) !important;
    }

    .cat-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        gap: 8px !important;
    }

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

    .cat-tab {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 8px 16px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        border: 1px solid #E2E8F0 !important;
        background: #fff !important;
    }

    .cat-tab.active {
        background: linear-gradient(135deg, var(--primary-mid, var(--ds-edit-shell-mid)), var(--primary-accent, var(--ds-edit-shell-action))) !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(26, 73, 118, 0.28) !important;
    }

    .page-content:has(.filter-bar) {
        padding-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px) + 6px) !important;
    }

    .results-meta {
        margin-top: 0 !important;
        font-size: 12px;
        padding: 0 2px 10px;
    }

    /* ── Table → app cards ──────────────────────────────────── */
    .data-table tr {
        border-radius: 16px !important;
        box-shadow: 0 2px 12px rgba(15, 39, 68, 0.06) !important;
    }

    .data-table tr:active {
        transform: scale(0.99);
    }

    /* ── Buttons touch targets ──────────────────────────────── */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
    }

    .btn:active {
        transform: scale(0.96);
    }

    /* ── Toast above floating nav ───────────────────────────── */
    .toast-container {
        bottom: calc(var(--app-nav-h) + var(--app-nav-float) * 2 + env(safe-area-inset-bottom, 0px) + 8px) !important;
        left: 14px !important;
        right: 14px !important;
    }

    .toast {
        border-radius: 14px !important;
        backdrop-filter: blur(12px);
        box-shadow: 0 8px 32px rgba(15, 39, 68, 0.2) !important;
    }

    /* ── Modals (bottom sheet feel) ─────────────────────────── */
    .modal-backdrop {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal {
        max-width: 100% !important;
        border-radius: 22px 22px 0 0 !important;
        margin-bottom: 0 !important;
        animation: sheetUp 0.32s var(--app-ease-out) both !important;
    }

    @keyframes sheetUp {
        from {
            transform: translateY(100%);
            opacity: 0.8;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* ── Holding / txn rows ─────────────────────────────────── */
    .holding-row,
    .txn-row,
    .recommend-row {
        border-radius: 14px !important;
        padding: 12px !important;
    }

    .holding-row:active,
    .txn-row:active {
        background: var(--secondary-light, #E0FAF7) !important;
    }

    .recommend-row {
        border: none !important;
        box-shadow: 0 2px 12px rgba(15, 39, 68, 0.06) !important;
    }
}

/* ── Small phones ───────────────────────────────────────────── */
@media (max-width: 480px) {
    :root {
        --app-nav-float: 10px;
        --app-nav-h: 68px;
    }

    .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .welcome-greeting {
        font-size: 16px !important;
    }

    .mobile-nav-item {
        font-size: 10px !important;
    }

    .portfolio-summary-strip {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   LOGIN — tablet: side-by-side · mobile: form only
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 900px) and (max-height: 799px) {
    body.login-page {
        overflow: hidden !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh;
    }

    .login-stage {
        padding: 28px 20px 32px !important;
        overflow: hidden !important;
    }

    .login-shell {
        flex-direction: row !important;
        width: min(100%, 1180px) !important;
        max-width: 1180px !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: calc(100dvh - 60px) !important;
        margin: 0 auto !important;
    }

    .login-hero {
        display: flex !important;
        width: 46% !important;
        max-width: 46% !important;
        flex: 1 1 46% !important;
    }

    .login-panel {
        display: flex !important;
        width: 54% !important;
        max-width: 54% !important;
        flex: 1 1 54% !important;
    }

    html:not([data-theme="arth"]) .login-panel {
        background: #FFFFFF !important;
    }

    html[data-theme="arth"] .login-panel {
        background: var(--ds-edit-dark-deep) !important;
    }

    .mobile-login-brand {
        display: none !important;
    }

    .submit-btn,
    .back-btn {
        min-height: 44px;
        border-radius: 12px !important;
    }
}

@media (min-width: 768px) and (max-width: 900px) and (min-height: 800px) {
    body.login-page {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    .login-stage {
        padding: 36px 24px 40px !important;
        overflow: hidden !important;
    }

    .login-shell {
        flex-direction: row !important;
        width: min(100%, 1180px) !important;
        max-width: 1180px !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: calc(100dvh - 76px) !important;
    }

    .login-hero {
        display: flex !important;
        width: 46% !important;
        max-width: 46% !important;
        flex: 1 1 46% !important;
    }

    .login-panel {
        width: 54% !important;
        max-width: 54% !important;
        flex: 1 1 54% !important;
    }

    html:not([data-theme="arth"]) .login-panel {
        background: #FFFFFF !important;
    }

    html[data-theme="arth"] .login-panel {
        background: var(--ds-edit-dark-deep) !important;
    }

    .mobile-login-brand {
        display: none !important;
    }
}

@media (max-width: 767px) {
    body.login-page {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100dvh;
    }

    html:not([data-theme="arth"]) body.login-page {
        background: #eceff5 !important;
    }

    html[data-theme="arth"] body.login-page {
        background: #1a1c28 !important;
    }

    body.login-page .login-shell {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        overflow: hidden !important;
    }

    html:not([data-theme="arth"]) body.login-page .login-shell {
        background: #FFFFFF !important;
    }

    html[data-theme="arth"] body.login-page .login-shell {
        background: var(--ds-edit-dark-deep) !important;
    }

    body.login-page .login-hero,
    body.login-page .login-hero * {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        flex: 0 0 0 !important;
        border: none !important;
    }

    body.login-page .mobile-login-brand {
        display: none !important;
    }

    body.login-page .login-panel {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        padding: 20px 16px 18px !important;
        margin: 0 !important;
    }

    html:not([data-theme="arth"]) body.login-page .login-panel {
        background: #FFFFFF !important;
    }

    html[data-theme="arth"] body.login-page .login-panel {
        background: var(--ds-edit-dark-deep) !important;
    }

    .submit-btn:active,
    .back-btn:active {
        transform: scale(0.98);
    }
}

/* ══════════════════════════════════════════════════════════════
   CLIENT ONBOARDING — mobile app wizard
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    html:not([data-theme="arth"]) body.client-create-page:not(.onboarding-pending-page) {
        overflow-x: hidden;
        background: #F4F6F9 !important;
    }

    html[data-theme="arth"] body.client-create-page:not(.onboarding-pending-page) {
        overflow-x: hidden;
        background: #E8EDF4;
    }

    html:not([data-theme="arth"]) .client-create-page .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.35) inset,
            0 3px 14px rgba(15, 39, 68, 0.14) !important;
    }

    html[data-theme="arth"] .client-create-page .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 0 0!important;
        box-shadow: 0 8px 28px rgba(8, 20, 38, 0.25) !important;
    }

    html:not([data-theme="arth"]) body.client-create-page:not(.onboarding-pending-page),
    html[data-theme="arth"] body.client-create-page:not(.onboarding-pending-page) {
        padding-top: var(--topbar-height, 58px) !important;
    }

    html:not([data-theme="arth"]) .client-create-page .page-header {
        border-radius: 0 !important;
        margin-bottom: 0;
    }

    html[data-theme="arth"] .client-create-page .page-header {
        border-radius: 0 0;
        margin-bottom: 0;
    }

    .client-create-page .mobile-progress-card {
        border: none !important;
        border-radius: 18px !important;
        box-shadow: 0 4px 20px rgba(15, 39, 68, 0.08) !important;
    }

    .client-create-page:not(.onboarding-pending-page) .main-card,
    .client-create-page:not(.onboarding-pending-page) .card,
    .client-create-page .form-section-card,
    .client-create-page .array-entry {
        border: none !important;
        border-radius: 18px !important;
        box-shadow: 0 2px 16px rgba(15, 39, 68, 0.07) !important;
    }

    .client-create-page .form-nav,
    .client-create-page .card-footer {
        border-radius: 18px !important;
        border: 1px solid rgba(var(--ds-edit-mint-rgb), 0.2) !important;
        box-shadow: 0 8px 32px rgba(15, 39, 68, 0.12) !important;
    }

    .client-create-page input,
    .client-create-page select,
    .client-create-page textarea {
        min-height: 44px !important;
        border-radius: 12px !important;
        font-size: 16px !important; /* prevents iOS zoom */
    }

    .client-create-page .btn {
/*        min-height: 46px;
        border-radius: 12px;*/
    width:100%;
    }
}

/* ══════════════════════════════════════════════════════════════
   SUBMITTED PAGE — mobile app success
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    body.submitted-page {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .submitted-page .topbar {
        border-radius: 0;
        flex-shrink: 0;
    }

    .submitted-page .page-body {
        flex: 1 0 auto;
        padding: 20px 14px max(28px, env(safe-area-inset-bottom));
        align-items: flex-start;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    .submitted-page .submit-card {
        border-radius: 20px !important;
        box-shadow: 0 12px 40px rgba(15, 39, 68, 0.12) !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    .submitted-page .btn-login,
    .submitted-page .btn-home {
        min-height: 48px;
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-content,
    .modal,
    .mobile-nav-item,
    .kpi-card,
    .fund-card {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 600px) {
    body.client-create-page:not(.onboarding-pending-page) {
        padding-top: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.client-create-page:not(.onboarding-pending-page) .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    body.client-create-page:not(.onboarding-pending-page) .page-header,
    body.client-create-page:not(.onboarding-pending-page) .mobile-progress-card {
        position: relative !important;
        top: auto !important;
    }
}

/* Override legacy site.css 700px fixed filter bar */
@media (max-width: 700px) {
    /* Override legacy site.css fixed 72px topbar — use header stack */
    .app-header-stack .topbar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        height: var(--app-header-h) !important;
        min-height: var(--app-header-h) !important;
        max-height: var(--app-header-h) !important;
        padding: 0 !important;
        align-items: center !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .app-header-stack .topbar-main {
        padding: 0 14px;
    }

    .page-content {
        margin-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px)) !important;
        padding:
            8px 12px
            calc(var(--app-nav-h) + var(--app-nav-float) * 2 + env(safe-area-inset-bottom, 0px) + 16px)
            12px !important;
    }

    .filter-bar {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        margin: -6px 0 14px !important;
        border-radius: 18px !important;
    }

    /* margin-top already clears the fixed header — do not add header height again */
    .page-content:not(:has(.filter-bar)) {
        margin-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px)) !important;
        padding:
            8px 12px
            calc(var(--app-nav-h) + var(--app-nav-float) * 2 + env(safe-area-inset-bottom, 0px) + 16px)
            12px !important;
    }

    .page-content:has(.filter-bar) {
        margin-top: 0 !important;
        padding-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px) + 8px) !important;
    }

    .results-meta {
        margin-top: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD — mobile polish
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-content:has(.welcome-bar) {
        padding-top: 12px !important;
    }

    /* Topbar icons — balanced spacing */
    .topbar-right {
        gap: 10px !important;
    }

    .topbar .theme-switch {
        flex-shrink: 0;
    }

    .topbar .icon-btn {
        flex-shrink: 0;
    }

    /* Chart cards — keep title + actions on one line */
    .chart-card .card-header,
    .allocation-card .card-header,
    .holdings-card .card-header,
    .txn-card .card-header,
    .recommend-card .card-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .chart-card .card-title,
    .holdings-card .card-title,
    .txn-card .card-title,
    .recommend-card .card-title {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chart-period-tabs {
        display: flex;
        width: auto;
        flex-shrink: 0;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0;
    }

    .chart-period-tabs::-webkit-scrollbar {
        display: none;
    }

    .period-btn {
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 34px;
        border-radius: var(--ds-radius-xs) !important;

    .chart-card .chart-wrap {
        height: 165px;
        max-height: 165px;
    }

    .allocation-card .chart-wrap--donut {
        height: 140px;
        max-height: 140px;
        max-width: 180px;
    }

    .allocation-legend {
        margin-top: 10px;
        gap: 6px !important;
    }

    .alloc-leg-item {
        padding: 6px 8px;
        border-radius: 10px;
        background: #F8FAFC;
    }

    /* Section cards spacing */
    .dashboard-grid .card {
        margin-bottom: 0;
    }

    .dashboard-grid {
        gap: 12px !important;
    }

    .card-link {
        font-size: 11px !important;
        white-space: nowrap;
    }

    /* Holdings & transactions */
    .holding-row,
    .txn-row {
        padding: 12px 10px !important;
        margin-bottom: 4px;
        background: #FAFBFC;
        border-radius: 14px !important;
    }

    .holding-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 10px !important;
    }

    .holding-name,
    .txn-name {
        font-size: 12px !important;
        line-height: 1.35;
        white-space: normal !important;
    }

    .txn-type-badge {
        width: 36px !important;
        height: 36px !important;
        font-size: 11px !important;
    }

    /* Recommended funds */
    .recommend-row {
        display: grid !important;
        grid-template-columns: 40px 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
        align-items: start !important;
    }

    .recommend-row .btn {
        grid-column: 2;
        width: fit-content;
        margin-top: 4px;
        min-height: 36px;
        padding: 6px 14px !important;
    }

    .recommend-meta {
        flex-wrap: wrap;
        gap: 4px !important;
    }

    .recommend-name {
        white-space: normal !important;
        line-height: 1.35;
        font-size: 12px !important;
    }

    /* Alerts on dashboard */
    .alert {
        border-radius: 14px !important;
        font-size: 12px !important;
        padding: 11px 14px !important;
    }
}

@media (max-width: 480px) {
    .welcome-sub {
        font-size: 10.5px !important;
        line-height: 1.45;
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .chart-card .chart-wrap {
        height: 150px;
        max-height: 150px;
    }

    .allocation-card .chart-wrap--donut {
        height: 130px;
        max-height: 130px;
        max-width: 160px;
    }

    .page-content:not(:has(.filter-bar)) {
        padding-top: 8px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO — mobile polish
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-content:has(.portfolio-summary-strip)::before {
        display: none;
    }

    .page-content:has(.portfolio-summary-strip) .portfolio-summary-strip {
        margin-top: 0;
        margin-bottom: 12px;
    }

    .page-content:has(.portfolio-summary-strip) .card-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    .page-content:has(.portfolio-summary-strip) .card-header .btn-primary.btn-sm {
        width: 100%;
        min-height: 42px;
        justify-content: center;
        border-radius: 12px;
    }
}

@media (max-width: 700px) {
    .page-content:has(.portfolio-summary-strip) .data-table td[data-label="Actions"] {
        display: block !important;
        text-align: left !important;
        padding: 12px 0 2px !important;
        margin-top: 8px;
        border-top: 1px solid #F1F5F9;
    }

    .page-content:has(.portfolio-summary-strip) .data-table td[data-label="Actions"]::before {
        display: block;
        margin-bottom: 10px;
        flex: none;
    }

    .page-content:has(.portfolio-summary-strip) .data-table td[data-label="Actions"] .action-btns {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
    }

    .page-content:has(.portfolio-summary-strip) .data-table td[data-label="Actions"] .action-btns .btn {
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .page-content:has(.portfolio-summary-strip) .data-table td[data-label="Actions"] .btn-outline {
        color: var(--ds-edit-shell-action) !important;
        background-color: transparent !important;
        border: 1px solid var(--ds-edit-shell-action) !important;
        box-shadow: none !important;
        font-weight: 500 !important;
    }

    .page-content:has(.portfolio-summary-strip) .data-table td[data-label="Actions"] .btn-outline:hover {
        color: #FFFFFF !important;
        background-color: var(--ds-edit-shell-action) !important;
        border-color: var(--ds-edit-shell-action) !important;
    }

    .page-content:has(.portfolio-summary-strip) .data-table td[data-label="Actions"] .btn-danger-outline {
        color: #DC2626 !important;
        background-color: transparent !important;
        border: 1px solid #FCA5A5 !important;
        box-shadow: none !important;
        font-weight: 500 !important;
    }

    .page-content:has(.portfolio-summary-strip) .data-table td[data-label="Actions"] .btn-danger-outline:hover {
        color: #FFFFFF !important;
        background-color: #DC2626 !important;
        border-color: #DC2626 !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   TRANSACTION HISTORY — page layout (controls in form-controls.css)
   ══════════════════════════════════════════════════════════════ */
.txn-history-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.txn-history-header .card-title {
    margin: 0 !important;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.txn-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

.txn-export-btn {
    min-height: 36px;
    padding: 7px 16px !important;
    border-radius: var(--ds-radius-xs) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    width: auto !important;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (min-width: 1025px) {
    .txn-history-header {
        gap: 20px !important;
        padding-bottom: 16px !important;
        margin-bottom: 4px;
        border-bottom: 1px solid #E8F0EE !important;
    }

    .txn-history-header .card-title {
        font-size: 17px !important;
        color: var(--ds-edit-shell) !important;
    }

    .txn-toolbar {
        gap: 14px;
    }

    .txn-filter-chips {
        flex-wrap: nowrap;
        justify-content: flex-end;
        overflow-x: auto;
    }

    .txn-history-card .table-wrap {
        margin-top: 8px;
    }
}

@media (max-width: 1024px) {
    .page-content:has(#txnTable)::before {
        display: none;
    }

    .page-content:has(#txnTable) {
        padding-top: 6px !important;
    }

    .txn-history-card {
        padding: 14px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }

    .txn-history-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-bottom: 4px;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    .txn-history-card .card-title {
        display: block !important;
        font-size: 15px !important;
    }

    .txn-toolbar {
        flex: 1 1 auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .txn-filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 0 4px;
        width: auto;
        flex: 1 1 auto;
    }

    .txn-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .txn-chip {
        min-height: 32px;
        padding: 6px 12px;
    }

    .txn-export-btn {
        width: auto !important;
        min-height: 32px !important;
        justify-content: center !important;
    }

    .page-content:has(#txnTable) .data-table tr {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 2px 14px rgba(15, 39, 68, 0.07) !important;
        padding: 14px !important;
        margin-bottom: 10px !important;
    }

    .page-content:has(#txnTable) .data-table td {
        padding: 6px 0 !important;
    }

    .page-content:has(#txnTable) .data-table td:first-child {
        padding-bottom: 8px !important;
        margin-bottom: 4px !important;
        border-bottom: 1px solid #F1F5F9 !important;
    }

    .page-content:has(#txnTable) .txn-type-badge {
        width: auto !important;
        min-height: 28px !important;
        padding: 5px 12px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em;
    }

    .page-content:has(#txnTable) .txn-type-badge.sip,
    .page-content:has(#txnTable) .txn-type-badge.purchase {
        background: #E0FAF7 !important;
        color: #065F46 !important;
    }

    .page-content:has(#txnTable) .txn-type-badge.redemption {
        background: #FEE2E2 !important;
        color: #B91C1C !important;
    }

    .page-content:has(#txnTable) .status-pill.processed {
        background: #E0FAF7 !important;
        color: #065F46 !important;
        padding: 4px 10px !important;
        font-size: 10px !important;
        border-radius: 999px !important;
    }

    .page-content:has(#txnTable) .status-pill.pending {
        background: #FEF3C7 !important;
        color: #92400E !important;
    }

    .page-content:has(#txnTable) .status-pill.failed {
        background: #FEE2E2 !important;
        color: #B91C1C !important;
    }

    .page-content:has(#txnTable) .folio-code {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        background: #F1F5F9 !important;
    }
}

/* Final override — legacy site.css 700px topbar/page padding */
@media (max-width: 1024px) {
    body .main-wrap > .app-header-stack {
        position: fixed !important;
    }

    body .main-wrap > .app-header-stack .topbar {
        position: relative !important;
        height: var(--app-header-h) !important;
        min-height: var(--app-header-h) !important;
        max-height: var(--app-header-h) !important;
        padding: 0 !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    body .main-wrap > .app-header-stack + .page-content {
        margin-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px) + 10px) !important;
    }

    body .main-wrap > .app-header-stack + .page-content:has(.profile-layout) {
        margin-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px) + 16px) !important;
        padding-top: 6px !important;
    }

    body .main-wrap .profile-quick-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body .main-wrap .profile-sidebar-card {
        display: block !important;
        text-align: center !important;
    }
}

/* Light mobile header — default theme (logo palette) */
@media (max-width: 1024px) {
    html:not([data-theme="arth"]) .main-wrap .topbar-main {
        background: transparent !important;
        box-shadow: none !important;
        border-bottom: none !important;
    }

    html:not([data-theme="arth"]) .main-wrap .topbar-main::after {
        display: none !important;
    }

    html:not([data-theme="arth"]) .main-wrap .topbar-brand-mobile,
    html:not([data-theme="arth"]) .main-wrap .topbar-app-name,
    html:not([data-theme="arth"]) .main-wrap .topbar-page-name {
        color: var(--ds-edit-shell) !important;
    }

    html:not([data-theme="arth"]) .main-wrap .mobile-menu-btn {
        color: var(--ds-edit-header-icon) !important;
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 7px !important;
    }

    html:not([data-theme="arth"]) .main-wrap .topbar-main .icon-btn {
        background: transparent !important;
        border: none !important;
        color: var(--ds-edit-header-icon) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Beat legacy site.css 480px / 700px header padding */
@media (max-width: 480px) {
    body .main-wrap > .app-header-stack + .page-content {
        padding-top: 8px !important;
        margin-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px) + 12px) !important;
    }

    body .main-wrap > .app-header-stack + .page-content:has(.profile-layout) {
        padding-top: 6px !important;
        margin-top: calc(var(--app-header-total) + env(safe-area-inset-top, 0px) + 16px) !important;
    }

    body .main-wrap > .app-header-stack .topbar {
        position: relative !important;
        top: auto !important;
        height: var(--app-header-h) !important;
        min-height: var(--app-header-h) !important;
        max-height: var(--app-header-h) !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE — all pages & standalone flows
   ══════════════════════════════════════════════════════════════ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

.page-content,
.login-panel,
.client-create-page .page-body,
.submitted-page .page-body,
.onboarding-pending-page .pending-shell {
    min-width: 0;
}

.page-content table,
.card table,
.table-wrap {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.page-content pre,
.page-content code {
    max-width: 100%;
    overflow-x: auto;
}

/* Standalone flows — safe areas & overflow */
body.login-page,
body.client-create-page,
body.submitted-page,
body.onboarding-pending-page {
    overflow-x: hidden;
}

/* Client onboarding is a standalone page (no .main-wrap / .page-content scroller).
   The ≤1024px app-shell lock on body would clip the form with no way to scroll. */
@media (max-width: 1024px) {
    html:has(body.client-create-page:not(.onboarding-pending-page)) {
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.client-create-page:not(.onboarding-pending-page) {
        height: auto !important;
        max-height: none !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pinch-zoom;
    }
}

body.login-page,
body.submitted-page,
body.onboarding-pending-page {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Login — light page frame behind merged shell (match screenshot) */
@media (min-width: 641px) and (max-width: 900px) {
    html[data-theme="arth"] body.login-page {
        background: #1a1c28 !important;
    }

    html:not([data-theme="arth"]) body.login-page {
        background: #eceff5 !important;
    }
}

/* Onboarding pending — mobile */
@media (max-width: 640px) {
    body.onboarding-pending-page .pending-shell {
        padding: 18px 14px max(28px, env(safe-area-inset-bottom)) !important;
    }

    body.onboarding-pending-page .pending-main-card,
    body.onboarding-pending-page .pending-path-card {
        padding: 22px 18px 20px;
        border-radius: 20px;
    }

    body.onboarding-pending-page .pending-btn-continue,
    body.onboarding-pending-page .pending-btn-signout {
        min-height: 48px;
        border-radius: 14px;
    }

    body.submitted-page .stages {
        grid-template-columns: 1fr;
    }

    body.submitted-page .chip-lbl {
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    body.submitted-page .stages {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .login-page .auth-tab-label {
        font-size: 10px;
    }

    .login-page .otp-grid {
        justify-content: space-between;
        gap: 6px;
    }
}

/* Client create — narrow phones */
@media (max-width: 480px) {
    .client-create-page .page-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .client-create-page .topbar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .client-create-page .step-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .client-create-page .step-nav::-webkit-scrollbar {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   CROSS-PAGE MOBILE POLISH (shell + standalone)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    body:has(.main-wrap) .page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    body:has(.main-wrap) .page-content select,
    body:has(.main-wrap) .page-content textarea {
        min-height: 44px;
        font-size: 16px; /* prevent iOS zoom */
    }

    body:has(.main-wrap) .page-content .btn,
    body:has(.main-wrap) .page-content .btn-primary,
    body:has(.main-wrap) .page-content .btn-secondary {
        min-height: 44px;
    }

    .table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 420px) {
    .login-page .auth-tab-label {
        font-size: 10px !important;
    }

    .login-page .step-label {
        font-size: 10px !important;
    }

    .mobile-nav-item {
        font-size: 9.5px !important;
        padding-left: 2px;
        padding-right: 2px;
    }
}

/* Login dark — right panel (loaded last; wins over layout whites) */
html[data-theme="arth"] body.login-page .login-shell,
html[data-theme="arth"] body.login-page .login-panel,
html[data-theme="arth"] body.login-page .login-box {
    background: var(--ds-edit-dark-deep) !important;
}

html[data-theme="arth"] body.login-page .login-title {
    color: #FFFFFF !important;
}

html[data-theme="arth"] body.login-page .login-sub,
html[data-theme="arth"] body.login-page .login-eyebrow,
html[data-theme="arth"] body.login-page .login-secure-foot,
html[data-theme="arth"] body.login-page .form-label {
    color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme="arth"] body.login-page .form-label {
    color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="arth"] body.login-page .input-row,
html[data-theme="arth"] body.login-page .input-row:focus-within {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="arth"] body.login-page .input-row .form-input,
html[data-theme="arth"] body.login-page .input-row .form-input:focus {
    background: transparent !important;
    color: #FFFFFF !important;
}

/* Profile + KYC — dark (after mobile light !important) */
@media (max-width: 1024px) {
    html[data-theme="arth"] body:has(.main-wrap) .profile-sidebar-card,
    html[data-theme="arth"] body:has(.main-wrap) .profile-form-area .card,
    html[data-theme="arth"] body:has(.main-wrap) .kyc-status-card {
        background: var(--ds-edit-dark-deep) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.28) !important;
    }

    html[data-theme="arth"] body:has(.main-wrap) .pqs-item,
    html[data-theme="arth"] body:has(.main-wrap) .pqs-item:nth-child(1),
    html[data-theme="arth"] body:has(.main-wrap) .pqs-item:nth-child(2),
    html[data-theme="arth"] body:has(.main-wrap) .pqs-item:nth-child(3),
    html[data-theme="arth"] body:has(.main-wrap) .pqs-item:nth-child(4) {
        background: var(--ds-edit-dark-mid) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: none !important;
    }

    html[data-theme="arth"] body:has(.main-wrap) .pqs-item:nth-child(1) {
        border-top: 3px solid #6755cb !important;
    }

    html[data-theme="arth"] body:has(.main-wrap) .pqs-item:nth-child(2) {
        border-top: 3px solid #9a91e3 !important;
    }

    html[data-theme="arth"] body:has(.main-wrap) .pqs-label,
    html[data-theme="arth"] body:has(.main-wrap) .pqs-item:nth-child(1) .pqs-label,
    html[data-theme="arth"] body:has(.main-wrap) .pqs-item:nth-child(2) .pqs-label,
    html[data-theme="arth"] body:has(.main-wrap) .profile-form-area .form-label,
    html[data-theme="arth"] body:has(.main-wrap) .profile-code {
        color: #a8aabd !important;
    }

    html[data-theme="arth"] body:has(.main-wrap) .pqs-val,
    html[data-theme="arth"] body:has(.main-wrap) .profile-name,
    html[data-theme="arth"] body:has(.main-wrap) .profile-form-area .card-title {
        color: #ffffff !important;
    }

    html[data-theme="arth"] body:has(.main-wrap) .profile-form-area .card-header {
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }

    html[data-theme="arth"] body:has(.main-wrap) .profile-quick-stats {
        border-top-color: rgba(255, 255, 255, 0.08) !important;
    }

    html[data-theme="arth"] body:has(.main-wrap) .profile-form-actions {
        background: rgba(32, 34, 51, 0.96) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35) !important;
    }

    html[data-theme="arth"] body:has(.main-wrap) .profile-bank-card {
        background: var(--ds-edit-dark-mid) !important;
        border-color: rgba(154, 145, 227, 0.28) !important;
    }

    html[data-theme="arth"] body:has(.main-wrap) .profile-bank-card__body {
        background: var(--ds-edit-dark-deep) !important;
    }
}