/* ===========================================
   Apex AI PWA - Dark Mode Stylesheet
   =========================================== */

/* CSS Custom Properties for Dark Theme */
:root {
    /* Light mode defaults */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3f4f6;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-modal-overlay: rgba(0, 0, 0, 0.5);
    
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;
    
    --border-primary: #e5e7eb;
    --border-secondary: #f3f4f6;
    --border-input: #e5e7eb;
    
    --primary-blue: #3b82f6;
    --primary-blue-dark: #2563eb;
    --light-blue: #eff6ff;
    --success-green: #10b981;
    --success-green-light: #d1fae5;
    --danger-red: #dc2626;
    --danger-red-light: #fef2f2;
    --warning-orange: #f59e0b;
    --warning-orange-light: #fef3c7;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Variables */
.dark-mode,
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --bg-input: #334155;
    --bg-modal-overlay: rgba(0, 0, 0, 0.75);
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0f172a;
    
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-input: #475569;
    
    --primary-blue: #3b82f6;
    --primary-blue-dark: #60a5fa;
    --light-blue: rgba(59, 130, 246, 0.15);
    --success-green: #22c55e;
    --success-green-light: rgba(34, 197, 94, 0.15);
    --danger-red: #ef4444;
    --danger-red-light: rgba(239, 68, 68, 0.15);
    --warning-orange: #f97316;
    --warning-orange-light: rgba(249, 115, 22, 0.15);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Auto dark mode based on system preference */

/* ===========================================
   Base Elements
   =========================================== */

.dark-mode body,
[data-theme="dark"] body,

/* Body - apply dark mode styles */
.dark-mode,
[data-theme="dark"] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

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

/* ===========================================
   Headers & Navigation
   =========================================== */

.dark-mode .header,
[data-theme="dark"] .header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

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

.dark-mode .back-btn,
[data-theme="dark"] .back-btn {
    color: var(--primary-blue) !important;
}

/* ===========================================
   Bottom Navigation
   =========================================== */

.dark-mode .bottom-nav,
.dark-mode nav[style*="position: fixed"][style*="bottom"],
[data-theme="dark"] .bottom-nav,
[data-theme="dark"] nav[style*="position: fixed"][style*="bottom"] {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border-primary) !important;
}

.dark-mode .nav-item,
.dark-mode .bottom-nav a,
[data-theme="dark"] .nav-item,
[data-theme="dark"] .bottom-nav a {
    color: var(--text-secondary) !important;
}

.dark-mode .nav-item.active,
.dark-mode .bottom-nav a.active,
[data-theme="dark"] .nav-item.active,
[data-theme="dark"] .bottom-nav a.active {
    color: var(--primary-blue) !important;
}

/* ===========================================
   Tabs
   =========================================== */

.dark-mode .tabs,
[data-theme="dark"] .tabs {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

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

.dark-mode .tab.active,
[data-theme="dark"] .tab.active {
    color: var(--primary-blue) !important;
    border-bottom-color: var(--primary-blue) !important;
}

/* ===========================================
   Cards & Sections
   =========================================== */

.dark-mode .card,
.dark-mode .section,
.dark-mode .tier-card,
.dark-mode .job-card,
.dark-mode .stat-card,
.dark-mode .customer-card,
.dark-mode .invoice-card,
[data-theme="dark"] .card,
[data-theme="dark"] .section,
[data-theme="dark"] .tier-card,
[data-theme="dark"] .job-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .customer-card,
[data-theme="dark"] .invoice-card {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.dark-mode .section-header,
.dark-mode .card-header,
[data-theme="dark"] .section-header,
[data-theme="dark"] .card-header {
    border-bottom-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .section-row,
.dark-mode .card-row,
[data-theme="dark"] .section-row,
[data-theme="dark"] .card-row {
    border-bottom-color: var(--border-secondary) !important;
}

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

.dark-mode .section-row-value,
[data-theme="dark"] .section-row-value {
    color: var(--text-primary) !important;
}

/* ===========================================
   Forms & Inputs
   =========================================== */

.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode .form-input,
.dark-mode .form-control,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-control {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

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

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus,
.dark-mode .form-input:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-input:focus {
    border-color: var(--primary-blue) !important;
    outline: none;
}

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

/* ===========================================
   Buttons
   =========================================== */

.dark-mode .btn-primary,
[data-theme="dark"] .btn-primary {
    background: var(--primary-blue) !important;
    color: white !important;
}

.dark-mode .btn-secondary,
[data-theme="dark"] .btn-secondary {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

.dark-mode .btn-danger,
[data-theme="dark"] .btn-danger {
    background: var(--danger-red-light) !important;
    color: var(--danger-red) !important;
}

/* ===========================================
   Modals & Overlays
   =========================================== */

.dark-mode .modal,
.dark-mode .modal-content,
.dark-mode .dialog,
.dark-mode .overlay-content,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dialog,
[data-theme="dark"] .overlay-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

.dark-mode .modal-overlay,
.dark-mode .overlay,
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .overlay {
    background: var(--bg-modal-overlay) !important;
}

.dark-mode .modal-header,
.dark-mode .modal-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border-primary) !important;
}

/* ===========================================
   Calendar & Schedule Views
   =========================================== */

.dark-mode .calendar,
.dark-mode .calendar-header,
.dark-mode .calendar-grid,
[data-theme="dark"] .calendar,
[data-theme="dark"] .calendar-header,
[data-theme="dark"] .calendar-grid {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.dark-mode .calendar-day,
[data-theme="dark"] .calendar-day {
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .calendar-day.today,
[data-theme="dark"] .calendar-day.today {
    background: var(--light-blue) !important;
    border-color: var(--primary-blue) !important;
}

.dark-mode .calendar-day.selected,
[data-theme="dark"] .calendar-day.selected {
    background: var(--primary-blue) !important;
    color: white !important;
}

.dark-mode .calendar-day.other-month,
[data-theme="dark"] .calendar-day.other-month {
    color: var(--text-muted) !important;
}

.dark-mode .time-slot,
.dark-mode .schedule-item,
[data-theme="dark"] .time-slot,
[data-theme="dark"] .schedule-item {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* ===========================================
   Job Cards & Lists
   =========================================== */

.dark-mode .job-card,
.dark-mode .job-item,
.dark-mode .job-list-item,
[data-theme="dark"] .job-card,
[data-theme="dark"] .job-item,
[data-theme="dark"] .job-list-item {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
}

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

.dark-mode .job-details,
.dark-mode .job-meta,
.dark-mode .job-time,
[data-theme="dark"] .job-details,
[data-theme="dark"] .job-meta,
[data-theme="dark"] .job-time {
    color: var(--text-secondary) !important;
}

.dark-mode .job-status.scheduled,
[data-theme="dark"] .job-status.scheduled {
    background: var(--light-blue) !important;
    color: var(--primary-blue) !important;
}

.dark-mode .job-status.in-progress,
[data-theme="dark"] .job-status.in-progress {
    background: var(--warning-orange-light) !important;
    color: var(--warning-orange) !important;
}

.dark-mode .job-status.completed,
[data-theme="dark"] .job-status.completed {
    background: var(--success-green-light) !important;
    color: var(--success-green) !important;
}

/* ===========================================
   Tables & Data Displays
   =========================================== */

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

.dark-mode th,
.dark-mode .table-header,
[data-theme="dark"] th,
[data-theme="dark"] .table-header {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

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

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

/* ===========================================
   Toasts & Alerts
   =========================================== */

.dark-mode .toast,
.dark-mode .alert,
.dark-mode .notification,
[data-theme="dark"] .toast,
[data-theme="dark"] .alert,
[data-theme="dark"] .notification {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

.dark-mode .toast.success,
.dark-mode .alert-success,
[data-theme="dark"] .toast.success,
[data-theme="dark"] .alert-success {
    background: var(--success-green) !important;
    color: white !important;
}

.dark-mode .toast.error,
.dark-mode .alert-error,
.dark-mode .alert-danger,
[data-theme="dark"] .toast.error,
[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger {
    background: var(--danger-red) !important;
    color: white !important;
}

.dark-mode .toast.info,
.dark-mode .alert-info,
[data-theme="dark"] .toast.info,
[data-theme="dark"] .alert-info {
    background: var(--primary-blue) !important;
    color: white !important;
}

.dark-mode .toast.warning,
.dark-mode .alert-warning,
[data-theme="dark"] .toast.warning,
[data-theme="dark"] .alert-warning {
    background: var(--warning-orange) !important;
    color: white !important;
}

/* ===========================================
   Danger Zone
   =========================================== */

.dark-mode .danger-zone,
[data-theme="dark"] .danger-zone {
    background: var(--danger-red-light) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.dark-mode .danger-zone h3,
.dark-mode .danger-zone p,
[data-theme="dark"] .danger-zone h3,
[data-theme="dark"] .danger-zone p {
    color: var(--danger-red) !important;
}

/* ===========================================
   Toggle Switch Dark Mode Styling
   =========================================== */

.dark-mode .toggle,
[data-theme="dark"] .toggle {
    background: var(--bg-tertiary) !important;
}

.dark-mode .toggle.active,
[data-theme="dark"] .toggle.active {
    background: var(--primary-blue) !important;
}

.dark-mode .toggle-row,
[data-theme="dark"] .toggle-row {
    border-bottom-color: var(--border-secondary) !important;
}

/* ===========================================
   Status Badges & Tags
   =========================================== */

.dark-mode .badge,
.dark-mode .tag,
.dark-mode .tier-badge,
[data-theme="dark"] .badge,
[data-theme="dark"] .tag,
[data-theme="dark"] .tier-badge {
    background: var(--primary-blue) !important;
    color: white !important;
}

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

/* ===========================================
   Links
   =========================================== */

.dark-mode a,
[data-theme="dark"] a {
    color: var(--primary-blue);
}

.dark-mode a:hover,
[data-theme="dark"] a:hover {
    color: var(--primary-blue-dark);
}

/* ===========================================
   Scrollbars
   =========================================== */

.dark-mode ::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-mode ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.dark-mode ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===========================================
   Stats & Metrics Cards
   =========================================== */

.dark-mode .stat-card,
.dark-mode .metric-card,
.dark-mode .stats-grid > div,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .stats-grid > div {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
}

.dark-mode .stat-value,
.dark-mode .metric-value,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .metric-value {
    color: var(--text-primary) !important;
}

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

/* ===========================================
   Invoice & Customer Lists
   =========================================== */

.dark-mode .invoice-item,
.dark-mode .customer-item,
.dark-mode .list-item,
[data-theme="dark"] .invoice-item,
[data-theme="dark"] .customer-item,
[data-theme="dark"] .list-item {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
}

.dark-mode .invoice-item:hover,
.dark-mode .customer-item:hover,
.dark-mode .list-item:hover,
[data-theme="dark"] .invoice-item:hover,
[data-theme="dark"] .customer-item:hover,
[data-theme="dark"] .list-item:hover {
    background: var(--bg-tertiary) !important;
}

/* ===========================================
   Search Bars
   =========================================== */

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

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

/* ===========================================
   Empty States
   =========================================== */

.dark-mode .empty-state,
.dark-mode .no-data,
.dark-mode .placeholder,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .no-data,
[data-theme="dark"] .placeholder {
    color: var(--text-muted) !important;
}

/* ===========================================
   Icons (Lucide)
   =========================================== */

.dark-mode [data-lucide],
.dark-mode .lucide,
[data-theme="dark"] [data-lucide],
[data-theme="dark"] .lucide {
    stroke: var(--text-primary);
}

.dark-mode .header [data-lucide],
.dark-mode .header .lucide,
[data-theme="dark"] .header [data-lucide],
[data-theme="dark"] .header .lucide {
    stroke: var(--text-primary);
}

/* ===========================================
   Range Slider
   =========================================== */

.dark-mode input[type="range"],
[data-theme="dark"] input[type="range"] {
    background: var(--bg-tertiary) !important;
}

.dark-mode input[type="range"]::-webkit-slider-thumb,
[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
    background: var(--primary-blue) !important;
}

/* ===========================================
   Checkbox & Radio
   =========================================== */

.dark-mode input[type="checkbox"],
.dark-mode input[type="radio"],
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    accent-color: var(--primary-blue);
}

/* ===========================================
   Horizontal Rules & Dividers
   =========================================== */

.dark-mode hr,
.dark-mode .divider,
[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: var(--border-primary) !important;
    background-color: var(--border-primary) !important;
}

/* ===========================================
   Progress Bars
   =========================================== */

.dark-mode .progress,
.dark-mode .progress-bar,
[data-theme="dark"] .progress,
[data-theme="dark"] .progress-bar {
    background: var(--bg-tertiary) !important;
}

.dark-mode .progress-fill,
.dark-mode .progress-bar-fill,
[data-theme="dark"] .progress-fill,
[data-theme="dark"] .progress-bar-fill {
    background: var(--primary-blue) !important;
}

/* ===========================================
   Dropdown Menus
   =========================================== */

.dark-mode .dropdown,
.dark-mode .dropdown-menu,
.dark-mode .menu,
[data-theme="dark"] .dropdown,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .menu {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

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

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

/* ===========================================
   Inline Styles Override (Common patterns)
   =========================================== */

.dark-mode [style*="background: white"],
.dark-mode [style*="background:#fff"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background:#ffffff"],
.dark-mode [style*="background: #ffffff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"] {
    background: var(--bg-card) !important;
}

.dark-mode [style*="color: #1f2937"],
.dark-mode [style*="color:#1f2937"],
[data-theme="dark"] [style*="color: #1f2937"],
[data-theme="dark"] [style*="color:#1f2937"] {
    color: var(--text-primary) !important;
}

.dark-mode [style*="color: #6b7280"],
.dark-mode [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6b7280"] {
    color: var(--text-secondary) !important;
}

.dark-mode [style*="border-color: #e5e7eb"],
.dark-mode [style*="border-color:#e5e7eb"],
.dark-mode [style*="border: 1px solid #e5e7eb"],
[data-theme="dark"] [style*="border-color: #e5e7eb"],
[data-theme="dark"] [style*="border-color:#e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"] {
    border-color: var(--border-primary) !important;
}

/* ===========================================
   Tier Cards Special
   =========================================== */

.dark-mode .tier-card.current,
[data-theme="dark"] .tier-card.current {
    border-color: var(--primary-blue) !important;
    background: var(--light-blue) !important;
}

/* ===========================================
   QuickBooks Integration Section
   =========================================== */

.dark-mode #qb-sync-indicator,
[data-theme="dark"] #qb-sync-indicator {
    background: var(--success-green-light) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.dark-mode #qb-sync-indicator[style*="background: #fef2f2"],
[data-theme="dark"] #qb-sync-indicator[style*="background: #fef2f2"] {
    background: var(--danger-red-light) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}