/**
 * Domain Manager Theme System
 * 
 * Theme Rules:
 * - Light theme: Purple accents, black base rows, NO row hover
 * - Dark theme: Yellow accents, yellow base rows, NO row hover
 * - Status colors (red/yellow/green) ALWAYS render in light style regardless of theme
 * - No page-wide transitions on theme switch (only toggle button animates)
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Theme Variables)
   ============================================ */
:root {
    /* Light Theme (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-tertiary: #e5e7eb;
    --bg-sidebar: #ffffff;
    
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;
    
    --border-primary: #d1d5db;
    --border-secondary: #e5e7eb;
    
    /* Light theme accent: PURPLE */
    --accent-50: #faf5ff;
    --accent-100: #f3e8ff;
    --accent-200: #e9d5ff;
    --accent-300: #d8b4fe;
    --accent-400: #c084fc;
    --accent-500: #a855f7;
    --accent-600: #9333ea;
    --accent-700: #7e22ce;
    --accent-800: #6b21a8;
    --accent-900: #581c87;
    
    /* Button colors - Purple for light theme */
    --btn-primary-bg: #9333ea;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #7e22ce;
    --btn-secondary-bg: #f3f4f6;
    --btn-secondary-text: #374151;
    --btn-secondary-hover: #e5e7eb;
    
    /* Form focus - Purple */
    --focus-ring: #c084fc;
    --focus-ring-offset: #ffffff;
    
    /* Sidebar active - Purple */
    --sidebar-active-bg: #9333ea;
    --sidebar-active-text: #ffffff;
    
    /* Sort arrow active color - Purple */
    --sort-active-color: #9333ea;
    
    /* Table row colors - Light theme */
    --table-row-bg: #ffffff;
    --table-hover-bg: #ffffff;
    --table-hover-enabled: 1;
    
    /* Base separator row - Black in light theme */
    --base-separator-bg: #1f2937;
    --base-separator-text: #ffffff;
    
    /* Row highlight - Purple */
    --row-highlight-color: #9333ea;
    
    /* Modal/card shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Status colors - ALWAYS light style (never change based on theme) */
    --status-red-bg: #fecaca;
    --status-red-text: #7f1d1d;
    --status-yellow-bg: #fef9c3;
    --status-yellow-text: #854d0e;
    --status-green-bg: #bbf7d0;
    --status-green-text: #14532d;
    --status-white-bg: #ffffff;
}

/* Dark Theme */
html.dark {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-sidebar: #1f2937;
    
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-muted: #6b7280;
    
    --border-primary: #374151;
    --border-secondary: #4b5563;
    
    /* Dark theme accent: YELLOW */
    --accent-50: #fefce8;
    --accent-100: #fef9c3;
    --accent-200: #fef08a;
    --accent-300: #fde047;
    --accent-400: #facc15;
    --accent-500: #eab308;
    --accent-600: #ca8a04;
    --accent-700: #a16207;
    --accent-800: #854d0e;
    --accent-900: #713f12;
    
    /* Button colors - Yellow for dark theme */
    --btn-primary-bg: #facc15;
    --btn-primary-text: #1f2937;
    --btn-primary-hover: #fde047;
    --btn-secondary-bg: #374151;
    --btn-secondary-text: #d1d5db;
    --btn-secondary-hover: #4b5563;
    
    /* Form focus - Yellow */
    --focus-ring: #facc15;
    --focus-ring-offset: #111827;
    
    /* Sidebar active - Yellow */
    --sidebar-active-bg: #facc15;
    --sidebar-active-text: #1f2937;
    
    /* Sort arrow active color - Yellow */
    --sort-active-color: #facc15;
    
    /* Table row colors - Dark theme (no hover) */
    --table-row-bg: #1f2937;
    --table-hover-bg: transparent;
    --table-hover-enabled: 0;
    
    /* Base separator row - Yellow in dark theme */
    --base-separator-bg: #facc15;
    --base-separator-text: #1f2937;
    
    /* Row highlight - Yellow */
    --row-highlight-color: #facc15;
    
    /* Shadows for dark mode */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
    
    /* STATUS COLORS - Softer, more pleasant for dark theme */
    /* Muted, desaturated colors that are easier on the eyes */
    --status-red-bg: #4a2020;
    --status-red-text: #fca5a5;
    --status-yellow-bg: #3b3520;
    --status-yellow-text: #e8d480;
    --status-green-bg: #2d5a3d;
    --status-green-text: #86efac;
    --status-white-bg: #1f2937;
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--bg-tertiary);
    transform: scale(1.05);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: all 0.3s ease;
}

html:not(.dark) .theme-toggle .icon-moon { opacity: 0; transform: rotate(180deg); }
html:not(.dark) .theme-toggle .icon-sun { opacity: 1; transform: rotate(0); }
html.dark .theme-toggle .icon-sun { opacity: 0; transform: rotate(-180deg); }
html.dark .theme-toggle .icon-moon { opacity: 1; transform: rotate(0); }

/* ============================================
   ACCENT COLOR CLASSES
   Light theme: Purple | Dark theme: Yellow
   ============================================ */

/* Primary buttons - use theme accent */
.btn-accent {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

.btn-accent:hover {
    background-color: var(--btn-primary-hover) !important;
}

/* Yellow utility classes - only apply in appropriate theme */
/* Light theme: these become purple */
html:not(.dark) .bg-yellow-500,
html:not(.dark) .bg-yellow-600 {
    background-color: #9333ea !important;
}

html:not(.dark) .hover\:bg-yellow-600:hover,
html:not(.dark) .hover\:bg-yellow-700:hover {
    background-color: #7e22ce !important;
}

html:not(.dark) .text-yellow-600,
html:not(.dark) .text-yellow-500,
html:not(.dark) .text-yellow-700 {
    color: #9333ea !important;
}

html:not(.dark) .border-yellow-300,
html:not(.dark) .border-yellow-500 {
    border-color: #c084fc !important;
}

html:not(.dark) .bg-yellow-50,
html:not(.dark) .bg-yellow-100 {
    background-color: #faf5ff !important;
}

html:not(.dark) .hover\:bg-yellow-100:hover {
    background-color: #f3e8ff !important;
}

/* Dark theme: yellow classes stay yellow */
html.dark .bg-yellow-500,
html.dark .bg-yellow-600 {
    background-color: #facc15 !important;
}

html.dark .hover\:bg-yellow-600:hover,
html.dark .hover\:bg-yellow-700:hover {
    background-color: #fde047 !important;
}

html.dark .text-yellow-600,
html.dark .text-yellow-500,
html.dark .text-yellow-700 {
    color: #facc15 !important;
}

html.dark .border-yellow-300,
html.dark .border-yellow-500 {
    border-color: #fde047 !important;
}

html.dark .bg-yellow-50,
html.dark .bg-yellow-100 {
    background-color: rgba(250, 204, 21, 0.1) !important;
}

html.dark .hover\:bg-yellow-100:hover {
    background-color: rgba(250, 204, 21, 0.15) !important;
}

/* Sidebar active state */
.sidebar-item.active {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
}

/* Sort arrow */
.sort-arrow.active::before {
    color: var(--sort-active-color) !important;
}

/* Row highlight */
.row-highlight {
    outline: 3px solid var(--row-highlight-color) !important;
    outline-offset: -3px;
}

/* ============================================
   BASE SEPARATOR ROW
   Light: Black | Dark: Yellow
   ============================================ */
.base-separator {
    background-color: var(--base-separator-bg) !important;
    color: var(--base-separator-text) !important;
    font-weight: bold;
}

/* ============================================
   TABLE ROW STYLING WITH STATUS COLOR PRIORITY
   ============================================ */

/* Default row (white/no status) - follows theme */
.row-white {
    background-color: var(--status-white-bg) !important;
}

/* Dark theme: rows without status color get dark background */
html.dark .row-white {
    background-color: var(--table-row-bg) !important;
    color: var(--text-primary);
}

/* Status colors - Light theme (bright, standard colors) */
.row-red {
    background-color: var(--status-red-bg) !important;
    color: var(--status-red-text) !important;
}

.row-yellow {
    background-color: var(--status-yellow-bg) !important;
    color: var(--status-yellow-text) !important;
}

.row-green {
    background-color: var(--status-green-bg) !important;
    color: var(--status-green-text) !important;
}

/* Dark theme: Use CSS variables which have softer colors defined */
/* Text colors are already set via CSS variables */

/* Ensure links in status rows are visible - light theme */
html:not(.dark) .row-red a,
html:not(.dark) .row-yellow a,
html:not(.dark) .row-green a {
    color: #2563eb !important;
}

/* Ensure links in status rows are visible - dark theme (lighter blue) */
html.dark .row-red a,
html.dark .row-yellow a,
html.dark .row-green a {
    color: #93c5fd !important;
}

/* ============================================
   TABLE HOVER BEHAVIOR
   NO row hover in either theme - COMPLETELY DISABLED
   No background change, brightness change, shadow, glow, or color shift
   ============================================ */

/* Universal hover disable - applies to ALL table rows */
tr:hover,
tr:hover td,
tr:hover th,
tbody tr:hover,
tbody tr:hover td,
table tr:hover,
table tr:hover td,
table tbody tr:hover,
table tbody tr:hover td {
    /* Prevent any hover effects */
    filter: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Override Tailwind hover utility classes for table rows */
tr.hover\:bg-gray-50:hover,
tr.hover\:bg-gray-50:hover td,
tr.hover\:bg-gray-100:hover,
tr.hover\:bg-gray-100:hover td,
tr.hover\:bg-gray-200:hover,
tr.hover\:bg-gray-200:hover td,
tr.hover\:bg-red-50:hover,
tr.hover\:bg-red-50:hover td,
tr.hover\:bg-yellow-50:hover,
tr.hover\:bg-yellow-50:hover td,
tr.hover\:bg-green-50:hover,
tr.hover\:bg-green-50:hover td,
.hover\:bg-gray-50:hover,
.hover\:opacity-90:hover,
tr.hover\:opacity-90:hover {
    background-color: inherit !important;
    opacity: 1 !important;
}

/* Editable cells - cursor change only, no background change */
td.editable-cell:hover,
td.editable-text-cell:hover,
.editable-cell:hover,
.editable-text-cell:hover {
    background-color: inherit !important;
    cursor: pointer;
}

/* ============================================
   STATUS ROWS - Maintain exact color on hover
   Both light and dark themes
   ============================================ */

/* Red status rows - no hover change */
tr.row-red:hover,
tr.row-red:hover td,
tr.row-red:hover th,
html.dark tr.row-red:hover,
html.dark tr.row-red:hover td {
    background-color: var(--status-red-bg) !important;
    color: var(--status-red-text) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Yellow status rows - no hover change */
tr.row-yellow:hover,
tr.row-yellow:hover td,
tr.row-yellow:hover th,
html.dark tr.row-yellow:hover,
html.dark tr.row-yellow:hover td {
    background-color: var(--status-yellow-bg) !important;
    color: var(--status-yellow-text) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Green status rows - no hover change */
tr.row-green:hover,
tr.row-green:hover td,
tr.row-green:hover th,
html.dark tr.row-green:hover,
html.dark tr.row-green:hover td {
    background-color: var(--status-green-bg) !important;
    color: var(--status-green-text) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* White/default rows - no hover change */
tr.row-white:hover,
tr.row-white:hover td {
    background-color: var(--status-white-bg) !important;
    filter: none !important;
    opacity: 1 !important;
}

html.dark tr.row-white:hover,
html.dark tr.row-white:hover td {
    background-color: var(--table-row-bg) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ============================================
   BASE SEPARATOR ROWS - No hover change
   ============================================ */
tr.base-separator:hover,
tr.base-separator:hover td,
.base-separator:hover,
html.dark tr.base-separator:hover,
html.dark tr.base-separator:hover td,
html.dark .base-separator:hover {
    background-color: var(--base-separator-bg) !important;
    color: var(--base-separator-text) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ============================================
   DARK MODE GENERAL STYLES
   ============================================ */
html.dark body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

html.dark .bg-white {
    background-color: var(--bg-primary) !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: var(--bg-secondary) !important;
}

html.dark .bg-gray-200,
html.dark .bg-gray-300 {
    background-color: var(--bg-tertiary) !important;
}

html.dark .text-gray-800,
html.dark .text-gray-900 {
    color: var(--text-primary) !important;
}

html.dark .text-gray-600,
html.dark .text-gray-700 {
    color: var(--text-secondary) !important;
}

html.dark .text-gray-500,
html.dark .text-gray-400 {
    color: var(--text-tertiary) !important;
}

html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-b {
    border-color: var(--border-primary) !important;
}

html.dark input,
html.dark select,
html.dark textarea {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.3);
}

html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg {
    box-shadow: var(--shadow-md) !important;
}

/* Dark mode tables */
html.dark table {
    background-color: var(--bg-primary);
}

html.dark th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

html.dark td {
    border-color: var(--border-primary);
}

/* Dark mode sidebar */
html.dark .sidebar,
html.dark #sidebar {
    background-color: var(--bg-sidebar) !important;
}

html.dark .sidebar .border-b,
html.dark .sidebar .border-t {
    border-color: var(--border-primary) !important;
}

/* Status badges - always light style */
.status-badge.status-red {
    background-color: var(--status-red-bg);
    color: var(--status-red-text);
}

.status-badge.status-yellow {
    background-color: var(--status-yellow-bg);
    color: var(--status-yellow-text);
}

.status-badge.status-green {
    background-color: var(--status-green-bg);
    color: var(--status-green-text);
}

/* ============================================
   LOGIN PAGE GRADIENT
   ============================================ */
.gradient-bg {
    background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 50%, #c084fc 100%) !important;
}

html.dark .gradient-bg {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
}

/* ============================================
   TRANSITIONS - DISABLED FOR THEME SWITCHING
   Only the theme toggle button should animate
   ============================================ */
/* Page-wide transitions removed - causes lag on theme switch */
/* The theme-toggle button has its own animation defined above */

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-500);
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */
h1 { font-family: Arial, Helvetica, sans-serif; }

/* ============================================
   EDIT MODE PANEL
   Light: Purple accent | Dark: Yellow accent
   ============================================ */
html:not(.dark) #editModePanel {
    background-color: #faf5ff !important;
}

html:not(.dark) #editModePanel .border-yellow-300 {
    border-color: #c084fc !important;
}

html:not(.dark) #editModePanel .text-yellow-700 {
    color: #7e22ce !important;
}

html.dark #editModePanel {
    background-color: rgba(250, 204, 21, 0.1) !important;
}

/* ============================================
   FILTER PANEL
   ============================================ */
html.dark #filtersPanel {
    background-color: var(--bg-tertiary) !important;
}

/* ============================================
   MODALS
   ============================================ */
html.dark .modal > div,
html.dark [class*="Modal"] > div {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* ============================================
   FIX FOR SPECIFIC TAILWIND CLASSES
   ============================================ */

/* Ensure text colors in status rows are readable - Light theme */
html:not(.dark) .row-red .text-gray-600,
html:not(.dark) .row-red .text-gray-500,
html:not(.dark) .row-yellow .text-gray-600,
html:not(.dark) .row-yellow .text-gray-500,
html:not(.dark) .row-green .text-gray-600,
html:not(.dark) .row-green .text-gray-500 {
    color: #4b5563 !important;
}

/* Ensure text colors in status rows are readable - Dark theme */
/* Use the status text color from CSS variables for consistency */
html.dark .row-red .text-gray-600,
html.dark .row-red .text-gray-500 {
    color: var(--status-red-text) !important;
}

html.dark .row-yellow .text-gray-600,
html.dark .row-yellow .text-gray-500 {
    color: var(--status-yellow-text) !important;
}

html.dark .row-green .text-gray-600,
html.dark .row-green .text-gray-500 {
    color: var(--status-green-text) !important;
}

/* Fix icon colors in dark mode */
html.dark .text-blue-500 {
    color: #60a5fa !important;
}

html.dark .text-green-500 {
    color: #34d399 !important;
}

html.dark .text-orange-500,
html.dark .text-orange-300 {
    color: #fb923c !important;
}

html.dark .text-red-500 {
    color: #f87171 !important;
}

html.dark .text-purple-500 {
    color: #a78bfa !important;
}

/* ============================================
   DARK THEME STATUS ROW ICONS
   Softer, more readable icon colors
   ============================================ */

/* Blue icons in status rows - softer blue */
html.dark .row-red .text-blue-500,
html.dark .row-yellow .text-blue-500,
html.dark .row-green .text-blue-500 {
    color: #93c5fd !important;
}

/* Green icons in status rows - softer green */
html.dark .row-red .text-green-500,
html.dark .row-yellow .text-green-500,
html.dark .row-green .text-green-500 {
    color: #86efac !important;
}

/* Orange icons in status rows - softer orange */
html.dark .row-red .text-orange-500,
html.dark .row-red .text-orange-300,
html.dark .row-yellow .text-orange-500,
html.dark .row-yellow .text-orange-300,
html.dark .row-green .text-orange-500,
html.dark .row-green .text-orange-300 {
    color: #fdba74 !important;
}

/* Red icons in status rows - softer red */
html.dark .row-red .text-red-500,
html.dark .row-red .text-red-400,
html.dark .row-yellow .text-red-500,
html.dark .row-yellow .text-red-400,
html.dark .row-green .text-red-500,
html.dark .row-green .text-red-400 {
    color: #fca5a5 !important;
}

/* ============================================
   IMPORT PAGE - SPECIFIC TEXT COLORS
   Orange for metrics info, Purple for admin options
   ============================================ */

/* Orange text for metrics-related content (both themes) */
.text-metrics-orange {
    color: #ea580c !important;
}

/* Purple text for admin options (both themes) */
.text-admin-purple {
    color: #9333ea !important;
}

/* Override dark theme defaults for these specific classes */
html.dark .text-metrics-orange {
    color: #fb923c !important;
}

html.dark .text-admin-purple {
    color: #a78bfa !important;
}

/* ============================================
   IMPORT PAGE - DARK THEME OPTION BOXES
   Softer, more pleasant backgrounds for dark theme
   ============================================ */

/* Metrics Import box (orange theme) - dark mode */
html.dark .bg-orange-50 {
    background-color: rgba(251, 146, 60, 0.1) !important;
}

html.dark .border-orange-200 {
    border-color: rgba(251, 146, 60, 0.3) !important;
}

/* Admin Options box (purple theme) - dark mode */
html.dark .bg-purple-50 {
    background-color: rgba(167, 139, 250, 0.1) !important;
}

html.dark .border-purple-200 {
    border-color: rgba(167, 139, 250, 0.3) !important;
}

/* Metrics detected info box (green theme) - dark mode */
html.dark .bg-green-50 {
    background-color: rgba(134, 239, 172, 0.1) !important;
}

/* Viborka sub-options box - dark mode */
html.dark #viborkaOptions {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Preview section boxes - dark mode */
html.dark #previewSection .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

/* Modal backgrounds - dark mode */
html.dark #metricsModal .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

/* Import page form inputs and selects - dark mode improvements */
html.dark #viborkaOptions select,
html.dark #viborkaOptions input {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-secondary) !important;
}

html.dark #viborkaOptions label {
    color: var(--text-secondary) !important;
}

/* Import page text adjustments for readability */
html.dark #adminOptionsSection p.text-xs {
    opacity: 0.9;
}

/* Status text in modals - dark mode */
html.dark #metricsImportStatus {
    color: var(--text-tertiary) !important;
}

/* ============================================
   CHECKBOX STYLING - BLUE HIGHLIGHT
   ============================================ */

/* Override checkbox accent color to blue */
input[type="checkbox"] {
    accent-color: #2563eb !important;
}

input[type="checkbox"]:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px;
}

/* Ensure checkbox labels remain readable */
input[type="checkbox"] + span,
input[type="checkbox"] + div,
label input[type="checkbox"] ~ span,
label input[type="checkbox"] ~ div {
    /* Text color unchanged - inherits from parent */
}

/* Focus ring for checkboxes */
input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 2px #3b82f6 !important;
}

/* Radio buttons also get blue accent */
input[type="radio"] {
    accent-color: #2563eb !important;
}

input[type="radio"]:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px;
}

/* ============================================
   PAGE-SPECIFIC NO HOVER RULES
   Applies to all data tables across all pages
   ============================================ */

/* Users page - no hover */
#usersTableBody tr:hover,
#usersTableBody tr:hover td,
html.dark #usersTableBody tr:hover,
html.dark #usersTableBody tr:hover td {
    filter: none !important;
    opacity: 1 !important;
}

/* Storage/Backup page - no hover */
#backupDomainsTable tr:hover,
#backupDomainsTable tr:hover td,
html.dark #backupDomainsTable tr:hover,
html.dark #backupDomainsTable tr:hover td {
    filter: none !important;
    opacity: 1 !important;
}

/* Domains table - no hover */
#domainsTable tr:hover,
#domainsTable tr:hover td,
html.dark #domainsTable tr:hover,
html.dark #domainsTable tr:hover td {
    filter: none !important;
    opacity: 1 !important;
}

/* ============================================
   DARK THEME WORK/ACCESS COLUMN ICONS
   Softer, more pleasant colors
   ============================================ */

/* Work column icons - softer colors in dark theme */
html.dark .access-icon.text-green-500 {
    color: #86efac !important;
}

html.dark .access-icon.text-red-400,
html.dark .access-icon.text-red-500 {
    color: #fca5a5 !important;
}

/* Access column icons - softer colors in dark theme */
html.dark .access-icon.text-blue-500 {
    color: #93c5fd !important;
}

html.dark .access-icon.text-orange-500,
html.dark .access-icon.text-orange-300 {
    color: #fdba74 !important;
}

html.dark .access-icon.text-purple-500 {
    color: #c4b5fd !important;
}

/* ============================================
   POST-IMPORT ANALYSIS MODAL - DARK THEME
   ============================================ */

/* Modal header gradient - dark theme */
html.dark .bg-gradient-to-r.from-blue-50.to-purple-50,
html.dark #postImportAnalysisModal .bg-gradient-to-r {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15)) !important;
}

/* Step 1: Deduplication box (blue) - dark theme */
html.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

html.dark .border-blue-200 {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark .text-blue-800 {
    color: #93c5fd !important;
}

html.dark .text-blue-700 {
    color: #60a5fa !important;
}

html.dark .text-blue-600 {
    color: #60a5fa !important;
}

/* Step 2: Junk Analysis box (green) - already defined but ensure consistency */
html.dark .border-green-200 {
    border-color: rgba(134, 239, 172, 0.3) !important;
}

html.dark .text-green-800 {
    color: #86efac !important;
}

html.dark .text-green-700 {
    color: #4ade80 !important;
}

html.dark .text-green-600 {
    color: #4ade80 !important;
}

/* Duplicates detail section - dark theme */
html.dark details summary {
    color: var(--text-secondary) !important;
}

html.dark details .bg-white {
    background-color: var(--bg-tertiary) !important;
}

/* Analysis tabs - dark theme */
html.dark .analysis-tab {
    color: var(--text-tertiary) !important;
}

html.dark .analysis-tab.border-green-500 {
    color: #4ade80 !important;
}

html.dark .analysis-tab.border-red-500 {
    color: #f87171 !important;
}

/* Analysis lists background - dark theme */
html.dark .analysis-list.bg-white,
html.dark #analysisCleanList,
html.dark #analysisJunkList {
    background-color: var(--bg-tertiary) !important;
}

html.dark .analysis-list .text-gray-700 {
    color: var(--text-secondary) !important;
}

html.dark .analysis-list .text-red-700 {
    color: #fca5a5 !important;
}

/* Export buttons - dark theme */
html.dark .bg-green-100 {
    background-color: rgba(134, 239, 172, 0.15) !important;
}

html.dark .bg-green-100:hover {
    background-color: rgba(134, 239, 172, 0.25) !important;
}

html.dark .text-green-700 {
    color: #86efac !important;
}

html.dark .bg-red-100 {
    background-color: rgba(252, 165, 165, 0.15) !important;
}

html.dark .bg-red-100:hover {
    background-color: rgba(252, 165, 165, 0.25) !important;
}

html.dark .text-red-700 {
    color: #fca5a5 !important;
}

/* Placeholder box for future analyses - dark theme */
html.dark .border-dashed.border-gray-300 {
    border-color: var(--border-secondary) !important;
}

html.dark .border-dashed .text-gray-400 {
    color: var(--text-muted) !important;
}

html.dark .border-dashed .text-gray-500 {
    color: var(--text-tertiary) !important;
}

/* ============================================
   TARGET DATABASE LABELS - DARK THEME
   ============================================ */

/* Joomla label (blue) - dark theme */
html.dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

html.dark .text-blue-700 {
    color: #93c5fd !important;
}

/* ============================================
   SITE STATUS SECTION (CYAN) - DARK THEME
   ============================================ */

html.dark .bg-cyan-50 {
    background-color: rgba(34, 211, 238, 0.1) !important;
}

html.dark .border-cyan-200 {
    border-color: rgba(34, 211, 238, 0.3) !important;
}

html.dark .text-cyan-800,
html.dark .text-cyan-700 {
    color: #67e8f9 !important;
}

html.dark .bg-cyan-600 {
    background-color: #0891b2 !important;
}

/* Status tabs - dark theme */
html.dark .status-tab {
    color: var(--text-tertiary) !important;
}

html.dark .status-tab.border-green-500 {
    color: #4ade80 !important;
}

html.dark .status-tab.border-orange-500 {
    color: #fb923c !important;
}

html.dark .status-tab.border-red-500 {
    color: #f87171 !important;
}

/* Status lists background - dark theme */
html.dark .status-list,
html.dark #siteStatusOnlineList,
html.dark #siteStatusErrorList,
html.dark #siteStatusFailedList {
    background-color: var(--bg-tertiary) !important;
}

/* ============================================
   VIBORKA SECTION (INDIGO) - DARK THEME
   ============================================ */

html.dark .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.1) !important;
}

html.dark .border-indigo-200 {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

html.dark .text-indigo-800,
html.dark .text-indigo-700 {
    color: #a5b4fc !important;
}

html.dark .text-indigo-600 {
    color: #818cf8 !important;
}

html.dark .bg-indigo-600 {
    background-color: #4f46e5 !important;
}

/* Viborka tabs - dark theme */
html.dark .viborka-tab {
    color: var(--text-tertiary) !important;
}

html.dark .viborka-tab.border-green-500 {
    color: #4ade80 !important;
}

html.dark .viborka-tab.border-blue-500 {
    color: #60a5fa !important;
}

html.dark .viborka-tab.border-orange-500 {
    color: #fb923c !important;
}

/* Viborka lists background - dark theme */
html.dark .viborka-list,
html.dark #viborkaMatchedList,
html.dark #viborkaScrapList,
html.dark #viborkaNotJoinedList {
    background-color: var(--bg-tertiary) !important;
}

/* Viborka options section - dark theme */
html.dark #viborkaOptionsSection {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark #viborkaOptionsSection label {
    background-color: var(--bg-secondary) !important;
}