:root {
    --font-sans: 'Inter', sans-serif;
    --bg-primary: #121212;
    --bg-secondary: #1E1E1E;
    --bg-tertiary: #2a2a2a;
    --border-color: #383838;
    --text-primary: #F9FAFB;
    --text-secondary: #9CA3AF;
    --accent-indigo: #4F46E5;
    --accent-indigo-hover: #4338CA;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --glow-color-indigo: rgba(79, 70, 229, 0.4);
}
html {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}
body { background-color: var(--bg-primary) !important; color: var(--text-primary); }
.surface {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
}
header.surface {
    border-radius: 0;
}
.form-input, .form-select {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    width: 100%;
    transition: all 0.2s ease-in-out;
}
.form-input::placeholder { color: var(--text-secondary); }
.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--accent-indigo);
    box-shadow: 0 0 0 3px var(--glow-color-indigo);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
    background-color: var(--accent-indigo);
    color: var(--text-primary);
    box-shadow: 0 4px 14px 0 var(--glow-color-indigo);
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--accent-indigo-hover);
    box-shadow: 0 6px 20px 0 var(--glow-color-indigo);
}
.btn-danger {
    background-color: #EF4444;
    color: var(--text-primary);
}
.btn-danger:hover:not(:disabled) {
    background-color: #DC2626;
}
.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-secondary:hover:not(:disabled) { background-color: var(--border-color); }
.tab-btn {
    border-bottom: 2px solid transparent;
    padding: 0 0.25rem 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--accent-indigo); border-bottom-color: var(--accent-indigo); }

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
.accordion-content.open {
    max-height: 5000px; /* A large enough value to show all content */
}
.accordion-icon {
    transition: transform 0.3s ease-in-out;
}
.accordion-icon.open {
    transform: rotate(180deg);
}

/* --- Styles for Horizontally Scrollable Date Picker --- */
.date-picker-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* for smooth scrolling on iOS */
    scrollbar-width: thin; /* for Firefox */
    scrollbar-color: var(--border-color) var(--bg-tertiary);
}
.date-picker-wrapper::-webkit-scrollbar {
    height: 6px;
}
.date-picker-wrapper::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}
.date-picker-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
    border: 1px solid var(--bg-tertiary);
}
.date-picker-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #6B7280;
}

#settings-modal {
    transition: opacity 0.2s ease-in-out;
}
#settings-modal > div {
    transition: transform 0.2s ease-in-out;
}
#settings-modal.hidden {
    opacity: 0;
    pointer-events: none;
}
#settings-modal.hidden > div {
    transform: translateY(100%);
}
@media (min-width: 640px) {
    #settings-modal.hidden > div {
        transform: scale(0.95);
    }
}

/* --- Loading Spinner Animation --- */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid var(--border-color);
    border-radius: 50%;
    border-top-color: var(--accent-indigo);
    animation: spin 1s ease-in-out infinite;
}