/* ============================================================================
   THEME SYSTEM - Little Joys POS
   ============================================================================ */

/* Default Theme (Blue) - Already in use */
[data-theme="default"] {
    --primary-color: #007bff;
    --primary-dark: #0056b3;
    --primary-light: #4da3ff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-bg: #f8f9fa;
    --dark-bg: #343a40;
    --body-bg: #e9ecef;
    --card-bg: #ffffff;
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --navbar-bg: #007bff;
    --navbar-text: #ffffff;
}

/* Dark Theme */
[data-theme="dark"] {
    --primary-color: #375a7f;
    --primary-dark: #2a4562;
    --primary-light: #4e6f9c;
    --secondary-color: #444444;
    --success-color: #00bc8c;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --info-color: #3498db;
    --light-bg: #2b3e50;
    --dark-bg: #1a252f;
    --body-bg: #222222;
    --card-bg: #2b3e50;
    --text-color: #ffffff;
    --text-muted: #adb5bd;
    --border-color: #444444;
    --navbar-bg: #375a7f;
    --navbar-text: #ffffff;
}

/* Ocean Theme (Teal/Cyan) */
[data-theme="ocean"] {
    --primary-color: #17a2b8;
    --primary-dark: #117a8b;
    --primary-light: #3fc5d9;
    --secondary-color: #6c757d;
    --success-color: #20c997;
    --danger-color: #e83e8c;
    --warning-color: #fd7e14;
    --info-color: #0dcaf0;
    --light-bg: #e0f7fa;
    --dark-bg: #006064;
    --body-bg: #e0f2f1;
    --card-bg: #ffffff;
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #b2ebf2;
    --navbar-bg: #00838f;
    --navbar-text: #ffffff;
}

/* Sunset Theme (Orange/Red) */
[data-theme="sunset"] {
    --primary-color: #fd7e14;
    --primary-dark: #dc6502;
    --primary-light: #ff9a44;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #ff6b6b;
    --light-bg: #fff3e0;
    --dark-bg: #bf360c;
    --body-bg: #ffe0b2;
    --card-bg: #ffffff;
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #ffccbc;
    --navbar-bg: #f4511e;
    --navbar-text: #ffffff;
}

/* Forest Theme (Green) */
[data-theme="forest"] {
    --primary-color: #28a745;
    --primary-dark: #1e7e34;
    --primary-light: #48c765;
    --secondary-color: #6c757d;
    --success-color: #20c997;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-bg: #e8f5e9;
    --dark-bg: #1b5e20;
    --body-bg: #c8e6c9;
    --card-bg: #ffffff;
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #a5d6a7;
    --navbar-bg: #2e7d32;
    --navbar-text: #ffffff;
}

/* Purple Theme */
[data-theme="purple"] {
    --primary-color: #6f42c1;
    --primary-dark: #5a32a3;
    --primary-light: #8c5dd1;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #9b59b6;
    --light-bg: #f3e5f5;
    --dark-bg: #4a148c;
    --body-bg: #e1bee7;
    --card-bg: #ffffff;
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #ce93d8;
    --navbar-bg: #6a1b9a;
    --navbar-text: #ffffff;
}

/* ============================================================================
   APPLY THEME VARIABLES TO ELEMENTS
   ============================================================================ */

/* IMPORTANT: Disable themes for print media to avoid printing issues */
@media print {
    [data-theme] {
        --primary-color: #007bff;
        --body-bg: #ffffff;
        --card-bg: #ffffff;
        --text-color: #000000;
        --border-color: #dee2e6;
    }
}

/* Body and Background */
@media screen {
    body {
        background-color: var(--body-bg) !important;
        color: var(--text-color) !important;
    }
}

/* Apply themes only to screen, not print */
@media screen {
    /* Navbar */
    .navbar.bg-primary {
        background-color: var(--navbar-bg) !important;
    }

    .navbar-dark .navbar-brand,
    .navbar-dark .navbar-nav .nav-link {
        color: var(--navbar-text) !important;
    }

    .navbar-dark .navbar-nav .nav-link:hover {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* Cards */
    .card {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    .card-header {
        background-color: var(--light-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    .card-header.bg-primary {
        background-color: var(--primary-color) !important;
        color: var(--navbar-text) !important;
    }

    .card-header.bg-info {
        background-color: var(--info-color) !important;
        color: var(--navbar-text) !important;
    }

    .card-header.bg-warning {
        background-color: var(--warning-color) !important;
        color: var(--text-color) !important;
    }

    /* Buttons */
    .btn-primary {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: #ffffff !important;
    }

    .btn-primary:hover {
        background-color: var(--primary-dark) !important;
        border-color: var(--primary-dark) !important;
        color: #ffffff !important;
    }

    .btn-outline-primary {
        color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }

    .btn-outline-primary:hover {
        background-color: var(--primary-color) !important;
        color: white !important;
    }

    .btn-warning {
        background-color: var(--warning-color) !important;
        border-color: var(--warning-color) !important;
        color: #212529 !important;
    }

    .btn-warning:hover {
        background-color: var(--warning-color) !important;
        border-color: var(--warning-color) !important;
        opacity: 0.9;
    }

    .btn-success {
        background-color: var(--success-color) !important;
        border-color: var(--success-color) !important;
        color: #ffffff !important;
    }

    .btn-success:hover {
        background-color: var(--success-color) !important;
        border-color: var(--success-color) !important;
        opacity: 0.9;
    }

    .btn-danger {
        background-color: var(--danger-color) !important;
        border-color: var(--danger-color) !important;
        color: #ffffff !important;
    }

    .btn-danger:hover {
        background-color: var(--danger-color) !important;
        border-color: var(--danger-color) !important;
        opacity: 0.9;
    }

    .btn-info {
        background-color: var(--info-color) !important;
        border-color: var(--info-color) !important;
        color: #ffffff !important;
    }

    .btn-info:hover {
        background-color: var(--info-color) !important;
        border-color: var(--info-color) !important;
        opacity: 0.9;
    }

    .btn:disabled,
    .btn.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Tables */
    .table {
        color: var(--text-color) !important;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: var(--light-bg) !important;
    }

    .table thead th {
        border-color: var(--border-color) !important;
    }

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

    /* Forms */
    .form-control {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    .form-control:focus {
        border-color: var(--primary-color) !important;
        /* Use a semi-transparent version of primary color for focus shadow */
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
    }
    
    /* Fallback for browsers that don't support color-mix */
    @supports not (color-mix(in srgb, var(--primary-color) 25%, transparent)) {
        .form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
        }
    }

    /* Ensure disabled inputs are visible */
    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--light-bg) !important;
        opacity: 0.7;
        cursor: not-allowed;
    }

    /* Radio buttons and checkboxes */
    .form-check-input {
        border-color: var(--border-color) !important;
    }

    .form-check-input:checked {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }

    .form-check-input:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .form-check-label {
        color: var(--text-color) !important;
    }

    .form-check-input:disabled + .form-check-label {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Dark theme specific form adjustments */
    [data-theme="dark"] .form-control {
        background-color: #1a252f !important;
        color: #ffffff !important;
    }

    [data-theme="dark"] .form-control::placeholder {
        color: #adb5bd !important;
    }

    /* Dropdowns */
    .dropdown-menu {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    .dropdown-item {
        color: var(--text-color) !important;
    }

    .dropdown-item:hover {
        background-color: var(--light-bg) !important;
        color: var(--text-color) !important;
    }

    .dropdown-item:focus {
        background-color: var(--light-bg) !important;
        color: var(--text-color) !important;
    }

    /* Input groups */
    .input-group-text {
        background-color: var(--light-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    /* Select dropdowns */
    select.form-control {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
    }

    select.form-control option {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
    }

    /* Modals */
    .modal-content {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
    }

    .modal-header {
        border-color: var(--border-color) !important;
    }

    .modal-footer {
        border-color: var(--border-color) !important;
    }

    /* Alerts */
    .alert-info {
        background-color: rgba(23, 162, 184, 0.1) !important;
        border-color: var(--info-color) !important;
        color: var(--text-color) !important;
    }

    .alert-warning {
        background-color: rgba(255, 193, 7, 0.1) !important;
        border-color: var(--warning-color) !important;
        color: var(--text-color) !important;
    }

    .alert-success {
        background-color: rgba(40, 167, 69, 0.1) !important;
        border-color: var(--success-color) !important;
        color: var(--text-color) !important;
    }

    .alert-danger {
        background-color: rgba(220, 53, 69, 0.1) !important;
        border-color: var(--danger-color) !important;
        color: var(--text-color) !important;
    }

    /* Text Colors */
    .text-muted {
        color: var(--text-muted) !important;
    }

    .text-primary {
        color: var(--primary-color) !important;
    }

    .text-warning {
        color: var(--warning-color) !important;
    }

    .text-success {
        color: var(--success-color) !important;
    }

    .text-danger {
        color: var(--danger-color) !important;
    }

    .text-info {
        color: var(--info-color) !important;
    }

    /* Badges */
    .badge-primary {
        background-color: var(--primary-color) !important;
        color: #ffffff !important;
    }

    .badge-info {
        background-color: var(--info-color) !important;
        color: #ffffff !important;
    }

    .badge-warning {
        background-color: var(--warning-color) !important;
        color: #212529 !important;
    }

    .badge-success {
        background-color: var(--success-color) !important;
        color: #ffffff !important;
    }

    .badge-danger {
        background-color: var(--danger-color) !important;
        color: #ffffff !important;
    }

    /* Links */
    a {
        color: var(--primary-color) !important;
    }

    a:hover {
        color: var(--primary-dark) !important;
    }

    /* Dark theme text adjustments */
    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4,
    [data-theme="dark"] h5,
    [data-theme="dark"] h6,
    [data-theme="dark"] p,
    [data-theme="dark"] label,
    [data-theme="dark"] span {
        color: #ffffff !important;
    }

    [data-theme="dark"] .text-dark {
        color: #ffffff !important;
    }
}

/* Theme selector button styling */
.theme-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.theme-icon.default { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); }
.theme-icon.dark { background: linear-gradient(135deg, #375a7f 0%, #1a252f 100%); }
.theme-icon.ocean { background: linear-gradient(135deg, #17a2b8 0%, #00838f 100%); }
.theme-icon.sunset { background: linear-gradient(135deg, #fd7e14 0%, #f4511e 100%); }
.theme-icon.forest { background: linear-gradient(135deg, #28a745 0%, #2e7d32 100%); }
.theme-icon.purple { background: linear-gradient(135deg, #6f42c1 0%, #6a1b9a 100%); }