/* Theme Styles - Based on user preferences */
/* Uses CSS custom properties for theming without !important */

/* ============================================ */
/* CSS Custom Properties (Variables) */
/* ============================================ */
:root {
  /* Default theme colors (light) */
  --theme-sidebar-bg: #1F2937;
  --theme-sidebar-hover: rgba(55, 65, 81, 0.5);
  --theme-sidebar-active: #0d9488;
  --theme-sidebar-active-hover: #14b8a6;
  --theme-primary: #0d9488;
  --theme-primary-hover: #14b8a6;
  --theme-primary-text: #14b8a6;
  --theme-primary-border: #0d9488;
}

/* ============================================ */
/* Light Theme (Default) */
/* ============================================ */
.theme-light {
  --theme-sidebar-bg: #1F2937;
}

/* ============================================ */
/* Dark Theme */
/* ============================================ */
.theme-dark {
  --theme-sidebar-bg: #0F172A;

  /* Page & Card backgrounds */
  --theme-page-bg: #020617;
  --theme-card-bg: rgba(30, 41, 59, 0.7);
  --theme-card-border: rgba(255, 255, 255, 0.1);
  --theme-section-bg: rgba(30, 41, 59, 0.5);

  /* Text */
  --theme-text-primary: #f1f5f9;
  --theme-text-secondary: #cbd5e1;
  --theme-text-tertiary: #94a3b8;
  --theme-text-muted: #64748b;

  /* Borders */
  --theme-border-light: rgba(51, 65, 85, 0.3);
  --theme-border-primary: rgba(51, 65, 85, 0.5);
  --theme-border-strong: #475569;

  /* Inputs */
  --theme-input-bg: rgba(30, 41, 59, 0.5);
  --theme-input-border: #334155;
  --theme-input-text: #f1f5f9;
  --theme-input-placeholder: #64748b;
  --theme-input-focus: #14b8a6;

  /* Hover */
  --theme-hover-bg: rgba(51, 65, 85, 0.5);
}

/* ============================================ */
/* Lavender Theme - Elegant Lavender */
/* ============================================ */
.theme-lavender {
  --theme-sidebar-bg: linear-gradient(180deg, #A78BFA 0%, #8B5CF6 100%);
  --theme-sidebar-hover: rgba(124, 58, 237, 0.3);
  --theme-sidebar-active: #7C3AED;
  --theme-sidebar-active-hover: #6D28D9;
  --theme-primary: #A78BFA;
  --theme-primary-hover: #8B5CF6;
  --theme-primary-text: #A78BFA;
  --theme-primary-border: #A78BFA;
}

/* ============================================ */
/* Natural Theme - Calming Natural */
/* ============================================ */
.theme-natural {
  --theme-sidebar-bg: linear-gradient(180deg, #8BC6A9 0%, #6EAA8C 100%);
  --theme-sidebar-hover: rgba(139, 198, 169, 0.3);
  --theme-sidebar-active: #6EAA8C;
  --theme-sidebar-active-hover: #5A9073;
  --theme-primary: #8BC6A9;
  --theme-primary-hover: #6EAA8C;
  --theme-primary-text: #6EAA8C;
  --theme-primary-border: #8BC6A9;
}

/* ============================================ */
/* Feminine Theme - Delicate Feminine */
/* ============================================ */
.theme-feminine {
  --theme-sidebar-bg: linear-gradient(180deg, #F9A8D4 0%, #F472B6 100%);
  --theme-sidebar-hover: rgba(249, 168, 212, 0.3);
  --theme-sidebar-active: #F472B6;
  --theme-sidebar-active-hover: #EC4899;
  --theme-primary: #F9A8D4;
  --theme-primary-hover: #F472B6;
  --theme-primary-text: #F472B6;
  --theme-primary-border: #F9A8D4;
}

/* ============================================ */
/* Apply Theme Styles */
/* ============================================ */

/* Sidebar background - use high specificity to override Tailwind */
html body aside.bg-gray-900 {
  background: var(--theme-sidebar-bg);
}

/* Sidebar hover states */
html body aside.bg-gray-900 a:hover,
html body aside.bg-gray-900 button:hover {
  background-color: var(--theme-sidebar-hover);
}

/* Sidebar active link */
html body aside.bg-gray-900 a.bg-blue-700 {
  background-color: var(--theme-sidebar-active);
}

html body aside.bg-gray-900 a.bg-blue-700:hover {
  background-color: var(--theme-sidebar-active-hover);
}

/* Theme-specific accent overrides for non-default themes */
.theme-lavender .bg-blue-700,
.theme-natural .bg-blue-700,
.theme-feminine .bg-blue-700 {
  background-color: var(--theme-primary);
}

.theme-lavender .bg-blue-700:hover,
.theme-natural .bg-blue-700:hover,
.theme-feminine .bg-blue-700:hover {
  background-color: var(--theme-primary-hover);
}

.theme-lavender .bg-blue-600,
.theme-natural .bg-blue-600,
.theme-feminine .bg-blue-600 {
  background-color: var(--theme-primary);
}

.theme-lavender .bg-blue-600:hover,
.theme-natural .bg-blue-600:hover,
.theme-feminine .bg-blue-600:hover {
  background-color: var(--theme-primary-hover);
}

.theme-lavender .text-blue-600,
.theme-natural .text-blue-600,
.theme-feminine .text-blue-600 {
  color: var(--theme-primary-text);
}

.theme-lavender .border-blue-600,
.theme-natural .border-blue-600,
.theme-feminine .border-blue-600 {
  border-color: var(--theme-primary-border);
}

/* ============================================ */
/* Dark Theme - Global Overrides */
/* ============================================ */

/* Body & page background */
html body.theme-dark {
  background-color: var(--theme-page-bg);
}

/* Main content areas */
html body.theme-dark main.bg-gray-50,
html body.theme-dark main.bg-gray-100,
html body.theme-dark .bg-gray-50,
html body.theme-dark .bg-gray-100 {
  background-color: var(--theme-page-bg);
}

/* Cards (bg-white) - glassmorphism */
html body.theme-dark .bg-white {
  background-color: var(--theme-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--theme-card-border);
}

/* Shadows on dark: softer */
html body.theme-dark .shadow,
html body.theme-dark .shadow-md,
html body.theme-dark .shadow-lg,
html body.theme-dark .shadow-xl {
  --tw-shadow-color: rgba(0, 0, 0, 0.3);
}

/* ---- Text overrides ---- */
html body.theme-dark .text-gray-900 { color: var(--theme-text-primary); }
html body.theme-dark .text-gray-800 { color: var(--theme-text-primary); }
html body.theme-dark .text-gray-700 { color: var(--theme-text-secondary); }
html body.theme-dark .text-gray-600 { color: var(--theme-text-tertiary); }
html body.theme-dark .text-gray-500 { color: var(--theme-text-tertiary); }
html body.theme-dark .text-gray-400 { color: var(--theme-text-muted); }
html body.theme-dark .text-gray-300 { color: var(--theme-text-muted); }

/* ---- Border overrides ---- */
html body.theme-dark .border-gray-100 { border-color: var(--theme-border-light); }
html body.theme-dark .border-gray-200 { border-color: var(--theme-border-primary); }
html body.theme-dark .border-gray-300 { border-color: var(--theme-border-strong); }

/* ---- Badge/Alert colored backgrounds ---- */
html body.theme-dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1); }
html body.theme-dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2); }
html body.theme-dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.1); }
html body.theme-dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.2); }
html body.theme-dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1); }
html body.theme-dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.2); }
html body.theme-dark .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.1); }
html body.theme-dark .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.2); }
html body.theme-dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.1); }
html body.theme-dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2); }

/* Badge/Alert text colors - lighter for dark bg legibility */
html body.theme-dark .text-blue-600,
html body.theme-dark .text-blue-700,
html body.theme-dark .text-blue-800 { color: #60a5fa; }
html body.theme-dark .text-green-600,
html body.theme-dark .text-green-700,
html body.theme-dark .text-green-800 { color: #34d399; }
html body.theme-dark .text-red-600,
html body.theme-dark .text-red-700,
html body.theme-dark .text-red-800 { color: #f87171; }
html body.theme-dark .text-yellow-600,
html body.theme-dark .text-yellow-700,
html body.theme-dark .text-yellow-800 { color: #fbbf24; }
html body.theme-dark .text-purple-600,
html body.theme-dark .text-purple-700,
html body.theme-dark .text-purple-800 { color: #c084fc; }

/* Badge/Alert border colors */
html body.theme-dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3); }
html body.theme-dark .border-green-200 { border-color: rgba(16, 185, 129, 0.3); }
html body.theme-dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3); }
html body.theme-dark .border-yellow-200 { border-color: rgba(245, 158, 11, 0.3); }

/* ---- Form inputs, selects, textareas ---- */
html body.theme-dark input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html body.theme-dark select,
html body.theme-dark textarea {
  background-color: var(--theme-input-bg);
  border-color: var(--theme-input-border);
  color: var(--theme-input-text);
}

html body.theme-dark input:not([type="submit"]):not([type="button"]):not([type="reset"])::placeholder,
html body.theme-dark textarea::placeholder {
  color: var(--theme-input-placeholder);
}

html body.theme-dark input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
html body.theme-dark select:focus,
html body.theme-dark textarea:focus {
  border-color: var(--theme-input-focus);
  --tw-ring-color: var(--theme-input-focus);
}

/* Select option dropdown readability */
html body.theme-dark select option {
  background-color: #1e293b;
  color: #f1f5f9;
}

/* ---- Hover state overrides ---- */
html body.theme-dark .hover\:bg-gray-50:hover,
html body.theme-dark .hover\:bg-gray-100:hover {
  background-color: var(--theme-hover-bg);
}

html body.theme-dark .hover\:bg-blue-50:hover {
  background-color: rgba(59, 130, 246, 0.15);
}

/* ---- Dividers (divide utility) ---- */
html body.theme-dark .divide-gray-200 > :not(:last-child) {
  border-color: var(--theme-border-primary);
}

/* ---- Skip links (accessibility) ---- */
html body.theme-dark .focus\:bg-white:focus {
  background-color: var(--theme-card-bg);
  color: var(--theme-text-primary);
}

/* ---- Ring offsets (focus states on dark bg) ---- */
html body.theme-dark .focus\:ring-offset-2 {
  --tw-ring-offset-color: var(--theme-page-bg);
}

/* ---- Table striping ---- */
html body.theme-dark .even\:bg-gray-50:nth-child(even) {
  background-color: rgba(30, 41, 59, 0.3);
}

/* ---- Mobile header dark ---- */
html body.theme-dark .bg-gray-900 {
  background-color: #0f172a;
}

/* ---- Sidebar text visibility in dark theme ---- */
html body.theme-dark aside .text-gray-300 { color: #e2e8f0; }
html body.theme-dark aside .text-gray-400 { color: #cbd5e1; }
html body.theme-dark aside .text-gray-500 { color: #94a3b8; }