/* 
 * Expenses App - Global Design System
 * Restored 'Lila' Theme with Best-Practice Structure
 */

:root {
  --brand: #5142E6;
  --brand-light: #7664FF;
  --brand-dark: #3A2EAB;
}

html, body {
    height: 100%;
    height: -webkit-fill-available;
    overflow: hidden;
    margin: 0;
    font-family: 'Outfit', sans-serif;
}

body {
    transition: background-color 0.3s ease;
    overscroll-behavior-y: none;
}

/* --- Mesh Gradients (Subtle Lila V2) --- */
body.light {
    background-color: #f6f8fd;
    background-image: 
        radial-gradient(at 40% 20%, hsla(250, 100%, 74%, 0.08) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(340, 100%, 76%, 0.08) 0px, transparent 50%);
}

body.dark {
    background-color: #0B1121;
    background-image: 
        radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 0.2) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 0.1) 0, transparent 50%);
}

/* --- Classic Glass Panel (Approved 'Lila' Version) --- */
.glass-panel {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(81, 66, 230, 0.08);
}

.dark .glass-panel {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* --- Header System --- */
.header-bg {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    box-shadow: 0 15px 40px rgba(79, 70, 229, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .header-bg {
    background: linear-gradient(135deg, rgba(49, 46, 129, 0.8) 0%, rgba(67, 56, 202, 0.8) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Layout --- */
.app-container {
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.08), 0 0 100px rgba(81, 66, 230, 0.1);
}

.dark .app-container {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

/* --- Utilities --- */
.hide-scroll::-webkit-scrollbar {
    display: none;
}
.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Glass Input Accent */
.input-accent:focus {
    box-shadow: 0 0 0 3px rgba(81, 66, 230, 0.2);
    border-color: var(--brand) !important;
}

/* Toggle Switch */
.toggle-checkbox:checked {
    right: 0;
    border-color: #10B981;
}
.toggle-checkbox:checked+.toggle-label {
    background-color: #10B981;
}
.toggle-checkbox:checked+.toggle-label:after {
    transform: translateX(100%);
}

.nav-bar-fixed {
    position: fixed;
    bottom: 0;
    bottom: env(safe-area-inset-bottom);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
}

/* --- Dropdown Animations --- */
@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-dropdown {
    animation: dropdown-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scrollbar styling for custom dropdowns */
.max-h-60::-webkit-scrollbar {
    width: 4px;
}
.max-h-60::-webkit-scrollbar-track {
    background: transparent;
}
.max-h-60::-webkit-scrollbar-thumb {
    background: rgba(81, 66, 230, 0.2);
    border-radius: 10px;
}