/* ===========================
   Dark/Light Theme Toggle CSS
   =========================== */

/* Light Mode (Default) */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f4f6f9;
    --bg-box: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --border-color: #d2d6de;
    --sidebar-bg: #222d32;
    --sidebar-text: #b8c7ce;
    --header-bg: #3c8dbc;
    --input-bg: #ffffff;
    --input-border: #d2d6de;
    --shadow: rgba(0, 0, 0, 0.1);
    --category-gradient-start: #416d19;
    --category-gradient-end: #393e46;
    --category-hover-start: #6eae14;
    --category-hover-end: #416D19;
    --subcategory-bg: #f7f7fa;
    --subcategory-hover: #bfea7c;
    --qty-box-bg: #bfea7c;
}

/* Dark Mode */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-box: #2d2d2d;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --border-color: #404040;
    --sidebar-bg: #1a1a1a;
    --sidebar-text: #b8c7ce;
    --header-bg: #1e4d6b;
    --input-bg: #2d2d2d;
    --input-border: #404040;
    --shadow: rgba(255, 255, 255, 0.05);
    --category-gradient-start: #2d5010;
    --category-gradient-end: #2a2e35;
    --category-hover-start: #4a8a0f;
    --category-hover-end: #2d5010;
    --subcategory-bg: #3a3a3a;
    --subcategory-hover: #5a8a2f;
    --qty-box-bg: #5a8a2f;
}

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

.content-wrapper,
.box,
.modal-content,
.navbar {
    background-color: var(--bg-box);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.box {
    border-color: var(--border-color);
}

.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

.table > thead > tr > th,
.table > tbody > tr > td {
    border-color: var(--border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}

.category-block {
    background: linear-gradient(135deg, var(--category-gradient-start), var(--category-gradient-end));
}

.category-block:hover {
    background: linear-gradient(90deg, var(--category-hover-start) 0%, var(--category-hover-end) 100%);
}

.subcategory-block {
    background: var(--subcategory-bg);
    color: var(--text-primary);
}

.subcategory-block:hover {
    background: var(--subcategory-hover);
}

.qty-box {
    background: var(--qty-box-bg);
}

/* Theme Toggle Button - Matches other header buttons */
#theme-toggle-btn {
    /* Uses standard btn classes from header */
}

/* Dark mode specific adjustments */
[data-theme="dark"] .skin-blue .main-header .navbar {
    background-color: var(--header-bg);
}

[data-theme="dark"] .skin-blue .main-header .logo {
    background-color: #1a3d5a;
}

[data-theme="dark"] .main-sidebar {
    background-color: var(--sidebar-bg);
}

[data-theme="dark"] .sidebar-menu > li > a {
    color: var(--sidebar-text);
}

[data-theme="dark"] .btn-default {
    background-color: #3a3a3a;
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-default:hover {
    background-color: #4a4a4a;
}

/* Select2 Dark Mode */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--bg-box);
    border-color: var(--border-color);
}

[data-theme="dark"] .select2-results__option {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #4a4a4a;
}

/* Modal Dark Mode */
[data-theme="dark"] .modal-header {
    background-color: var(--bg-box);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

/* Smooth transition for theme switch - Applied selectively to avoid performance issues */
body, .content-wrapper, .box, .modal-content {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Auto mode indicator */
.auto-theme-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    margin-left: 5px;
    font-weight: 600;
}

/* Product Card Dark Mode Fix */
[data-theme="dark"] .product_name,
[data-theme="dark"] .product-name,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] p,
[data-theme="dark"] span {
    color: var(--text-primary) !important;
}

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

[data-theme="dark"] label {
    color: var(--text-primary);
}

/* Product grid/card items */
[data-theme="dark"] .col-md-2,
[data-theme="dark"] .col-md-3,
[data-theme="dark"] .col-md-4,
[data-theme="dark"] .product-card,
[data-theme="dark"] .product-item {
    color: var(--text-primary);
}

[data-theme="dark"] .product-card h5,
[data-theme="dark"] .product-card p,
[data-theme="dark"] .product-item h5,
[data-theme="dark"] .product-item p {
    color: var(--text-primary) !important;
}

/* Fix for any remaining text elements */
[data-theme="dark"] * {
    border-color: var(--border-color);
}

[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}