/*
 * SocialNet Backend Theme Customizations
 * Works with Bootstrap 5.3+ data-bs-theme attribute
 * ONLY applies to backend/admin pages (uses .backend-theme class)
 */

/* ============================================================================
   Backend Theme Wrapper - All styles scoped to .backend-theme
   ============================================================================ */

/* ============================================================================
   Light Mode - Pastel Cards with Darker Borders (Backend Only)
   Soft, professional look with pastel backgrounds and contrast borders
   ============================================================================ */

/* Danger/Red cards - soft pastel pink with dark red border (excludes badges) */
[data-bs-theme="light"] .backend-theme .card.bg-danger,
[data-bs-theme="light"] .backend-theme .bg-danger:not(.badge) {
    background-color: #fce4e6 !important; /* Soft pastel pink */
    border: 2px solid #c9444d !important; /* Dark red border */
}

[data-bs-theme="light"] .backend-theme .card.bg-danger .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-danger {
    background-color: #f8d0d3 !important;
    border-bottom: 1px solid #c9444d !important;
}

/* Override text-white class in danger cards for proper contrast (excludes badges) */
[data-bs-theme="light"] .backend-theme .bg-danger:not(.badge),
[data-bs-theme="light"] .backend-theme .bg-danger:not(.badge) .text-white,
[data-bs-theme="light"] .backend-theme .bg-danger h1,
[data-bs-theme="light"] .backend-theme .bg-danger h2,
[data-bs-theme="light"] .backend-theme .bg-danger h3,
[data-bs-theme="light"] .backend-theme .bg-danger h4,
[data-bs-theme="light"] .backend-theme .bg-danger h5,
[data-bs-theme="light"] .backend-theme .bg-danger p,
[data-bs-theme="light"] .backend-theme .bg-danger small,
[data-bs-theme="light"] .backend-theme .bg-danger i,
[data-bs-theme="light"] .backend-theme .bg-danger .bi,
[data-bs-theme="light"] .backend-theme .bg-danger .card-title,
[data-bs-theme="light"] .backend-theme .bg-danger .card-text,
[data-bs-theme="light"] .backend-theme .bg-danger .display-6 {
    color: #5a1018 !important; /* Dark red for all text */
}

/* Ensure badge icons (like pending delete) are visible - badge keeps Bootstrap white text */
[data-bs-theme="light"] .backend-theme .badge.bg-danger,
[data-bs-theme="light"] .backend-theme .badge.bg-danger i,
[data-bs-theme="light"] .backend-theme .badge.bg-danger .bi {
    background-color: #dc3545 !important; /* Keep Bootstrap danger red for badges */
    color: #fff !important; /* White text/icons for contrast */
    border: none !important;
}

/* Ensure other badge colors stay Bootstrap standard */
[data-bs-theme="light"] .backend-theme .badge.bg-success,
[data-bs-theme="light"] .backend-theme .badge.bg-success i,
[data-bs-theme="light"] .backend-theme .badge.bg-success .bi {
    background-color: #198754 !important;
    color: #fff !important;
    border: none !important;
}

[data-bs-theme="light"] .backend-theme .badge.bg-warning,
[data-bs-theme="light"] .backend-theme .badge.bg-warning i,
[data-bs-theme="light"] .backend-theme .badge.bg-warning .bi {
    background-color: #ffc107 !important;
    color: #000 !important;
    border: none !important;
}

[data-bs-theme="light"] .backend-theme .badge.bg-info,
[data-bs-theme="light"] .backend-theme .badge.bg-info i,
[data-bs-theme="light"] .backend-theme .badge.bg-info .bi {
    background-color: #0dcaf0 !important;
    color: #000 !important;
    border: none !important;
}

[data-bs-theme="light"] .backend-theme .badge.bg-primary,
[data-bs-theme="light"] .backend-theme .badge.bg-primary i,
[data-bs-theme="light"] .backend-theme .badge.bg-primary .bi {
    background-color: #0d6efd !important;
    color: #fff !important;
    border: none !important;
}

[data-bs-theme="light"] .backend-theme .badge.bg-secondary,
[data-bs-theme="light"] .backend-theme .badge.bg-secondary i,
[data-bs-theme="light"] .backend-theme .badge.bg-secondary .bi {
    background-color: #6c757d !important;
    color: #fff !important;
    border: none !important;
}

/* Warning/Yellow cards - soft pastel yellow with dark amber border */
[data-bs-theme="light"] .backend-theme .card.bg-warning,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) {
    background-color: #fff8e1 !important; /* Soft pastel yellow */
    border: 2px solid #b8860b !important; /* Dark goldenrod border */
}

[data-bs-theme="light"] .backend-theme .card.bg-warning .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-warning {
    background-color: #ffecb3 !important;
    border-bottom: 1px solid #b8860b !important;
}

/* Override text-dark class in warning cards for proper contrast (excludes badges) */
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge),
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) .text-dark,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) h1,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) h2,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) h3,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) h4,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) h5,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) p,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) small,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) .card-title,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) .card-text,
[data-bs-theme="light"] .backend-theme .bg-warning:not(.badge) .display-6 {
    color: #4a3a0f !important; /* Dark brown for all text */
}

/* Success/Green cards - soft pastel green with dark green border (excludes badges) */
[data-bs-theme="light"] .backend-theme .card.bg-success,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) {
    background-color: #e8f5e9 !important; /* Soft pastel green */
    border: 2px solid #2e7d3a !important; /* Dark green border */
}

[data-bs-theme="light"] .backend-theme .card.bg-success .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-success {
    background-color: #c8e6c9 !important;
    border-bottom: 1px solid #2e7d3a !important;
}

/* Override text-white class in success cards for proper contrast (excludes badges) */
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge),
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) .text-white,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) h1,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) h2,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) h3,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) h4,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) h5,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) p,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) small,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) .card-title,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) .card-text,
[data-bs-theme="light"] .backend-theme .bg-success:not(.badge) .display-6 {
    color: #0a3d24 !important; /* Dark green for all text */
}

/* Info/Cyan cards - soft pastel cyan with dark teal border (excludes badges) */
[data-bs-theme="light"] .backend-theme .card.bg-info,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) {
    background-color: #e0f7fa !important; /* Soft pastel cyan */
    border: 2px solid #0097a7 !important; /* Dark teal border */
}

[data-bs-theme="light"] .backend-theme .card.bg-info .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-info {
    background-color: #b2ebf2 !important;
    border-bottom: 1px solid #0097a7 !important;
}

/* Override text-white class in info cards for proper contrast (excludes badges) */
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge),
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) .text-white,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) h1,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) h2,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) h3,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) h4,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) h5,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) p,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) small,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) .card-title,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) .card-text,
[data-bs-theme="light"] .backend-theme .bg-info:not(.badge) .display-6 {
    color: #044048 !important; /* Dark teal for all text */
}

/* Primary/Blue cards - soft pastel blue with dark blue border (excludes badges) */
[data-bs-theme="light"] .backend-theme .card.bg-primary,
[data-bs-theme="light"] .backend-theme .bg-primary:not(.badge) {
    background-color: #e3f2fd !important; /* Soft pastel blue */
    border: 2px solid #1565c0 !important; /* Dark blue border */
    color: #084298 !important;
}

[data-bs-theme="light"] .backend-theme .card.bg-primary .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-primary {
    background-color: #bbdefb !important;
    border-bottom: 1px solid #1565c0 !important;
    color: #084298 !important;
}

/* Secondary/Gray cards - soft light gray with dark gray border (excludes badges) */
[data-bs-theme="light"] .backend-theme .card.bg-secondary,
[data-bs-theme="light"] .backend-theme .bg-secondary:not(.badge) {
    background-color: #f5f5f5 !important; /* Soft light gray */
    border: 2px solid #5a6268 !important; /* Dark gray border */
    color: #41464b !important;
}

[data-bs-theme="light"] .backend-theme .card.bg-secondary .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-secondary {
    background-color: #e0e0e0 !important;
    border-bottom: 1px solid #5a6268 !important;
    color: #41464b !important;
}

/* Dark cards - soft light gray with dark charcoal border (for SuperAdmins box etc) */
/* EXCLUDE navbar and badges from this styling - navbar should stay dark with white text */
[data-bs-theme="light"] .backend-theme .card.bg-dark,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) {
    background-color: #e8e8e8 !important; /* Light gray background */
    border: 2px solid #343a40 !important; /* Dark charcoal border */
}

[data-bs-theme="light"] .backend-theme .card.bg-dark .card-header,
[data-bs-theme="light"] .backend-theme .text-bg-dark {
    background-color: #d8d8d8 !important;
    border-bottom: 1px solid #343a40 !important;
}

/* Override text-white class in dark cards for proper contrast on light bg */
/* EXCLUDE navbar and badges - they should keep white text */
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge),
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) .text-white,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) h1,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) h2,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) h3,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) h4,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) h5,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) p,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) small,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) .card-title,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) .card-text,
[data-bs-theme="light"] .backend-theme .bg-dark:not(.navbar):not(.badge) .display-6 {
    color: #1a1a1a !important; /* Very dark text for readability */
}

/* Ensure navbar stays dark with proper text colors in light mode */
[data-bs-theme="light"] .backend-theme .navbar.bg-dark {
    background-color: #212529 !important; /* Keep Bootstrap's dark navbar color */
    border: none !important;
}

[data-bs-theme="light"] .backend-theme .navbar.bg-dark .navbar-brand,
[data-bs-theme="light"] .backend-theme .navbar.bg-dark .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-bs-theme="light"] .backend-theme .navbar.bg-dark .nav-link:hover {
    color: #fff !important;
}

/* ============================================================================
   Dark Mode Color Palette (Backend Only)
   Using lighter, more pleasant dark colors
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme {
    /* Override Bootstrap's dark mode with lighter, more pleasant colors */
    --bs-body-bg: #1e2530;           /* Lighter dark blue-gray background */
    --bs-body-color: #e4e6eb;         /* Light text for readability */
    --bs-secondary-bg: #2a3441;       /* Slightly lighter for cards/containers */
    --bs-tertiary-bg: #343f4f;        /* Even lighter for nested elements */
    --bs-border-color: #3d4a5c;       /* Visible but subtle borders */
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);

    /* Link colors for dark mode */
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #9ec5fe;
}

/* ============================================================================
   Card Styling (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .card {
    background-color: #2a3441;
    border: 1px solid #3d4a5c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .backend-theme .card-header {
    background-color: #323d4d;
    border-bottom: 1px solid #3d4a5c;
    color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .card-body {
    background-color: #2a3441;
}

[data-bs-theme="dark"] .backend-theme .card-footer {
    background-color: #323d4d;
    border-top: 1px solid #3d4a5c;
}

/* ============================================================================
   Colored Cards - Pastel/Muted for Dark Mode
   ============================================================================ */

/* Danger/Red cards - muted pastel red */
[data-bs-theme="dark"] .backend-theme .card.bg-danger,
[data-bs-theme="dark"] .backend-theme .card.border-danger,
[data-bs-theme="dark"] .backend-theme .bg-danger {
    background-color: #4a2c2f !important; /* Muted dark red */
    border-color: #6b3a3d !important;
    color: #f0b8bc !important;
}

[data-bs-theme="dark"] .backend-theme .card.bg-danger .card-header,
[data-bs-theme="dark"] .backend-theme .card.border-danger .card-header,
[data-bs-theme="dark"] .backend-theme .text-bg-danger {
    background-color: #5c3538 !important;
    border-color: #6b3a3d !important;
    color: #f0b8bc !important;
}

/* Warning/Yellow cards - muted pastel yellow */
[data-bs-theme="dark"] .backend-theme .card.bg-warning,
[data-bs-theme="dark"] .backend-theme .card.border-warning,
[data-bs-theme="dark"] .backend-theme .bg-warning {
    background-color: #4a4428 !important; /* Muted dark yellow/amber */
    border-color: #6b6438 !important;
    color: #f0e6a8 !important;
}

[data-bs-theme="dark"] .backend-theme .card.bg-warning .card-header,
[data-bs-theme="dark"] .backend-theme .card.border-warning .card-header,
[data-bs-theme="dark"] .backend-theme .text-bg-warning {
    background-color: #5c5430 !important;
    border-color: #6b6438 !important;
    color: #f0e6a8 !important;
}

/* Success/Green cards - muted pastel green */
[data-bs-theme="dark"] .backend-theme .card.bg-success,
[data-bs-theme="dark"] .backend-theme .card.border-success,
[data-bs-theme="dark"] .backend-theme .bg-success {
    background-color: #2a4a3a !important; /* Muted dark green */
    border-color: #3a6b4d !important;
    color: #a8f0c4 !important;
}

[data-bs-theme="dark"] .backend-theme .card.bg-success .card-header,
[data-bs-theme="dark"] .backend-theme .card.border-success .card-header,
[data-bs-theme="dark"] .backend-theme .text-bg-success {
    background-color: #325c44 !important;
    border-color: #3a6b4d !important;
    color: #a8f0c4 !important;
}

/* Info/Cyan cards - muted pastel cyan */
[data-bs-theme="dark"] .backend-theme .card.bg-info,
[data-bs-theme="dark"] .backend-theme .card.border-info,
[data-bs-theme="dark"] .backend-theme .bg-info {
    background-color: #284a4a !important; /* Muted dark cyan */
    border-color: #386b6b !important;
    color: #a8f0f0 !important;
}

[data-bs-theme="dark"] .backend-theme .card.bg-info .card-header,
[data-bs-theme="dark"] .backend-theme .card.border-info .card-header,
[data-bs-theme="dark"] .backend-theme .text-bg-info {
    background-color: #305c5c !important;
    border-color: #386b6b !important;
    color: #a8f0f0 !important;
}

/* Primary/Blue cards - muted pastel blue */
[data-bs-theme="dark"] .backend-theme .card.bg-primary,
[data-bs-theme="dark"] .backend-theme .card.border-primary {
    background-color: #2a3a5c !important; /* Muted dark blue */
    border-color: #3a4d7a !important;
    color: #a8c4f0 !important;
}

[data-bs-theme="dark"] .backend-theme .card.bg-primary .card-header,
[data-bs-theme="dark"] .backend-theme .card.border-primary .card-header {
    background-color: #32446b !important;
    border-color: #3a4d7a !important;
    color: #a8c4f0 !important;
}

/* ============================================================================
   Table Styling (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .table {
    --bs-table-bg: transparent;
    --bs-table-color: #e4e6eb;
    --bs-table-border-color: #3d4a5c;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .backend-theme .table thead th {
    background-color: #323d4d;
    border-bottom: 2px solid #4a5568;
    color: #a0aec0;
    font-weight: 600;
}

/* ============================================================================
   Form Controls (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .form-control,
[data-bs-theme="dark"] .backend-theme .form-select {
    background-color: #1e2530;
    border-color: #3d4a5c;
    color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .form-control:focus,
[data-bs-theme="dark"] .backend-theme .form-select:focus {
    background-color: #1e2530;
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
    color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .form-control::placeholder {
    color: #6c757d;
}

[data-bs-theme="dark"] .backend-theme .form-control:disabled,
[data-bs-theme="dark"] .backend-theme .form-control[readonly] {
    background-color: #2a3441;
    opacity: 0.7;
}

/* Input groups */
[data-bs-theme="dark"] .backend-theme .input-group-text {
    background-color: #323d4d;
    border-color: #3d4a5c;
    color: #a0aec0;
}

/* ============================================================================
   Button Styling (Backend Dark Mode)
   ============================================================================ */

/* Outline buttons - visible borders in dark mode */
[data-bs-theme="dark"] .backend-theme .btn-outline-primary {
    --bs-btn-color: #6ea8fe;
    --bs-btn-border-color: #6ea8fe;
    --bs-btn-hover-bg: #6ea8fe;
    --bs-btn-hover-border-color: #6ea8fe;
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: #6ea8fe;
    --bs-btn-active-border-color: #6ea8fe;
    --bs-btn-active-color: #000;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-secondary {
    --bs-btn-color: #a0aec0;
    --bs-btn-border-color: #4a5568;
    --bs-btn-hover-bg: #4a5568;
    --bs-btn-hover-border-color: #5a6678;
    --bs-btn-hover-color: #e4e6eb;
    --bs-btn-active-bg: #5a6678;
    --bs-btn-active-border-color: #6a7688;
    --bs-btn-active-color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-success {
    --bs-btn-color: #75d9a3;
    --bs-btn-border-color: #3a6b4d;
    --bs-btn-hover-bg: #3a6b4d;
    --bs-btn-hover-border-color: #4a7b5d;
    --bs-btn-hover-color: #e4e6eb;
    --bs-btn-active-bg: #4a7b5d;
    --bs-btn-active-border-color: #5a8b6d;
    --bs-btn-active-color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-danger {
    --bs-btn-color: #ea868f;
    --bs-btn-border-color: #6b3a3d;
    --bs-btn-hover-bg: #6b3a3d;
    --bs-btn-hover-border-color: #7b4a4d;
    --bs-btn-hover-color: #e4e6eb;
    --bs-btn-active-bg: #7b4a4d;
    --bs-btn-active-border-color: #8b5a5d;
    --bs-btn-active-color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-warning {
    --bs-btn-color: #ffda6a;
    --bs-btn-border-color: #6b6438;
    --bs-btn-hover-bg: #6b6438;
    --bs-btn-hover-border-color: #7b7448;
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: #7b7448;
    --bs-btn-active-border-color: #8b8458;
    --bs-btn-active-color: #000;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-info {
    --bs-btn-color: #6edff6;
    --bs-btn-border-color: #386b6b;
    --bs-btn-hover-bg: #386b6b;
    --bs-btn-hover-border-color: #487b7b;
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: #487b7b;
    --bs-btn-active-border-color: #588b8b;
    --bs-btn-active-color: #000;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-light {
    --bs-btn-color: #e4e6eb;
    --bs-btn-border-color: #4a5568;
    --bs-btn-hover-bg: #4a5568;
    --bs-btn-hover-border-color: #5a6678;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #5a6678;
    --bs-btn-active-border-color: #6a7688;
    --bs-btn-active-color: #fff;
}

[data-bs-theme="dark"] .backend-theme .btn-outline-dark {
    --bs-btn-color: #a0aec0;
    --bs-btn-border-color: #6a7688;
    --bs-btn-hover-bg: #323d4d;
    --bs-btn-hover-border-color: #7a8698;
    --bs-btn-hover-color: #e4e6eb;
    --bs-btn-active-bg: #3d4a5c;
    --bs-btn-active-border-color: #8a96a8;
    --bs-btn-active-color: #e4e6eb;
}

/* Disabled buttons - visible with muted styling */
[data-bs-theme="dark"] .backend-theme .btn:disabled,
[data-bs-theme="dark"] .backend-theme .btn.disabled {
    background-color: #2a3441;
    border-color: #3d4a5c;
    color: #6c757d;
    opacity: 0.65;
}

/* Disabled outline buttons should still show border */
[data-bs-theme="dark"] .backend-theme .btn-outline-primary:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-secondary:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-success:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-danger:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-warning:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-info:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-light:disabled,
[data-bs-theme="dark"] .backend-theme .btn-outline-dark:disabled {
    background-color: transparent;
    border-color: #4a5568;
    color: #6c757d;
}

/* Secondary button (solid) in dark mode */
[data-bs-theme="dark"] .backend-theme .btn-secondary {
    --bs-btn-bg: #4a5568;
    --bs-btn-border-color: #5a6678;
    --bs-btn-color: #e4e6eb;
    --bs-btn-hover-bg: #5a6678;
    --bs-btn-hover-border-color: #6a7688;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #6a7688;
    --bs-btn-active-border-color: #7a8698;
}

/* Light button in dark mode - make it visible */
[data-bs-theme="dark"] .backend-theme .btn-light {
    --bs-btn-bg: #3d4a5c;
    --bs-btn-border-color: #4a5568;
    --bs-btn-color: #e4e6eb;
    --bs-btn-hover-bg: #4a5568;
    --bs-btn-hover-border-color: #5a6678;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #5a6678;
    --bs-btn-active-border-color: #6a7688;
}

/* Dark button in dark mode */
[data-bs-theme="dark"] .backend-theme .btn-dark {
    --bs-btn-bg: #1e2530;
    --bs-btn-border-color: #3d4a5c;
    --bs-btn-color: #e4e6eb;
    --bs-btn-hover-bg: #2a3441;
    --bs-btn-hover-border-color: #4a5568;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #323d4d;
    --bs-btn-active-border-color: #5a6678;
}

/* ============================================================================
   Navbar (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .navbar-dark,
[data-bs-theme="dark"] .backend-theme .navbar.bg-dark {
    background-color: #1a1f2a !important;
    border-bottom: 1px solid #2a3441;
}

/* ============================================================================
   Alerts (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .alert-info {
    background-color: rgba(13, 202, 240, 0.1);
    border-color: rgba(13, 202, 240, 0.25);
    color: #6edff6;
}

[data-bs-theme="dark"] .backend-theme .alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.25);
    color: #75d9a3;
}

[data-bs-theme="dark"] .backend-theme .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.25);
    color: #ffda6a;
}

[data-bs-theme="dark"] .backend-theme .alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.25);
    color: #ea868f;
}

/* ============================================================================
   List Groups (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .list-group-item {
    background-color: #2a3441;
    border-color: #3d4a5c;
    color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .list-group-item:hover {
    background-color: #323d4d;
}

[data-bs-theme="dark"] .backend-theme .list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ============================================================================
   Modal (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .modal-content {
    background-color: #2a3441;
    border: 1px solid #3d4a5c;
}

[data-bs-theme="dark"] .backend-theme .modal-header {
    background-color: #323d4d;
    border-bottom: 1px solid #3d4a5c;
}

[data-bs-theme="dark"] .backend-theme .modal-footer {
    background-color: #323d4d;
    border-top: 1px solid #3d4a5c;
}

/* ============================================================================
   Dropdown (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .dropdown-menu {
    background-color: #2a3441;
    border-color: #3d4a5c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .backend-theme .dropdown-item {
    color: #e4e6eb;
}

[data-bs-theme="dark"] .backend-theme .dropdown-item:hover,
[data-bs-theme="dark"] .backend-theme .dropdown-item:focus {
    background-color: #323d4d;
    color: #fff;
}

[data-bs-theme="dark"] .backend-theme .dropdown-divider {
    border-color: #3d4a5c;
}

/* ============================================================================
   Pagination (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .page-link {
    background-color: #2a3441;
    border-color: #3d4a5c;
    color: #6ea8fe;
}

[data-bs-theme="dark"] .backend-theme .page-link:hover {
    background-color: #323d4d;
    border-color: #4a5568;
    color: #9ec5fe;
}

[data-bs-theme="dark"] .backend-theme .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .backend-theme .page-item.disabled .page-link {
    background-color: #1e2530;
    border-color: #3d4a5c;
    color: #6c757d;
}

/* ============================================================================
   Badges (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .badge.bg-light {
    background-color: #e4e6eb !important;
    color: #1e2530 !important;
}

[data-bs-theme="dark"] .backend-theme .badge.bg-secondary {
    background-color: #4a5568 !important;
}

/* ============================================================================
   Progress Bars (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .progress {
    background-color: #1e2530;
}

/* ============================================================================
   Breadcrumb (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .breadcrumb {
    background-color: #2a3441;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
}

[data-bs-theme="dark"] .backend-theme .breadcrumb-item a {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .backend-theme .breadcrumb-item.active {
    color: #a0aec0;
}

/* ============================================================================
   Footer (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme footer {
    color: #6c757d;
}

[data-bs-theme="dark"] .backend-theme footer a {
    color: #6ea8fe;
}

/* ============================================================================
   Custom Container Styling (Backend Dark Mode)
   ============================================================================ */

[data-bs-theme="dark"] .backend-theme .body-content {
    padding-top: 1rem;
}

[data-bs-theme="dark"] .backend-theme hr {
    border-color: #3d4a5c;
    opacity: 0.5;
}

/* ============================================================================
   Accent Color Variables (Backend Only)
   ============================================================================ */

/* Default accent: Blue */
.backend-theme {
    --accent-color: var(--bs-primary);
    --accent-color-rgb: var(--bs-primary-rgb);
}

/* Blue accent (default) */
.backend-theme.accent-blue {
    --accent-color: #0d6efd;
    --accent-color-rgb: 13, 110, 253;
}

/* Green accent */
.backend-theme.accent-green {
    --accent-color: #198754;
    --accent-color-rgb: 25, 135, 84;
}

/* Purple accent */
.backend-theme.accent-purple {
    --accent-color: #6f42c1;
    --accent-color-rgb: 111, 66, 193;
}

/* Orange accent */
.backend-theme.accent-orange {
    --accent-color: #fd7e14;
    --accent-color-rgb: 253, 126, 20;
}

/* Red accent */
.backend-theme.accent-red {
    --accent-color: #dc3545;
    --accent-color-rgb: 220, 53, 69;
}

/* Teal accent */
.backend-theme.accent-teal {
    --accent-color: #20c997;
    --accent-color-rgb: 32, 201, 151;
}

/* Apply accent color to primary buttons (backend only) */
.backend-theme.accent-green .btn-primary,
.backend-theme.accent-purple .btn-primary,
.backend-theme.accent-orange .btn-primary,
.backend-theme.accent-red .btn-primary,
.backend-theme.accent-teal .btn-primary {
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent-color) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--accent-color) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--accent-color) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--accent-color) 80%, black);
}

/* Orange and teal need dark text */
.backend-theme.accent-orange .btn-primary,
.backend-theme.accent-teal .btn-primary {
    --bs-btn-color: #000;
}

/* ============================================================================
   Smooth Theme Transitions
   ============================================================================ */

/* Transition for theme changes - only after initial load */
html.theme-loaded .backend-theme,
html.theme-loaded .backend-theme *,
html.theme-loaded .backend-theme *::before,
html.theme-loaded .backend-theme *::after {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Disable transitions on page load to prevent flash */
html:not(.theme-loaded) .backend-theme * {
    transition: none !important;
}

/* ============================================================================
   Sidebar Collapsed State
   ============================================================================ */

.backend-theme.sidebar-collapsed .sidebar {
    width: 60px;
}

.backend-theme.sidebar-collapsed .sidebar .nav-text {
    display: none;
}

.backend-theme.sidebar-collapsed .main-content {
    margin-left: 60px;
}