/* ==========================================================================
   WEALTHFLOW - STITCH LAYOUT CSS HELPER
   ========================================================================== */

/* --- Theme Color Palettes (CSS Variables) --- */
:root {
  --color-primary: #000666;
  --color-primary-container: #1a237e;
  --color-on-primary-container: #8690ee;
  --color-secondary: #1b6d24;
  --color-tertiary: #3a0900;
  --color-tertiary-container: #5f1400;
  --color-on-tertiary-container: #ff663b;
}

/* Emerald Forest Palette */
html[data-theme-palette="emerald"] {
  --color-primary: #004d40;
  --color-primary-container: #00695c;
  --color-on-primary-container: #a7ffeb;
  --color-secondary: #2e7d32;
  --color-tertiary: #c62828;
  --color-tertiary-container: #d32f2f;
  --color-on-tertiary-container: #ff8a80;
}

/* Ocean Breeze Palette */
html[data-theme-palette="ocean"] {
  --color-primary: #0d47a1;
  --color-primary-container: #1565c0;
  --color-on-primary-container: #82b1ff;
  --color-secondary: #00c853;
  --color-tertiary: #ff3d00;
  --color-tertiary-container: #ff5722;
  --color-on-tertiary-container: #ff9e80;
}

/* Sunset Rose Palette */
html[data-theme-palette="sunset"] {
  --color-primary: #4a148c;
  --color-primary-container: #7b1fa2;
  --color-on-primary-container: #ea80fc;
  --color-secondary: #00e676;
  --color-tertiary: #c2185b;
  --color-tertiary-container: #e91e63;
  --color-on-tertiary-container: #ff80ab;
}

/* Obsidian Gold Palette */
html[data-theme-palette="gold"] {
  --color-primary: #ffb300;
  --color-primary-container: #ff8f00;
  --color-on-primary-container: #ffe082;
  --color-secondary: #00e676;
  --color-tertiary: #ff3d00;
  --color-tertiary-container: #ff5722;
  --color-on-tertiary-container: #ff9e80;
}

/* --- Base & Material Symbols Configuration --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #f7f9fc;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Dark Theme Support --- */
html.dark body {
    background-color: #121318;
    color: #eff1f4;
}

/* --- Navigation Button Active State (Desktop) --- */
.nav-btn {
    border-left: 4px solid transparent;
}

.nav-btn.active {
    border-left-color: var(--color-primary-container);
}

html.dark .nav-btn.active {
    border-left-color: var(--color-on-primary-container);
    background-color: rgba(189, 194, 255, 0.12) !important;
    color: var(--color-on-primary-container) !important;
}

/* --- Navigation Button Active State (Mobile) --- */
.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 4px 16px;
    transition: all 0.2s ease;
}

.mobile-nav-btn.active-mobile {
    background-color: #a0f399;
    color: #002204;
}

html.dark .mobile-nav-btn.active-mobile {
    background-color: rgba(160, 243, 153, 0.25);
    color: #a3f69c;
}

/* --- Card Lift Effects --- */
.wallet-card, .bg-white {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.wallet-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 12px 24px -6px rgba(26, 35, 126, 0.12);
}

html.dark .wallet-card,
html.dark .bg-white {
    background-color: #1c1d24 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .bg-surface-container-lowest,
html.dark .bg-surface-container-low,
html.dark .bg-surface-container {
    background-color: #16171d !important;
}

html.dark .border-outline-variant,
html.dark .border-outline-variant\/30,
html.dark .divide-outline-variant\/30 > * {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .text-on-surface,
html.dark .text-on-background {
    color: #eff1f4 !important;
}

html.dark .text-on-surface-variant {
    color: #c6c5d4 !important;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c6c5d4;
    border-radius: 8px;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #454652;
}

::-webkit-scrollbar-thumb:hover {
    background: #a3a3c2;
}

/* --- Modals and Overlays --- */
.modal-overlay {
    background-color: rgba(9, 13, 22, 0.6);
    backdrop-filter: blur(4px);
    transition: opacity 0.25s ease;
}

.modal-overlay.hidden {
    display: none !important;
}

.modal-overlay:not(.hidden) {
    display: flex !important;
}

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

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

/* --- Dynamic Badge Statuses --- */
.status-chip-active {
    background-color: rgba(27, 109, 36, 0.1);
    color: #1b6d24;
}

.status-chip-low {
    background-color: rgba(186, 26, 26, 0.1);
    color: #ba1a1a;
}

/* --- Hide class helper --- */
.hidden-view {
    display: none !important;
}