:root {
    --color-bg-body: #f8f9fa;
    --color-text-body: #212529;
    --color-bg-card: #ffffff;
    --color-border-default: #dee2e6; /* For cards, modals, list-group-items */
    --color-text-table: #212529;
    --color-bg-input: #ffffff;
    --color-text-input: #495057;
    --color-border-input: #ced4da;
    
    /* Bootstrap default outline secondary for light theme */
    --color-btn-outline-secondary-text: #6c757d;
    --color-btn-outline-secondary-border: #6c757d;
    --color-btn-outline-secondary-hover-bg: #6c757d;
    --color-btn-outline-secondary-hover-text: #ffffff;

    /* Bootstrap default outline primary for light theme */
    --color-btn-outline-primary-text: #0d6efd;
    --color-btn-outline-primary-border: #0d6efd;
    --color-btn-outline-primary-hover-bg: #0d6efd;
    --color-btn-outline-primary-hover-text: #ffffff;

    --color-btn-close-filter: none;
    --color-bg-crossed-out: #e9ecef; /* Light theme crossed-out background */
}

[data-theme="dark"] {
    --color-bg-body: #121212;
    --color-text-body: #e0e0e0;
    --color-bg-card: #1e1e1e;
    --color-border-default: #333333;
    --color-text-table: #e0e0e0;
    --color-bg-input: #2c2c2c;
    --color-text-input: #e0e0e0;
    --color-border-input: #444444;

    /* Adjusted for dark mode based on existing .dark-mode .btn-outline-secondary */
    --color-btn-outline-secondary-text: #e0e0e0;
    --color-btn-outline-secondary-border: #888;
    --color-btn-outline-secondary-hover-bg: #444;
    --color-btn-outline-secondary-hover-text: #fff;
    
    /* Adjusted for dark mode based on existing .dark-mode .btn-outline-primary */
    --color-btn-outline-primary-text: #90caf9;
    --color-btn-outline-primary-border: #90caf9;
    --color-btn-outline-primary-hover-bg: #1976d2;
    --color-btn-outline-primary-hover-text: #fff;
    
    --color-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
    --color-bg-crossed-out: #3a3a3a; /* Dark theme crossed-out background */
}

body {
    background-color: var(--color-bg-body);
    color: var(--color-text-body);
}

.card, .modal-content, .list-group-item {
    background-color: var(--color-bg-card);
    border-color: var(--color-border-default);
    /* Text color for these elements will be inherited from body or set by BS default */
    color: var(--color-text-body);
}

.modal-content { /* Modal content text should also follow body text */
    color: var(--color-text-body);
}

.table {
    color: var(--color-text-table);
    background-color: var(--color-bg-card);
    border-color: var(--color-border-default);
}

.table-bordered {
    border-color: var(--color-border-default) !important;
}

.table-bordered th,
.table-bordered td {
    border-color: var(--color-border-default) !important;
}

.table tr, .table th, .table td {
    background-color: var(--color-bg-card);
    color: var(--color-text-body);
}

[data-theme="dark"] .table tr, [data-theme="dark"] .table th, [data-theme="dark"] .table td {
    background-color: var(--color-bg-card) !important;
    color: var(--color-text-body) !important;
}

.table-dark {
    background-color: var(--color-bg-card) !important;
    color: var(--color-text-body) !important;
}

.table-secondary {
    background-color: var(--color-bg-input) !important;
    color: var(--color-text-body) !important;
}

.form-control, .form-select {
    background-color: var(--color-bg-input);
    color: var(--color-text-input);
    border-color: var(--color-border-input);
}

.form-control:focus, .form-select:focus {
    background-color: var(--color-bg-input);
    color: var(--color-text-input);
    border-color: var(--color-border-default);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-outline-primary {
    color: var(--color-btn-outline-primary-text);
    border-color: var(--color-btn-outline-primary-border);
}
.btn-outline-primary:hover {
    background-color: var(--color-btn-outline-primary-hover-bg);
    color: var(--color-btn-outline-primary-hover-text);
}

.btn-outline-secondary {
    color: var(--color-btn-outline-secondary-text);
    border-color: var(--color-btn-outline-secondary-border);
}
.btn-outline-secondary:hover {
    background-color: var(--color-btn-outline-secondary-hover-bg);
    color: var(--color-btn-outline-secondary-hover-text);
}

.btn-close {
    filter: var(--color-btn-close-filter);
/* Specific dark mode overrides for elements not covered by simple variable swaps,
   or where Bootstrap's default variables might interact.
   Most of these should be handled by the variable changes above.
   The .dark-mode .table-dark and .table-secondary might need to be kept if BS styles for these are too strong.
*/
}
.dark-mode .table-dark { /* Bootstrap class, ensure its dark mode version is styled */
    background-color: #212529; /* BS dark table header */
    color: var(--color-text-body);
    border-color: var(--color-border-default);
}
.dark-mode .table-secondary { /* Bootstrap class, ensure its dark mode version is styled */
    background-color: #2c3034; /* A slightly lighter dark for tfoot */
    color: var(--color-text-body);
    border-color: var(--color-border-default);
}
/* The .dark-mode .btn-close filter is handled by the variable now. */

.crossed-out-input {
    text-decoration: line-through;
    background-color: var(--color-bg-crossed-out) !important;
    color: var(--color-text-secondary) !important;
    opacity: 0.7;
    font-style: italic;
}

[data-theme="dark"] .crossed-out-input {
    background-color: var(--color-bg-crossed-out) !important;
    color: var(--color-text-secondary) !important;
    opacity: 0.6;
}

.language-flag {
    margin-right: 0.5rem;
}

.toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1055; /* Ensure toast is above other elements */
}


/* Prevent zoom on input focus on mobile */
input, select, textarea {
    font-size: 16px !important;
}

@media (max-width: 576px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    h1 {
        font-size: 1.75rem;
    }
}

[data-theme="dark"] .bg-light {
    background-color: var(--color-bg-body) !important;
}

[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .toast {
    background-color: var(--color-bg-card);
    color: var(--color-text-body);
    border-color: var(--color-border-default);
}

[data-theme="dark"] .toast-header {
    background-color: var(--color-bg-input);
    color: var(--color-text-body);
    border-color: var(--color-border-default);
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .modal-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--color-text-body);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--color-bg-input);
    color: var(--color-text-body);
    border-color: var(--color-border-input);
}

[data-theme="dark"] .btn-group .btn {
    border-color: var(--color-border-default);
}

[data-theme="dark"] .btn-group .btn:not(:first-child) {
    border-left-color: var(--color-border-default);
}

[data-theme="dark"] .btn-group .btn:not(:last-child) {
    border-right-color: var(--color-border-default);
}