/* MonoFinance - Metric Flow (72c801b1a27aef0e177c4bef1082eb7b.jpg) Stylesheet */

/* Font Family mappings */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0A0A0C;
    color: #ffffff;
}

.font-outfit {
    font-family: 'Outfit', sans-serif;
}

/* Custom Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #202024;
    border-radius: 10px;
}

/* SPA Screen display handling */
.dashboard-view {
    display: none !important;
}
.dashboard-view.active {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    animation: viewFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Sidebar Nav Button Styles (Metric Flow Theme) */
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 12px;
    color: #8E8E93; /* text-brand-textSecondary */
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.nav-item span.material-symbols-outlined {
    color: #8E8E93;
    transition: color 0.15s ease;
}

.nav-item:hover {
    color: #ffffff;
    background-color: #161619; /* bg-[#161619] */
}

.nav-item:hover span.material-symbols-outlined {
    color: #ffffff;
}

.nav-item.active {
    color: #FF5A36; /* Orange-Red accent from Metric Flow */
    background-color: #2E1B18; /* Accent Dim background */
    font-weight: 600;
    transform: scale(0.97);
}

.nav-item.active span.material-symbols-outlined {
    color: #FF5A36;
    font-variation-settings: 'FILL' 1;
}

/* SVG Chart styles */
svg line {
    stroke: #202024;
    stroke-width: 1;
    stroke-dasharray: 4, 4;
}

.chart-point {
    fill: #111113;
    stroke-width: 2.5;
    cursor: pointer;
    transition: r 0.2s ease, stroke-width 0.2s ease;
}

.chart-point.income-point {
    stroke: #FF5A36; /* Orange-Red income stroke */
}

.chart-point.expense-point {
    stroke: #8B5CF6; /* Purple expense stroke */
}

.chart-point:hover {
    r: 6.5;
    stroke-width: 3.5;
}

/* Modals System Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    transform: scale(0.95);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.active .modal {
    transform: scale(1);
}

/* Toast Notifications styling */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.toast {
    background-color: #161619;
    color: #ffffff;
    border: 1px solid #202024;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast.toast-success {
    border-left: 3px solid #FF5A36;
}

.toast.toast-recurring {
    border-left: 3px solid #8B5CF6;
}

.toast.toast-delete {
    border-left: 3px solid #EF4444;
}

.toast.toast-info {
    border-left: 3px solid #8B5CF6;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* Sun and Moon icon display selectors */
html.dark .sun-icon {
    display: inline-block;
}
html.dark .moon-icon {
    display: none;
}
html:not(.dark) .sun-icon {
    display: none;
}
html:not(.dark) .moon-icon {
    display: inline-block;
}

/* Light Theme Overrides (Metric Flow theme translation) */
html:not(.dark) body {
    background-color: #F6F6F8 !important;
    color: #0F0F11 !important;
}

html:not(.dark) aside,
html:not(.dark) header,
html:not(.dark) .bg-\[\#111113\],
html:not(.dark) .bg-brand-sidebar {
    background-color: #ffffff !important;
    border-color: #E2E2E6 !important;
}

html:not(.dark) header {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

html:not(.dark) .border-\[\#202024\],
html:not(.dark) .divide-\[\#202024\]\/30 > * + * {
    border-color: #E2E2E6 !important;
}

html:not(.dark) .text-white,
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) td {
    color: #0F0F11 !important;
}

html:not(.dark) .text-brand-textSecondary {
    color: #6E6E73 !important;
}

html:not(.dark) .nav-item {
    color: #6E6E73 !important;
}

html:not(.dark) .nav-item span.material-symbols-outlined {
    color: #6E6E73 !important;
}

html:not(.dark) .nav-item:hover {
    background-color: #F1F1F5 !important;
    color: #0F0F11 !important;
}

html:not(.dark) .nav-item:hover span.material-symbols-outlined {
    color: #0F0F11 !important;
}

html:not(.dark) .nav-item.active {
    background-color: #FFEFEA !important;
    color: #FF5A36 !important;
}

html:not(.dark) .nav-item.active span.material-symbols-outlined {
    color: #FF5A36 !important;
}

html:not(.dark) input {
    background-color: #ffffff !important;
    border-color: #E2E2E6 !important;
    color: #0F0F11 !important;
}

html:not(.dark) input:focus {
    border-color: #FF5A36 !important;
    --tw-ring-color: #FF5A36 !important;
}

html:not(.dark) .bg-\[\#161619\],
html:not(.dark) .hover\:bg-\[\#161619\]:hover,
html:not(.dark) tr.hover\:bg-\[\#1C1C1E\]:hover,
html:not(.dark) tr.hover\:bg-\[\#161619\]:hover,
html:not(.dark) .bg-\[\#161619\]\/90 {
    background-color: #ECECEF !important;
}

html:not(.dark) .filter-tabs {
    background-color: #F6F6F8 !important;
    border-color: #E2E2E6 !important;
}

html:not(.dark) .filter-tab.active {
    background-color: #E2E2E6 !important;
    color: #0F0F11 !important;
}

html:not(.dark) .toast {
    background-color: #0F0F11 !important;
    color: #ffffff !important;
    border-color: #E2E2E6 !important;
}

html:not(.dark) .chart-point {
    fill: #ffffff !important;
}

html:not(.dark) .chart-point.income-point {
    stroke: #FF5A36 !important;
}

html:not(.dark) .chart-point.expense-point {
    stroke: #8B5CF6 !important;
}

html:not(.dark) #finance-chart path[stroke="#FF5A36"],
html:not(.dark) #dashboard-mini-chart path[stroke="#FF5A36"] {
    stroke: #FF5A36 !important;
}

html:not(.dark) #finance-chart path[stroke="#8B5CF6"],
html:not(.dark) #dashboard-mini-chart path[stroke="#8B5CF6"] {
    stroke: #8B5CF6 !important;
}

html:not(.dark) svg line {
    stroke: #E2E2E6 !important;
}

html:not(.dark) .bg-black {
    background-color: #F6F6F8 !important;
}

html:not(.dark) .bg-brand-accentDim {
    background-color: #FFEFEA !important;
}

html:not(.dark) .bg-brand-purpleDim {
    background-color: #F3E8FF !important;
}

html:not(.dark) .bg-\[\#2E1619\] {
    background-color: #FEE2E2 !important;
}

/* Light Theme Overrides for Daily Details Modal */
html:not(.dark) #daily-details-modal .bg-black\/40 {
    background-color: #F6F6F8 !important;
    border-color: #E2E2E6 !important;
}
html:not(.dark) #daily-details-modal .border-\[\#202024\],
html:not(.dark) #daily-details-modal .border-\[\#202024\]\/50 {
    border-color: #E2E2E6 !important;
}

/* Hide default browser spinner buttons (arrows) for numeric inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Mobile Bottom Navigation Styles */
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 12px;
    color: #8E8E93;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.mobile-nav-item span.material-symbols-outlined {
    color: #8E8E93;
    transition: color 0.15s ease;
}

.mobile-nav-item:hover {
    color: #ffffff;
}

.mobile-nav-item.active {
    color: #FF5A36;
    font-weight: 600;
    transform: scale(0.95);
}

.mobile-nav-item.active span.material-symbols-outlined {
    color: #FF5A36;
    font-variation-settings: 'FILL' 1;
}

/* Light Theme Overrides for Mobile Elements */
html:not(.dark) header.md\:hidden,
html:not(.dark) nav.md\:hidden {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #E2E2E6 !important;
}

html:not(.dark) .mobile-nav-item {
    color: #6E6E73 !important;
}

html:not(.dark) .mobile-nav-item span.material-symbols-outlined {
    color: #6E6E73 !important;
}

html:not(.dark) .mobile-nav-item:hover {
    color: #0F0F11 !important;
}

html:not(.dark) .mobile-nav-item.active {
    background-color: transparent !important;
    color: #FF5A36 !important;
}

html:not(.dark) .mobile-nav-item.active span.material-symbols-outlined {
    color: #FF5A36 !important;
}

/* Mobile responsive fixes for iPhone 13 & POCO X6 (under 640px) */
@media (max-width: 640px) {
    body {
        padding: 12px !important;
    }
    
    .rounded-3xl {
        border-radius: 20px !important;
    }
    
    .p-6 {
        padding: 16px !important;
    }
    
    .p-8 {
        padding: 20px !important;
    }
    
    .text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    
    .text-4xl {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }
}

/* Light Theme Readability & Styling Enhancements */
html:not(.dark) button.bg-brand-accent,
html:not(.dark) button.bg-brand-purple,
html:not(.dark) button[type="submit"],
html:not(.dark) #auth-submit-btn {
    color: #ffffff !important;
}

html:not(.dark) .opacity-70 {
    opacity: 1 !important;
}

html:not(.dark) #modal-btn-logout {
    background-color: #FEE2E2 !important;
    border-color: #FCA5A5 !important;
    color: #EF4444 !important;
}

html:not(.dark) #modal-btn-import-local {
    background-color: #F3E8FF !important;
    border-color: #D8B4FE !important;
    color: #8B5CF6 !important;
}

html:not(.dark) .progress-track,
html:not(.dark) .bg-\[\#161619\]\.h-1\.5,
html:not(.dark) .bg-\[\#202024\] {
    background-color: #E2E2E6 !important;
}

/* Mobile responsive list items light theme styling */
html:not(.dark) #mobile-history-list > div,
html:not(.dark) #mobile-savings-list > div,
html:not(.dark) #mobile-income-list > div,
html:not(.dark) #mobile-expenses-list > div {
    background-color: #ffffff !important;
    border-color: #E2E2E6 !important;
}

html:not(.dark) #mobile-history-list > div:hover,
html:not(.dark) #mobile-savings-list > div:hover,
html:not(.dark) #mobile-income-list > div:hover,
html:not(.dark) #mobile-expenses-list > div:hover {
    border-color: #8B5CF6 !important;
}

/* Custom Savings Icon Styles */
.bg-brand-savingsDim {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60A5FA !important;
}

html:not(.dark) .bg-brand-savingsDim {
    background-color: #EFF6FF !important;
    color: #2563EB !important;
}

/* Voice Microphone Animation Styles */
@keyframes micPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 90, 54, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 18px rgba(255, 90, 54, 0);
        transform: scale(1.08);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 90, 54, 0);
        transform: scale(1);
    }
}

.mic-recording {
    animation: micPulse 1.5s infinite !important;
    background-color: #EF4444 !important;
    color: #ffffff !important;
}