/*
 * PM_WEB Dark Theme
 * Override styles for Bootstrap 5.3 dark mode
 * Applied when html[data-bs-theme="dark"]
 */

/* ============================================
   CSS Variables for Dark Theme
   ============================================ */
[data-bs-theme="dark"] {
    /* Brand colors - adjusted for dark backgrounds */
    --pm-brand-primary: #ff5555;
    --pm-brand-primary-hover: #ff7777;
    --pm-brand-primary-rgb: 255, 85, 85;

    /* Background colors */
    --pm-bg-body: #121212;
    --pm-bg-surface: #1e1e1e;
    --pm-bg-elevated: #252525;
    --pm-bg-card: #2d2d2d;

    /* Text colors */
    --pm-text-primary: #e0e0e0;
    --pm-text-secondary: #a0a0a0;
    --pm-text-muted: #6c757d;

    /* Border colors */
    --pm-border-color: #404040;
    --pm-border-light: #333333;

    /* Override Bootstrap primary */
    --bs-primary: #ff5555;
    --bs-primary-rgb: 255, 85, 85;
    --bs-link-color: #ff6666;
    --bs-link-hover-color: #ff8888;
}

/* ============================================
   Body & Base Elements
   ============================================ */
[data-bs-theme="dark"] body {
    background-color: var(--pm-bg-body) !important;
    color: var(--pm-text-primary);
}

/* ============================================
   Header & Navigation
   ============================================ */
[data-bs-theme="dark"] header,
[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .navbar-light.bg-light,
[data-bs-theme="dark"] .navbar-main {
    background-color: var(--pm-bg-surface) !important;
    border-bottom-color: var(--pm-border-color) !important;
}

[data-bs-theme="dark"] .header {
    background-color: var(--pm-bg-surface) !important;
    color: var(--pm-brand-primary);
}

[data-bs-theme="dark"] .header b {
    color: var(--pm-brand-primary);
}

/* ============================================
   Offcanvas Menu
   ============================================ */
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .offcanvas-body,
[data-bs-theme="dark"] .offcanvas-header {
    background-color: var(--pm-bg-surface) !important;
    color: var(--pm-text-primary);
}

[data-bs-theme="dark"] .offcanvas-title {
    color: var(--pm-brand-primary);
}

[data-bs-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--pm-border-color) !important;
}

[data-bs-theme="dark"] .nav-link {
    color: var(--pm-text-primary) !important;
}

[data-bs-theme="dark"] .nav-link:hover,
[data-bs-theme="dark"] .nav-link:focus {
    color: var(--pm-brand-primary) !important;
}

[data-bs-theme="dark"] .menu-section-title {
    color: var(--pm-text-secondary) !important;
    border-bottom-color: var(--pm-border-color) !important;
}

/* ============================================
   Dropdown Menus
   ============================================ */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--pm-bg-elevated) !important;
    border-color: var(--pm-border-color) !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--pm-text-primary) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--pm-bg-card) !important;
    color: var(--pm-brand-primary) !important;
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--pm-border-color);
}

/* ============================================
   Buttons
   ============================================ */
[data-bs-theme="dark"] .btn-custom {
    background-color: var(--pm-brand-primary) !important;
    border-color: var(--pm-brand-primary) !important;
}

[data-bs-theme="dark"] .btn-custom:hover {
    background-color: var(--pm-bg-surface) !important;
    color: var(--pm-brand-primary) !important;
    border-color: var(--pm-brand-primary) !important;
}

[data-bs-theme="dark"] .btn-custom .navbar-toggler-icon {
    background-color: white;
}

[data-bs-theme="dark"] .btn-custom:hover .navbar-toggler-icon {
    background-color: var(--pm-brand-primary) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--pm-text-primary);
    border-color: var(--pm-border-color);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-secondary {
    background-color: var(--pm-brand-primary);
    border-color: var(--pm-brand-primary);
    color: white;
}

/* ============================================
   Cards & Containers
   ============================================ */
[data-bs-theme="dark"] .card {
    background-color: var(--pm-bg-card);
    border-color: var(--pm-border-color);
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--pm-bg-elevated);
    border-bottom-color: var(--pm-border-color);
}

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

[data-bs-theme="dark"] .container-fluid {
    background-color: transparent;
}

/* ============================================
   Tables
   ============================================ */
[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--pm-bg-surface);
    --bs-table-striped-bg: var(--pm-bg-elevated);
    --bs-table-hover-bg: var(--pm-bg-card);
    --bs-table-border-color: var(--pm-border-color);
    color: var(--pm-text-primary);
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--pm-bg-elevated);
}

/* ============================================
   Forms & Inputs
   ============================================ */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--pm-bg-elevated);
    border-color: var(--pm-border-color);
    color: var(--pm-text-primary);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--pm-bg-card);
    border-color: var(--pm-brand-primary);
    color: var(--pm-text-primary);
    box-shadow: 0 0 0 0.25rem rgba(255, 85, 85, 0.25);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--pm-text-muted);
}

/* ============================================
   Alerts & Toasts
   ============================================ */
[data-bs-theme="dark"] .toast {
    background-color: var(--pm-bg-elevated) !important;
    border-color: var(--pm-border-color);
}

[data-bs-theme="dark"] .toast-body {
    color: var(--pm-text-primary) !important;
}

[data-bs-theme="dark"] .alert {
    border-color: var(--pm-border-color);
}

[data-bs-theme="dark"] .alert-primary {
    background-color: rgba(255, 85, 85, 0.15);
    color: var(--pm-text-primary);
}

/* ============================================
   Footer
   ============================================ */
[data-bs-theme="dark"] .footer {
    background-color: #0a0a0a;
    color: var(--pm-text-secondary);
}

/* ============================================
   Submenu & Dividers
   ============================================ */
[data-bs-theme="dark"] .submenu {
    background-color: var(--pm-bg-elevated);
    border-bottom-color: var(--pm-brand-primary);
}

[data-bs-theme="dark"] .submenu a {
    color: var(--pm-text-primary);
}

[data-bs-theme="dark"] .submenu a:hover {
    color: var(--pm-brand-primary);
}

[data-bs-theme="dark"] hr.divider {
    border-top-color: var(--pm-border-color);
}

/* ============================================
   PM Colors (Project Manager badges) - Dark variants
   ============================================ */
[data-bs-theme="dark"] .pm-color-1 { background-color: #4a2020; color: #ffb3b3; }
[data-bs-theme="dark"] .pm-color-2 { background-color: #1a3d5c; color: #b3d4ff; }
[data-bs-theme="dark"] .pm-color-3 { background-color: #1a4a1a; color: #b3ffb3; }
[data-bs-theme="dark"] .pm-color-4 { background-color: #4a3a1a; color: #ffd9b3; }
[data-bs-theme="dark"] .pm-color-5 { background-color: #3a1a4a; color: #d9b3ff; }
[data-bs-theme="dark"] .pm-color-6 { background-color: #4a4a1a; color: #ffffb3; }
[data-bs-theme="dark"] .pm-color-7 { background-color: #1a4a4a; color: #b3ffff; }
[data-bs-theme="dark"] .pm-color-8 { background-color: #4a1a3a; color: #ffb3d9; }
[data-bs-theme="dark"] .pm-color-9 { background-color: #3a4a1a; color: #d9ffb3; }
[data-bs-theme="dark"] .pm-color-10 { background-color: #1a1a4a; color: #b3b3ff; }
[data-bs-theme="dark"] .pm-color-11 { background-color: #4a3a2a; color: #ffd9b3; }
[data-bs-theme="dark"] .pm-color-12 { background-color: #1a3a3a; color: #b3e0e0; }

[data-bs-theme="dark"] .pm-badge {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Theme Selector
   ============================================ */
[data-bs-theme="dark"] .theme-selector {
    border-top-color: var(--pm-border-color) !important;
}

/* ============================================
   Scrollbar (Webkit browsers)
   ============================================ */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--pm-bg-surface);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--pm-border-color);
    border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   Badges
   ============================================ */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--pm-bg-elevated) !important;
    color: var(--pm-text-primary) !important;
}

/* ============================================
   Links
   ============================================ */
[data-bs-theme="dark"] a {
    color: var(--pm-brand-primary);
}

[data-bs-theme="dark"] a:hover {
    color: var(--pm-brand-primary-hover);
}

[data-bs-theme="dark"] .admin-link,
[data-bs-theme="dark"] .admin-link:visited {
    color: var(--pm-text-secondary);
}

/* ============================================
   Close buttons
   ============================================ */
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================
   Help Button
   ============================================ */
[data-bs-theme="dark"] .help-btn {
    background-color: var(--pm-bg-elevated);
    border-color: var(--pm-border-color);
    color: var(--pm-text-primary);
}

[data-bs-theme="dark"] .help-btn:hover {
    background-color: var(--pm-brand-primary);
    border-color: var(--pm-brand-primary);
}

/* ============================================
   Modal
   ============================================ */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--pm-bg-surface);
    border-color: var(--pm-border-color);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--pm-border-color);
}

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

/* ============================================
   Transitions for smooth theme switching
   ============================================ */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.navbar,
.offcanvas,
.card,
.btn,
.form-control,
.dropdown-menu {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}