/* ══════════════════════════════════════════════
   GrindKendra — main.css
   ══════════════════════════════════════════════ */

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #252840; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #6366f1; }

/* ── Sidebar nav links ── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.nav-link:hover { background: #1c2033; color: #d1d5db; }
.nav-link.active {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 0 16px rgba(99,102,241,0.3);
}
html:not(.dark) .nav-link          { color: #6b7280; }
html:not(.dark) .nav-link:hover    { background: #f3f4f6; color: #111827; }
html:not(.dark) .nav-link.active   { background: #6366f1; color: #fff; }

/* ── Sidebar footer buttons ── */
.sidebar-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  color: #6b7280;
  transition: background 0.12s, color 0.12s;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.sidebar-btn:hover { background: #1c2033; color: #d1d5db; }
html:not(.dark) .sidebar-btn:hover { background: #f3f4f6; color: #374151; }

/* ── Spinner ── */
.spinner {
  width: 2rem; height: 2rem;
  border: 2.5px solid #252840;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── View fade-in ── */
.view-enter { animation: fadeSlideIn 0.16s ease-out forwards; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Toast ── */
.toast {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  min-width: 200px;
  max-width: 320px;
  pointer-events: all;
  animation: toastIn 0.18s ease-out forwards;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.toast-success { background: #052e16; color: #86efac; border: 1px solid #14532d; }
.toast-error   { background: #2d0909; color: #fca5a5; border: 1px solid #7f1d1d; }
.toast-info    { background: #13114a; color: #a5b4fc; border: 1px solid #1e1b4b; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Difficulty pills ── */
.diff-easy   { color: #4ade80; background: rgba(74,222,128,0.1);  padding: 0.15rem 0.5rem; border-radius: 0.25rem; }
.diff-medium { color: #fbbf24; background: rgba(251,191,36,0.1);  padding: 0.15rem 0.5rem; border-radius: 0.25rem; }
.diff-hard   { color: #f87171; background: rgba(248,113,113,0.1); padding: 0.15rem 0.5rem; border-radius: 0.25rem; }

/* ── Status colors ── */
.status-solved    { color: #4ade80; }
.status-attempted { color: #fbbf24; }
.status-todo      { color: #4b5563; }

/* ── Card ── */
.card {
  background: #141722;
  border: 1px solid #1e2235;
  border-radius: 0.875rem;
  padding: 1.25rem 1.5rem;
}
html:not(.dark) .card { background: #fff; border-color: #e5e7eb; }

/* ── Section header ── */
.section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid #1e2235;
  min-height: 60px;
}
html:not(.dark) .section-header { border-color: #e5e7eb; }
.section-header h1 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #f9fafb;
  letter-spacing: -0.01em;
}
html:not(.dark) .section-header h1 { color: #111827; }

/* ── Light mode global ── */
html:not(.dark) body          { background: #f8fafc; color: #111827; }
html:not(.dark) aside#sidebar { background: #fff; border-color: #e5e7eb; }
html:not(.dark) header        { background: rgba(255,255,255,0.95); border-color: #e5e7eb; }

/* ── Empty / coming-soon state ── */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  gap: 1rem;
  color: #6b7280;
}
.coming-soon .icon-bg {
  width: 60px; height: 60px;
  border-radius: 1rem;
  background: #1c2033;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
}
html:not(.dark) .coming-soon .icon-bg { background: #f3f4f6; }
.coming-soon h2  { font-size: 1rem; font-weight: 700; color: #d1d5db; margin: 0; }
html:not(.dark) .coming-soon h2 { color: #374151; }
.coming-soon p   { font-size: 0.875rem; margin: 0; text-align: center; }

/* ── Sidebar open (mobile) ── */
#sidebar.open { transform: translateX(0); }

/* ── Filter selects ── */
.filter-select {
  padding: 0.35rem 0.6rem;
  background: #1c2033;
  border: 1px solid #2d3148;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  color: #d1d5db;
  outline: none;
  transition: border-color 0.12s;
  cursor: pointer;
  font-family: inherit;
}
.filter-select:focus, .filter-select:hover { border-color: #6366f1; }
html:not(.dark) .filter-select { background: #fff; border-color: #d1d5db; color: #374151; }

/* ── Problem table rows ── */
.problem-row { transition: background 0.08s; }
.problem-row:hover td { background: rgba(99,102,241,0.045); }
html:not(.dark) .problem-row:hover td { background: rgba(99,102,241,0.05); }

/* ── Sticky filter bar ── */
html:not(.dark) .sticky.top-0.z-10 { background: #f8fafc; border-color: #e5e7eb; }

/* ══════════════════════════════════════════════
   Lesson prose
   ══════════════════════════════════════════════ */
.lesson-body h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #e5e7eb;
  margin: 1.75rem 0 0.6rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #1e2235;
}
.lesson-body h3:first-child { margin-top: 0; }
.lesson-body p  { margin: 0 0 0.85rem; line-height: 1.75; color: #9ca3af; }
.lesson-body ul { margin: 0 0 0.85rem 1.5rem; }
.lesson-body ul li { margin-bottom: 0.375rem; line-height: 1.65; color: #9ca3af; }
.lesson-body strong { color: #d1d5db; }
.lesson-body a { color: #818cf8; text-decoration: underline; }

.lesson-body pre {
  background: #0a0c14;
  border: 1px solid #1e2235;
  border-left: 3px solid #6366f1;
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 0 0 1.25rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  line-height: 1.65;
  color: #c7d2fe;
}
.lesson-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  background: #1e2235;
  padding: 0.125em 0.4em;
  border-radius: 0.25rem;
  color: #a5b4fc;
  white-space: nowrap;
}
.lesson-body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  white-space: pre;
}

html:not(.dark) .lesson-body h3    { color: #111827; border-color: #e5e7eb; }
html:not(.dark) .lesson-body p,
html:not(.dark) .lesson-body li    { color: #374151; }
html:not(.dark) .lesson-body strong { color: #111827; }
html:not(.dark) .lesson-body pre   { background: #f1f5f9; border-color: #e2e8f0; border-left-color: #6366f1; color: #1e1b4b; }
html:not(.dark) .lesson-body code  { background: #e0e7ff; color: #3730a3; }

/* ── Backward compat alias ── */
.prose-lesson { /* same as lesson-body — kept for any existing refs */ }

/* ══════════════════════════════════════════════
   Roadmap
   ══════════════════════════════════════════════ */
.roadmap-node { transition: opacity 0.15s; }
.roadmap-node:hover { opacity: 0.85; }
.roadmap-node:hover rect:first-of-type { filter: brightness(1.25); }

/* ══════════════════════════════════════════════
   Plan
   ══════════════════════════════════════════════ */
.plan-target-input {
  -moz-appearance: textfield;
}
.plan-target-input::-webkit-inner-spin-button,
.plan-target-input::-webkit-outer-spin-button { opacity: 1; }

/* ══════════════════════════════════════════════
   Review
   ══════════════════════════════════════════════ */
.review-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════
   Solve view
   ══════════════════════════════════════════════ */
.solve-panel-left  { scrollbar-gutter: stable; }
.solve-panel-right { scrollbar-gutter: stable; }

/* Starter code block */
.starter-pre {
  background: #0a0c14;
  border: 1px solid #1e2235;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #a5b4fc;
  overflow-x: auto;
  white-space: pre;
}