/* ── TypeGym custom styles ──────────────────────────────────────────────── */

/* CSS custom property defaults (overridden by theme vars injected server-side) */
:root {
  --color-bg:      #f8f9fa;
  --color-surface: #ffffff;
  --color-text:    #212529;
  --color-muted:   #6c757d;
  --color-primary: #0d6efd;
  --color-accent:  #6610f2;
  --color-correct: #198754;
  --color-error:   #dc3545;
  --color-cursor:  #0d6efd;
  --color-streak:  #fd7e14;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
  background-color: var(--color-surface) !important;
  border-color: rgba(128,128,128,.15) !important;
}
.navbar-brand, .nav-link { color: var(--color-text) !important; }
.nav-link.active, .nav-link:hover { color: var(--color-primary) !important; }

/* ── Utility classes ────────────────────────────────────────────────────── */
.bg-surface  { background-color: var(--color-surface) !important; }
.bg-accent   { background-color: var(--color-accent) !important; }
.bg-streak   { background-color: var(--color-streak) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-accent  { color: var(--color-accent) !important; }
.text-correct { color: var(--color-correct) !important; }
.text-error   { color: var(--color-error) !important; }
.font-mono    { font-family: 'JetBrains Mono', monospace !important; }
.border-subtle { border-color: rgba(128,128,128,.2) !important; }
.btn-accent   { background-color: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-accent:hover { filter: brightness(1.15); color: #fff; }
.btn-outline-accent { color: var(--color-accent); border-color: var(--color-accent); }
.btn-outline-accent:hover { background-color: var(--color-accent); color: #fff; }
.hover-surface:hover { background-color: var(--color-bg); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background-color: var(--color-surface);
  border-color: rgba(128,128,128,.15);
  border-radius: 12px;
}

/* ── Keyboard diagram (stats page) ─────────────────────────────────────── */
.keyboard-diagram { display: flex; flex-direction: column; gap: 4px; }
.keyboard-row     { display: flex; gap: 4px; }
.key-cap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid rgba(128,128,128,.25);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: background-color .2s, color .2s;
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}
.key-cap.key-wide  { width: 56px; }
.key-cap.key-wider { width: 72px; }
.key-cap-good  { background-color: var(--color-correct); color: #fff; border-color: transparent; }
.key-cap-bad   { background-color: var(--color-error);   color: #fff; border-color: transparent; }
.key-cap-mid   { background-color: #fd7e14;              color: #fff; border-color: transparent; }
.key-cap-none  { opacity: .35; }

/* ── Heatmap cells ──────────────────────────────────────────────────────── */
.heatmap-cell {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  border-radius: 4px;
  background-color: var(--color-surface);
  border: 1px solid rgba(128,128,128,.1);
  cursor: default;
}

/* ── Charts ─────────────────────────────────────────────────────────────── */
.chart-container { position: relative; height: 220px; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge-card {
  display: flex; flex-direction: column; align-items: center;
  padding: .75rem;
  border-radius: 12px;
  background-color: var(--color-surface);
  border: 1px solid rgba(128,128,128,.15);
  text-align: center;
  transition: transform .15s, box-shadow .15s;
  min-width: 90px;
}
.badge-card.earned {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(102,16,242,.15);
}
.badge-card.locked { opacity: .4; filter: grayscale(.8); }
.badge-icon { font-size: 2rem; line-height: 1; margin-bottom: .25rem; }
.badge-name { font-size: .7rem; font-weight: 600; }

/* ── Theme cards ────────────────────────────────────────────────────────── */
.theme-card {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .15s;
}
.theme-card.active-theme  { border-color: var(--color-primary); }
.theme-card.locked-theme  { opacity: .5; cursor: default; }
.theme-preview {
  height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  font-weight: 700;
}

/* ── Drill mode selector ─────────────────────────────────────────────────── */
.finger-selector .finger-btn {
  min-width: 90px;
  transition: all .15s;
}
.finger-btn.selected {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ── Scrollbar styling ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 3px; }

/* ── [x-cloak] hide until Alpine initialises ────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 576px) {
  #text-display { font-size: 1.05rem; padding: 1rem; }
  .key-cap { width: 28px; height: 28px; font-size: .65rem; }
  .key-cap.key-wide  { width: 40px; }
  .key-cap.key-wider { width: 52px; }
}