/* Premium Design System for WealthWise */

/* CSS Variables & Theming */
:root {
    /* Shared Accents & Animation */
    --accent-cyan: #00f2ff;
    --accent-emerald: #02ffa1;
    --glass-blur: blur(20px);
}

/* Dark Mode (Default Premium) */
body.theme-dark,
body.premium-theme {
    --bg-theme: #080b12;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-primary: #f0f5ff;
    --text-muted: rgba(240, 245, 255, 0.6);
    --bg-overlay: rgba(14, 20, 34, 0.8);
}

/* Light Mode (Frost Glass) */
body.theme-light {
    --bg-theme: #f0f2f5;
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(0, 0, 0, 0.05);
    --text-primary: #1a1f2c;
    --text-muted: rgba(26, 31, 44, 0.6);
    --accent-cyan: #0088cc;
    /* Darker cyan for light mode visibility */
    --accent-emerald: #00b874;
    /* Darker emerald for light mode */
    --bg-overlay: rgba(255, 255, 255, 0.8);
}

body.premium-theme {
    background-color: var(--bg-theme);
    color: var(--text-primary);
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.01em;
    overflow-x: hidden;
    /* Safe Area Padding for Notched Displays */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Geometric Background */
.geometric-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at 20% 30%, rgba(0, 242, 255, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 255, 136, 0.05) 0%, transparent 40%);
}

.geometric-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-emerald));
    filter: blur(80px);
    opacity: 0.12;
    animation: float 25s infinite alternate ease-in-out;
    will-change: transform;
}

@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    100% {
        transform: translate(80px, 40px) rotate(10deg) scale(1.1);
    }
}

/* Glassmorphism Classes */
.glass-card {
    background: var(--glass-bg);
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Layered Glass Border Effect */
.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, var(--glass-border), transparent 50%, var(--glass-border));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.glass-card:hover {
    transform: translateY(-5px) scale(1.01);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.45);
}

/* Haptic Simulation on Mobile */
.btn-premium:active,
.glass-card:active,
.footer-bar-6 a:active,
.btn-full:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease !important;
}

/* Typography */
.text-gradient {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-emerald));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* Entrance Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Buttons */
.btn-premium {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-emerald));
    color: #000;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    padding: 1rem 2.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 242, 255, 0.2);
}

/* Global Utility Overrides */
.premium-theme .card.card-style {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    margin-bottom: 25px !important;
}

.premium-theme .color-highlight {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-emerald));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.premium-theme .bg-highlight,
.premium-theme .bg-blue-dark,
.premium-theme .gradient-highlight {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-emerald)) !important;
    color: #000 !important;
}

.premium-theme .footer-bar-6 {
    background: var(--bg-overlay) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--glass-border) !important;
}

.premium-theme .footer-bar-6 a i,
.premium-theme .footer-bar-6 a span {
    color: var(--text-muted) !important;
}

.premium-theme .footer-bar-6 a.active-nav i,
.premium-theme .footer-bar-6 a.active-nav span {
    color: var(--accent-cyan) !important;
}

.premium-theme .btn-full {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-emerald)) !important;
    color: #000 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 20px rgba(0, 242, 255, 0.2) !important;
}

.premium-theme .btn-full:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 242, 255, 0.4) !important;
}

.premium-theme .color-green-dark,
.premium-theme .color-emerald {
    color: var(--accent-emerald) !important;
}

.premium-theme .color-blue-dark,
.premium-theme .color-cyan {
    color: var(--accent-cyan) !important;
}

.premium-theme .color-red-dark,
.premium-theme .color-red-light {
    color: #ff5f5f !important;
}

.premium-theme .divider {
    background-color: var(--glass-border) !important;
}

.premium-theme .list-custom-small a {
    border-bottom: 1px solid var(--glass-border) !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.premium-theme .opacity-30 {
    opacity: 0.35 !important;
}

.premium-theme .opacity-40 {
    opacity: 0.45 !important;
}

.premium-theme .opacity-50 {
    opacity: 0.55 !important;
}

.premium-theme p,
.premium-theme span:not(.font-700):not(.font-800) {
    color: var(--text-muted);
}

.premium-theme h1,
.premium-theme h2,
.premium-theme h3,
.premium-theme h4,
.premium-theme h5,
.premium-theme h6,
.premium-theme strong {
    color: var(--text-primary) !important;
    letter-spacing: -0.02em;
}

.color-emerald {
    color: var(--accent-emerald) !important;
}

.color-cyan {
    color: var(--accent-cyan) !important;
}

.bg-fade-highlight-dark {
    background: rgba(0, 242, 255, 0.1) !important;
}

.bg-fade-green-dark {
    background: rgba(0, 255, 136, 0.1) !important;
}

.bg-fade-red-dark {
    background: rgba(255, 59, 48, 0.1) !important;
}

.color-red-light {
    color: #ff3b30 !important;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-theme);
}

::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

/* --- AppKit Color Overrides --- */
/* Force all legacy AppKit colors to map to the Premium Palette */

/* Greens -> Emerald */
.premium-theme .bg-green-dark,
.premium-theme .bg-green-light,
.premium-theme .bg-mint-dark,
.premium-theme .bg-mint-light,
.premium-theme .bg-grass-dark,
.premium-theme .bg-grass-light {
    background-color: var(--accent-emerald) !important;
    color: #000 !important;
}

.premium-theme .color-green-dark,
.premium-theme .color-green-light,
.premium-theme .color-mint-dark,
.premium-theme .color-mint-light,
.premium-theme .color-grass-dark,
.premium-theme .color-grass-light {
    color: var(--accent-emerald) !important;
}

.premium-theme .gradient-green,
.premium-theme .gradient-mint,
.premium-theme .gradient-grass {
    background-image: linear-gradient(135deg, #00ff88, #00cc6a) !important;
}

/* Blues/Teals -> Cyan */
.premium-theme .bg-blue-dark,
.premium-theme .bg-blue-light,
.premium-theme .bg-teal-dark,
.premium-theme .bg-teal-light,
.premium-theme .bg-aqua-dark,
.premium-theme .bg-aqua-light {
    background-color: var(--accent-cyan) !important;
    color: #000 !important;
}

.premium-theme .color-blue-dark,
.premium-theme .color-blue-light,
.premium-theme .color-teal-dark,
.premium-theme .color-teal-light,
.premium-theme .color-aqua-dark,
.premium-theme .color-aqua-light {
    color: var(--accent-cyan) !important;
}

.premium-theme .gradient-blue,
.premium-theme .gradient-teal,
.premium-theme .gradient-aqua {
    background-image: linear-gradient(135deg, #00f2ff, #00c3ff) !important;
}

/* Reds/Oranges/Yellows -> Retain but Modernize */
.premium-theme .bg-red-dark,
.premium-theme .bg-red-light {
    background-color: #ff5f5f !important;
    color: #fff !important;
}

.premium-theme .color-red-dark,
.premium-theme .color-red-light {
    color: #ff5f5f !important;
}

.premium-theme .gradient-red {
    background-image: linear-gradient(135deg, #ff5f5f, #ff3b3b) !important;
}

.premium-theme .bg-orange-dark,
.premium-theme .bg-orange-light {
    background-color: #ff9f43 !important;
    color: #fff !important;
}

.premium-theme .color-orange-dark,
.premium-theme .color-orange-light {
    color: #ff9f43 !important;
}

.premium-theme .gradient-orange {
    background-image: linear-gradient(135deg, #ff9f43, #ff7f00) !important;
}

.premium-theme .bg-yellow-dark,
.premium-theme .bg-yellow-light {
    background-color: #feca57 !important;
    color: #000 !important;
}

.premium-theme .color-yellow-dark,
.premium-theme .color-yellow-light {
    color: #feca57 !important;
}

.premium-theme .gradient-yellow {
    background-image: linear-gradient(135deg, #feca57, #ff9f43) !important;
}

/* --- Component Modernization --- */

/* Forms (Glass Inputs) */
.premium-theme .form-custom,
.premium-theme .form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px);
}

.premium-theme .form-control:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2) !important;
}

.premium-theme .form-label label {
    color: var(--accent-cyan) !important;
    background-color: transparent !important;
    /* Fix AppKit label bg */
    font-weight: 600 !important;
    font-size: 11px !important;
    top: -10px !important;
}

/* Icons */
.premium-theme .icon {
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* Dropdowns & Modals */
.premium-theme .menu-box-modal,
.premium-theme .menu-box-left,
.premium-theme .menu-box-right,
.premium-theme .menu-box-top,
.premium-theme .menu-box-modal,
.premium-theme .menu-box-left,
.premium-theme .menu-box-right,
.premium-theme .menu-box-top,
.premium-theme .menu-box-bottom {
    background-color: var(--bg-overlay) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
}

.premium-theme .menu-title h1 {
    color: var(--text-primary) !important;
}

.premium-theme .close-menu {
    color: var(--text-muted) !important;
}

/* Tables */
.premium-theme .table {
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

.premium-theme .table th {
    border-bottom: 2px solid var(--glass-border) !important;
    color: var(--accent-cyan) !important;
    font-weight: 700;
}

.premium-theme .table td {
    border-top: 1px solid var(--glass-border) !important;
}

/* Tabs */
.premium-theme .tab-controls {
    background-color: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px);
}

.premium-theme .tab-controls a {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}

.premium-theme .tab-controls a.tab-active {
    color: #000 !important;
    border-radius: 8px !important;
}

/* --- Visibility Fixes --- */

/* Fix Dark Mode Dropdown Options */
.theme-dark select option {
    background-color: #080b12 !important;
    color: #f0f5ff !important;
}

/* Fix Light Mode Icons */
body.theme-light .header-icon i,
body.theme-light .header-icon span {
    color: var(--text-primary) !important;
}

/* Ensure active state or specific highlights override the base color if needed */
body.theme-light .header-icon.active-nav i {
    color: var(--accent-cyan) !important;
}

/* Generally ensure icons in content follow text color in light mode unless specified */
body.theme-light .content i:not(.fa-check):not(.fa-times):not(.fa-star):not(.bg-highlight):not(.color-highlight) {
    color: var(--text-primary);
}

/* Specifically fix footer if strictly white */
body.theme-light .footer-bar-6 a i {
    color: var(--text-muted) !important;
}

/* Quick Add FAB (Thumb-Zone Optimized) */
.fab-quick-add {
    position: fixed;
    bottom: 85px;
    /* Above footer bar */
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-emerald));
    color: #000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 10px 25px rgba(0, 242, 255, 0.4);
    z-index: 99;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.fab-quick-add:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 15px 35px rgba(0, 242, 255, 0.6);
}

.fab-quick-add:active {
    transform: scale(0.9) !important;
}

/* Page Transition Reveal */
.page-content {
    animation: fadeInReveal 0.6s ease-out;
}

@keyframes fadeInReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Skeleton Loader (Shimmer Placeholder) */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: var(--glass-bg);
    border-radius: 12px;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.05),
            transparent);
    animation: shimmer 1.5s infinite;
}

body.theme-light .skeleton::after {
    background: linear-gradient(90deg,
            transparent,
            rgba(0, 0, 0, 0.03),
            transparent);
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Skeleton Utilities */
.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.skeleton-title {
    height: 1.5rem;
    margin-bottom: 1rem;
    width: 60%;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.skeleton-card {
    height: 150px;
    width: 100%;
}


/* Sidebar Position Correction */
.menu.glass-card {
    position: fixed !important;
    overflow-y: auto !important;
}

.menu {
    overflow-y: auto !important;
    max-height: 100vh !important;
    -webkit-overflow-scrolling: touch;
}


/* Global Menu Fix to Prevent Document Flow Leaks */
.menu {
    position: fixed !important;
}
/* Force bottom padding to prevent footer overlap, overcoming Bootstrap p-0 */
.premium-theme .page-content {
    padding-bottom: 160px !important;
}


/* Popup & Modal Scroll Fixes */
.menu {
    max-height: 100vh !important;
    max-height: calc(100% - env(safe-area-inset-top) - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.menu.menu-box-bottom {
    max-height: 90vh !important;
}

/* Ensure content inside menus is fully visible and scrollable */
.menu .content {
    padding-bottom: 30px !important;
}

/* Neutralize glass-card scroll suppression for menus */
.menu.glass-card {
    overflow-y: auto !important;
}