/* Theme CSS for light/dark mode support */

/* Light mode overrides */
html:not(.dark) {
  /* Page backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  
  /* Text colors */
  --text-primary: #020617;
  --text-secondary: #334155;
  --text-tertiary: #475569;
  
  /* Border colors */
  --border-primary: #cbd5e1;
  --border-secondary: #e2e8f0;
}

html:not(.dark) body {
  @apply bg-white text-slate-900;
}

/* Card backgrounds in light mode */
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-950 {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) .bg-slate-800 {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) .bg-slate-950\/50,
html:not(.dark) .bg-slate-950\/80 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
  backdrop-filter: blur(8px);
}

html:not(.dark) .bg-white\/5,
html:not(.dark) .bg-white\/10 {
  background-color: rgba(15, 23, 42, 0.05) !important;
  border-color: #cbd5e1 !important;
}

/* Text colors in light mode - Maximum contrast */
html:not(.dark) .text-white {
  color: #020617 !important;
}

html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-300 {
  color: #1e293b !important;
}

html:not(.dark) .text-slate-400 {
  color: #334155 !important;
}

html:not(.dark) .text-slate-500 {
  color: #475569 !important;
}

html:not(.dark) .text-slate-600 {
  color: #334155 !important;
}

html:not(.dark) .text-slate-700 {
  color: #1e293b !important;
}

/* Link hover */
html:not(.dark) .hover\:text-white:hover {
  color: #020617 !important;
}

/* Border colors */
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-800 {
  @apply border-slate-300;
}

html:not(.dark) .border-white\/10 {
  @apply border-slate-300;
}

/* Form inputs in light mode */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  @apply bg-white border-slate-300 text-slate-900 placeholder-slate-500;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  @apply bg-white border-blue-600 ring-2 ring-blue-100;
}

/* Hover states */
html:not(.dark) .hover\:bg-slate-800:hover {
  @apply bg-slate-100;
}

html:not(.dark) .hover\:bg-slate-700:hover {
  @apply bg-slate-200;
}

html:not(.dark) .hover\:text-white:hover {
  @apply text-slate-950;
}

/* Better placeholder contrast */
html:not(.dark) .placeholder-slate-500::placeholder {
  @apply text-slate-500;
}

html:not(.dark) .placeholder-slate-600::placeholder {
  @apply text-slate-600;
}

/* DataTables light theme - Higher contrast */
html:not(.dark) table.dataTable thead th,
html:not(.dark) table.dataTable thead td {
  border-bottom: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  font-weight: 600 !important;
}

html:not(.dark) table.dataTable tbody tr {
  background: transparent !important;
  color: #020617;
}

html:not(.dark) table.dataTable tbody tr:hover {
  background: #f1f5f9 !important;
}

html:not(.dark) table.dataTable tbody td {
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #334155 !important;
  font-weight: 500 !important;
}

html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #e2e8f0 !important;
  color: #020617 !important;
}

html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2563eb !important;
  color: #fff !important;
}

html:not(.dark) .dataTables_wrapper .dataTables_filter input,
html:not(.dark) .dataTables_wrapper .dataTables_length select {
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  color: #020617 !important;
}

html:not(.dark) .dataTables_wrapper .dataTables_length,
html:not(.dark) .dataTables_wrapper .dataTables_filter,
html:not(.dark) .dataTables_wrapper .dataTables_info {
  color: #334155 !important;
}