/* Theme System CSS */

/* Dark Theme (Default) */
:root[data-theme="dark"], :root {
    --bg-primary: #1a1f2e;
    --bg-secondary: #242938;
    --card-bg: #2d3348;
    --text-primary: #e8eaed;
    --text-secondary: #9ca3af;
    --border-color: #3f4556;
    --sidebar-bg: #242938;
    --sidebar-text: #cbd5e0;
    --sidebar-hover: #3f4556;
    --btn-primary: #5e72e4;  /* Soft blue instead of bright green */
    --btn-secondary: #6c757d;  /* Muted gray */
    --btn-danger: #dc3545;  /* Soft red */
    --btn-success: #28a745;  /* Soft green */
    --success-bg: #1c3a2e;
    --success-text: #6ee7b7;
    --error-bg: #3d1f1f;
    --error-text: #fca5a5;
    --table-header: #3f4556;
    --table-hover: #353b50;
    --input-bg: #353b50;
    --input-border: #4a5065;
    --link-color: #8b9dc3;
}

/* Light Theme */
:root[data-theme="light"] {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --card-bg: #ffffff;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --sidebar-bg: #ffffff;
    --sidebar-text: #495057;
    --sidebar-hover: #f1f3f5;
    --btn-primary: #4263eb;  /* Soft blue */
    --btn-secondary: #868e96;  /* Muted gray */
    --btn-danger: #f03e3e;  /* Soft red */
    --btn-success: #37b24d;  /* Soft green */
    --success-bg: #ebfbee;
    --success-text: #2b8a3e;
    --error-bg: #fff5f5;
    --error-text: #c92a2a;
    --table-header: #f1f3f5;
    --table-hover: #f8f9fa;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --link-color: #4263eb;
}

/* Custom Theme */
:root[data-theme="custom"] {
    --bg-primary: var(--custom-bg, #1a202c);
    --bg-secondary: var(--custom-secondary, #2d3748);
    --card-bg: var(--custom-primary, #374151);
    --text-primary: var(--custom-text, #e2e8f0);
    --text-secondary: var(--custom-text, #a0aec0);
    --border-color: var(--custom-primary, #4a5568);
    --sidebar-bg: var(--custom-secondary, #2d3748);
    --sidebar-text: var(--custom-text, #cbd5e0);
    --sidebar-hover: var(--custom-primary, #4a5568);
    --btn-primary: var(--custom-btn-primary, #5e72e4);
    --btn-secondary: var(--custom-btn-secondary, #6c757d);
    --btn-danger: var(--custom-btn-danger, #dc3545);
    --btn-success: var(--custom-btn-success, #28a745);
    --btn-warning: var(--custom-btn-warning, #ffc107);
    --btn-info: var(--custom-btn-info, #17a2b8);
    --btn-table: var(--custom-btn-table, #6c757d);
    --btn-toolbar: var(--custom-btn-toolbar, #5a6268);
    --btn-nav: var(--custom-btn-nav, #4a5568);
    --btn-action: var(--custom-btn-action, #718096);
    --success-bg: #14532d;
    --success-text: #86efac;
    --error-bg: #7f1d1d;
    --error-text: #fca5a5;
    --table-header: var(--custom-primary, #4a5568);
    --table-hover: var(--custom-primary, #4a5568);
    --input-bg: var(--custom-primary, #4a5568);
    --input-border: var(--custom-secondary, #5a6678);
    --link-color: var(--custom-text, #8b9dc3);
}

/* Apply theme to body */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

/* Update sidebar styles */
.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.sidebar-header {
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
}

.nav-item {
    color: var(--sidebar-text);
}

.nav-item:hover, .nav-item.active {
    background: var(--sidebar-hover);
}

/* Update card/container styles */
.card, .form-container, .manage-container, .settings-container {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* Update table styles */
.financial-table {
    background: var(--card-bg);
}

.financial-table th {
    background: var(--table-header);
    color: var(--text-primary);
}

.financial-table td {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.financial-table tr:hover {
    background: var(--table-hover);
}

/* Update form styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--btn-primary);
    outline: none;
}

/* Update button styles */
.btn {
    transition: all 0.3s;
}

.btn-primary {
    background: var(--btn-primary);
    color: white;
}

.btn-secondary {
    background: var(--btn-secondary);
    color: white;
}

/* Checkbox styles - Soft green when checked */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #37b24d;
}

input[type="checkbox"]:checked {
    background-color: #37b24d;
    border-color: #37b24d;
}

/* Paid row styles - Soft green background */
.row-paid {
    background: rgba(55, 178, 77, 0.15) !important;
}

.row-paid:hover {
    background: rgba(55, 178, 77, 0.25) !important;
}

.row-paid td {
    background: transparent !important;
}

/* Main content background */
.main-content {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Container background */
.container {
    background: var(--bg-primary);
}

/* Table container */
.table-container {
    background: var(--card-bg);
}

/* Alert styles */
.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-text);
}

.alert-error {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-text);
}

/* Menu toggle button */
.menu-toggle {
    background: var(--btn-secondary);
    color: white;
    border: none;
}

/* Sheet tabs */
.sheet-tab {
    background: var(--table-header);
    color: var(--text-primary);
}

.sheet-tab:hover {
    background: var(--sidebar-hover);
}

.sheet-tab.active {
    background: var(--btn-secondary);
}

/* Override column colors to be more subtle */
.financial-table td:nth-child(odd) {
    background-color: rgba(107, 114, 128, 0.1);
}

.financial-table td:nth-child(even) {
    background-color: rgba(156, 163, 175, 0.1);
}

.financial-table th:nth-child(odd) {
    background-color: rgba(75, 85, 99, 0.8);
}

.financial-table th:nth-child(even) {
    background-color: rgba(107, 114, 128, 0.8);
}

/* Light theme specific overrides */
:root[data-theme="light"] .financial-table td:nth-child(odd) {
    background-color: rgba(226, 232, 240, 0.5);
}

:root[data-theme="light"] .financial-table td:nth-child(even) {
    background-color: rgba(247, 250, 252, 0.5);
}

:root[data-theme="light"] .financial-table th {
    background-color: #cbd5e0;
    color: #2d3748;
}

:root[data-theme="light"] .row-paid {
    background: rgba(55, 178, 77, 0.1) !important;
}

:root[data-theme="light"] .row-paid:hover {
    background: rgba(55, 178, 77, 0.2) !important;
}

/* Soft button styles - no strident colors */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 8px 16px;
    border: none;
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Remove harsh inline button colors */
a.btn[style*="background"] {
    opacity: 0.9;
}

a.btn[style*="background"]:hover {
    opacity: 1;
}

/* Additional button styles for custom theme */
.btn-warning {
    background: var(--btn-warning, #ffc107);
    color: white;
}

.btn-info {
    background: var(--btn-info, #17a2b8);
    color: white;
}

.btn-danger {
    background: var(--btn-danger, #dc3545);
    color: white;
}

/* Table action buttons */
.table-actions .btn {
    background: var(--btn-table, var(--btn-secondary)) !important;
}

/* Toolbar buttons */
.toolbar .btn {
    background: var(--btn-toolbar, var(--btn-secondary));
}

/* Navigation buttons */
.nav-item {
    background: transparent;
    transition: background 0.2s;
}

.nav-item:hover {
    background: var(--btn-nav, var(--sidebar-hover));
}

/* Action buttons (Add page, Logout) */
.nav-action {
    background: var(--btn-action, var(--sidebar-hover)) !important;
    opacity: 0.7;
}

.nav-logout {
    background: var(--btn-action, var(--sidebar-hover)) !important;
    opacity: 0.7;
}

.nav-action:hover, .nav-logout:hover {
    opacity: 0.9;
}