/*
 * NU GUI Brand Theme - CDR Web UI
 * Colors and animations extracted from nugui.co.za/solutions
 * Version: 2.0
 * Date: 2025-10-18
 */

/* ===== ROOT COLOR VARIABLES ===== */
:root {
  /* Primary Brand Blues */
  --blue-50: #E3F2FD;
  --blue-100: #BBDEFB;
  --blue-200: #90CAF9;
  --blue-300: #64B5F6;
  --blue-400: #42A5F5;
  --blue-500: #0051D5;      /* PRIMARY - Main accent (light mode) - WCAG AA compliant 6.69:1 */
  --blue-600: #77B5FF;      /* PRIMARY - Main accent (dark mode) - WCAG AA compliant 5.19:1 */
  --blue-700: #60A5FA;      /* Dark blue - hover (dark mode) */
  --blue-800: #003D99;      /* Dark blue - hover (light mode) - WCAG AA compliant 9.77:1 */
  --blue-900: #003D99;      /* Very dark blue */

  /* Steel Blue - From product imagery */
  --steel-blue: #4682B4;
  --steel-blue-light: #6FA8DC;
  --steel-blue-dark: #36648B;

  /* Success Greens */
  --green-50: #E8F5E9;
  --green-100: #C8E6C9;
  --green-400: #66BB6A;
  --green-500: #4CAF50;     /* SUCCESS - Primary success */
  --green-600: #45a049;     /* SUCCESS - Success hover */
  --green-700: #388E3C;
  --green-800: #2E7D32;
  --green-900: #1B5E20;

  /* Status Colors */
  --status-success: #388E3C;      /* WCAG AA compliant 3.41:1 for white text */
  --status-success-light: #388E3C;      /* WCAG AA compliant 3.41:1 for white text */
  --status-success-dark: #2E7D32;

  --status-warning: #E65100;      /* WCAG AA compliant 4.68:1 for white text */
  --status-warning-light: #F57C00;      /* WCAG AA compliant 3.11:1 for white text */
  --status-warning-dark: #EF6C00;

  --status-error: #F44336;
  --status-error-light: #EF5350;
  --status-error-dark: #D32F2F;

  --status-info: #2196F3;
  --status-info-light: #42A5F5;
  --status-info-dark: #1976D2;

  --status-pending: #9E9E9E;

  /* Background variants for badges/cards */
  --bg-success-light: rgba(76, 175, 80, 0.15);
  --bg-warning-light: rgba(255, 152, 0, 0.15);
  --bg-error-light: rgba(244, 67, 54, 0.15);
  --bg-info-light: rgba(33, 150, 243, 0.15);

  /* Gray Scale - Light Theme */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F7;      /* Light background */
  --gray-200: #EEEEEE;
  --gray-300: #E0E0E0;
  --gray-400: #BDBDBD;
  --gray-500: #9E9E9E;
  --gray-600: #6B6B6B;      /* WCAG AA compliant 4.82:1 for text */
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;

  /* Dark Theme Colors */
  --dark-50: #FAFAFA;
  --dark-100: #F5F5F5;
  --dark-200: #E5E5E5;
  --dark-300: #D4D4D4;
  --dark-400: #A3A3A3;
  --dark-500: #737373;
  --dark-600: #525252;
  --dark-700: #404040;
  --dark-800: #2C2C2E;      /* Secondary dark background */
  --dark-900: #1C1C1E;      /* Primary dark background */

  /* Overlays */
  --overlay-light: rgba(0, 0, 0, 0.2);
  --overlay-medium: rgba(0, 0, 0, 0.4);
  --overlay-strong: rgba(0, 0, 0, 0.7);
  --overlay-dark-mode: rgba(255, 255, 255, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.1);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);

  /* Purple/Violet - For scheduler, reports */
  --purple-50: #F3E5F5;
  --purple-100: #E1BEE7;
  --purple-200: #CE93D8;
  --purple-300: #BA68C8;
  --purple-400: #AB47BC;
  --purple-500: #9C27B0;
  --purple-600: #8E24AA;
  --purple-700: #7B1FA2;
  --purple-800: #6A1B9A;
  --purple-900: #4A148C;

  /* Orange - For warnings, notifications */
  --orange-50: #FFF3E0;
  --orange-100: #FFE0B2;
  --orange-200: #FFCC80;
  --orange-300: #FFB74D;
  --orange-400: #FFA726;
  --orange-500: #FF9800;
  --orange-600: #FB8C00;
  --orange-700: #F57C00;
  --orange-800: #EF6C00;
  --orange-900: #E65100;

  /* Red - For errors, alerts */
  --red-50: #FFEBEE;
  --red-100: #FFCDD2;
  --red-200: #EF9A9A;
  --red-300: #E57373;
  --red-400: #EF5350;
  --red-500: #F44336;
  --red-600: #E53935;
  --red-700: #D32F2F;
  --red-800: #C62828;
  --red-900: #B71C1C;

  /* Yellow - For highlights, info */
  --yellow-50: #FFFDE7;
  --yellow-100: #FFF9C4;
  --yellow-200: #FFF59D;
  --yellow-300: #FFF176;
  --yellow-400: #FFEE58;
  --yellow-500: #FFEB3B;
  --yellow-600: #FDD835;
  --yellow-700: #FBC02D;
  --yellow-800: #F9A825;
  --yellow-900: #F57F17;

  /* Teal Colors */
  --teal-50: #E0F2F1;
  --teal-100: #B2DFDB;
  --teal-200: #80CBC4;
  --teal-300: #4DB6AC;
  --teal-400: #26A69A;
  --teal-500: #009688;
  --teal-600: #00897B;
  --teal-700: #00796B;
  --teal-800: #00695C;
  --teal-900: #004D40;

  /* Indigo - For info, charts */
  --indigo-50: #E8EAF6;
  --indigo-100: #C5CAE9;
  --indigo-200: #9FA8DA;
  --indigo-300: #7986CB;
  --indigo-400: #5C6BC0;
  --indigo-500: #3F51B5;
  --indigo-600: #3949AB;
  --indigo-700: #303F9F;
  --indigo-800: #283593;
  --indigo-900: #1A237E;

  /* Pink - For highlights, accents */
  --pink-50: #FCE4EC;
  --pink-100: #F8BBD0;
  --pink-200: #F48FB1;
  --pink-300: #F06292;
  --pink-400: #EC407A;
  --pink-500: #E91E63;
  --pink-600: #D81B60;
  --pink-700: #C2185B;
  --pink-800: #AD1457;
  --pink-900: #880E4F;

  /* Cyan/Teal - For data, analytics */
  --cyan-50: #E0F7FA;
  --cyan-100: #B2EBF2;
  --cyan-200: #80DEEA;
  --cyan-300: #4DD0E1;
  --cyan-400: #26C6DA;
  --cyan-500: #00BCD4;
  --cyan-600: #00ACC1;
  --cyan-700: #0097A7;
  --cyan-800: #00838F;
  --cyan-900: #006064;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #007AFF, #0051D5);
  --gradient-success: linear-gradient(135deg, #4CAF50, #45a049);
  --gradient-blue-steel: linear-gradient(135deg, #007AFF 0%, #4682B4 100%);
  --gradient-performance: linear-gradient(90deg, #F44336 0%, #FF9800 50%, #4CAF50 100%);
  --gradient-chart: linear-gradient(180deg, rgba(0, 122, 255, 0.2) 0%, rgba(0, 122, 255, 0) 100%);
  --gradient-purple: linear-gradient(135deg, #9C27B0, #7B1FA2);
  --gradient-orange: linear-gradient(135deg, #FF9800, #F57C00);
  --gradient-indigo: linear-gradient(135deg, #3F51B5, #303F9F);
}

/* ===== LIGHT THEME (DEFAULT) ===== */
:root, [data-theme="light"] {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-800);
  --color-primary-dark: var(--blue-700);
  --color-success: var(--status-success);
  --color-success-dark: var(--status-success-dark);
  --color-warning: var(--status-warning);
  --color-warning-dark: var(--status-warning-dark);
  --color-error: var(--status-error);
  --color-error-dark: var(--status-error-dark);
  --color-info: var(--status-info);
  --color-info-dark: var(--status-info-dark);

  --color-background: #F8F9FA;
  --color-background-secondary: var(--gray-100);
  --color-background-tertiary: var(--gray-50);
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-hover: rgba(0, 0, 0, 0.03);

  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-text-tertiary: var(--gray-600);
  --color-text-disabled: var(--gray-400);

  --color-border: #C4C4C4;      /* WCAG AA compliant 3.06:1 - was #E5E7EB (1.17:1) */
  --color-border-medium: var(--gray-400);
  --color-border-strong: var(--gray-500);

  /* Chart Colors - Light Theme */
  --chart-primary: #3b82f6;
  --chart-success: #10b981;
  --chart-warning: #f59e0b;
  --chart-error: #ef4444;
  --chart-purple: #8b5cf6;
  --chart-text: #374151;
  --chart-grid: #e5e7eb;
  --chart-success-light: rgba(16, 185, 129, 0.5);
  --chart-success-bg: rgba(16, 185, 129, 0.1);
  --chart-shadow: rgba(0, 0, 0, 0.5);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-dark: var(--blue-800);
  --color-success: var(--status-success-light);
  --color-success-dark: var(--status-success);
  --color-warning: var(--status-warning-light);
  --color-warning-dark: var(--status-warning);
  --color-error: var(--status-error-light);
  --color-error-dark: var(--status-error);
  --color-info: var(--status-info-light);
  --color-info-dark: var(--status-info);

  --color-background: #1A1A1C;
  --color-background-secondary: var(--dark-800);
  --color-background-tertiary: #3A3A3C;
  --color-surface: #2A2A2C;
  --color-surface-elevated: #3A3A3C;
  --color-hover: rgba(255, 255, 255, 0.05);

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #D1D1D6;  /* Increased contrast for readability */
  --color-text-tertiary: #A8A8AD;   /* WCAG AA compliant 4.67:1 - was #9E9EA3 */
  --color-text-disabled: var(--dark-600);

  /* High contrast background variants for dark theme */
  --bg-success-light: rgba(76, 175, 80, 0.25);
  --bg-warning-light: rgba(255, 152, 0, 0.25);
  --bg-error-light: rgba(244, 67, 54, 0.25);
  --bg-info-light: rgba(33, 150, 243, 0.25);

  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-medium: var(--dark-600);
  --color-border-strong: var(--dark-500);

  /* Chart Colors - Dark Theme */
  --chart-primary: #60a5fa;
  --chart-success: #34d399;
  --chart-warning: #fbbf24;
  --chart-error: #f87171;
  --chart-purple: #a78bfa;
  --chart-text: #e5e7eb;
  --chart-grid: #4b5563;
  --chart-success-light: rgba(52, 211, 153, 0.6);
  --chart-success-bg: rgba(52, 211, 153, 0.15);
  --chart-shadow: rgba(0, 0, 0, 0.8);
}

/* ===== EXTENDED SEMANTIC TOKENS (Phase 1 - Full Theme Coverage) ===== */
/* Added: 2025-10-28 - Sprint 8 Phase 3 - Hardcoded Tailwind Class Remediation */

:root, [data-theme="light"] {
  /* === BADGE TOKENS === */
  --color-badge-primary-bg: #dbeafe;      /* blue-100 */
  --color-badge-primary-text: #1e40af;    /* blue-800 */
  --color-badge-success-bg: #dcfce7;      /* green-100 */
  --color-badge-success-text: #166534;    /* green-800 */
  --color-badge-warning-bg: #fef3c7;      /* yellow-100 */
  --color-badge-warning-text: #854d0e;    /* yellow-800 */
  --color-badge-error-bg: #fee2e2;        /* red-100 */
  --color-badge-error-text: #991b1b;      /* red-800 */
  --color-badge-secondary-bg: #f3e8ff;    /* purple-100 */
  --color-badge-secondary-text: #6b21a8;  /* purple-800 */
  --color-badge-info-bg: #e0f2fe;         /* sky-100 */
  --color-badge-info-text: #075985;       /* sky-800 */

  /* === BUTTON TOKENS === */
  --color-btn-primary: #2563eb;           /* blue-600 */
  --color-btn-primary-hover: #1d4ed8;     /* blue-700 */
  --color-btn-success: #16a34a;           /* green-600 */
  --color-btn-success-hover: #15803d;     /* green-700 */
  --color-btn-warning: #ea580c;           /* orange-600 */
  --color-btn-warning-hover: #c2410c;     /* orange-700 */
  --color-btn-error: #dc2626;             /* red-600 */
  --color-btn-error-hover: #b91c1c;       /* red-700 */
  --color-btn-secondary: #6b7280;         /* gray-500 */
  --color-btn-secondary-hover: #4b5563;   /* gray-600 */

  /* === ICON/STAT CARD TOKENS === */
  --color-icon-bg-primary: #3b82f6;       /* blue-500 */
  --color-icon-bg-success: #22c55e;       /* green-500 */
  --color-icon-bg-warning: #f59e0b;       /* yellow-500 */
  --color-icon-bg-error: #ef4444;         /* red-500 */
  --color-icon-bg-info: #06b6d4;          /* cyan-500 */
  --color-icon-bg-secondary: #8b5cf6;     /* violet-500 */

  /* === TEXT ACCENT TOKENS === */
  --color-text-blue: #2563eb;             /* blue-600 */
  --color-text-green: #16a34a;            /* green-600 */
  --color-text-red: #dc2626;              /* red-600 */
  --color-text-purple: #9333ea;           /* purple-600 */
  --color-text-yellow: #ca8a04;           /* yellow-600 */
  --color-text-orange: #ea580c;           /* orange-600 */
  --color-text-cyan: #0891b2;             /* cyan-600 */
  --color-text-white: #ffffff;
  --color-text-black: #000000;

  /* === HEADER TOKENS (Universal Dark Header) === */
  --color-header-bg: rgba(28, 28, 30, 0.95);
  --color-header-text: rgba(255, 255, 255, 0.85);
  --color-header-text-hover: #0A84FF;
  --color-header-border: rgba(255, 255, 255, 0.1);
  --color-header-logo-text: #0A84FF;

  /* === FORM/FOCUS TOKENS === */
  --color-focus-ring: #3b82f6;            /* blue-500 */
  --color-focus-ring-offset: #ffffff;
  --color-input-disabled-bg: #f3f4f6;     /* gray-100 */
  --color-input-disabled-text: #9ca3af;   /* gray-400 */
  --color-input-disabled-border: #e5e7eb; /* gray-200 */

  /* === HOVER STATE TOKENS === */
  --color-hover-light: rgba(0, 0, 0, 0.05);
  --color-hover-medium: rgba(0, 0, 0, 0.1);
  --color-hover-dark: rgba(255, 255, 255, 0.1);

  /* === DIVIDER/SEPARATOR TOKENS === */
  --color-divider: #e5e7eb;               /* gray-200 */
  --color-divider-strong: #d1d5db;        /* gray-300 */
}

[data-theme="dark"] {
  /* === DARK THEME BADGE OVERRIDES === */
  --color-badge-primary-bg: rgba(37, 99, 235, 0.3);
  --color-badge-primary-text: #93c5fd;    /* blue-300 */
  --color-badge-success-bg: rgba(34, 197, 94, 0.3);
  --color-badge-success-text: #86efac;    /* green-300 */
  --color-badge-warning-bg: rgba(245, 158, 11, 0.3);
  --color-badge-warning-text: #fcd34d;    /* yellow-300 */
  --color-badge-error-bg: rgba(239, 68, 68, 0.3);
  --color-badge-error-text: #fca5a5;      /* red-300 */
  --color-badge-secondary-bg: rgba(139, 92, 246, 0.3);
  --color-badge-secondary-text: #c4b5fd;  /* violet-300 */
  --color-badge-info-bg: rgba(6, 182, 212, 0.3);
  --color-badge-info-text: #67e8f9;       /* cyan-300 */

  /* === DARK THEME BUTTON OVERRIDES === */
  --color-btn-primary: #3b82f6;           /* blue-500 */
  --color-btn-primary-hover: #2563eb;     /* blue-600 */
  --color-btn-success: #22c55e;           /* green-500 */
  --color-btn-success-hover: #16a34a;     /* green-600 */
  --color-btn-warning: #f59e0b;           /* amber-500 */
  --color-btn-warning-hover: #ea580c;     /* orange-600 */
  --color-btn-error: #ef4444;             /* red-500 */
  --color-btn-error-hover: #dc2626;       /* red-600 */
  --color-btn-secondary: #9ca3af;         /* gray-400 */
  --color-btn-secondary-hover: #6b7280;   /* gray-500 */

  /* === DARK THEME ICON OVERRIDES === */
  --color-icon-bg-primary: #3b82f6;       /* blue-500 */
  --color-icon-bg-success: #22c55e;       /* green-500 */
  --color-icon-bg-warning: #f59e0b;       /* amber-500 */
  --color-icon-bg-error: #ef4444;         /* red-500 */
  --color-icon-bg-info: #06b6d4;          /* cyan-500 */

  /* === DARK THEME TEXT ACCENTS === */
  --color-text-blue: #60a5fa;             /* blue-400 */
  --color-text-green: #4ade80;            /* green-400 */
  --color-text-red: #f87171;              /* red-400 */
  --color-text-purple: #a78bfa;           /* violet-400 */
  --color-text-yellow: #facc15;           /* yellow-400 */
  --color-text-orange: #fb923c;           /* orange-400 */
  --color-text-cyan: #22d3ee;             /* cyan-400 */

  /* === DARK THEME HEADER (Same as light - always dark) === */
  /* Header stays the same in dark theme */

  /* === DARK THEME FORM/FOCUS === */
  --color-focus-ring: #3b82f6;            /* blue-500 */
  --color-focus-ring-offset: #1a1a1c;     /* dark background */
  --color-input-disabled-bg: #374151;     /* gray-700 */
  --color-input-disabled-text: #6b7280;   /* gray-500 */
  --color-input-disabled-border: #4b5563; /* gray-600 */

  /* === DARK THEME HOVER STATES === */
  --color-hover-light: rgba(255, 255, 255, 0.05);
  --color-hover-medium: rgba(255, 255, 255, 0.1);
  --color-hover-dark: rgba(255, 255, 255, 0.15);

  /* === DARK THEME DIVIDERS === */
  --color-divider: rgba(255, 255, 255, 0.1);
  --color-divider-strong: rgba(255, 255, 255, 0.15);
}

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===== ANIMATION UTILITY CLASSES ===== */
.animate-fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.animate-slide-up {
  animation: slideUp 0.6s ease forwards;
}

.animate-slide-down {
  animation: slideDown 0.6s ease forwards;
}

.animate-slide-left {
  animation: slideInLeft 0.6s ease forwards;
}

.animate-slide-right {
  animation: slideInRight 0.6s ease forwards;
}

.animate-scale-in {
  animation: scaleIn 0.4s ease forwards;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Staggered animation delays */
.animate-delay-100 { animation-delay: 0.1s; opacity: 0; }
.animate-delay-200 { animation-delay: 0.2s; opacity: 0; }
.animate-delay-300 { animation-delay: 0.3s; opacity: 0; }
.animate-delay-400 { animation-delay: 0.4s; opacity: 0; }
.animate-delay-500 { animation-delay: 0.5s; opacity: 0; }

/* ===== TRANSITION UTILITIES ===== */
.transition-smooth {
  transition: all 0.3s ease;
}

.transition-fast {
  transition: all 0.15s ease;
}

.transition-slow {
  transition: all 0.5s ease;
}

.transition-bounce {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== HOVER EFFECTS ===== */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-10px);
}

.hover-lift-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift-scale:hover {
  transform: translateY(-10px) scale(1.03);
}

.hover-shadow {
  transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: var(--card-shadow-hover);
}

.hover-button {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.hover-button:hover {
  transform: translateY(-2px);
}

/* ===== COMPONENT STYLES ===== */

/* Cards */
.nugui-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
}

.nugui-card-hover {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.nugui-card-hover:hover {
  transform: translateY(-8px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-primary);
}

/* Buttons */
.nugui-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nugui-btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.nugui-btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.nugui-btn-success {
  background-color: var(--color-success);
  color: white;
}

.nugui-btn-success:hover {
  background-color: var(--status-success-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.nugui-btn-warning {
  background-color: var(--color-warning);
  color: white;
}

.nugui-btn-warning:hover {
  background-color: var(--status-warning-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.nugui-btn-error {
  background-color: var(--color-error);
  color: white;
}

.nugui-btn-error:hover {
  background-color: var(--status-error-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.nugui-btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.nugui-btn-outline:hover {
  background-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
}

/* Badges */
.nugui-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nugui-badge-success {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--status-success-dark);
}

.nugui-badge-warning {
  background-color: rgba(255, 152, 0, 0.1);
  color: var(--status-warning-dark);
}

.nugui-badge-error {
  background-color: rgba(244, 67, 54, 0.1);
  color: var(--status-error-dark);
}

.nugui-badge-info {
  background-color: rgba(33, 150, 243, 0.1);
  color: var(--status-info-dark);
}

.nugui-badge-primary {
  background-color: rgba(0, 122, 255, 0.1);
  color: var(--blue-800);
}

/* Alert Icons */
.nugui-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nugui-alert-icon-warning {
  background-color: rgba(255, 193, 7, 0.1);
  color: var(--status-warning);
}

.nugui-alert-icon-error {
  background-color: rgba(244, 67, 54, 0.1);
  color: var(--status-error);
}

.nugui-alert-icon-success {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--status-success);
}

.nugui-alert-icon-info {
  background-color: rgba(33, 150, 243, 0.1);
  color: var(--status-info);
}

/* Tables */
.nugui-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.nugui-table thead {
  background-color: var(--color-background-secondary);
}

.nugui-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nugui-table td {
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.nugui-table tbody tr {
  transition: background-color 0.2s ease;
}

.nugui-table tbody tr:hover {
  background-color: var(--color-background-tertiary);
}

/* Modals */
.nugui-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--overlay-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 50;
  animation: fadeIn 0.3s ease;
}

.nugui-modal-content {
  background-color: var(--color-surface);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-2xl);
  animation: slideUp 0.4s ease;
  max-width: 600px;
  margin: 2rem auto;
}

/* Forms */
.nugui-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nugui-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.nugui-input::placeholder {
  color: var(--color-text-tertiary);
}

/* Alerts */
.nugui-alert {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.nugui-alert-success {
  background-color: rgba(76, 175, 80, 0.1);
  border-color: var(--status-success);
  color: var(--status-success-dark);
}

.nugui-alert-warning {
  background-color: rgba(255, 152, 0, 0.1);
  border-color: var(--status-warning);
  color: var(--status-warning-dark);
}

.nugui-alert-error {
  background-color: rgba(244, 67, 54, 0.1);
  border-color: var(--status-error);
  color: var(--status-error-dark);
}

.nugui-alert-info {
  background-color: rgba(33, 150, 243, 0.1);
  border-color: var(--status-info);
  color: var(--status-info-dark);
}

/* Gradients */
.nugui-gradient-primary {
  background: var(--gradient-primary);
}

.nugui-gradient-success {
  background: var(--gradient-success);
}

.nugui-gradient-steel {
  background: var(--gradient-blue-steel);
}

/* Stats Cards */
.nugui-stat-card {
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.nugui-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--steel-blue));
  opacity: 0.8;
}

.nugui-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(0, 122, 255, 0.4);
}

.nugui-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  margin-bottom: 1rem;
}

.nugui-stat-icon-primary {
  background: var(--gradient-primary);
}

.nugui-stat-icon-success {
  background: var(--gradient-success);
}

.nugui-stat-icon-warning {
  background-color: var(--status-warning);
}

.nugui-stat-icon-error {
  background-color: var(--status-error);
}

/* Loading States */
.nugui-skeleton {
  background: linear-gradient(90deg, var(--color-background-secondary) 25%, var(--color-background-tertiary) 50%, var(--color-background-secondary) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Dark mode toggle button */
.theme-toggle {
  padding: 0.5rem;
  border-radius: 8px;
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  border-color: var(--color-primary);
  transform: scale(1.05);
}

/* ===== DARK THEME OVERRIDES FOR BETTER CONTRAST ===== */
[data-theme="dark"] .nugui-badge-success {
  background-color: rgba(76, 175, 80, 0.25);
  color: #A5D6A7;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

[data-theme="dark"] .nugui-badge-warning {
  background-color: rgba(255, 152, 0, 0.25);
  color: #FFD54F;
  border: 1px solid rgba(255, 152, 0, 0.4);
}

[data-theme="dark"] .nugui-badge-error {
  background-color: rgba(244, 67, 54, 0.25);
  color: #FFAB91;
  border: 1px solid rgba(244, 67, 54, 0.4);
}

[data-theme="dark"] .nugui-badge-info {
  background-color: rgba(33, 150, 243, 0.25);
  color: #90CAF9;
  border: 1px solid rgba(33, 150, 243, 0.4);
}

[data-theme="dark"] .nugui-badge-primary {
  background-color: rgba(10, 132, 255, 0.25);
  color: #82B1FF;
  border: 1px solid rgba(10, 132, 255, 0.4);
}

[data-theme="dark"] .nugui-alert-success {
  background-color: rgba(76, 175, 80, 0.2);
  border-color: var(--status-success-light);
  color: #66BB6A;
}

[data-theme="dark"] .nugui-alert-warning {
  background-color: rgba(255, 152, 0, 0.2);
  border-color: var(--status-warning-light);
  color: #FFB74D;
}

[data-theme="dark"] .nugui-alert-error {
  background-color: rgba(244, 67, 54, 0.2);
  border-color: var(--status-error-light);
  color: #EF5350;
}

[data-theme="dark"] .nugui-alert-info {
  background-color: rgba(33, 150, 243, 0.2);
  border-color: var(--status-info-light);
  color: #42A5F5;
}

[data-theme="dark"] .nugui-btn-outline {
  background-color: rgba(10, 132, 255, 0.1);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

[data-theme="dark"] .nugui-btn-outline:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Fix input controls in dark theme */
[data-theme="dark"] .nugui-input {
  color-scheme: dark;
}

[data-theme="dark"] .nugui-input::placeholder {
  color: var(--color-text-tertiary);
  opacity: 0.7;
}

/* Fix date picker calendar icon in dark theme */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  cursor: pointer;
}

[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  cursor: pointer;
}

[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  cursor: pointer;
}

/* Firefox support for date picker icon */
[data-theme="dark"] input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(1) !important;
  cursor: pointer;
}

[data-theme="dark"] input[type="time"]::-moz-calendar-picker-indicator {
  filter: invert(1) !important;
  cursor: pointer;
}

[data-theme="dark"] input[type="datetime-local"]::-moz-calendar-picker-indicator {
  filter: invert(1) !important;
  cursor: pointer;
}

/* Fix select dropdown arrow in dark theme */
[data-theme="dark"] select.nugui-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

/* Enhanced stat card visibility for light theme */
[data-theme="light"] .nugui-stat-card {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 122, 255, 0.15);
}

[data-theme="light"] .nugui-stat-card:hover {
  border-color: rgba(0, 122, 255, 0.5);
}

/* Enhanced card visibility for dark theme */
[data-theme="dark"] .nugui-card,
[data-theme="dark"] .nugui-card-hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .nugui-stat-card {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #2A2A2C 0%, #2E2E30 100%);
}

[data-theme="dark"] .nugui-stat-card::before {
  opacity: 1;
  height: 4px;
}

[data-theme="dark"] .nugui-card-hover:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
  border-color: var(--color-primary);
}

[data-theme="dark"] .nugui-stat-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 10px 20px rgba(0, 0, 0, 0.4);
  border-color: rgba(10, 132, 255, 0.6);
}

/* ===== MODERN HEADER STYLING (Theme V2.0) ===== */
/* Modern Header Styling - Universal Dark Style */
.modern-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(28, 28, 30, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: all 0.3s ease;
}

/* Body with fixed header - add top padding to prevent content overlap */
body.has-fixed-header {
    padding-top: 60px; /* Match header height */
}

/* Main content area - add extra spacing below header for visual breathing room */
body.has-fixed-header main {
    padding-top: 1.5rem; /* Additional spacing below header */
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0A84FF;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.header-logo:hover {
    transform: scale(1.05);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-item {
    position: relative;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #0A84FF;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: rgba(44, 44, 46, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    margin-top: 0.5rem;
    overflow: hidden;
}

.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

.nav-dropdown-item {
    display: block;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.nav-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #0A84FF;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #0A84FF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3);
}

/* ===== MODERN FOOTER STYLING (Theme V2.0) ===== */
/* Modern Footer Styling - Universal Dark Style */
.modern-footer {
    background: rgba(28, 28, 30, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0;
    margin-top: 4rem;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.footer-link {
    color: #0A84FF;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-link:hover {
    opacity: 0.8;
}

/* ===== MOBILE RESPONSIVENESS (Theme V2.0) ===== */
@media (max-width: 768px) {
    .header-nav {
        display: none;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== BODY STYLING FOR THEME SWITCHING ===== */
body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main content area styling */
main {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

/* ===== SEMANTIC THEME CLASSES (Single Source of Truth) ===== */

/* Page Structure - UPDATED 2025-11-25 for wider table display */
.theme-page-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.theme-content-wrapper {
    padding: 2rem 1rem;
}

/* Backgrounds */
.theme-bg-primary {
    background-color: var(--color-background);
}

.theme-bg-surface {
    background-color: var(--color-surface);
}

.theme-bg-elevated {
    background-color: var(--color-surface-elevated);
}

.theme-bg-secondary {
    background-color: var(--color-background-secondary);
}

/* Text Colors */
.theme-text-primary {
    color: var(--color-text-primary);
}

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

.theme-text-tertiary {
    color: var(--color-text-tertiary);
}

/* Cards */
.theme-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

[data-theme="dark"] .theme-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.theme-card:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .theme-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Stat Cards */
.theme-stat-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

[data-theme="dark"] .theme-stat-card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.theme-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .theme-stat-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

/* Headings */
.theme-heading-1 {
    color: var(--color-text-primary);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem;
}

.theme-heading-2 {
    color: var(--color-text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
}

.theme-heading-3 {
    color: var(--color-text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
}

/* Borders */
.theme-border {
    border-color: var(--color-border);
}

.theme-border-top {
    border-top: 1px solid var(--color-border);
}

.theme-border-bottom {
    border-bottom: 1px solid var(--color-border);
}

/* Dividers */
.theme-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: 1.5rem 0;
}

/* Alert Boxes */
.theme-alert {
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left-width: 4px;
}

.theme-alert-success {
    background-color: rgba(76, 175, 80, 0.1);
    border-left-color: var(--status-success);
    color: var(--color-text-primary);
}

[data-theme="dark"] .theme-alert-success {
    background-color: rgba(76, 175, 80, 0.2);
}

.theme-alert-warning {
    background-color: rgba(255, 152, 0, 0.1);
    border-left-color: var(--status-warning);
    color: var(--color-text-primary);
}

[data-theme="dark"] .theme-alert-warning {
    background-color: rgba(255, 152, 0, 0.2);
}

.theme-alert-error {
    background-color: rgba(244, 67, 54, 0.1);
    border-left-color: var(--status-error);
    color: var(--color-text-primary);
}

[data-theme="dark"] .theme-alert-error {
    background-color: rgba(244, 67, 54, 0.2);
}

.theme-alert-info {
    background-color: rgba(33, 150, 243, 0.1);
    border-left-color: var(--status-info);
    color: var(--color-text-primary);
}

[data-theme="dark"] .theme-alert-info {
    background-color: rgba(33, 150, 243, 0.2);
}

/* Tables */
.theme-table {
    width: 100%;
    background-color: var(--color-surface);
    border-collapse: collapse;
}

.theme-table thead {
    background-color: var(--color-surface-elevated);
}

.theme-table th {
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.875rem !important; /* 14px - override Tailwind */
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--color-border);
}

.theme-table td {
    color: var(--color-text-secondary);
    font-size: 0.875rem !important; /* 14px - override Tailwind */
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

/* Override any Tailwind classes within tables */
.theme-table th,
.theme-table td,
.theme-table th *,
.theme-table td * {
    font-size: 0.875rem !important; /* 14px everywhere in tables */
}

.theme-table tr:hover {
    background-color: var(--color-background-secondary);
}

/* Dark theme high contrast table overrides */
[data-theme="dark"] .theme-table td {
    color: #E5E5EA;  /* Higher contrast for dark mode readability */
}

[data-theme="dark"] .theme-table th {
    color: #FFFFFF;
    background-color: #3A3A3C;
}

/* Form Inputs */
.theme-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.theme-input {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-primary);
    width: 100%;
    transition: all 0.2s ease;
}

.theme-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1);
}

.theme-input::placeholder {
    color: var(--color-text-tertiary);
}

.theme-select {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-primary);
    width: 100%;
}

.theme-textarea {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-primary);
    width: 100%;
    resize: vertical;
}

/* Buttons - Semantic */
.theme-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.theme-btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.theme-btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.theme-btn-secondary {
    background-color: var(--color-surface-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.theme-btn-secondary:hover {
    background-color: var(--color-background-secondary);
}

/* Links */
.theme-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.theme-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Badge */
.theme-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.theme-badge-primary {
    background-color: rgba(10, 132, 255, 0.1);
    color: var(--color-primary);
}

[data-theme="dark"] .theme-badge-primary {
    background-color: rgba(10, 132, 255, 0.2);
}

.theme-badge-success {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--status-success);
}

[data-theme="dark"] .theme-badge-success {
    background-color: rgba(76, 175, 80, 0.2);
}

.theme-badge-warning {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--status-warning);
}

[data-theme="dark"] .theme-badge-warning {
    background-color: rgba(255, 152, 0, 0.2);
}

.theme-badge-error {
    background-color: rgba(244, 67, 54, 0.1);
    color: var(--status-error);
}

[data-theme="dark"] .theme-badge-error {
    background-color: rgba(244, 67, 54, 0.2);
}

/* Icon Boxes (for stat cards) */
.theme-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.theme-icon-box-blue {
    background-color: var(--blue-500);
    color: white;
}

.theme-icon-box-green {
    background-color: var(--green-500);
    color: white;
}

.theme-icon-box-yellow {
    background-color: var(--status-warning);
    color: white;
}

.theme-icon-box-red {
    background-color: var(--status-error);
    color: white;
}

/* Spacing Utilities */
.theme-section {
    margin-bottom: 2rem;
}

.theme-mb-sm {
    margin-bottom: 0.5rem;
}

.theme-mb-md {
    margin-bottom: 1rem;
}

.theme-mb-lg {
    margin-bottom: 1.5rem;
}

.theme-mb-xl {
    margin-bottom: 2rem;
}

.theme-mt-sm {
    margin-top: 0.5rem;
}

.theme-mt-md {
    margin-top: 1rem;
}

.theme-mt-lg {
    margin-top: 1.5rem;
}

/* Grid Layouts */
.theme-grid {
    display: grid;
    gap: 1.25rem;
}

.theme-grid-1 {
    grid-template-columns: repeat(1, 1fr);
}

.theme-grid-2 {
    grid-template-columns: repeat(1, 1fr);
}

.theme-grid-3 {
    grid-template-columns: repeat(1, 1fr);
}

.theme-grid-4 {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
    .theme-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .theme-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .theme-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .theme-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .theme-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Shadow Utilities */
.theme-shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .theme-shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.theme-shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .theme-shadow-md {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.theme-shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .theme-shadow-lg {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* ===== ANIMATIONS ===== */
.theme-animate-fade-in {
    animation: fadeIn 0.5s ease-in;
}

.theme-animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

.theme-animate-slide-down {
    animation: slideDown 0.5s ease-out;
}

.theme-animate-scale {
    animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hover animations */
.theme-hover-lift:hover {
    transform: translateY(-4px);
    transition: transform 0.3s ease;
}

.theme-hover-scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* ===== VIBRANT ENHANCEMENTS FOR THEME V2.0 ===== */

/* Enhanced Button Variants with Hover Effects */
.theme-btn-success,
.theme-btn-success {
    background-color: var(--status-success);
    color: white;
    border: none;
}

.theme-btn-success:hover {
    background-color: var(--status-success-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.theme-btn-warning {
    background-color: var(--status-warning);
    color: white;
    border: none;
}

.theme-btn-warning:hover {
    background-color: var(--status-warning-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.theme-btn-error {
    background-color: var(--status-error);
    color: white;
    border: none;
}

.theme-btn-error:hover {
    background-color: var(--status-error-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Enhanced Primary Button with Lift Effect */
.theme-btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Stat Card Enhancements */
.theme-stat-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.theme-stat-card:hover::before {
    opacity: 1;
}

/* Gradient Utility Classes */
/* Hover Lift Effects */
.theme-hover-lift {
    transition: all 0.3s ease;
}

.theme-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.theme-hover-lift-scale {
    transition: all 0.3s ease;
}

.theme-hover-lift-scale:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.theme-hover-shadow {
    transition: box-shadow 0.3s ease;
}

.theme-hover-shadow:hover {
    box-shadow: var(--shadow-2xl);
}

/* Grid Utilities */
.theme-grid {
    display: grid;
    gap: 1.5rem;
}

.theme-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.theme-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.theme-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Alert Enhancements */
.theme-alert-info {
    background-color: rgba(33, 150, 243, 0.1);
    border-left: 4px solid var(--status-info);
    padding: 1rem;
    border-radius: 0.5rem;
}

[data-theme="dark"] .theme-alert-info {
    background-color: rgba(33, 150, 243, 0.2);
}

/* Skeleton Loading */
.theme-skeleton {
    background: linear-gradient(
        90deg,
        var(--color-background-secondary) 25%,
        var(--color-surface-elevated) 50%,
        var(--color-background-secondary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Table Enhancements */
.theme-table {
    width: 100%;
    border-collapse: collapse;
}

.theme-table thead {
    background-color: var(--color-background-secondary);
}

.theme-table thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    border-bottom: 2px solid var(--color-border);
}

.theme-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
}

.theme-table tbody tr:hover {
    background-color: var(--color-hover);
}

.theme-table tbody td {
    padding: 1rem;
    color: var(--color-text-primary);
}

/* Input Enhancements */
.theme-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

.theme-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1);
}

.theme-input::placeholder {
    color: var(--color-text-tertiary);
}

/* Label Enhancements */
.theme-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

/* Animation Delays */
.theme-animate-delay-100 {
    animation-delay: 0.1s;
}

.theme-animate-delay-200 {
    animation-delay: 0.2s;
}

.theme-animate-delay-300 {
    animation-delay: 0.3s;
}

.theme-animate-delay-400 {
    animation-delay: 0.4s;
}

.theme-animate-delay-500 {
    animation-delay: 0.5s;
}

/* Color-specific Utilities for Vibrant UI */
.theme-text-blue {
    color: var(--blue-600);
}

.theme-text-green {
    color: var(--green-600);
}

.theme-text-red {
    color: var(--red-600);
}

.theme-text-yellow {
    color: var(--yellow-600);
}

.theme-text-purple {
    color: var(--purple-600);
}

.theme-text-orange {
    color: var(--orange-600);
}

.theme-text-indigo {
    color: var(--indigo-600);
}

/* Border Color Utilities */
.theme-border-left-blue {
    border-left-color: var(--blue-600);
}

.theme-border-left-green {
    border-left-color: var(--green-500);
}

.theme-border-left-purple {
    border-left-color: var(--purple-600);
}

.theme-border-left-orange {
    border-left-color: var(--orange-600);
}

.theme-bg-blue-light {
    background-color: var(--blue-50);
}

.theme-bg-green-light {
    background-color: var(--green-50);
}

.theme-bg-red-light {
    background-color: var(--red-50);
}

.theme-bg-yellow-light {
    background-color: var(--yellow-50);
}

.theme-bg-purple-light {
    background-color: var(--purple-50);
}

.theme-bg-orange-light {
    background-color: var(--orange-50);
}

[data-theme="dark"] .theme-bg-blue-light {
    background-color: rgba(0, 122, 255, 0.1);
}

[data-theme="dark"] .theme-bg-green-light {
    background-color: rgba(76, 175, 80, 0.1);
}

[data-theme="dark"] .theme-bg-red-light {
    background-color: rgba(244, 67, 54, 0.1);
}

[data-theme="dark"] .theme-bg-yellow-light {
    background-color: rgba(255, 235, 59, 0.1);
}

[data-theme="dark"] .theme-bg-purple-light {
    background-color: rgba(156, 39, 176, 0.1);
}

[data-theme="dark"] .theme-bg-orange-light {
    background-color: rgba(255, 152, 0, 0.1);
}

/* END VIBRANT ENHANCEMENTS */

/* ===== THEME-AWARE GRADIENT BACKGROUNDS ===== */
/* These gradients adapt to light/dark mode for proper contrast */

/* Purple-Pink Gradient (Report Types Section) */
.theme-gradient-bg-purple-pink {
    background: linear-gradient(to right, var(--purple-50), var(--pink-50));
    border-color: var(--color-border);
}

[data-theme="dark"] .theme-gradient-bg-purple-pink {
    background: linear-gradient(to right, rgba(156, 39, 176, 0.15), rgba(233, 30, 99, 0.15));
    border-color: var(--color-border);
}

/* Orange-Red Gradient (Distribution Section) */
.theme-gradient-bg-orange-red {
    background: linear-gradient(to right, var(--orange-50), var(--red-50));
    border-color: var(--color-border);
}

[data-theme="dark"] .theme-gradient-bg-orange-red {
    background: linear-gradient(to right, rgba(255, 152, 0, 0.15), rgba(244, 67, 54, 0.15));
    border-color: var(--color-border);
}

/* Blue-Indigo Gradient (Output Logs Section) */
.theme-gradient-bg-blue-indigo {
    background: linear-gradient(to right, var(--blue-50), var(--indigo-50));
    border-color: var(--blue-100);
}

[data-theme="dark"] .theme-gradient-bg-blue-indigo {
    background: linear-gradient(to right, rgba(33, 150, 243, 0.15), rgba(63, 81, 181, 0.15));
    border-color: var(--color-border);
}

/* Blue Light Gradient (Success/Info boxes) */
.theme-gradient-bg-blue-light {
    background: linear-gradient(to right, var(--blue-50), var(--blue-100));
    border-color: var(--blue-200);
}

[data-theme="dark"] .theme-gradient-bg-blue-light {
    background: linear-gradient(to right, rgba(33, 150, 243, 0.15), rgba(33, 150, 243, 0.20));
    border-color: var(--color-border);
}

/* Green Success Gradient */
.theme-gradient-bg-green {
    background: linear-gradient(to right, var(--green-50), var(--green-100));
    border-color: var(--green-200);
}

[data-theme="dark"] .theme-gradient-bg-green {
    background: linear-gradient(to right, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.20));
    border-color: var(--color-border);
}

/* Yellow Warning Gradient */
.theme-gradient-bg-yellow {
    background: linear-gradient(to right, var(--yellow-50), var(--yellow-100));
    border-color: var(--yellow-200);
}

[data-theme="dark"] .theme-gradient-bg-yellow {
    background: linear-gradient(to right, rgba(255, 235, 59, 0.15), rgba(255, 235, 59, 0.20));
    border-color: var(--color-border);
}

/* END THEME-AWARE GRADIENTS */

/* ===== THEME-AWARE BADGE BACKGROUNDS ===== */
/* Light background badges that adapt to dark mode */

.theme-badge-purple-light {
    background-color: var(--purple-100);
    color: var(--purple-800);
}

[data-theme="dark"] .theme-badge-purple-light {
    background-color: rgba(156, 39, 176, 0.25);
    color: var(--purple-200);
}

.theme-badge-green-light {
    background-color: var(--green-100);
    color: var(--green-700);
}

[data-theme="dark"] .theme-badge-green-light {
    background-color: rgba(76, 175, 80, 0.25);
    color: var(--green-200);
}

.theme-badge-blue-light {
    background-color: var(--blue-100);
    color: var(--blue-800);
}

[data-theme="dark"] .theme-badge-blue-light {
    background-color: rgba(33, 150, 243, 0.25);
    color: var(--blue-200);
}

.theme-badge-orange-light {
    background-color: var(--orange-100);
    color: var(--orange-800);
}

[data-theme="dark"] .theme-badge-orange-light {
    background-color: rgba(255, 152, 0, 0.25);
    color: var(--orange-200);
}

/* END THEME-AWARE BADGES */

/* ===== THEME-AWARE HTML/BODY BACKGROUNDS ===== */
/* Fix white bars/sections in dark mode */

html, body {
    background-color: var(--color-background);
    min-height: 100%;
}

/* Ensure main content area also uses theme background */
main {
    background-color: var(--color-background);
}

/* END THEME-AWARE BACKGROUNDS */

/* ===== THEME-AWARE YELLOW TEXT COLORS ===== */
/* Yellow text for warnings that adapts to dark mode */

.theme-text-yellow-dark {
    color: #7A5C0F; /* Dark brown-gold for strong contrast on light yellow background */
    font-weight: 600; /* Make it bolder for better readability */
}

[data-theme="dark"] .theme-text-yellow-dark {
    color: var(--yellow-300);
}

.theme-text-yellow-medium {
    color: #8B6914; /* Medium brown-gold for readable contrast */
}

[data-theme="dark"] .theme-text-yellow-medium {
    color: var(--yellow-200);
}

/* END THEME-AWARE YELLOW TEXT */

.theme-text-yellow-darker {
    color: var(--yellow-900);
}

[data-theme="dark"] .theme-text-yellow-darker {
    color: var(--yellow-400);
}

/* Theme-aware yellow alert background */
.theme-alert-yellow {
    background-color: #FFF9E6; /* Warmer, more saturated yellow background */
    border-left: 4px solid var(--yellow-700);
    border: 1px solid var(--yellow-300);
    border-left: 4px solid var(--yellow-700);
}

[data-theme="dark"] .theme-alert-yellow {
    background-color: rgba(255, 235, 59, 0.15);
    border-left-color: var(--yellow-500);
}

.theme-bg-yellow-lightest {
    background-color: var(--yellow-100);
}

[data-theme="dark"] .theme-bg-yellow-lightest {
    background-color: rgba(255, 235, 59, 0.20);
}

/* ===== RESPONSIVE DESIGN SYSTEM V2.0 ===== */
/* Added: 2025-10-19 - Comprehensive responsive enhancements */
/* Mobile-first approach: Mobile (320px+), Tablet (768px+), Desktop (1024px+), Ultrawide (1920px+) */

/* ===== 1. RESPONSIVE TYPOGRAPHY SYSTEM ===== */

/* Fixed typography with media queries for better large-screen scaling */

.theme-heading-1-responsive {
    font-size: 1.5rem !important; /* 24px mobile */
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}

@media (min-width: 768px) {
    .theme-heading-1-responsive {
        font-size: 1.75rem !important; /* 28px tablet+ */
    }
}

.theme-heading-2-responsive {
    font-size: 1.125rem !important; /* 18px mobile */
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
}

@media (min-width: 768px) {
    .theme-heading-2-responsive {
        font-size: 1.25rem !important; /* 20px tablet+ */
    }
}

.theme-heading-3-responsive {
    font-size: 1rem !important; /* 16px mobile */
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
}

@media (min-width: 768px) {
    .theme-heading-3-responsive {
        font-size: 1.125rem !important; /* 18px tablet+ */
    }
}

.theme-text-base-responsive {
    font-size: 0.875rem !important; /* 14px mobile */
    line-height: 1.5;
}

@media (min-width: 768px) {
    .theme-text-base-responsive {
        font-size: 0.9375rem !important; /* 15px tablet+ */
    }
}

.theme-text-sm-responsive {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.5;
}

.theme-text-xs-responsive {
    font-size: 0.75rem; /* 12px fixed */
    line-height: 1.4;
}

/* ===== 2. RESPONSIVE SPACING SYSTEM ===== */

/* Adaptive padding and margins that scale with viewport */

.theme-p-responsive {
    padding: clamp(1rem, 2vw, 2rem); /* 16px → 32px */
}

.theme-p-responsive-sm {
    padding: clamp(0.5rem, 1vw, 1rem); /* 8px → 16px */
}

.theme-p-responsive-lg {
    padding: clamp(1.5rem, 3vw, 3rem); /* 24px → 48px */
}

.theme-px-responsive {
    padding-left: clamp(1rem, 2vw, 2rem);
    padding-right: clamp(1rem, 2vw, 2rem);
}

.theme-py-responsive {
    padding-top: clamp(1rem, 2vw, 2rem);
    padding-bottom: clamp(1rem, 2vw, 2rem);
}

.theme-m-responsive {
    margin: clamp(1rem, 2vw, 2rem);
}

.theme-mb-responsive {
    margin-bottom: clamp(1rem, 2vw, 2rem);
}

.theme-mt-responsive {
    margin-top: clamp(1rem, 2vw, 2rem);
}

.theme-gap-responsive {
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* Content wrapper with responsive padding */
.theme-content-wrapper-responsive {
    padding: clamp(1rem, 2vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
}

/* Section spacing */
.theme-section-responsive {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Add extra top spacing to first section for better visual separation from header */
.theme-section-responsive:first-child {
    margin-top: clamp(0.5rem, 1vw, 1rem);
}

/* ===== 3. MOBILE NAVIGATION SYSTEM ===== */

/* Hamburger Menu Button */
.mobile-menu-toggle {
    display: none; /* Hidden by default, shown on mobile */
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

/* Hamburger icon lines */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}

.hamburger-icon span {
    display: block;
    height: 2px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Animated hamburger to X transformation */
.mobile-menu-toggle.active .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translateY(6px);
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translateY(-6px);
}

/* Mobile Navigation Drawer */
.mobile-nav-drawer {
    display: none; /* Hidden by default */
    position: fixed;
    top: 60px; /* Below header */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(28, 28, 30, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 999;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.mobile-nav-drawer.active {
    transform: translateX(0);
}

.mobile-nav-drawer nav {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 0.5rem;
}

.mobile-nav-drawer .nav-item {
    display: block;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.mobile-nav-drawer .nav-item:hover,
.mobile-nav-drawer .nav-item:active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #0A84FF;
}

.mobile-nav-drawer .nav-item i {
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
}

/* Mobile admin submenu */
.mobile-nav-drawer .admin-submenu {
    padding-left: 2.5rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-nav-drawer .admin-submenu .nav-item {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

/* Show mobile menu on small screens */
@media (max-width: 767px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-nav-drawer {
        display: block;
    }
}

/* ===== 4. ENHANCED RESPONSIVE GRID SYSTEM ===== */

/* Better responsive grids with optimal column counts per breakpoint */

.theme-grid-responsive {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
}

/* 2-column responsive grid */
.theme-grid-2-responsive {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: 1fr; /* Mobile: 1 column */
}

@media (min-width: 640px) {
    .theme-grid-2-responsive {
        grid-template-columns: repeat(2, 1fr); /* Tablet+: 2 columns */
    }
}

/* 3-column responsive grid */
.theme-grid-3-responsive {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: 1fr; /* Mobile: 1 column */
}

@media (min-width: 640px) {
    .theme-grid-3-responsive {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
    }
}

@media (min-width: 1024px) {
    .theme-grid-3-responsive {
        grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
    }
}

/* Quick Action Cards - Gradient Backgrounds */
.theme-action-card {
    display: block;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    color: white;
}

.theme-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -6px rgba(0, 0, 0, 0.2);
}

.theme-action-card-primary {
    background: linear-gradient(to right, var(--blue-500), var(--blue-600));
}

.theme-action-card-success {
    background: linear-gradient(to right, var(--green-500), var(--green-600));
}

.theme-action-card-purple {
    background: linear-gradient(to right, var(--purple-500), var(--purple-600));
}

.theme-action-card-text {
    color: rgba(255, 255, 255, 0.9);
}

/* 4-column responsive grid */
.theme-grid-4-responsive {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    grid-template-columns: 1fr; /* Mobile: 1 column */
}

@media (min-width: 640px) {
    .theme-grid-4-responsive {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
    }
}

@media (min-width: 1024px) {
    .theme-grid-4-responsive {
        grid-template-columns: repeat(4, 1fr); /* Desktop: 4 columns */
    }
}

@media (min-width: 1920px) {
    .theme-grid-4-responsive {
        grid-template-columns: repeat(4, 1fr); /* Ultrawide: Still 4 columns but with max-width container */
    }
}

/* Auto-fit grid for flexible layouts */
.theme-grid-auto-responsive {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

@media (min-width: 1024px) {
    .theme-grid-auto-responsive {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* ===== 5. RESPONSIVE COMPONENT VARIANTS ===== */

/* Responsive Cards */
.theme-card-responsive {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

[data-theme="dark"] .theme-card-responsive {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Responsive Stat Cards */
.theme-stat-card-responsive {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Stack icon and content on mobile, inline on tablet+ */
.theme-stat-card-responsive .stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .theme-stat-card-responsive .stat-content {
        flex-direction: row;
        align-items: center;
    }
}

/* Responsive Tables */
.theme-table-responsive-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    background-color: var(--color-surface);
}

/* Mobile: Card-based table view */
@media (max-width: 767px) {
    .theme-table-mobile-cards {
        display: block;
    }

    .theme-table-mobile-cards thead {
        display: none;
    }

    .theme-table-mobile-cards tbody {
        display: block;
    }

    .theme-table-mobile-cards tr {
        display: block;
        margin-bottom: 1rem;
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        padding: 1rem;
    }

    .theme-table-mobile-cards td {
        display: block;
        text-align: left !important;
        padding: 0.5rem 0;
        border: none !important;
    }

    .theme-table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-secondary);
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }
}

/* Responsive Forms */
.theme-form-responsive {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.theme-form-row-responsive {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    grid-template-columns: 1fr; /* Mobile: Stack */
}

@media (min-width: 768px) {
    .theme-form-row-responsive {
        grid-template-columns: repeat(2, 1fr); /* Tablet+: 2 columns */
    }
}

.theme-form-row-3-responsive {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .theme-form-row-3-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .theme-form-row-3-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive Inputs */
.theme-input-responsive {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    color: var(--color-text-primary);
    width: 100%;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    transition: all 0.2s ease;
}

.theme-input-responsive:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1);
}

/* Responsive Buttons */
.theme-btn-responsive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    gap: 0.5rem;
}

.theme-btn-primary-responsive {
    background-color: var(--color-primary);
    color: white;
}

.theme-btn-primary-responsive:hover {
    background-color: var(--color-primary-hover);
}

/* Full-width buttons on mobile */
.theme-btn-full-mobile {
    width: 100%;
}

@media (min-width: 640px) {
    .theme-btn-full-mobile {
        width: auto;
    }
}

/* Responsive Modals */
.theme-modal-responsive {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.theme-modal-content-responsive {
    background-color: var(--color-surface);
    border-radius: clamp(0.75rem, 2vw, 1rem);
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: var(--shadow-2xl);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 767px) {
    .theme-modal-content-responsive {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* ===== 6. CONTAINER WIDTH MANAGEMENT ===== */

/* Responsive page container with max-widths for different screen sizes
   UPDATED 2025-11-25: Widened containers for better table display */
.theme-page-container-responsive {
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(0.75rem, 2vw, 1.5rem);
}

@media (min-width: 640px) {
    .theme-page-container-responsive {
        max-width: 100%;
        padding: 0 1rem;
    }
}

@media (min-width: 768px) {
    .theme-page-container-responsive {
        max-width: 100%;
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .theme-page-container-responsive {
        max-width: calc(100% - 3rem);
        padding: 0 1.5rem;
    }
}

@media (min-width: 1280px) {
    .theme-page-container-responsive {
        max-width: calc(100% - 4rem);
        padding: 0 2rem;
    }
}

@media (min-width: 1536px) {
    .theme-page-container-responsive {
        max-width: 1800px;
        padding: 0 2rem;
    }
}

@media (min-width: 1920px) {
    .theme-page-container-responsive {
        max-width: 1900px; /* Wider for ultrawide monitors with tables */
        padding: 0 2.5rem;
    }
}

/* Max-width utilities */
.theme-max-w-xl {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.theme-max-w-2xl {
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
}

.theme-max-w-full {
    max-width: 100%;
}

/* ===== 7. TOUCH OPTIMIZATION ===== */

/* Larger tap targets for mobile (min 44x44px per accessibility guidelines) */
.theme-touch-target {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Touch-friendly spacing */
.theme-touch-spacing {
    padding: 0.75rem;
}

.theme-touch-spacing-sm {
    padding: 0.5rem;
}

.theme-touch-spacing-lg {
    padding: 1rem;
}

/* Larger checkboxes/radio buttons on mobile */
@media (max-width: 767px) {
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }
}

/* Prevent text selection on touch devices for buttons */
.theme-btn-responsive,
.mobile-menu-toggle,
.theme-touch-target {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ===== 8. RESPONSIVE UTILITY CLASSES ===== */

/* Hide/Show based on breakpoints */
.theme-hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .theme-hide-mobile {
        display: initial;
    }
}

.theme-hide-tablet {
    display: initial;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .theme-hide-tablet {
        display: none;
    }
}

.theme-hide-desktop {
    display: initial;
}

@media (min-width: 1024px) {
    .theme-hide-desktop {
        display: none;
    }
}

.theme-show-mobile-only {
    display: initial;
}

@media (min-width: 768px) {
    .theme-show-mobile-only {
        display: none;
    }
}

/* Responsive text alignment */
.theme-text-center-mobile {
    text-align: center;
}

@media (min-width: 768px) {
    .theme-text-center-mobile {
        text-align: left;
    }
}

/* Responsive flex direction */
.theme-flex-col-mobile {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .theme-flex-col-mobile {
        flex-direction: row;
    }
}

/* ===== 9. RESPONSIVE HEADER ENHANCEMENTS ===== */

/* Make header more compact on mobile */
@media (max-width: 767px) {
    .modern-header {
        height: 56px; /* Slightly shorter on mobile */
    }

    /* Adjust body padding for shorter mobile header */
    body.has-fixed-header {
        padding-top: 56px; /* Match mobile header height */
    }

    /* Adjust main spacing for mobile */
    body.has-fixed-header main {
        padding-top: 1rem; /* Slightly less spacing on mobile */
    }

    .header-content {
        padding: 0 1rem;
    }

    .header-logo {
        font-size: 1.125rem;
    }

    .header-logo i {
        font-size: 1.25rem;
    }

    /* Hide desktop navigation */
    .header-nav {
        display: none;
    }

    /* Hide long text on mobile, show only icons */
    .header-actions > span {
        display: none;
    }

    .header-actions a,
    .header-actions button {
        padding: 0.5rem;
    }

    .header-actions a span,
    .header-actions button span {
        display: none; /* Hide text, keep icons */
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .header-content {
        padding: 0 1.5rem;
    }
}

/* ===== 10. RESPONSIVE FOOTER ENHANCEMENTS ===== */

/* Stack footer content on mobile */
@media (max-width: 767px) {
    .modern-footer {
        padding: 1rem 0;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .footer-text {
        font-size: 0.8125rem;
    }
}

/* ===== 11. RESPONSIVE ALERT/NOTIFICATION STYLES ===== */

.theme-alert-responsive {
    border-radius: 0.5rem;
    padding: clamp(0.75rem, 2vw, 1rem);
    margin-bottom: 1rem;
    border-left-width: 4px;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
}

/* ===== 12. RESPONSIVE BADGE SIZING ===== */

.theme-badge-responsive {
    display: inline-flex;
    align-items: center;
    padding: clamp(0.25rem, 0.5vw, 0.375rem) clamp(0.5rem, 1vw, 0.75rem);
    border-radius: 9999px;
    font-size: clamp(0.6875rem, 1.2vw, 0.8125rem);
    font-weight: 600;
}

/* ===== 13. RESPONSIVE IMAGE HANDLING ===== */

.theme-img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== 14. GLOBAL TAILWIND OVERRIDES ===== */
/* Ensure theme classes always override Tailwind utility classes */

/* Override all heading sizes within theme components */
.theme-page-container-responsive h1,
.theme-page-container-responsive .theme-heading-1-responsive {
    font-size: 1.5rem !important;
}

@media (min-width: 768px) {
    .theme-page-container-responsive h1,
    .theme-page-container-responsive .theme-heading-1-responsive {
        font-size: 1.75rem !important;
    }
}

.theme-page-container-responsive h2,
.theme-page-container-responsive .theme-heading-2-responsive {
    font-size: 1.125rem !important;
}

@media (min-width: 768px) {
    .theme-page-container-responsive h2,
    .theme-page-container-responsive .theme-heading-2-responsive {
        font-size: 1.25rem !important;
    }
}

.theme-page-container-responsive h3,
.theme-page-container-responsive .theme-heading-3-responsive {
    font-size: 1rem !important;
}

@media (min-width: 768px) {
    .theme-page-container-responsive h3,
    .theme-page-container-responsive .theme-heading-3-responsive {
        font-size: 1.125rem !important;
    }
}

/* Ensure icons don't get too large */
.theme-page-container-responsive .text-2xl {
    font-size: 1.25rem !important; /* Reduce from 24px to 20px */
}

.theme-page-container-responsive .text-xl {
    font-size: 1.125rem !important; /* 18px */
}

/* Force stat card numbers to reasonable size */
.theme-stat-card-responsive .theme-heading-2-responsive {
    font-size: 1.5rem !important; /* 24px max for numbers */
}

/* ===== END RESPONSIVE DESIGN SYSTEM V2.0 =====  */

/* ===== MISSING COMPONENT CLASSES (Added 2025-10-28) ===== */

/* Input Base - Alias for .nugui-input */
.nugui-input-base {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nugui-input-base:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.nugui-input-base::placeholder {
  color: var(--color-text-tertiary);
}

/* Table Base - Alias for .nugui-table */
.nugui-table-base {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Table Header Styles */
.nugui-table-header {
  background-color: var(--color-background-secondary);
  border-bottom: 2px solid var(--color-border);
}

.nugui-table-header-cell {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nugui-table-base tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s ease;
}

.nugui-table-base tbody tr:hover {
  background-color: var(--color-background-secondary);
}

.nugui-table-base tbody td {
  padding: 1rem;
  color: var(--color-text-secondary);
}

/* Dark theme table adjustments */
[data-theme="dark"] .nugui-table-base {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .nugui-table-header {
  background: linear-gradient(135deg, #2A2A2C 0%, #2E2E30 100%);
}

/* ===== RESPONSIVE HEADER LOGO STYLES (Phase 3) ===== */
/* Added: 2025-10-28 - Logo + Text with responsive behavior */

.header-logo-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.header-logo-image {
  height: 2.5rem;      /* 40px */
  width: auto;
  flex-shrink: 0;
}

.header-reports-icon {
  font-size: 1.5rem;    /* 24px - chart-line icon */
  color: rgba(255, 255, 255, 0.95);  /* White color matching login page */
  flex-shrink: 0;
}

.header-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.header-logo-title {
  font-size: 1.125rem;  /* 18px */
  font-weight: 700;
  color: var(--color-header-logo-text, #0A84FF);
}

.header-logo-subtitle {
  font-size: 0.875rem;   /* 14px - slightly larger for better readability */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

/* Mobile: Hide subtitle text, keep logo + icon */
@media (max-width: 640px) {
  .header-logo-subtitle {
    display: none;
  }

  .header-logo-title {
    font-size: 1rem;  /* 16px - slightly smaller on mobile */
  }

  .header-logo-image {
    height: 2rem;     /* 32px - slightly smaller */
  }
}

/* Tablet: Show title, hide subtitle on small tablets */
@media (min-width: 641px) and (max-width: 768px) {
  .header-logo-subtitle {
    display: none;
  }
}

/* Desktop: Show everything */
@media (min-width: 769px) {
  .header-logo-subtitle {
    display: block;
  }
}

/* Hover effect for logo container */
.header-logo-container:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

/* ===== 15. SEMANTIC UTILITY CLASSES FOR ADMIN PAGES ===== */
/* Added: 2025-10-29 - Theme-aware utilities to replace hardcoded inline styles */

/* Icon Accent Colors - Theme-aware */
.theme-icon-primary {
    color: var(--color-primary) !important;
}

.theme-icon-success {
    color: var(--color-success) !important;
}

.theme-icon-warning {
    color: var(--color-warning) !important;
}

.theme-icon-error {
    color: var(--color-error) !important;
}

.theme-icon-info {
    color: var(--color-text-cyan) !important;
}

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

/* Terminal/Code Display */
.theme-terminal-bg {
    background-color: var(--color-surface-dark) !important;
    color: var(--color-success) !important;
}

[data-theme="dark"] .theme-terminal-bg {
    background-color: var(--gray-900) !important;
    color: var(--green-400) !important;
}

.theme-terminal-text {
    color: var(--color-success) !important;
    font-family: monospace;
}

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

/* Modal Overlays */
.theme-modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

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

/* Info Box / Alert Specific Styles */
.theme-info-box-icon {
    color: var(--color-primary);
}

.theme-info-box-title {
    color: var(--color-text-primary);
    font-weight: 600;
}

.theme-info-box-text {
    color: var(--color-text-secondary);
}

/* Gradient Backgrounds for Cards (Theme-aware) */
.theme-gradient-primary {
    background: linear-gradient(to right, var(--color-primary), var(--color-primary-dark)) !important;
    color: white !important;
}

.theme-gradient-success {
    background: linear-gradient(to right, var(--color-success), var(--color-success-dark)) !important;
    color: white !important;
}

.theme-gradient-warning {
    background: linear-gradient(to right, var(--color-warning), var(--color-warning-dark)) !important;
    color: white !important;
}

.theme-gradient-error {
    background: linear-gradient(to right, var(--color-error), var(--color-error-dark)) !important;
    color: white !important;
}

.theme-gradient-purple {
    background: linear-gradient(to right, var(--purple-500), var(--purple-600)) !important;
    color: white !important;
}

[data-theme="dark"] .theme-gradient-purple {
    background: linear-gradient(to right, var(--purple-600), var(--purple-700)) !important;
}

.theme-gradient-orange {
    background: linear-gradient(to right, var(--orange-500), var(--orange-600)) !important;
    color: white !important;
}

[data-theme="dark"] .theme-gradient-orange {
    background: linear-gradient(to right, var(--orange-600), var(--orange-700)) !important;
}

.theme-gradient-teal {
    background: linear-gradient(to right, var(--teal-500), var(--teal-600)) !important;
    color: white !important;
}

[data-theme="dark"] .theme-gradient-teal {
    background: linear-gradient(to right, var(--teal-600), var(--teal-700)) !important;
}

.theme-gradient-indigo {
    background: linear-gradient(to right, var(--indigo-500), var(--indigo-600)) !important;
    color: white !important;
}

[data-theme="dark"] .theme-gradient-indigo {
    background: linear-gradient(to right, var(--indigo-600), var(--indigo-700)) !important;
}

/* Status Badge Colors - Ensure consistency */
.theme-status-running {
    background-color: var(--color-badge-primary-bg);
    color: var(--color-badge-primary-text);
}

.theme-status-completed {
    background-color: var(--color-badge-success-bg);
    color: var(--color-badge-success-text);
}

.theme-status-failed {
    background-color: var(--color-badge-error-bg);
    color: var(--color-badge-error-text);
}

/* Exit Code Colors */
.theme-exit-code-success {
    color: var(--color-success);
    font-weight: 600;
}

.theme-exit-code-error {
    color: var(--color-error);
    font-weight: 600;
}

/* Additional Utility Classes */
.theme-text-error {
    color: var(--color-error) !important;
}

.theme-bg-hover {
    background-color: var(--color-hover) !important;
}

.theme-border {
    border-color: var(--color-border) !important;
}

.theme-bg-primary {
    background-color: var(--color-primary) !important;
}

/* ===== 16. CRITICAL FIXES FOR ADMIN PAGE VISIBILITY & FUNCTIONALITY ===== */
/* Added: 2025-10-29 - Fix invisible cards, table cutoff, hover effects */

/* TABLE OVERFLOW FIXES - Ensure all columns visible */
.theme-table-responsive-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    contain: layout !important;
}

.theme-table {
    min-width: 100% !important;
    width: max-content !important;
}

.theme-table th,
.theme-table td {
    white-space: nowrap !important;
    min-width: 100px !important;
}

/* HOVER EFFECT FIXES - Strengthen with !important to override Tailwind */
.theme-hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-hover-lift:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .theme-hover-lift:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5) !important;
}

.theme-hover-lift-scale {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-hover-lift-scale:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .theme-hover-lift-scale:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6) !important;
}

.theme-hover-shadow {
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-hover-shadow:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .theme-hover-shadow:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7) !important;
}

.theme-hover-scale {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-hover-scale:hover {
    transform: scale(1.02) !important;
}

/* RESPONSIVE CONTAINER FIXES */
.theme-page-container-responsive {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* FIX FLEX GAPS ON MOBILE */
.theme-flex-col-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

@media (min-width: 640px) {
    .theme-flex-col-mobile {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* GRID LAYOUT FIXES FOR QUICK ACTIONS */
.theme-grid-4-responsive {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
}

@media (max-width: 767px) {
    .theme-grid-4-responsive {
        grid-template-columns: 1fr !important;
    }
}

/* ENSURE BUTTONS ARE VISIBLE AND CLICKABLE */
.theme-btn,
.theme-btn-primary,
.theme-btn-responsive {
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-btn:hover,
.theme-btn-primary:hover,
.theme-btn-responsive:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* FIX ANIMATION KEYFRAMES */
@keyframes theme-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.theme-animate-fade-in {
    animation: theme-fade-in 0.3s ease-out !important;
}

@keyframes theme-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.theme-animate-slide-down {
    animation: theme-slide-down 0.3s ease-out !important;
}

/* OVERRIDE TAILWIND DEFAULTS THAT BREAK THEME */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4) !important;
}

/* ===== ACCESSIBILITY - FOCUS INDICATORS ===== */
/* P2-3: Use :where() for lower specificity to allow component overrides */
:where(*):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dark theme focus with glow */
[data-theme="dark"] :where(*):focus-visible {
  outline-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(119, 181, 255, 0.3);
}

/* Remove default browser outline when using custom focus */
:where(*):focus:not(:focus-visible) {
  outline: none;
}