@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Light mode variables (default) */
:root {
    --bg-color: #f8f9fa; /* Light Gray */
    --card-bg-color: #ffffff; /* White */
    --text-color: #1f2937; /* Gray 800 */
    --text-muted-color: #6b7280; /* Gray 500 */
    --border-color: #e5e7eb; /* Gray 200 */
    --input-bg-color: #ffffff;
    --input-border-color: #d1d5db; /* Gray 300 */
    --link-color: #4f46e5; /* Indigo 600 */
    --primary-color: #6366F1; /* Indigo 500 */
    --shadow-color: rgba(0, 0, 0, 0.05);
}

/* Dark mode variables */
.dark {
    --bg-color: #0f172a; /* Slate 900 */
    --card-bg-color: #1e293b; /* Slate 800 */
    --text-color: #f8fafc; /* Slate 50 */
    --text-muted-color: #94a3b8; /* Slate 400 */
    --border-color: #334155; /* Slate 700 */
    --input-bg-color: #334155; /* Slate 700 */
    --input-border-color: #475569; /* Slate 600 */
    --link-color: #818cf8; /* Indigo 400 */
    --primary-color: #818cf8; /* Indigo 400 */
    --shadow-color: rgba(0, 0, 0, 0.2);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

/* Apply card styling */
.bg-white { background-color: var(--card-bg-color); }
.dark .dark\:bg-slate-800 { background-color: var(--card-bg-color); }
.shadow-md { box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); }
.rounded-xl { border-radius: 0.75rem; } /* lg */

/* Input styling */
input, select {
    transition: all 0.2s ease;
    background-color: var(--input-bg-color);
    border-color: var(--input-border-color);
    color: var(--text-color);
}
input::placeholder { color: var(--text-muted-color); opacity: 0.7;}

input:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5); /* Keep focus ring consistent */
    border-color: var(--primary-color);
}

/* NEW: Enhance earnings input readability in dark mode */
.dark .earnings-input-bright {
    color: #cbd5e1; /* Slate 300 - Brighter than default dark text */
}


/* Table styling */
.table-row:hover { background-color: rgba(238, 242, 255, 0.1); } /* Adjusted for dark mode */
.dark .table-row:hover { background-color: rgba(51, 65, 85, 0.5); } /* Slate 700 */
.border-b { border-bottom-color: var(--border-color); }
.dark .dark\:border-slate-700 { border-color: var(--border-color); }
thead { background-color: var(--bg-color); }
.dark thead { background-color: #334155; } /* Slate 700 */

/* Custom scrollbar */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a5b4fc; }
.dark ::-webkit-scrollbar-track { background: #1e293b; } /* Slate 800 */
.dark ::-webkit-scrollbar-thumb { background: #475569; } /* Slate 600 */
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Slate 500 */


/* Animation for new rows */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.new-row { animation: fadeIn 0.3s ease-out forwards; }

/* Calculated field styling */
.calculated-field {
    display: block;
    width: 100%;
    padding: 0.25rem 0.5rem; /* Equivalent to py-1 px-2 */
    font-weight: 500;
    color: var(--text-muted-color);
}
.dark .calculated-field { color: var(--text-muted-color); }

/* Alert styling for budget percentage */
.budget-warning {
    color: #f59e0b; /* Amber 500 */
    font-weight: 600;
}
.dark .budget-warning { color: #facc15; } /* Amber 400 */

.budget-exceeded {
    color: #ef4444; /* Red 500 */
    font-weight: 700;
}
.dark .budget-exceeded { color: #f87171; } /* Red 400 */


/* Progress bar for savings goals */
.progress-bar-container {
    height: 10px;
    background-color: var(--border-color);
    border-radius: 5px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.3s ease-in-out;
    border-radius: 5px;
}

/* Style for number inputs to remove default arrows */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}