/* Theme CSS Variables and Dark Mode Support */

:root {
  /* Light theme colors */
  --bg-primary: rgb(255, 255, 255);
  --bg-secondary: rgb(249, 250, 251);
  --bg-tertiary: rgb(243, 244, 246);
  --bg-inverse: rgba(202, 199, 199, 1);
  --body-bg: rgb(255, 255, 255);
  --text-primary: rgba(35, 35, 35, 1);
  --text-secondary: rgb(75, 85, 99);
  --text-tertiary: rgb(107, 114, 128);
  --text-inverse: rgb(255, 255, 255);
  --border-primary: rgb(229, 231, 235);
  --border-secondary: rgb(209, 213, 219);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-strong: rgba(0, 0, 0, 0.25);
  --accent-primary: #00796b;
  --accent-hover: #004d40;
  /* --button-bg: rgb(255, 255, 255); */
  --button-text: rgb(17, 24, 39);
  --input-bg: rgb(255, 255, 255);
  --input-border: rgb(229, 231, 235);
  --input-focus: #00796b;
  --navbar-bg: rgb(255, 255, 255);
  --dialog-backdrop: rgba(0, 0, 0, 0.5);
  --gradient-start: #caca53;
  --gradient-end: #dcdc74;
}

.dark {
  /* Dark theme colors */
  --bg-primary: rgba(26, 26, 26, 1);
  --bg-secondary: rgba(58, 58, 58, 1);
  --bg-tertiary: rgb(55, 65, 81);
  --bg-inverse: rgba(152, 151, 151, 1);
  --body-bg: rgba(42, 42, 42, 1);
  --text-primary: rgb(243, 244, 246);
  --text-secondary: rgb(209, 213, 219);
  --text-tertiary: rgb(156, 163, 175);
  --text-inverse: rgb(17, 24, 39);
  --border-primary: rgb(75, 85, 99);
  --border-secondary: rgb(107, 114, 128);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-strong: rgba(0, 0, 0, 0.6);
  --accent-primary: #10b981;
  --accent-hover: #059669;
  /* --button-bg: rgb(55, 65, 81); */
  --button-text: rgb(243, 244, 246);
  --input-bg: rgb(31, 41, 55);
  --input-border: rgb(75, 85, 99);
  --input-focus: #10b981;
  --navbar-bg: rgb(17, 24, 39);
  --dialog-backdrop: rgba(0, 0, 0, 0.7);
  --gradient-start: #374151;
  --gradient-end: #4b5563;
}

/* Apply theme variables to existing classes */
html, body {
  background-color: var(--body-bg) !important;
  color: var(--text-inverse) !important;
}

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

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

.text-white {
  color: var(--text-inverse) !important;
}

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

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

.shadow-2xl {
  box-shadow: 0 25px 50px -12px var(--shadow-color-strong) !important;
}

/* Update gradient background for dark mode */
.gradient-background {
  background: linear-gradient(0deg, var(--gradient-start), var(--gradient-end)) !important;
}

/* Form elements */
input {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

input:focus {
  border-color: var(--input-focus) !important;
}

select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

/* Button styles */
button {
  background-color: var(--button-bg);
  color: var(--button-text);
}

/* Fieldset and legend */
fieldset {
  border-color: var(--border-primary) !important;
  background-color: var(--bg-primary) !important;
}

legend {
  color: var(--text-primary) !important;
}

/* Dialog backdrop */
::backdrop {
  background: var(--dialog-backdrop) !important;
}

/* Hover states */
.hover\:bg-gray-300:hover,
.\!hover\:bg-gray-300:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Border utilities */
.border-white {
  border-color: var(--border-primary) !important;
}

.border-b-2 {
  border-color: var(--border-primary) !important;
}

/* Text colors for various states */
.text-black {
  color: var(--text-primary) !important;
}

/* Card and table backgrounds */
.card-background {
  fill: var(--bg-secondary) !important;
}

/* Tabulator specific styles for dark mode */
.dark .tabulator {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.dark .tabulator .tabulator-header {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}

.dark .tabulator .tabulator-col {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

.dark .tabulator .tabulator-row {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

.dark .tabulator .tabulator-row:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Ensure proper contrast for icons */
iconify-icon {
  color: var(--text-primary);
}

/* Loading spinner colors */
.animate-spin {
  color: var(--text-primary);
}

/* Ensure labels have proper color */
label {
  color: var(--text-primary) !important;
}

/* Additional background elements */
.bg-gray-100 {
  background-color: var(--bg-secondary) !important;
}

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

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

/* Ensure main app container has proper background */
certifacto-app {
  background-color: var(--bg-primary) !important;
}

/* Ensure main content areas have proper background */
certifacto-main {
  background-color: var(--bg-primary) !important;
}

/* Smooth transitions for theme changes */
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Disable transitions during theme initialization to prevent flash */
.theme-transitioning * {
  transition: none !important;
}

.text-always-white {
  color: white !important;
}