:root {
    /* Fonts & Typography */
    --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Light Theme Palette */
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --card-border: rgba(15, 23, 42, 0.08);
    --card-border-hover: rgba(99, 102, 241, 0.4);
    --accent-glow: rgba(99, 102, 241, 0.05);
    
    --accent-color: #6366f1;
    --accent-hover: #4f46e5;
    
    --text-main: #0f172a;
    --text-muted: #64748b;
    
    /* Inputs */
    --input-bg: #f8fafc;
    --input-border: #e2e8f0;
    --input-text: #0f172a;
    --input-focus: #6366f1;
    
    /* Semantic Status Colors */
    --status-new: #3b82f6;
    --status-new-bg: rgba(59, 130, 246, 0.08);
    --status-progress: #d97706;
    --status-progress-bg: rgba(217, 119, 6, 0.08);
    --status-fixed: #6366f1;
    --status-fixed-bg: rgba(99, 102, 241, 0.08);
    --status-resolved: #10b981;
    --status-resolved-bg: rgba(16, 185, 129, 0.08);
    
    /* Priorities */
    --priority-laag: #64748b;
    --priority-laag-bg: rgba(100, 116, 139, 0.08);
    --priority-normaal: #3b82f6;
    --priority-normaal-bg: rgba(59, 130, 246, 0.08);
    --priority-hoog: #ef4444;
    --priority-hoog-bg: rgba(239, 68, 68, 0.08);
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
}

[data-theme="dark"] {
    /* Dark Theme Palette - Vibrant Glass & Slate */
    --bg-color: #0b0f19;
    --card-bg: #111827;
    --card-border: rgba(255, 255, 255, 0.06);
    --card-border-hover: rgba(129, 140, 248, 0.6);
    --accent-glow: rgba(99, 102, 241, 0.2);
    
    --accent-color: #818cf8;
    --accent-hover: #6366f1;
    
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    
    /* Inputs */
    --input-bg: #1f2937;
    --input-border: #374151;
    --input-text: #f3f4f6;
    --input-focus: #818cf8;
    
    /* Semantic Status Colors (Dark desaturated) */
    --status-new: #60a5fa;
    --status-new-bg: rgba(96, 165, 250, 0.15);
    --status-progress: #fbbf24;
    --status-progress-bg: rgba(251, 191, 36, 0.15);
    --status-fixed: #818cf8;
    --status-fixed-bg: rgba(129, 140, 248, 0.15);
    --status-resolved: #34d399;
    --status-resolved-bg: rgba(52, 211, 153, 0.15);
    
    /* Priorities */
    --priority-laag: #9ca3af;
    --priority-laag-bg: rgba(156, 163, 175, 0.15);
    --priority-normaal: #60a5fa;
    --priority-normaal-bg: rgba(96, 165, 250, 0.15);
    --priority-hoog: #f87171;
    --priority-hoog-bg: rgba(248, 113, 113, 0.15);
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   GLOBAL STYLE CLEANUPS
   ========================================================================== */

body {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
    font-family: var(--font-main) !important;
}

header {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--card-border) !important;
}

[data-theme="dark"] header {
    background: rgba(17, 24, 39, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Base Cards */
.card, 
.login-card, 
.claim-card, 
.analytics-card, 
.settings-card, 
.detail-card,
.stat-card,
.controls-card,
.timeline-card,
.action-panel {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .controls-card,
[data-theme="dark"] .claim-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .action-panel {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Premium Dashboard Card Hover Animations */
.claim-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.claim-card:hover {
    transform: translateY(-4px) scale(1.012) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--accent-color) !important;
}

/* Glow outline hover effects on prioritized tasks in dark mode */
[data-theme="dark"] .claim-card[data-priority="hoog"]:hover {
    box-shadow: 0 10px 25px -5px rgba(248, 113, 113, 0.25) !important;
    border-color: rgba(248, 113, 113, 0.5) !important;
}

[data-theme="dark"] .claim-card[data-priority="normaal"]:hover {
    box-shadow: 0 10px 25px -5px rgba(96, 165, 250, 0.25) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}

[data-theme="dark"] .claim-card[data-priority="laag"]:hover {
    box-shadow: 0 10px 25px -5px rgba(156, 163, 175, 0.2) !important;
    border-color: rgba(156, 163, 175, 0.4) !important;
}

/* Standard Inputs, Dropdowns & Textareas */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
.search-bar,
select,
textarea {
    background-color: var(--input-bg) !important;
    border: 1.5px solid var(--input-border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] .search-bar,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

input:focus,
.search-bar:focus,
select:focus,
textarea:focus {
    border-color: var(--input-focus) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    background-color: var(--card-bg) !important;
    outline: none !important;
}

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

/* List Items (Admin panel, etc) */
.list-item {
    background-color: var(--input-bg) !important;
    border: 1.5px solid var(--input-border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .list-item {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.user-edit-details {
    border-top: 1.5px solid var(--input-border) !important;
}

[data-theme="dark"] .user-edit-details {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Secondary & Special Components */
.tab-nav,
.tab-container,
div[style*="background: #e2e8f0"],
div[style*="background: rgb(226, 232, 240)"] {
    background-color: var(--input-border) !important;
}

[data-theme="dark"] .tab-nav,
[data-theme="dark"] .tab-container,
[data-theme="dark"] div[style*="background: #e2e8f0"],
[data-theme="dark"] div[style*="background: rgb(226, 232, 240)"] {
    background-color: #1f2937 !important;
}

/* View switcher button colors */
.tab-btn:not(.active) {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .tab-btn.active {
    background-color: var(--card-bg) !important;
    color: var(--accent-color) !important;
}

/* Dropzones & File Upload areas */
.file-upload {
    border: 2px dashed var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
}

.file-upload:hover {
    border-color: var(--accent-color) !important;
    background-color: var(--accent-glow) !important;
}

[data-theme="dark"] .file-upload {
    border-color: var(--input-border) !important;
    background-color: var(--input-bg) !important;
}

/* Audio Recording, Screenshots and preview cards */
#audioRecordContainer,
#screenshotPreviewContainer,
div[style*="background: #f8fafc"],
div[style*="background: rgb(248, 250, 252)"],
div[style*="background: #f1f5f9"],
div[style*="background: rgb(241, 245, 249)"] {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] #audioRecordContainer,
[data-theme="dark"] #screenshotPreviewContainer,
[data-theme="dark"] div[style*="background: #f8fafc"],
[data-theme="dark"] div[style*="background: rgb(248, 250, 252)"],
[data-theme="dark"] div[style*="background: #f1f5f9"],
[data-theme="dark"] div[style*="background: rgb(241, 245, 249)"] {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Labels, Badges & Tags */
.fixer-tag {
    background-color: var(--input-bg) !important;
    border: 1.5px solid var(--input-border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .fixer-tag {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.grab-bar {
    background-color: var(--text-muted) !important;
    opacity: 0.4;
}

/* Secondary Buttons */
.btn-secondary {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .btn-secondary {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: var(--text-main) !important;
}

/* Dividers & lines */
hr, 
.divider,
div[style*="border-top: 1px solid #f1f5f9"],
div[style*="border-top: 1px solid rgb(241, 245, 249)"],
div[style*="border-bottom: 1px solid #f1f5f9"],
div[style*="border-bottom: 1px solid rgb(241, 245, 249)"] {
    border-top-color: var(--card-border) !important;
    border-bottom-color: var(--card-border) !important;
}

/* Results counts & muted texts */
.text-muted,
.muted-text,
p.meta,
span.date,
#resultsCounter {
    color: var(--text-muted) !important;
}

/* Priority Pills (desaturated light backgrounds) */
.priority-laag { background-color: var(--priority-laag-bg) !important; color: var(--priority-laag) !important; border-color: rgba(100, 116, 139, 0.15) !important; }
.priority-normaal { background-color: var(--priority-normaal-bg) !important; color: var(--priority-normaal) !important; border-color: rgba(59, 130, 246, 0.15) !important; }
.priority-hoog { background-color: var(--priority-hoog-bg) !important; color: var(--priority-hoog) !important; border-color: rgba(239, 68, 68, 0.15) !important; }

/* Status Pills */
.status-new { background-color: var(--status-new-bg) !important; color: var(--status-new) !important; border-color: rgba(59, 130, 246, 0.2) !important; }
.status-progress { background-color: var(--status-progress-bg) !important; color: var(--status-progress) !important; border-color: rgba(245, 158, 11, 0.2) !important; }
.status-fixed { background-color: var(--status-fixed-bg) !important; color: var(--status-fixed) !important; border-color: rgba(99, 102, 241, 0.2) !important; }
.status-resolved { background-color: var(--status-resolved-bg) !important; color: var(--status-resolved) !important; border-color: rgba(16, 185, 129, 0.2) !important; }

/* Glowing status lights inside badge icons */
[data-theme="dark"] .status-pill,
[data-theme="dark"] .priority-badge {
    box-shadow: 0 0 12px -2px var(--accent-glow) !important;
}

/* Dynamic span status labels */
span[style*="background: #f1f5f9"],
span[style*="background: rgb(241, 245, 249)"] {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-muted) !important;
}

/* Modals, Overlays & Glassmorphic backdrop blur */
.modal,
.dialog-overlay,
div[style*="background: rgba(15, 23, 42, 0.4)"],
div[style*="background: rgba(15, 23, 42, 0.5)"] {
    background-color: rgba(9, 13, 22, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    overflow-y: auto !important; /* Make background wrapper scrollable */
}

.modal-content,
.dialog-content,
.modal-body {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .dialog-content {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4) !important;
}

.modal-card {
    max-height: 90vh !important;
    overflow-y: auto !important;
}

/* Kanban board theme adaptation */
[data-theme="dark"] .kanban-column {
    background-color: rgba(17, 24, 39, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .kanban-column-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .kanban-column-count {
    background-color: #1f2937 !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .kanban-column.drag-over {
    background-color: rgba(99, 102, 241, 0.15) !important;
    border-color: var(--accent-color) !important;
}

/* Redesigned Back Navigation Button */
.back-nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--text-muted) !important;
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 50px !important;
    padding: 0.45rem 1.05rem !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--shadow-sm) !important;
    width: fit-content !important;
}

.back-nav:hover {
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateX(-4px) !important;
}

.back-nav svg {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.25s ease !important;
    stroke-width: 2.5 !important;
}

.back-nav:hover svg {
    transform: translateX(-2px) !important;
}

/* Premium dark scrollbars */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-color);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #374151;
}