/* ===== DARK MODE CSS - COMPLETE OVERRIDE SYSTEM ===== */

/* This CSS file provides complete dark mode by overriding all hardcoded colors */

/* CSS Custom Properties for Light/Dark Theme */
:root {
    /* Light mode colors (default) */
    --bg-primary: #f8fafc;
    --bg-secondary: #f7fafc;
    --bg-tertiary: #e9ecef;
    --bg-card: #ffffff;
    --bg-hover: #f1f3f4;
    
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-inverse: #ffffff;
    
    --border-color: #e2e8f0;
    --border-light: #cbd5e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.15);
    
    /* Brand colors remain consistent */
    --primary-color: #667eea;
    --primary-hover: #5a67d8;
    --success-color: #38a169;
    --warning-color: #d69e2e;
    --danger-color: #e53e3e;
    --info-color: #3182ce;
    
    /* Form elements */
    --input-bg: #ffffff;
    --input-border: #cbd5e0;
    --input-focus: #667eea;
}

/* Dark mode theme */
[data-theme="dark"] {
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --bg-tertiary: #4a5568;
    --bg-card: #2d3748;
    --bg-hover: #4a5568;
    
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #a0aec0;
    --text-inverse: #1a202c;
    
    --border-color: #4a5568;
    --border-light: #2d3748;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-hover: rgba(0, 0, 0, 0.6);
    
    /* Adjust form elements for dark mode */
    --input-bg: #2d3748;
    --input-border: #4a5568;
    --input-focus: #667eea;
}

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

/* Override ALL hardcoded colors from style.css and components.css */
[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

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

/* =================================
   MAJOR LAYOUT OVERRIDES
   ================================= */

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

[data-theme="dark"] .dashboard main,
[data-theme="dark"] .main-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .container,
[data-theme="dark"] .login-container {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* =================================
   SIDEBAR COMPLETE OVERRIDE
   ================================= */

[data-theme="dark"] .sidebar {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-right: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .sidebar-header h2,
[data-theme="dark"] .sidebar-header p,
[data-theme="dark"] .sidebar .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .sidebar .nav-link:hover,
[data-theme="dark"] .sidebar .nav-link.active {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* =================================
   TEXT COLOR OVERRIDES
   ================================= */

[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"] span, [data-theme="dark"] div,
[data-theme="dark"] label, [data-theme="dark"] td, [data-theme="dark"] th {
    color: var(--text-primary) !important;
}

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

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

/* Cards and containers */
.card, .modal-content, .dropdown-menu, .login-card, .stats-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 0.125rem 0.25rem var(--shadow-color) !important;
    color: var(--text-primary) !important;
}

.card:hover, .table-row:hover {
    background-color: var(--bg-hover);
    box-shadow: 0 0.25rem 0.5rem var(--shadow-hover);
}

/* Tables */
.table {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.table th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

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

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

/* Forms */
.form-control, .form-select, input, textarea, select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
    background-color: var(--input-bg);
    border-color: var(--input-focus);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Buttons maintain their colors but adjust for better contrast */
.btn-outline {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover {
    background-color: var(--bg-hover);
    border-color: var(--text-primary);
}

/* Navigation and header */
.navbar, .header, .header-top {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Page headers and titles */
.page-header, .section-header {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.navbar .nav-link, .header a {
    color: var(--text-primary);
}

.navbar .nav-link:hover, .header a:hover {
    color: var(--primary-color);
}

/* Sidebar */
.sidebar {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.sidebar .brand, .sidebar .nav-item {
    color: var(--text-primary) !important;
}

.sidebar .nav-link {
    color: var(--text-secondary);
}

.sidebar .nav-link:hover, .sidebar .nav-link.active {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* Modals */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}

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

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

/* Dark mode toggle button */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px var(--shadow-color);
}

.dark-mode-toggle:hover {
    background: var(--bg-hover);
    transform: scale(1.1);
    box-shadow: 0 4px 20px var(--shadow-hover);
}

.dark-mode-toggle .icon {
    font-size: 1.2rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

/* Hide/show icons based on theme */
[data-theme="light"] .dark-mode-toggle .icon-moon {
    display: block;
}

[data-theme="light"] .dark-mode-toggle .icon-sun {
    display: none;
}

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

[data-theme="dark"] .dark-mode-toggle .icon-sun {
    display: block;
}

/* QR Codes in dark mode */
[data-theme="dark"] canvas {
    background-color: white;
    border-radius: 4px;
}

/* Calendar dark mode adjustments */
.calendar-day {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.calendar-day:hover {
    background-color: var(--bg-hover);
}

.calendar-day.has-events {
    background-color: var(--primary-color);
    color: var(--text-inverse);
}

/* Stats cards */
.stats-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.stats-card .stats-number {
    color: var(--text-primary);
}

.stats-card .stats-label {
    color: var(--text-secondary);
}

/* Animations for theme transitions */
*:not(.no-transition) {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Force dark theme backgrounds on major layout elements */
[data-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] .dashboard,
[data-theme="dark"] .main-content,
[data-theme="dark"] .container,
[data-theme="dark"] .login-container {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Inventory table specific styling */
[data-theme="dark"] .inventory-table,
[data-theme="dark"] .inventory-table tbody,
[data-theme="dark"] .inventory-table thead {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Override any inline styles that might interfere */
[data-theme="dark"] div[style*="background"],
[data-theme="dark"] td[style*="background"],
[data-theme="dark"] th[style*="background"] {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Specific component overrides */
[data-theme="dark"] .login-card,
[data-theme="dark"] .form-group,
[data-theme="dark"] .form-label {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Ensure buttons don't inherit wrong backgrounds */
[data-theme="dark"] .btn:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-info) {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Fix for table rows */
[data-theme="dark"] .table tbody tr {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table tbody tr:nth-of-type(odd) {
    background-color: var(--bg-secondary) !important;
}

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

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

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

/* Fix for modals */
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Print styles - force light mode for printing */
@media print {
    * {
        background-color: white !important;
        color: black !important;
        border-color: #ccc !important;
        box-shadow: none !important;
    }
    
    .dark-mode-toggle {
        display: none !important;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dark-mode-toggle {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
    }
    
    .dark-mode-toggle .icon {
        font-size: 1rem;
    }
}