/* Custom styles for Fair Day */

/* Coal color palette for dark sidebar */
:root {
  --coal-100: #e1e3ea;
  --coal-200: #c8ccd7;
  --coal-300: #a1a6b8;
  --coal-400: #7c8299;
  --coal-500: #3f4254;
  --coal-600: #1e2132;
  --coal-700: #1b1c28;
  --coal-800: #151521;
  --coal-900: #0f0f17;
  
  /* Light mode defaults */
  --page-bg: #f5f5f7;
  --card-bg: #ffffff;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border-color: #e5e7eb;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --table-header-bg: #f3f4f6;
  --table-row-hover: #f9fafb;
}

/* Dark mode variables */
html.dark,
body.dark,
.dark {
  --page-bg: #0f0f17;
  --card-bg: #1b1c28;
  --text-primary: #e1e3ea;
  --text-secondary: #a1a6b8;
  --text-muted: #7c8299;
  --border-color: #3f4254;
  --input-bg: #1e2132;
  --input-border: #3f4254;
  --table-header-bg: #1e2132;
  --table-row-hover: #252836;
}

/* Background colors */
.bg-coal-100 { background-color: var(--coal-100); }
.bg-coal-200 { background-color: var(--coal-200); }
.bg-coal-300 { background-color: var(--coal-300); }
.bg-coal-400 { background-color: var(--coal-400); }
.bg-coal-500 { background-color: var(--coal-500); }
.bg-coal-600 { background-color: var(--coal-600); }
.bg-coal-700 { background-color: var(--coal-700); }
.bg-coal-800 { background-color: var(--coal-800); }
.bg-coal-900 { background-color: var(--coal-900); }

/* Text colors */
.text-coal-100 { color: var(--coal-100); }
.text-coal-200 { color: var(--coal-200); }
.text-coal-300 { color: var(--coal-300); }
.text-coal-400 { color: var(--coal-400); }
.text-coal-500 { color: var(--coal-500); }
.text-coal-600 { color: var(--coal-600); }
.text-coal-700 { color: var(--coal-700); }
.text-coal-800 { color: var(--coal-800); }
.text-coal-900 { color: var(--coal-900); }

/* Border colors */
.border-coal-100 { border-color: var(--coal-100); }
.border-coal-200 { border-color: var(--coal-200); }
.border-coal-300 { border-color: var(--coal-300); }
.border-coal-400 { border-color: var(--coal-400); }
.border-coal-500 { border-color: var(--coal-500); }
.border-coal-600 { border-color: var(--coal-600); }
.border-coal-700 { border-color: var(--coal-700); }
.border-coal-800 { border-color: var(--coal-800); }
.border-coal-900 { border-color: var(--coal-900); }

/* Hover states */
.hover\:bg-coal-500:hover { background-color: var(--coal-500); }
.hover\:bg-coal-600:hover { background-color: var(--coal-600); }
.hover\:bg-coal-700:hover { background-color: var(--coal-700); }
.hover\:text-white:hover { color: #fff; }

/* Dark mode overrides */
.dark .dark\:bg-coal-500 { background-color: var(--coal-500); }
.dark .dark\:bg-coal-600 { background-color: var(--coal-600); }
.dark .dark\:bg-coal-700 { background-color: var(--coal-700); }

/* Sidebar-specific styles */
#sidebar {
  transition: transform 0.3s ease-in-out;
}

/* Desktop: sidebar always visible, content offset */
@media (min-width: 1024px) {
  #sidebar {
    transform: translateX(0) !important;
  }
}

/* Mobile sidebar handling */
@media (max-width: 1023px) {
  #sidebar {
    transform: translateX(-100%);
  }
  
  #sidebar.sidebar-open {
    transform: translateX(0);
  }
  
  /* On mobile, remove the margin so content is full width when sidebar is hidden */
  .main-content-wrapper {
    margin-left: 0 !important;
  }
}

/* Size utilities */
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}

/* Modal overlay styles - ensure proper display */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 1rem !important;
}

.modal-overlay:not(.hidden) {
  display: flex !important;
}

/* Modal content - ensure it doesn't interfere with backdrop clicks */
.modal-content {
  position: relative !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

/* Illustration placeholder */
.illustration-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-foreground) 100%);
  border-radius: 50%;
  opacity: 0.1;
}

/* Page background - darker gray for better contrast - v2 */
body {
  background-color: var(--page-bg) !important;
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main content area */
main {
  background-color: var(--page-bg);
}

/* Ensure cards stand out with proper shadows */
.kt-card {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
  background-color: var(--card-bg);
  transition: background-color 0.3s ease;
}

/* Header bar contrast */
header {
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode card styles */
html.dark .bg-white,
body.dark .bg-white,
.dark .bg-white {
  background-color: var(--card-bg) !important;
}

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

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

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

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

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

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

html.dark input::placeholder,
html.dark textarea::placeholder,
body.dark input::placeholder,
body.dark textarea::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--text-muted) !important;
}

html.dark table,
body.dark table,
.dark table {
  background-color: var(--card-bg);
}

html.dark thead,
body.dark thead,
.dark thead {
  background-color: var(--table-header-bg) !important;
}

html.dark tbody tr,
body.dark tbody tr,
.dark tbody tr {
  border-color: var(--border-color);
}

html.dark tbody tr:hover,
body.dark tbody tr:hover,
.dark tbody tr:hover {
  background-color: var(--table-row-hover) !important;
}

/* Footer dark mode */
html.dark footer,
body.dark footer,
.dark footer {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

/* Modal dark mode */
html.dark .modal-content,
body.dark .modal-content,
.dark .modal-content {
  background-color: var(--card-bg) !important;
  color: var(--text-primary);
}

/* Dark mode toggle button */
.theme-toggle {
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.theme-toggle:hover {
  background-color: var(--coal-500);
}

/* Modal improvements */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* ============================================
   COMPREHENSIVE DARK MODE OVERRIDES
   ============================================ */

/* Body and background */
html.dark body,
body.dark,
html.dark .bg-background,
body.dark .bg-background {
  background-color: var(--page-bg) !important;
  color: var(--text-primary) !important;
}

/* All cards and card-like containers */
html.dark .kt-card,
html.dark .kt-card-content,
html.dark [class*="rounded-xl"][class*="border"],
html.dark [class*="rounded-lg"][class*="border"],
body.dark .kt-card,
body.dark .kt-card-content,
body.dark [class*="rounded-xl"][class*="border"],
body.dark [class*="rounded-lg"][class*="border"] {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Text colors - comprehensive */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
  color: var(--text-primary) !important;
}

html.dark p,
body.dark p {
  color: var(--text-secondary);
}

html.dark .text-mono,
html.dark .text-foreground,
body.dark .text-mono,
body.dark .text-foreground {
  color: var(--text-primary) !important;
}

html.dark .text-muted-foreground,
html.dark .text-secondary-foreground,
body.dark .text-muted-foreground,
body.dark .text-secondary-foreground {
  color: var(--text-secondary) !important;
}

/* Form elements */
html.dark .kt-input,
html.dark .kt-input input,
html.dark .kt-form-label,
body.dark .kt-input,
body.dark .kt-input input,
body.dark .kt-form-label {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

html.dark .kt-checkbox-label,
body.dark .kt-checkbox-label {
  color: var(--text-secondary) !important;
}

/* Buttons - keep primary colors, adjust secondary */
html.dark .kt-btn:not(.kt-btn-primary):not(.kt-btn-success):not(.kt-btn-danger):not(.kt-btn-warning),
body.dark .kt-btn:not(.kt-btn-primary):not(.kt-btn-success):not(.kt-btn-danger):not(.kt-btn-warning) {
  color: var(--text-primary);
}

html.dark .kt-btn-ghost,
body.dark .kt-btn-ghost {
  color: var(--text-secondary) !important;
}

html.dark .kt-btn-ghost:hover,
body.dark .kt-btn-ghost:hover {
  background-color: var(--coal-500) !important;
  color: var(--text-primary) !important;
}

/* Links */
html.dark a:not(.kt-btn):not([class*="text-"]),
body.dark a:not(.kt-btn):not([class*="text-"]) {
  color: var(--text-secondary);
}

html.dark a:not(.kt-btn):hover,
body.dark a:not(.kt-btn):hover {
  color: var(--text-primary);
}

/* Borders */
html.dark .border,
html.dark .border-b,
html.dark .border-t,
html.dark .border-l,
html.dark .border-r,
html.dark .border-border,
body.dark .border,
body.dark .border-b,
body.dark .border-t,
body.dark .border-l,
body.dark .border-r,
body.dark .border-border {
  border-color: var(--border-color) !important;
}

/* Dividers */
html.dark hr,
html.dark .divide-y > *,
html.dark .divide-x > *,
body.dark hr,
body.dark .divide-y > *,
body.dark .divide-x > * {
  border-color: var(--border-color) !important;
}

/* Shadows for dark mode - subtle glow effect */
html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
body.dark .shadow,
body.dark .shadow-sm,
body.dark .shadow-md,
body.dark .shadow-lg {
  box-shadow: 0 0 0 1px var(--border-color), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Badge/pill colors */
html.dark .bg-primary\/10,
body.dark .bg-primary\/10 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

/* Login page specific */
html.dark .kt-card,
body.dark .kt-card {
  background-color: var(--card-bg) !important;
}

/* Fix any remaining white backgrounds */
html.dark .bg-white,
html.dark .bg-\[\#fff\],
html.dark .bg-\[\#ffffff\],
body.dark .bg-white,
body.dark .bg-\[\#fff\],
body.dark .bg-\[\#ffffff\] {
  background-color: var(--card-bg) !important;
}

/* Header in dark mode */
html.dark header,
body.dark header {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Main content wrapper */
html.dark main,
body.dark main {
  background-color: var(--page-bg) !important;
}

/* Fix inline style backgrounds - add class to override */
.dark-card-bg {
  background-color: var(--card-bg) !important;
}

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

.dark-text-secondary {
  color: var(--text-secondary) !important;
}