/* ============================================================
    Livo Bank — Mobile App Styling
   Loaded ONLY by pages/online-banking.html, AFTER the page's
   inline <style> so these rules win the cascade.
   Scoped to app surfaces: #dashboardView and .login-card.
   ============================================================ */

/* ---------- App-scoped neutral palette ----------
   styles.css maps --gray-500..900 to blue shades; the app needs
   true neutrals for body text, labels and cards. */
#dashboardView,
.login-card {
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
}

/* ---------- MFA verification form ---------- */
.mfa-shield {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(0, 87, 160, 0.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 1.5rem;
    margin: 0 auto 14px;
}

/* ---------- Bottom navigation (5 tabs) ----------
   Standard banking-app tab bar: 48px+ touch targets, active
   pill behind the icon, safe-area bottom padding. */
.dash-bottom-nav {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -6px 20px rgba(17, 24, 39, 0.06);
    z-index: 1200;
}
.dash-bottom-nav button {
    gap: 3px;
    min-height: 52px;
    color: #6B7280;
    border-radius: 10px;
}
.dash-bottom-nav button i {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 26px;
    border-radius: 999px;
    font-size: 1.1rem;
    transition: background 0.2s, color 0.2s;
}
.dash-bottom-nav button span { font-size: 0.6rem; }
.dash-bottom-nav button.active { color: var(--primary); }
.dash-bottom-nav button.active i { background: rgba(0, 87, 160, 0.1); }

/* ---------- More action sheet ---------- */
.more-sheet-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
.more-sheet-overlay.open { opacity: 1; pointer-events: auto; }
.more-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5001;
    max-width: 560px; margin: 0 auto;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
    transition: transform 0.28s ease;
}
.more-sheet.open { transform: translateY(0); }
.more-sheet-handle {
    width: 40px; height: 4px; border-radius: 4px;
    background: var(--gray-200);
    margin: 0 auto 14px;
}
.more-sheet-title {
    font-size: 1rem; font-weight: 700; color: var(--gray-800);
    text-align: center; margin-bottom: 8px;
}
.more-sheet-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 16px 12px;
    border: none; background: none; cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    font-family: var(--font); font-size: 0.92rem;
    font-weight: 600; color: var(--gray-800);
    text-align: start; text-decoration: none;
    transition: background 0.15s;
}
.more-sheet-item:hover { background: var(--gray-50); }
.more-sheet-item:last-child { border-bottom: none; }
.more-sheet-item i:first-child {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: rgba(0, 87, 160, 0.08); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
}
.more-sheet-item .more-chevron {
    margin-inline-start: auto; color: var(--gray-400);
    background: none; font-size: 0.8rem;
}
.more-sheet-item.danger { color: #DC2626; }
.more-sheet-item.danger i:first-child { background: rgba(220, 38, 38, 0.08); color: #DC2626; }

/* ---------- Mobile dashboard layout ---------- */
@media (max-width: 768px) {
    #dashboardView > div[role="main"] { padding: 16px !important; }

    /* Header: drop the redundant notification-preferences gear
       (it lives in the More sheet now) */
    #dashboardView header button[title="Notification preferences"] { display: none; }

    /* Welcome + balance hero */
    #dashGreeting { font-size: 1.35rem !important; }
    #dashboardView [style*="margin-bottom:28px"] { margin-bottom: 20px !important; }

    /* Summary cards: balance spans full width, stats 2-up */
    #dashboardView [style*="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }
    #dashboardView [style*="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))"] > div:first-child {
        grid-column: 1 / -1;
        padding: 20px !important;
    }
    #dashboardView [style*="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))"] > div:not(:first-child) {
        padding: 16px !important;
    }
    #dashboardView [style*="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))"] #dashTotalBalance {
        font-size: 1.6rem !important;
    }

    /* Quick actions: 3-up */
    #dashboardView [style*="grid-template-columns:repeat(auto-fit,minmax(140px,1fr))"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    /* Accounts + Transactions stack to one column */
    #dashboardView [style*="grid-template-columns:1fr 1.5fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
    }
    #dashboardView [style*="grid-template-columns:1fr 1.5fr"] > div { margin-bottom: 0 !important; }

    /* Cards: horizontal scroll-snap carousel */
    #dashCardsList > div {
        display: flex !important;
        overflow-x: auto;
        gap: 12px !important;
        padding-bottom: 8px;
        margin-inline: -4px;
        padding-inline: 4px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    #dashCardsList > div > div {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
    #dashCardsList > div::-webkit-scrollbar { display: none; }

    /* Insights: 2-up */
    #dashboardView [style*="grid-template-columns:repeat(auto-fit,minmax(200px,1fr))"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
}

@media (max-width: 360px) {
    /* Very narrow screens: single-column summary stats */
    #dashboardView [style*="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))"] {
        grid-template-columns: 1fr !important;
    }
    #dashboardView [style*="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))"] > div:first-child {
        grid-column: auto;
    }
}