/* ============================================
   Dark Mode CSS for Catalog SDX
   Matches NTAP Security Dark Mode
   Version 1.0
   ============================================ */

/* Theme Toggle Button */
.theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light) !important;
    background: var(--bg-card) !important;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.theme-toggle:hover {
    border-color: var(--border-medium) !important;
    color: var(--text-primary);
}

.theme-toggle i {
    font-size: 1.1rem;
}

/* Dark Mode Toggle States */
[data-theme="light"] .theme-toggle .bi-moon-fill {
    display: block;
}

[data-theme="light"] .theme-toggle .bi-sun-fill {
    display: none;
}

[data-theme="dark"] .theme-toggle .bi-moon-fill {
    display: none;
}

[data-theme="dark"] .theme-toggle .bi-sun-fill {
    display: block;
    color: #fbbf24;
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

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

/* Header */
[data-theme="dark"] .header,
[data-theme="dark"] .header-modern {
    background: var(--bg-header) !important;
    border-bottom-color: var(--border-light) !important;
}

[data-theme="dark"] .logo .sitename {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

[data-theme="dark"] .navmenu ul li a {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

[data-theme="dark"] .navmenu ul li a:hover,
[data-theme="dark"] .navmenu ul li a.active {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

[data-theme="dark"] .navmenu .dropdown ul {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .navmenu .dropdown ul li a {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .modern-card,
[data-theme="dark"] .lab-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .admin-stat-card,
[data-theme="dark"] .user-card {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .lab-name {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card-text,
[data-theme="dark"] .lab-description p {
    color: var(--text-secondary) !important;
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

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

/* Tables */
[data-theme="dark"] .table,
[data-theme="dark"] .admin-table {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .admin-table th {
    background: var(--bg-page) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .admin-table td {
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .table tr:hover,
[data-theme="dark"] .admin-table tr:hover {
    background: var(--bg-card-hover) !important;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

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

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

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

/* Modals */
[data-theme="dark"] .modal-content {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .modal-header {
    background: var(--bg-page) !important;
    border-bottom-color: var(--border-light) !important;
}

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

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

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

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* Footer */
[data-theme="dark"] .footer,
[data-theme="dark"] .footer-modern {
    background: var(--bg-card) !important;
    border-top-color: var(--border-light) !important;
}

[data-theme="dark"] .footer h4,
[data-theme="dark"] .footer-heading {
    color: var(--text-primary) !important;
}

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

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

[data-theme="dark"] .footer a:hover,
[data-theme="dark"] .footer-link:hover {
    color: var(--accent-primary) !important;
}

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

[data-theme="dark"] .social-link {
    background: var(--bg-page) !important;
    border-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .social-link:hover {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

/* Hero Section */
[data-theme="dark"] .hero {
    background: var(--bg-card) !important;
}

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

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

/* Page Title */
[data-theme="dark"] .page-title,
[data-theme="dark"] .modern-page-title {
    background: var(--bg-card) !important;
    border-bottom-color: var(--border-light) !important;
}

[data-theme="dark"] .page-title h1,
[data-theme="dark"] .modern-page-title h1 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .page-title p,
[data-theme="dark"] .modern-page-title p {
    color: var(--text-secondary) !important;
}

/* Sections */
[data-theme="dark"] section,
[data-theme="dark"] .section {
    background: var(--bg-page) !important;
}

[data-theme="dark"] .section-title h2 {
    color: var(--text-primary) !important;
}

/* Services */
[data-theme="dark"] .services .card {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .services .card h3 a {
    color: var(--text-primary) !important;
}

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

/* Testimonials */
[data-theme="dark"] .testimonials {
    background: var(--bg-page) !important;
}

[data-theme="dark"] .testimonials .testimonial-item h3 {
    color: var(--text-primary) !important;
}

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

/* Preloader */
[data-theme="dark"] #preloader {
    background: var(--bg-page) !important;
}

/* Mobile Navigation */
[data-theme="dark"] .navmenu {
    background: var(--bg-card) !important;
}

@media (max-width: 1199px) {
    [data-theme="dark"] .navmenu ul {
        background: var(--bg-card) !important;
        border-color: var(--border-light) !important;
    }
}

/* User Profile */
[data-theme="dark"] .user-profile {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .user-profile:hover {
    background: var(--bg-card-hover) !important;
}

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

/* Empty States */
[data-theme="dark"] .empty-state h3 {
    color: var(--text-primary) !important;
}

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

/* Notifications */
[data-theme="dark"] .modern-notification {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

/* Loading States */
[data-theme="dark"] .global-loading {
    background: rgba(13, 13, 18, 0.8) !important;
}

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

/* Mobile Overlay */
[data-theme="dark"] .mobile-nav-overlay.active {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Stat Cards in Dark Mode */
[data-theme="dark"] .stat-content h3,
[data-theme="dark"] .stats-content h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-content p,
[data-theme="dark"] .stats-content p {
    color: var(--text-secondary) !important;
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb-nav,
[data-theme="dark"] .breadcrumbs {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .breadcrumb-link,
[data-theme="dark"] .breadcrumbs a {
    color: var(--text-secondary) !important;
}

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

/* Smooth Transitions */
body,
.header,
.header-modern,
.card,
.modern-card,
.lab-card,
.footer,
.footer-modern,
.modal-content,
.dropdown-menu,
.form-control,
.btn {
    transition: background-color 0.15s ease, 
                border-color 0.15s ease, 
                color 0.1s ease;
}

/* Disable transitions during theme switch for instant change */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: none !important;
}

/* Preserve specific colors that shouldn't change */
.btn-primary,
.btn-modern,
.action-primary {
    background: var(--accent-primary) !important;
    color: white !important;
}

.btn-success {
    background: var(--status-success) !important;
    color: white !important;
}

.btn-danger {
    background: var(--status-danger) !important;
    color: white !important;
}

.btn-warning {
    background: var(--status-warning) !important;
    color: white !important;
}

.btn-info {
    background: var(--status-info) !important;
    color: white !important;
}

.user-avatar {
    background: var(--accent-primary) !important;
    color: white !important;
}

.stat-icon,
.stats-icon {
    background: var(--accent-primary) !important;
    color: white !important;
}