/* Custom layer on top of Tailwind */

:root {
  color-scheme: dark;
}

html.light {
  color-scheme: light;
}

html.light body {
  background-color: #F8FAFC;
  color: #0F172A;
}

/* Light mode overrides for core surfaces */
html.light .bg-bg { background-color: #F8FAFC !important; }
html.light .bg-bg\/85 { background-color: rgba(248, 250, 252, 0.85) !important; }
html.light .bg-panel { background-color: #FFFFFF !important; }
html.light .bg-surface { background-color: #F1F5F9 !important; }
html.light .bg-surface\/60 { background-color: rgba(241, 245, 249, 0.85) !important; }
html.light .bg-surface\/70 { background-color: rgba(241, 245, 249, 0.9) !important; }
html.light .bg-surface\/40 { background-color: rgba(241, 245, 249, 0.6) !important; }
html.light .text-text,
html.light .text-text\/90 { color: #0F172A !important; }
html.light .text-muted { color: #475569 !important; }
html.light .border-border,
html.light .border-border\/60,
html.light .border-border\/70,
html.light .border-border\/80 { border-color: #E2E8F0 !important; }
html.light .divide-border > :not([hidden]) ~ :not([hidden]),
html.light .divide-border\/70 > :not([hidden]) ~ :not([hidden]) {
  border-color: #E2E8F0 !important;
}
html.light pre.font-mono { color: #0F172A; }

/* Focus ring consistency */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #22C55E;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* CodeMirror sizing & theme tweaks */
.CodeMirror {
  height: auto;
  min-height: 420px;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13px;
  line-height: 1.6;
  background: transparent !important;
}
.CodeMirror-gutters {
  background: transparent !important;
  border-right: 1px solid #1f2a44 !important;
}
html.light .CodeMirror-gutters {
  border-right-color: #E2E8F0 !important;
}
.cm-s-material-darker.CodeMirror {
  background-color: #0F172A !important;
}
html.light .cm-s-material-darker.CodeMirror {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}
html.light .cm-s-material-darker .CodeMirror-linenumber {
  color: #94A3B8 !important;
}
html.light .cm-s-material-darker .cm-keyword { color: #8B5CF6 !important; }
html.light .cm-s-material-darker .cm-string { color: #16A34A !important; }
html.light .cm-s-material-darker .cm-number { color: #D97706 !important; }
html.light .cm-s-material-darker .cm-comment { color: #94A3B8 !important; font-style: italic; }
html.light .cm-s-material-darker .cm-def,
html.light .cm-s-material-darker .cm-variable,
html.light .cm-s-material-darker .cm-variable-2 { color: #0F172A !important; }
html.light .cm-s-material-darker .cm-builtin { color: #0891B2 !important; }
html.light .cm-s-material-darker .cm-operator { color: #0F172A !important; }

/* Difficulty badge helpers */
.badge-easy { background-color: rgba(34, 197, 94, 0.12); color: #22C55E; border: 1px solid rgba(34, 197, 94, 0.25); }
.badge-medium { background-color: rgba(245, 158, 11, 0.12); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.25); }
.badge-hard { background-color: rgba(239, 68, 68, 0.12); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.25); }

/* Category chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border: 1px solid #1f2a44;
  background-color: rgba(30, 41, 59, 0.6);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: #CBD5E1;
  cursor: pointer;
  transition: all 150ms ease;
}
.chip:hover {
  color: #F8FAFC;
  border-color: rgba(34, 197, 94, 0.4);
}
.chip.active {
  background-color: rgba(34, 197, 94, 0.15);
  color: #22C55E;
  border-color: rgba(34, 197, 94, 0.4);
}
html.light .chip {
  background-color: #F1F5F9;
  border-color: #E2E8F0;
  color: #475569;
}
html.light .chip.active {
  background-color: rgba(34, 197, 94, 0.12);
  color: #15803D;
  border-color: rgba(34, 197, 94, 0.45);
}

/* Row status dots */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  border: 1.5px solid currentColor;
}
.status-dot.solved {
  background-color: #22C55E;
  border-color: #22C55E;
}
.status-dot.attempted {
  background-color: transparent;
  border-color: #F59E0B;
  color: #F59E0B;
}
.status-dot.todo {
  background-color: transparent;
  border-color: #475569;
  color: #475569;
}

/* Problem row hover */
tbody tr.problem-row {
  cursor: pointer;
  transition: background-color 150ms ease;
}
tbody tr.problem-row:hover {
  background-color: rgba(30, 41, 59, 0.5);
}
html.light tbody tr.problem-row:hover {
  background-color: #F8FAFC;
}

/* Prose-like paragraph spacing for problem description */
.prose-custom p { margin: 0 0 0.75rem 0; }
.prose-custom ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 0.75rem 0; }
.prose-custom ol { list-style: decimal; padding-left: 1.25rem; margin: 0 0 0.75rem 0; }
.prose-custom li { margin: 0.125rem 0; }
.prose-custom code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background-color: rgba(30, 41, 59, 0.7);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
}
html.light .prose-custom code {
  background-color: #F1F5F9;
  color: #0F172A;
}

/* Tab underline transition */
.tab-btn {
  transition: color 150ms ease, border-color 150ms ease;
}

/* Scrollbar polish (webkit only) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #1f2a44;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}
html.light ::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}
html.light ::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}