/* =========================================================
   GarminForge — custom styles (dark theme overlay on Bootstrap 5)
   ========================================================= */

/* ---------- Brand colour (Garmin blue) ---------- */
:root {
  --garmin-blue:   #0066CC;
  --garmin-hover:  #0055aa;
  --garmin-active: #004499;
  --card-bg:       #1a1d20;
  --card-border:   #2d3139;
}

/* ---------- Global ---------- */
body {
  background-color: #111316;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* ---------- Garmin button ---------- */
.btn-garmin {
  background-color: var(--garmin-blue);
  border-color: var(--garmin-blue);
  color: #fff;
  transition: background-color .15s, border-color .15s, transform .1s;
}
.btn-garmin:hover  { background-color: var(--garmin-hover);  border-color: var(--garmin-hover);  color: #fff; }
.btn-garmin:active { background-color: var(--garmin-active); border-color: var(--garmin-active); color: #fff; transform: scale(.98); }
.btn-garmin:disabled { opacity: .65; }

.bg-garmin { background-color: var(--garmin-blue) !important; }

/* ---------- Navbar ---------- */
.navbar-brand { font-size: 1.25rem; letter-spacing: -.3px; }
.brand-icon   { font-size: 1.4rem; line-height: 1; }

/* ---------- Cards ---------- */
.card {
  background-color: var(--card-bg);
  border-color: var(--card-border) !important;
}
.card-header {
  background-color: rgba(255,255,255,.03);
  border-color: var(--card-border) !important;
}

/* ---------- Hero ---------- */
.hero-icon { font-size: 4rem; line-height: 1; }

/* ---------- Goal cards (radio-button labels) ---------- */
.goal-card {
  border-color: var(--card-border) !important;
  background-color: rgba(255,255,255,.03);
  transition: border-color .15s, background-color .15s;
  min-height: 4.5rem;
}
.btn-check:checked + .goal-card {
  border-color: var(--garmin-blue) !important;
  background-color: rgba(0,102,204,.15) !important;
  color: #fff;
}
.goal-card:hover { border-color: #555 !important; }

/* ---------- Tom Select — dark theme overrides ---------- */
.ts-wrapper .ts-control {
  background-color: #212529;
  border-color: var(--card-border);
  color: #dee2e6;
  min-height: 2.5rem;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--garmin-blue);
  box-shadow: 0 0 0 .2rem rgba(0,102,204,.25);
}
.ts-wrapper .ts-control input {
  color: #dee2e6;
}
.ts-wrapper .ts-control input::placeholder {
  color: #6c757d;
}
.ts-dropdown {
  background-color: #1e2227;
  border-color: var(--card-border);
  color: #dee2e6;
}
.ts-dropdown .ts-dropdown-content .option {
  color: #dee2e6 !important;
}
.ts-dropdown .ts-dropdown-content .option:hover,
.ts-dropdown .ts-dropdown-content .option.active {
  background-color: rgba(0,102,204,.25);
  color: #fff;
}
.ts-dropdown .ts-dropdown-content .option.selected {
  background-color: rgba(0,102,204,.15);
}
.ts-wrapper .ts-control .item {
  background-color: rgba(0,102,204,.2);
  border-color: rgba(0,102,204,.4);
  color: #cce0ff;
  border-radius: .25rem;
}
.ts-wrapper .ts-control .item .remove {
  color: #cce0ff;
  border-left-color: rgba(0,102,204,.4);
}
.ts-wrapper .ts-control .item .remove:hover {
  background-color: rgba(220,53,69,.3);
  color: #fff;
}
/* clear button */
.ts-wrapper .clear-button {
  color: #6c757d;
}
.ts-wrapper .clear-button:hover {
  color: #dee2e6;
}

/* ---------- Stat cards ---------- */
.stat-card {
  background-color: rgba(255,255,255,.04);
  border: 1px solid var(--card-border);
}
.stat-value { font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1; }
.stat-label { font-size: .7rem;  color: #6c757d;  margin-top: .25rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Exercise list ---------- */
.step-number {
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--garmin-blue);
  color: #fff;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .15rem;
}

.step-badge {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .15rem .5rem;
}

.exercise-item { transition: background-color .1s; }
.exercise-item:hover { background-color: rgba(255,255,255,.02); border-radius: .375rem; }

/* ---------- Font monospace spacing ---------- */
.letter-spacing-lg { letter-spacing: .4em; }

/* ---------- Form controls (dark override) ---------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--garmin-blue);
  box-shadow: 0 0 0 .2rem rgba(0,102,204,.25);
}

/* Range slider */
.form-range::-webkit-slider-thumb { background-color: var(--garmin-blue); }
.form-range::-moz-range-thumb     { background-color: var(--garmin-blue); }

/* ---------- Alert tweaks ---------- */
.alert-warning {
  background-color: rgba(255,193,7,.1);
  border-color: rgba(255,193,7,.3);
  color: #ffc107;
}
.alert-danger {
  background-color: rgba(220,53,69,.1);
  border-color: rgba(220,53,69,.3);
  color: #f88;
}
.alert-success {
  background-color: rgba(25,135,84,.1);
  border-color: rgba(25,135,84,.3);
  color: #75c997;
}

/* ---------- Code / pre ---------- */
pre { border: 1px solid var(--card-border); }
code { color: #5bc08a; }

/* ---------- Scrollbar (webkit) ---------- */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: #1a1d20; }
::-webkit-scrollbar-thumb  { background: #444; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #666; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 576px) {
  .stat-value { font-size: 1.2rem; }
  .hero-icon  { font-size: 3rem; }
}