/**
 * App theme — light (default) / dark.
 * Dark = existing slate UI. Light = off-white surfaces, same orange accents.
 * Preference: localStorage key "ifp-theme" = "light" | "dark"
 */

/* ---------- Defaults / dark (no overrides; current design) ---------- */
html.theme-dark {
  color-scheme: dark;
}

/* ---------- Light theme ---------- */
html.theme-light {
  color-scheme: light;
}

/* Page chrome */
html.theme-light body {
  background-color: #f1f3f5 !important; /* off-white grey */
  color: #0f172a !important;
}

html.theme-light .app-shell-header,
html.theme-light .app-shell-footer,
html.theme-light .app-floating-footer {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: #e2e8f0 !important;
}

/* Hard-coded navy used on header / floating footer */
html.theme-light .bg-\[\#0f172a\],
html.theme-light .bg-\[\#0f172a\]\/95 {
  background-color: rgba(255, 255, 255, 0.96) !important;
}

/* Footer action buttons: readable on light bar */
html.theme-light .defaultButton {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  background: #ffffff;
}
html.theme-light .defaultButton span {
  color: #0f172a;
}
html.theme-light .defaultButton:hover {
  background: #fff7ed;
}
html.theme-light .defaultButton:hover span {
  color: #000000;
}

/* Surfaces: dark slate → light cards / page */
html.theme-light .bg-slate-950,
html.theme-light .bg-slate-900,
html.theme-light .bg-slate-950\/40,
html.theme-light .bg-slate-950\/50,
html.theme-light .bg-slate-900\/50,
html.theme-light .bg-slate-900\/60,
html.theme-light .bg-slate-950\/60 {
  background-color: #ffffff !important;
}

html.theme-light .bg-slate-800,
html.theme-light .bg-slate-800\/40,
html.theme-light .bg-slate-800\/50,
html.theme-light .bg-slate-800\/60 {
  background-color: #f8fafc !important;
}

html.theme-light .bg-slate-700,
html.theme-light .bg-slate-700\/50,
html.theme-light .bg-slate-700\/60 {
  background-color: #e2e8f0 !important;
}

html.theme-light .hover\:bg-slate-800:hover,
html.theme-light .hover\:bg-slate-800\/40:hover,
html.theme-light .hover\:bg-slate-800\/60:hover {
  background-color: #fff7ed !important; /* orange-50 */
}

html.theme-light .hover\:bg-slate-900:hover,
html.theme-light .hover\:bg-slate-950:hover {
  background-color: #ffedd5 !important; /* orange-100 */
}

html.theme-light .hover\:bg-slate-600:hover {
  background-color: #fed7aa !important; /* orange-200 */
}

/* Card / tile hover highlights */
html.theme-light .hover\:border-orange-500:hover,
html.theme-light .hover\:border-orange-500\/50:hover,
html.theme-light .hover\:border-orange-500\/40:hover,
html.theme-light .group:hover {
  background-color: #fff7ed !important;
}

/* Selected / active highlight */
html.theme-light .bg-orange-600\/10,
html.theme-light .bg-orange-600\/15,
html.theme-light .bg-orange-500\/10 {
  background-color: #ffedd5 !important;
}

/* Borders */
html.theme-light .border-slate-600,
html.theme-light .border-slate-700,
html.theme-light .border-slate-800 {
  border-color: #e2e8f0 !important;
}

html.theme-light .border-slate-500 {
  border-color: #cbd5e1 !important;
}

html.theme-light .divide-slate-700 > :not([hidden]) ~ :not([hidden]),
html.theme-light .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

/* Text */
html.theme-light .text-white {
  color: #0f172a !important;
}

html.theme-light .text-slate-100,
html.theme-light .text-slate-200 {
  color: #1e293b !important;
}

html.theme-light .text-slate-300 {
  color: #334155 !important;
}

html.theme-light .text-slate-400 {
  color: #64748b !important;
}

html.theme-light .text-slate-500 {
  color: #64748b !important;
}

html.theme-light .text-slate-600 {
  color: #475569 !important;
}

html.theme-light .placeholder-slate-500::placeholder,
html.theme-light .placeholder-slate-400::placeholder {
  color: #94a3b8 !important;
}

/* Primary orange controls keep white text/icons */
html.theme-light .bg-orange-600,
html.theme-light .bg-orange-500,
html.theme-light .bg-orange-700,
html.theme-light .hover\:bg-orange-500:hover,
html.theme-light .hover\:bg-orange-600:hover,
html.theme-light .hover\:bg-orange-700:hover {
  color: #ffffff !important;
}
html.theme-light .bg-orange-600 *,
html.theme-light .bg-orange-500 *,
html.theme-light .bg-orange-700 * {
  color: #ffffff !important;
}
/* Soft orange tints (tiles) keep their own text colors */
html.theme-light .bg-orange-600\/10 *,
html.theme-light .bg-orange-600\/15 *,
html.theme-light .bg-orange-500\/10 * {
  color: inherit !important;
}

/* Orange text accents stay orange */
html.theme-light .text-orange-400,
html.theme-light .text-orange-300,
html.theme-light .group-hover\:text-orange-400:hover,
html.theme-light .group:hover .group-hover\:text-orange-400 {
  color: #ea580c !important;
}

html.theme-light .hover\:text-orange-400:hover {
  color: #ea580c !important;
}

html.theme-light .hover\:border-orange-500:hover,
html.theme-light .border-orange-500 {
  border-color: #f97316 !important;
}

/* Status / semantic colors: slightly softer on light */
html.theme-light .bg-emerald-500\/10,
html.theme-light .bg-emerald-900\/40,
html.theme-light .bg-emerald-900\/60,
html.theme-light .bg-emerald-900\/80 {
  background-color: #ecfdf5 !important;
}

html.theme-light .text-emerald-200,
html.theme-light .text-emerald-300,
html.theme-light .text-emerald-400 {
  color: #047857 !important;
}

html.theme-light .border-emerald-500\/40,
html.theme-light .border-emerald-600\/50,
html.theme-light .border-emerald-700,
html.theme-light .border-emerald-700\/50 {
  border-color: #a7f3d0 !important;
}

html.theme-light .bg-amber-900\/40,
html.theme-light .bg-amber-900\/60,
html.theme-light .bg-amber-500\/10 {
  background-color: #fffbeb !important;
}

html.theme-light .text-amber-200,
html.theme-light .text-amber-300,
html.theme-light .text-amber-400 {
  color: #b45309 !important;
}

html.theme-light .border-amber-500\/40,
html.theme-light .border-amber-700,
html.theme-light .border-amber-700\/50 {
  border-color: #fde68a !important;
}

html.theme-light .bg-sky-900\/60 {
  background-color: #f0f9ff !important;
}

html.theme-light .text-sky-300 {
  color: #0369a1 !important;
}

html.theme-light .bg-orange-900\/40,
html.theme-light .bg-orange-900\/60 {
  background-color: #fff7ed !important;
}

html.theme-light .text-orange-300 {
  color: #c2410c !important;
}

html.theme-light .bg-red-900\/30,
html.theme-light .bg-red-900\/40,
html.theme-light .hover\:bg-red-900\/50:hover {
  background-color: #fef2f2 !important;
}

html.theme-light .text-red-200,
html.theme-light .text-red-300,
html.theme-light .text-red-400,
html.theme-light .hover\:text-red-400:hover {
  color: #b91c1c !important;
}

html.theme-light .border-red-500\/50,
html.theme-light .border-red-700 {
  border-color: #fecaca !important;
}

/* Inputs / selects already using slate-800 — covered above */
html.theme-light input,
html.theme-light select,
html.theme-light textarea {
  color: #0f172a;
}

html.theme-light input:focus,
html.theme-light select:focus,
html.theme-light textarea:focus {
  outline-color: #f97316;
}

/* Modals / overlays — keep dim backdrop */
html.theme-light .bg-black\/60,
html.theme-light .bg-black\/70 {
  background-color: rgba(15, 23, 42, 0.45) !important;
}

/* Floating footer / cards shadows a bit softer on light */
html.theme-light .shadow-2xl {
  --tw-shadow-color: rgb(15 23 42 / 0.12);
}

/* Impersonation bar stays high-contrast amber */
html.theme-light .bg-amber-500 {
  background-color: #f59e0b !important;
  color: #0f172a !important;
}

/* Theme toggle row */
html.theme-light .theme-toggle-btn {
  color: #334155;
}
html.theme-dark .theme-toggle-btn {
  color: #e2e8f0;
}

/* Camera preview labels sit on a dark video — never invert in light theme */
.camera-overlay-label,
html.theme-light .camera-overlay-label,
html.theme-dark .camera-overlay-label {
  background: rgba(0, 0, 0, 0.72) !important;
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Table / roster row hover — light orange, not grey/navy */
html.theme-light .roster-row:hover,
html.theme-light tr:hover,
html.theme-light tbody tr:hover,
html.theme-light .hover\:bg-slate-900\/80:hover,
html.theme-light .hover\:bg-slate-900\/60:hover,
html.theme-light .hover\:bg-slate-900\/50:hover,
html.theme-light .hover\:bg-slate-950\/50:hover {
  background-color: #fff7ed !important;
}
html.theme-dark .roster-row:hover {
  background-color: rgba(234, 88, 12, 0.12) !important;
}

/* Team list login — black by default, orange on hover */
.team-login { color: #e2e8f0; }
.team-login:hover { color: #fb923c; }
.team-login:hover .team-copy-hint { color: #fb923c; }

html.theme-light .team-login { color: #0f172a !important; }
html.theme-light .team-login:hover { color: #ea580c !important; }