/* Season color theming with CSS variables */
:root {
  --color-primary: #f59e0b;
  --color-primary-light: #fef3c7;
  --color-primary-lighter: #fffbeb;
  --color-primary-dark: #d97706;
  --color-primary-text: #1e293b;
  
  --color-secondary: #1e293b;
  --color-secondary-light: #e2e8f0;
  --color-secondary-lighter: #f1f5f9;
  --color-secondary-dark: #0f172a;
  --color-secondary-text: #ffffff;

  --color-body-bg: #f8fafc;
  --color-body-text: #1e293b;
  --color-header-bg: #f59e0b;
  --color-header-text: #1e293b;
}

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

/* Header styling */
header {
  background-color: var(--color-header-bg) !important;
  color: var(--color-header-text) !important;
}

/* Admin sidebar */
#admin-sidebar {
  background-color: var(--color-header-bg) !important;
  color: var(--color-header-text) !important;
}
#admin-sidebar a {
  color: var(--color-header-text) !important;
}
#admin-sidebar a:hover {
  background-color: rgba(255,255,255,0.1) !important;
}
#admin-sidebar a.bg-amber-100,
#admin-sidebar a[class*="bg-amber"] {
  background-color: rgba(255,255,255,0.2) !important;
}

/* Main content area - keep cards white/light for readability */
main .bg-white,
.bg-white,
.card,
.modal-content {
  background-color: #ffffff !important;
  color: #1e293b !important;
}

/* Ensure text in content areas is readable */
main h1, main h2, main h3, main p, main span, main td, main th {
  color: inherit;
}

/* Links should be visible on any background */
a:not(.btn):not([class*="bg-"]) {
  color: var(--color-primary);
}
a:not(.btn):not([class*="bg-"]):hover {
  color: var(--color-primary-dark);
}

/* Apply theme colors to common elements */
.btn-primary,
button.bg-amber-500,
.bg-amber-500 {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-text) !important;
}
.btn-primary:hover,
button.bg-amber-500:hover,
button.hover\:bg-amber-600:hover {
  background-color: var(--color-primary-dark) !important;
}

.btn-secondary,
button.bg-slate-800,
.bg-slate-800 {
  background-color: var(--color-secondary) !important;
  color: var(--color-secondary-text) !important;
}
.btn-secondary:hover,
button.bg-slate-800:hover {
  background-color: var(--color-secondary-dark) !important;
}

/* Links */
a.text-amber-600,
.text-amber-600 {
  color: var(--color-primary) !important;
}
a.text-amber-600:hover,
a.hover\:text-amber-700:hover {
  color: var(--color-primary-dark) !important;
}

/* Highlights and selections */
.bg-amber-100,
.hover\:bg-amber-100:hover {
  background-color: var(--color-primary-light) !important;
}
.bg-amber-50 {
  background-color: var(--color-primary-lighter) !important;
}
.border-amber-500,
.border-amber-300 {
  border-color: var(--color-primary) !important;
}
.ring-amber-300 {
  --tw-ring-color: var(--color-primary-light) !important;
}
.text-amber-700,
.text-amber-800,
.text-amber-900 {
  color: var(--color-primary-dark) !important;
}
.border-amber-200 {
  border-color: var(--color-primary-light) !important;
}

/* Focus states */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary) !important;
  outline-color: var(--color-primary) !important;
}

/* Sidebar active state */
#admin-sidebar a.bg-amber-100 {
  background-color: var(--color-primary-light) !important;
}
#admin-sidebar a.text-amber-700 {
  color: var(--color-primary-dark) !important;
}

/* Tab active state */
.setup-tab[aria-selected="true"],
button[aria-selected="true"].text-amber-600 {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Team cards highlight */
.team-card.can-add {
  box-shadow: 0 0 0 3px var(--color-primary) !important;
}

/* Pool row selected */
.pool-row.selected {
  background-color: var(--color-primary-light) !important;
}

/* Soft dark theme – not too dark. Apply class "theme-dark" to body. */
/* Override Tailwind bg utilities that load after this file */
html:has(body.theme-dark) {
  background-color: #334155;
}
body.theme-dark,
body.theme-dark.bg-slate-50,
.theme-dark.min-h-screen {
  background-color: #334155 !important; /* slate-700 */
  color: #f1f5f9;
}
.theme-dark header,
.theme-dark header.bg-white {
  background-color: #1e293b !important;
  border-color: #475569;
}
.theme-dark main {
  background-color: transparent;
}
.theme-dark main h1,
.theme-dark .text-slate-900 {
  color: #f8fafc;
}
.theme-dark .text-slate-800 {
  color: #f1f5f9;
}
.theme-dark .text-slate-700 {
  color: #e2e8f0;
}
.theme-dark .text-slate-600 {
  color: #cbd5e1;
}
.theme-dark .text-slate-500 {
  color: #94a3b8;
}
.theme-dark .text-slate-400 {
  color: #94a3b8;
}
.theme-dark .bg-white {
  background-color: #475569 !important;
  border-color: #64748b;
}
.theme-dark .bg-slate-50,
.theme-dark .bg-slate-50\/50 {
  background-color: #475569 !important;
}
.theme-dark .border-slate-200,
.theme-dark .border-slate-300 {
  border-color: #64748b;
}
.theme-dark .bg-slate-200 {
  background-color: #64748b;
}
.theme-dark .hover\:bg-slate-300:hover,
.theme-dark .hover\:bg-slate-100:hover {
  background-color: #64748b;
}
.theme-dark .bg-slate-100 {
  background-color: #475569;
}
.theme-dark input,
.theme-dark select,
.theme-dark textarea {
  background-color: #475569;
  border-color: #64748b;
  color: #f1f5f9;
}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: #94a3b8;
}
.theme-dark footer {
  border-color: #475569;
  color: #94a3b8;
}
.theme-dark .border-amber-300 {
  border-color: #fbbf24;
}
.theme-dark a.text-amber-600 {
  color: #fbbf24;
}
.theme-dark a:hover.text-amber-600,
.theme-dark .hover\:text-amber-600:hover {
  color: #fcd34d;
}
.theme-dark thead th,
.theme-dark .bg-slate-100 {
  background-color: #475569 !important;
  color: #e2e8f0;
  border-color: #64748b;
}
.theme-dark tbody td,
.theme-dark .border-slate-200.border-t {
  border-color: #64748b;
}
.theme-dark .text-red-600 {
  color: #f87171;
}
.theme-dark .text-green-600 {
  color: #4ade80;
}
.theme-dark button.rounded-full.bg-slate-200 {
  background-color: #64748b;
  color: #e2e8f0;
}
.theme-dark button.rounded-full:hover {
  background-color: #475569;
}
.theme-dark .shadow-sm,
.theme-dark .shadow-lg,
.theme-dark .shadow-xl {
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.theme-dark #setup-edit-modal-dialog {
  background-color: #475569;
  border: 1px solid #64748b;
}
.theme-dark #setup-edit-modal-overlay {
  background-color: rgba(0,0,0,0.6);
}
.theme-dark select option {
  background: #475569;
  color: #f1f5f9;
}