/* ------------------------------------------------------------------ *
 * Lift Log — mobile-first styles.
 * Dark theme, big tap targets, fixed bottom tab nav.
 * ------------------------------------------------------------------ */

:root {
  --bg: #0f1115;
  --surface: #181b22;
  --surface-2: #20242e;
  --border: #2a2f3a;
  --text: #e7eaf0;
  --muted: #9aa3b2;
  --accent: #4f8cff;
  --accent-press: #3a6fd1;
  --danger: #ff5c5c;
  --good: #43c980;
  --radius: 12px;
  --nav-h: 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Prevent double-tap-to-zoom (e.g. tapping around the calendar). */
  touch-action: manipulation;
}

body {
  /* room for the fixed bottom nav + iOS safe area */
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

#app { max-width: 640px; margin: 0 auto; }

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  color: var(--muted);
}

/* ---------- Generic elements ---------- */

h1, h2, h3 { margin: 0 0 0.5rem; font-weight: 650; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
p.muted { color: var(--muted); }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  color: var(--text);
  min-height: 48px;
}
button:active { transform: scale(0.98); }

button.primary { background: var(--accent); color: #fff; font-weight: 600; }
button.primary:active { background: var(--accent-press); }
button.ghost { background: transparent; border: 1px solid var(--border); }
button.danger { background: transparent; color: var(--danger); }
button:disabled { opacity: 0.5; cursor: default; }

input, select {
  font: inherit;
  width: 100%;
  padding: 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  min-height: 48px;
}
input:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; }

label { display: block; font-size: 0.85rem; color: var(--muted); margin: 0 0 0.35rem; }

.field { margin-bottom: 0.9rem; }
.row { display: flex; gap: 0.6rem; }
.row > * { flex: 1; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.9rem;
}

.error { color: var(--danger); font-size: 0.9rem; margin: 0.4rem 0; min-height: 1.1em; }
.success { color: var(--good); font-size: 0.9rem; margin: 0.4rem 0; }

/* ---------- Layout ---------- */

main { padding: 1rem 1rem 0; }

header.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* include the iOS top safe-area inset so the title clears the status bar */
  padding: calc(env(safe-area-inset-top) + 1rem) 1rem 1rem;
}
header.app-header .sub { color: var(--muted); font-size: 0.85rem; }

/* ---------- Auth screen ---------- */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
}
.auth-wrap .brand { text-align: center; margin-bottom: 1.5rem; }
.auth-wrap .brand .logo { font-size: 2.5rem; }
.auth-toggle { text-align: center; margin-top: 1rem; color: var(--muted); }
.auth-toggle button { background: none; color: var(--accent); padding: 0.25rem; min-height: auto; }

/* ---------- Sets list ---------- */

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
.set-row:last-child { border-bottom: none; }
.set-row .set-meta { font-variant-numeric: tabular-nums; }
.set-row .set-meta .big { font-size: 1.05rem; font-weight: 600; }
.set-row .set-idx { color: var(--muted); width: 1.5rem; }
.set-row button.danger { padding: 0.4rem 0.6rem; min-height: auto; }

/* Completion state: planned sets are red until checked off, done sets green. */
.set-row.not-done { border-left: 3px solid var(--danger); padding-left: 0.55rem; }
.set-row.done { border-left: 3px solid var(--good); padding-left: 0.55rem; }
.set-row.done .set-meta { opacity: 0.6; }

/* The done/not-done control reads as a real, pressable button (outlined like the
   pencil when planned; filled green when complete for clear, satisfying feedback). */
.set-row .set-toggle {
  min-height: auto;
  min-width: 46px;
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.set-row.not-done .set-toggle {
  color: var(--danger);
  border-color: var(--danger);
}
.set-row.done .set-toggle {
  color: #fff;
  border-color: var(--good);
  background: var(--good);
}

/* Inline editor for an already-logged set. */
.set-row.set-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-start;
}
.set-row.set-edit .set-exercise { flex: 1 1 100%; }
.set-row.set-edit .set-weight { flex: 1.3; min-width: 0; }
.set-row.set-edit .set-reps { flex: 1; min-width: 0; }
.set-row.set-edit .times { flex: 0 0 auto; color: var(--muted); }
.set-row.set-edit button { flex: 0 0 auto; padding: 0.4rem 0.7rem; min-height: auto; }

/* ---------- Week navigation (frequency chart) ---------- */

.week-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.35rem;
}
.week-nav input[type="date"] { flex: 1; min-height: 44px; }
.week-nav button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  font-size: 1.1rem;
}
.week-range {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* ---------- Calendar date picker ---------- */

.calendar { padding: 0.75rem; }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.cal-head .cal-title { font-weight: 600; }
.cal-head button { min-height: auto; padding: 0.3rem 0.85rem; font-size: 1.3rem; flex: 0 0 auto; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.cal-dow { color: var(--muted); font-size: 0.7rem; padding: 0.25rem 0; }
.cal-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}
.cal-day.empty { cursor: default; }
.cal-day.today { border: 1px solid var(--accent); }
.cal-day.selected { background: var(--accent); color: #fff; }
.cal-day.disabled { color: var(--muted); opacity: 0.4; cursor: default; }
.cal-day .dot {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.cal-day.selected .dot { background: #fff; }

/* ---------- Set input rows (add-exercise form) ---------- */

/* Divider between the exercise/bodyweight group and the sets group. */
.sets-label {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.set-inputs { margin: 0.35rem 0 0.6rem; }
.set-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.set-input-row .set-weight { flex: 1.3; }
.set-input-row .set-reps { flex: 1; }
.set-input-row .times { color: var(--muted); flex: 0 0 auto; }
.set-input-row .remove-set {
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  min-height: 48px;
}
.set-input-row .sign-toggle,
.set-row.set-edit .sign-toggle {
  flex: 0 0 auto;
  padding: 0.4rem 0.6rem;
  min-height: 48px;
  font-weight: 700;
}

/* Bodyweight toggle (checkbox + label above the set rows) */
.bw-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.5rem;
  font-weight: 500;
  cursor: pointer;
}
.bw-toggle-label .bw-toggle { width: auto; min-height: 0; margin: 0; }
.bw-hint { font-size: 0.8rem; margin: -0.25rem 0 0.5rem; }

.exercise-block { margin-bottom: 1.1rem; }
.exercise-block .ex-name { font-weight: 600; margin-bottom: 0.3rem; }
/* Logged cards: title rides at the same 0.6rem rhythm as the set rows (moved up),
   with a faint divider under it, so the header ✎ is spaced evenly above the set
   toggles down the right edge. */
.exercise-block.card { padding-top: 0.6rem; }
.exercise-block .ex-head:not(.ex-head-edit) {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
/* Edit-mode actions on a logged exercise ("+ Add set", "Remove exercise"). */
.exercise-block > button { margin-top: 0.5rem; }

/* ---------- Generated workout suggestions ---------- */

.suggested-plan { border-color: var(--accent); }
.suggestion-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.15rem 0 0.5rem;
}

/* History-based suggestion rows: a big, thumb-friendly checkbox + label. */
.suggest-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  cursor: pointer;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.suggest-row:first-of-type { border-top: none; }
.suggest-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  accent-color: var(--accent);
}
.suggest-info { min-width: 0; }
.suggest-info .ex-name { font-weight: 600; margin-bottom: 0.1rem; }
.suggest-date { font-size: 0.8rem; }

/* Renamable exercise title: name on the left, ✎ on the right. */
/* padding-right matches the set rows' right padding so the header ✎ lines up
   exactly above the set-row toggle buttons (same width, same right edge). */
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-right: 0.25rem; }
.ex-head .ex-name { margin-bottom: 0; }
.ex-head button { padding: 0.4rem 0.6rem; min-height: auto; flex: 0 0 auto; min-width: 46px; }
.ex-head.ex-head-edit { gap: 0.4rem; margin-bottom: 0.3rem; }
.ex-head.ex-head-edit .set-exercise { flex: 1 1 auto; min-width: 0; }

.empty {
  text-align: center;
  color: var(--muted);
  padding: 2rem 1rem;
}

/* ---------- Chart ---------- */

.chart-card { padding: 0.75rem; }
.chart-card canvas { width: 100% !important; }

/* ---------- Bottom nav ---------- */

nav.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  max-width: 640px;
  margin: 0 auto;
}
nav.tabbar button {
  flex: 1;
  background: none;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: auto;
}
nav.tabbar button .icon { font-size: 1.3rem; }
nav.tabbar button.active { color: var(--accent); }

/* ---------- Misc ---------- */

.spacer { height: 1rem; }
.center { text-align: center; }
.pill {
  display: inline-block;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  color: var(--muted);
}