/* app.css - QRHub Theme System */

:root {
  /* LIGHT MODE */
  --bg-primary: #fcfcfc;
  --bg-secondary: #e6f5e6;
  --bg-tertiary: #f2f4fc;
  
  --text-primary: #300438;
  --text-secondary: #053805;
  --text-tertiary: #1c0101;
  
  --accent-primary: #300438;
  --accent-secondary: #1c0101;
  
  --border-light: #e6f5e6;
  --shadow-color: rgba(48, 4, 56, 0.1);
}

[data-theme="dark"] {
  /* DARK MODE (Priority Based Cinematic Theme) */
  --bg-primary: #1e0021;
  --bg-secondary: #45054d;
  --bg-tertiary: #4e0763;
  
  --text-primary: #f8fc05; /* Neon Yellow */
  --text-secondary: #0dfa05;
  --text-tertiary: #05faf6;
  
  --accent-primary: #f8fc05;
  --accent-secondary: #0dfa05;
  
  --border-light: #4e0763;
  --shadow-color: rgba(248, 252, 5, 0.15);
}

/* Global Force Resets to ensure pristine cinematic feel */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Fix generic card borders */
.border, .border-slate-100, .border-slate-200, .border-gray-100 {
    border-color: var(--border-light) !important;
}

/* Dashboard specific fixes to ensure text readability in both modes */
.glass-panel {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-light) !important;
}

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

[data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-slate-100, [data-theme="dark"] .bg-blue-50 {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}

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

[data-theme="dark"] .text-slate-500, [data-theme="dark"] .text-slate-400, [data-theme="dark"] .text-gray-500 {
    color: var(--text-tertiary) !important;
}

/* Fix text colors that should be dark on light backgrounds and light on dark backgrounds */
[data-theme="dark"] .text-blue-900, [data-theme="dark"] .text-indigo-900, [data-theme="dark"] .text-blue-800, [data-theme="dark"] .text-slate-900 {
    color: var(--text-primary) !important;
}

/* Ensure any element explicitly given a white background (like inputs/phone previews) has dark text OR is overridden to dark background */
[data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="url"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] textarea, [data-theme="dark"] select {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

/* Buttons and Accents */
[data-theme="dark"] .bg-blue-600, [data-theme="dark"] .bg-indigo-600 {
    /* Neon glowing buttons */
    background-color: var(--accent-primary) !important;
    color: var(--bg-primary) !important;
    box-shadow: 0 0 15px rgba(248, 252, 5, 0.4) !important;
}

/* Hover fixes: When hovering over items, if background changes, ensure text contrasts */
[data-theme="dark"] .hover\:bg-blue-50:hover, [data-theme="dark"] .hover\:bg-slate-50:hover, [data-theme="dark"] .hover\:bg-slate-100:hover, [data-theme="dark"] .hover\:bg-white:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 0 0 1px var(--border-light) !important;
}

[data-theme="dark"] .text-blue-600, [data-theme="dark"] .text-indigo-600 {
    color: var(--accent-primary) !important;
}

[data-theme="dark"] .border-blue-600, [data-theme="dark"] .ring-blue-600 {
    border-color: var(--accent-primary) !important;
    --tw-ring-color: var(--accent-primary) !important;
}

/* Ensure active nav items in dashboard highlight properly */
[data-theme="dark"] .nav-item-active {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-item-inactive:hover {
    background-color: var(--bg-secondary) !important;
}

/* Fix Hero section and Footer which use bg-slate-900 */
[data-theme="dark"] .bg-slate-900 {
    background-color: var(--bg-primary) !important;
}

/* Fix header glass background in dark mode */
[data-theme="dark"] .bg-white\/80 {
    background-color: rgba(30, 0, 33, 0.95) !important;
}

/* Footer bright text */
[data-theme="dark"] footer .text-slate-300,
[data-theme="dark"] footer a,
[data-theme="dark"] footer p {
    color: var(--text-primary) !important;
    opacity: 1 !important;
}
[data-theme="dark"] footer a:hover {
    color: var(--text-secondary) !important;
}