@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    /* Material 3 Tonal Palette (Simulated) */
    --primary: #39E079;
    --on-primary: #003916;
    --primary-container: #d2e7d6; /* Tonal tint for surfaces */
    --on-primary-container: #00210a;
    
    --background-light: #fefcfb; /* M3 surface-looking white */
    --background-dark: #121212;  /* Android native dark background */
    
    --surface: #ffffff;
    --surface-variant: #e0e9e1;
    --on-surface: #191c19;
    --on-surface-variant: #424942;
    
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --red-500: #ba1a1a; /* M3 Error color */

    /* M3 Tonal Elevation (Instead of heavy shadows) */
    --elevation-1: 0 1px 2px rgba(0,0,0,0.1);
    --elevation-2: 0 1px 2px rgba(0,0,0,0.15), 0 2px 6px 2px rgba(0,0,0,0.1);
    
    /* Grid & Sizing (8dp based) */
    --grid-step: 8px;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
}

/* ─── Reset ─────────────────────────────────── */
html {
    height: 100%;
}
body {
    font-family: 'Roboto', sans-serif;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 16px; /* Body Large (16sp equivalent) */
    line-height: 1.5;
}

/* ─── Phone Frame (Desktop Simulator) ───────── */

/* Mobile: phone-frame fills the full viewport height exactly,
   giving views an explicit containing block so position:absolute
   children (like the pinned bottom bar) resolve correctly. */
.phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

/* Desktop: render as a centered phone */
@media (min-width: 480px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        /* Clean, neutral background */
        background-color: #0f172a;
        background-image: 
            radial-gradient(at 0% 0%, rgba(57, 224, 121, 0.05) 0px, transparent 50%),
            radial-gradient(at 100% 0%, rgba(57, 224, 121, 0.03) 0px, transparent 50%);
        overflow: hidden;
        padding: 40px 0;
    }

    .phone-frame {
        /* Phone dimensions (iPhone 14-ish) */
        width: 390px;
        height: 844px;
        min-height: unset;
        border-radius: 50px;
        overflow: hidden;

        /* Device shell */
        outline: 8px solid #1c1c1e;
        outline-offset: 0px;
        box-shadow:
            0 0 0 1px #3a3a3c,
            0 40px 100px rgba(0, 0, 0, 0.7);

        /* ← THE KEY TRICK:
           A transform (even a no-op) makes this element the containing block
           for position:fixed children, so the bottom nav pins to the frame
           instead of the viewport — no more left:50%/translateX(-50%) hack. */
        transform: translateZ(0);
    }

    /* Decorative notch */
    .phone-frame::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 30px;
        background: #1c1c1e;
        border-radius: 0 0 20px 20px;
        z-index: 9999;
    }

    /* Fill the full 844px phone frame, not just the browser viewport height */
    .view {
        min-height: 100%;
        height: 100%;
        overflow-y: auto;
    }
}

/* ─── Base View Container ────────────────────── */
.view {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: 100%;
    /* No max-width / margin: auto — phone-frame handles sizing */
    height: 100%;
    min-height: 100%;
    min-height: min-content;
    overflow-y: auto;
    background-color: white;

    /* Base layout remains flex-column */
    flex-direction: column;
}

/* Specific views (login/onboarding) that need vertical centering */
.view.centered-view {
    align-items: center;
    /* Removed justify-content: center to allow margin:auto centering which supports scrolling */
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

.view.centered-view > * {
    margin: auto 0;
}

.dark .view {
    background-color: var(--background-dark);
}

/* Active View */
.view.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

/* ─── View Transitions ─────────────────────── */
.view-enter {
    opacity: 0;
    transform: translateX(20px);
}

.view-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.view-exit {
    opacity: 1;
    transform: translateX(0);
}

.view-exit-active {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 250ms ease, transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Typography / Icons ─────────────────────── */
.font-display {
    font-family: 'Rubik', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1;
}

/* ─── Scrollbars ─────────────────────────────── */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.view-scroll-container {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.view-scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-container-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bottom-scroll-shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.dark .bottom-scroll-shadow {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

/* ─── Standardized Components ────────────────── */
.premium-card {
    background-color: var(--surface);
    border: 1px solid var(--surface-variant);
    border-radius: 12px; /* Standard Card Radius */
    padding: 16px; /* Strict 16dp padding */
    box-shadow: var(--elevation-1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.premium-card-lg {
    border-radius: 16px; /* Large Card Radius */
    padding: 16px;
}

.dark .premium-card {
    background-color: #1e1e1e; /* Tonal elevation surface for dark mode */
    border-color: #2c2c2c;
    box-shadow: none;
}

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

.input-field {
    width: 100%;
    height: 56px; /* Strict M3 height */
    padding: 0 16px; /* Strict 16dp horizontal padding */
    border-radius: 8px; /* M3 rounded default */
    border: 1px solid var(--slate-300);
    background-color: var(--surface-variant);
    outline: none;
    transition: all 0.2s ease;
    font-size: 16sp;
}

.dark .input-field {
    background-color: #2c2c2c;
    border-color: #3d3d3d;
    color: white;
}

.input-field:focus {
    border-color: var(--primary);
    border-width: 2px;
}

/* --- Android Native Buttons --- */
.m3-button {
    height: 40px; /* Standard button container height */
    padding: 0 24px; /* Internal horizontal padding */
    border-radius: 20px; /* Pill shape (40/2) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14sp;
    letter-spacing: 0.1px;
    border: none;
    cursor: pointer;
    position: relative;
    /* Invisible touch target extension to 48dp */
}

.m3-button::after {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 0;
    right: 0;
    /* This ensures a 48dp minimum vertical target */
}

.m3-button-primary {
    background-color: var(--primary);
    color: var(--on-primary);
}

.m3-button-tonal {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
}

/* ─── Numpad ─────────────────────────────────── */
.numpad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 400;
    height: 64px; /* Larger for easier tap */
    border-radius: 16px;
    background-color: var(--surface-variant);
    color: var(--on-surface);
    transition: background-color 0.2s;
    min-height: 48px;
    min-width: 48px;
}

.dark .numpad-btn {
    background-color: #2c2c2c;
    color: white;
}

.numpad-btn:active {
    background-color: var(--primary-container);
}

/* ─── Touch Targets ──────────────────────────── */
button,
.nav-item,
.clickable-icon {
    min-height: 48px;
    min-width: 48px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icons */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 24px; /* Standard system icons: 24x24dp visually */
}

/* ─── Bottom Nav ─────────────────────────────── */
#bottom-nav {
    /* No centering hack needed — nav is contained by .phone-frame */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    overflow: visible; /* Allow indicator circle to extend beyond nav edges */
}

/* The inner flex row — small horizontal inset so the edge items have room
   for the 30px indicator radius that hangs left/right of the item center */
#bottom-nav > .relative {
    padding-left: 8px;
    padding-right: 8px;
}

/* Override Tailwind's translate-y-full so it doesn't fight our transform */
#bottom-nav.translate-y-full {
    transform: translateY(100%) !important;
}

/* ─── Nav Indicator ──────────────────────────── */
#nav-indicator {
    height: 60px;
    width: 60px;
    top: -30px;
    box-shadow: 0 8px 20px rgba(57, 224, 121, 0.4);
    border: 4px solid var(--background-light);
    pointer-events: none;
    display: block !important;
    z-index: 5;
    transition-duration: 200ms !important;
}

.dark #nav-indicator {
    border-color: var(--background-dark);
}

/* ─── Nav Items ──────────────────────────────── */
.nav-item {
    transition-duration: 200ms !important;
    justify-content: center;
}

.nav-item.active {
    color: #FFFFFF !important;
    transform: translateY(-26px);
}

.nav-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    font-size: 32px;
}

.nav-item.active p {
    display: none;
}

.nav-item:not(.active) p {
    opacity: 0.6;
}

/* ─── Login/Signup Toggle ─────────────────────── */
.auth-toggle {
    display: flex;
    background-color: rgba(57, 224, 121, 0.1);
    padding: 0.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.auth-toggle-btn {
    flex: 1;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    background: transparent;
    color: var(--slate-500);
}

.auth-toggle-btn.active {
    background-color: var(--primary);
    color: var(--slate-900);
    box-shadow: 0 4px 12px rgba(57, 224, 121, 0.2);
}

/* ─── Google Login Button ─────────────────────── */
.google-login-btn {
    width: 100%;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: white;
    border: 1px solid var(--slate-200);
    border-radius: 0.75rem;
    color: var(--slate-900);
    font-weight: 600;
    transition: all 0.2s;
    margin-top: 1.5rem;
}

.dark .google-login-btn {
    background-color: var(--slate-800);
    border-color: var(--slate-700);
    color: white;
}

.google-login-btn:hover {
    background-color: var(--slate-50);
}

.dark .google-login-btn:hover {
    background-color: var(--slate-700);
}

.google-icon {
    width: 20px;
    height: 20px;
}

/* ─── Auth Form Transition ───────────────────── */
.auth-form {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.auth-form.active {
    display: block;
    opacity: 1;
}
/* --- Bottom Sheets & Side Menu --- */
.m3-bottom-sheet {
    border-radius: 28px 28px 0 0;
    background-color: var(--surface);
    padding: 24px;
    position: relative;
    box-shadow: var(--elevation-2);
}

.m3-drag-handle {
    width: 32px;
    height: 4px;
    background-color: var(--on-surface-variant);
    opacity: 0.4;
    border-radius: 2px;
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
}

.side-menu-overlay { 
    position: fixed; 
    inset: 0; 
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 100; /* Above everything (Header 10, Footer 50, Verification 60) */
    display: none; 
    backdrop-filter: blur(4px); 
}
.side-menu { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
    background-color: var(--surface); 
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); 
    transform: translateX(100%); 
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    display: flex; 
    flex-direction: column; 
    border-radius: 0; /* Full screen, no radius needed */
}
.dark .side-menu { background-color: #1e1e1e; }
.side-menu-overlay.active .side-menu { transform: translateX(0); }
/* --- Initials Avatar ------------------------- */
.initials-avatar { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; font-weight: 600; color: white; text-transform: uppercase; font-size: 1.125rem; user-select: none; }
.avatar-container { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 9999px; background-color: var(--slate-200); }
.dark .avatar-container { background-color: var(--slate-800); }

/* --- Custom Animations --- */
@keyframes spin-reverse {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.animate-spin-reverse {
    animation: spin-reverse 1s linear infinite;
}