/* ==========================================================================
   Manage area: routines / workouts, forms, discover, import, profile, admin,
   auth. Uses only tokens from application.css so light + dark both work.
   ========================================================================== */

/* ---- Shared section headers -------------------------------------------- */
.manage-section { margin-bottom: var(--space-6); }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.section-head h2 { margin-bottom: 0; }
.section-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 480px) {
  .section-head__actions { width: 100%; }
  .section-head__actions .btn { flex: 1; }
}
.inline-form { display: inline-flex; margin: 0; }
.page-desc { margin: calc(var(--space-2) * -1) 0 var(--space-3); }
.edit-streak { margin-bottom: var(--space-4); }

/* Quiet destructive action: reads as text until hovered */
.btn-danger-quiet { color: var(--danger-text); }
.btn-danger-quiet:hover { background: var(--danger-soft); color: var(--danger-text); }

/* ---- Routine cards ------------------------------------------------------ */
.routine-card { padding: var(--space-4); }
.routine-card.is-inactive { background: var(--surface-2); }
.routine-card.is-inactive .routine-card__name { color: var(--text-muted); }
.routine-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.routine-card__name { font-size: var(--text-lg); font-weight: 800; margin-right: var(--space-1); }
.routine-card__desc { font-size: var(--text-sm); margin-top: var(--space-2); }
.routine-days {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.routine-days li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.routine-days li:last-child { border-bottom: 0; }
.routine-days a { font-weight: 600; font-size: var(--text-sm); color: var(--text); text-decoration: none; }
.routine-days a:hover { color: var(--accent-text); text-decoration: underline; }
.routine-days li { font-size: var(--text-sm); }
.routine-days li > a:first-of-type { flex: 0 1 auto; }
.routine-days__aux { font-size: var(--text-xs); font-weight: 500 !important; color: var(--text-muted); }

/* A day row: drag handle, name/badges (grows), ▲▼ order buttons. */
.routine-day { flex-wrap: nowrap; gap: var(--space-3); }
.routine-day .drag-handle { width: 28px; min-height: 32px; font-size: 1rem; }
.routine-day__body { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.routine-day__order { flex: 0 0 auto; display: flex; gap: 2px; }
.routine-day.dragging { background: var(--surface); border-radius: var(--radius); padding-left: var(--space-2); }
@media (max-width: 480px) {
  /* The drag gesture still works by touch; the buttons are the primary way
     to reorder on a phone, so keep them full tap-target size there. */
  .routine-day__order .btn-icon { min-width: var(--tap); min-height: var(--tap); }
}
.routine-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
@media (max-width: 480px) {
  .routine-card__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .routine-card__actions .spacer { display: none; }
  .routine-card__actions .inline-form { display: contents; }
  .routine-card__actions .btn { width: 100%; }
  .routine-card__actions .btn-danger-quiet { grid-column: 1 / -1; }
}

/* ---- Workout / note rows ------------------------------------------------ */
.wt-list { display: flex; flex-direction: column; gap: var(--space-2); }
.wt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.wt-row__body { min-width: 0; flex: 1; }
.wt-row__title { font-weight: 700; }
.wt-row__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.wt-row > .btn { flex: 0 0 auto; }

/* ---- Forms -------------------------------------------------------------- */
.form-card { padding: var(--space-4) var(--space-4) var(--space-2); }
.form-section { padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.form-section:last-child { border-bottom: 0; margin-bottom: 0; }
.form-section__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.field-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.form-group > .muted, .form-group > div.muted { font-size: var(--text-xs); margin: var(--space-2) 0; }
.form-group > label { font-size: var(--text-sm); }
.form-group input[type="number"] { width: 6rem; }
.form-group div[style*="align-items:center"] > input[type="time"] { width: auto; }

/* Checkbox-with-label as a tappable pill (weekdays, "Enabled", workout picker) */
.form-group label:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-3);
  margin: 0;
  font-weight: 500;
  font-size: var(--text-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.form-group label:has(> input[type="checkbox"]:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}
.form-group label:has(> input[type="checkbox"]) { white-space: nowrap; flex: 0 0 auto; }
.form-group .check-item { white-space: normal; }
@media (pointer: coarse) { .form-group label:has(> input[type="checkbox"]) { min-height: var(--tap); } }
.check-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.check-item { max-width: 100%; }

.narrow-form { max-width: 520px; }

.code-input,
textarea.code-input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  width: 100%;
  tab-size: 2;
}
#text { font-family: var(--font-mono); font-size: var(--text-sm); width: 100%; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }

/* Validation summary */
.flash-error, .flash-alert { display: flex; flex-direction: column; gap: var(--space-1); }
.flash-error p, .flash-alert p { margin: 0; }
.flash-list { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-weight: 400; }

/* Sticky Save / Cancel on mobile, above the tab bar */
.form-actions { margin-top: var(--space-4); }
@media (max-width: 760px) {
  .form-actions {
    position: sticky;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
  }
  .form-actions .btn { flex: 1; }
  .form-actions .muted { flex-basis: 100%; }
}

/* "More" (neutral, e.g. a plain YAML export) and "Danger zone" (destructive
   actions only) share one layout — a title/description row plus a button —
   but ONLY the danger zone gets the red treatment. A harmless action like
   "Export YAML" must never sit inside `.danger-zone`, or it reads as risky. */
.more-zone,
.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius);
}
.more-zone h2,
.danger-zone h2 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.more-zone .muted,
.danger-zone .muted { font-size: var(--text-sm); }

.more-zone {
  border: 1px solid var(--border);
  background: var(--surface);
}

.danger-zone {
  border: 1px solid var(--danger);
  background: var(--danger-soft);
}
.danger-zone h2 { color: var(--danger-text); }
.danger-zone .muted { color: var(--text); opacity: 0.8; }
.danger-zone .btn-secondary { background: var(--surface); }

/* ---- Exercises list + reorder ------------------------------------------ */
.exercises-card { margin-top: var(--space-5); }
.exercise-list { display: flex; flex-direction: column; }
.exercise-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}
.exercise-row:last-child { border-bottom: 0; }
.exercise-row__body { flex: 1; min-width: 0; }
.exercise-row__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.exercise-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1.25rem;
  padding: 0;
}
.drag-handle:hover { color: var(--accent-text); border-color: var(--accent); }
.exercise-row.dragging { background: var(--surface); border-radius: var(--radius); padding-left: var(--space-2); }

.metric-row { flex-wrap: wrap; }
.metric-row input[type="text"] { flex: 1 1 12rem; min-width: 0; }
.metric-row .remove-metric-btn { flex: 0 0 auto; }
.metric-row .timer-seconds-wrapper input[type="number"] { width: 9rem; }
.form-group #add-metric-btn { margin-top: var(--space-2); }
@media (max-width: 480px) {
  .metric-row { padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius); }
  .metric-row select.timer-kind-select,
  .metric-row select.value-kind-select { flex: 1 1 auto; }
}

/* ---- Discover / templates ---------------------------------------------- */
.discover-search { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.discover-search input[type="search"] { flex: 1; min-width: 0; }
.discover-sort {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
}
.discover-sort a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.discover-sort a.active { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-sm); text-decoration: none; }
.tag-rail { align-items: center; }
.tag-rail a {
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  text-decoration: none;
  font-weight: 500;
}
.tag-rail a.active { background: var(--accent-soft); border-color: var(--accent); }
.tag-chip { text-decoration: none; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space-4); }
.template-grid .card { margin-bottom: 0; }
.template-card { gap: var(--space-2); }
.template-card__head { display: flex; flex-direction: column; }
.template-card__name { font-size: var(--text-lg); }
.template-card__name a { text-decoration: none; color: var(--text); }
.template-card__name a:hover { color: var(--accent-text); }
.template-card__author { font-size: var(--text-sm); }
.template-card__desc { font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.template-card__stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.template-card-actions { margin-top: auto; padding-top: var(--space-2); }
.template-card-actions .spacer { flex: 1; }
.btn-liked { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.btn-liked:hover { background: var(--accent-soft); }
.empty-state p.muted { font-size: var(--text-sm); }
.pager { justify-content: space-between; }
.pager a { font-weight: 600; }

.template-byline { margin-top: calc(var(--space-2) * -1); margin-bottom: var(--space-3); }
.template-hero-actions { margin: var(--space-4) 0 var(--space-5); }
@media (max-width: 480px) {
  .template-hero-actions { flex-direction: column; align-items: stretch; }
  .template-hero-actions .btn { width: 100%; }
}
.day-exercises { list-style: none; counter-reset: ex; display: flex; flex-direction: column; margin-top: var(--space-3); }
.day-exercises li {
  counter-increment: ex;
  position: relative;
  padding: var(--space-2) 0 var(--space-2) 2.25rem;
  border-top: 1px solid var(--border);
}
.day-exercises li::before {
  content: counter(ex);
  position: absolute;
  left: 0;
  top: var(--space-2);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
}
.card > h3 + .chip, .card > .chip { margin-right: var(--space-2); }

/* ---- Import ------------------------------------------------------------- */
.ai-panel { padding: 0; }
.ai-panel > summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 700; min-height: var(--tap); display: flex; align-items: center; }
.ai-panel__body { padding: 0 var(--space-4) var(--space-4); }
.import-preview { margin-top: var(--space-5); }
.import-preview__doc { margin-bottom: var(--space-4); overflow-x: auto; }
.import-preview__day { border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: var(--space-3); }
.import-preview__day h4 { margin: 0 0 var(--space-2); }
.import-preview__exercises { list-style: none; padding: 0; margin: 0; }
.import-preview__exercise { padding: var(--space-2) 0; }
.import-preview__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.import-preview__body { white-space: pre-wrap; }

/* ---- Admin -------------------------------------------------------------- */
.admin-table .btn { min-height: 34px; padding: 0.3rem 0.75rem; font-size: var(--text-xs); }
.admin-table tbody tr:hover td { background: var(--surface-2); }
.admin-table td { vertical-align: middle; font-size: var(--text-sm); }

/* ---- Login / sign-up ---------------------------------------------------- */
.auth-wrap { max-width: 420px; margin: var(--space-5) auto var(--space-6); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.auth-brand__mark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--streak)); box-shadow: var(--shadow); }
.auth-brand__name { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.auth-card { padding: var(--space-5); box-shadow: var(--shadow); border-radius: var(--radius-lg); }
.auth-card h1 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.auth-card__sub { margin-bottom: var(--space-5); font-size: var(--text-sm); }
.auth-card .flash { margin-bottom: var(--space-4); }
.auth-card .flash ul { list-style: none; }
.auth-card input[type="submit"] { margin-top: var(--space-2); }
.auth-alt { text-align: center; margin-top: var(--space-4); }
.auth-alt a { font-weight: 600; }
@media (min-width: 761px) { .auth-wrap { margin-top: var(--space-7); } }

/* Streak / reminder field groups (views/streak_reminder_fields.js) */
.weekday-checks { display: flex; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.weekday-checks__item { display: inline-flex; gap: var(--space-1); align-items: center; font-weight: normal; min-height: var(--tap); }
/* Disabled because the current period/setting makes this field invalid to
   set (e.g. weekdays outside a Weekly streak) — not merely inactive. */
.weekday-checks.is-disabled { opacity: 0.55; }
.weekday-checks.is-disabled .weekday-checks__item { cursor: not-allowed; }
.inline-fields__count:disabled { opacity: 0.55; cursor: not-allowed; }
.inline-fields { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); }
.inline-fields__count { width: 5rem; }
.field-hint-sm { font-size: var(--text-sm); margin-bottom: var(--space-1); }

/* The "count" vs "specific days" either/or (StreakFrequencyFields) */
.streak-frequency__label { display: block; font-weight: 600; margin-bottom: var(--space-1); font-size: var(--text-sm); }
.mode-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.mode-toggle button {
  flex: 1;
  min-height: var(--tap);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.mode-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-sm); }
.mode-toggle button:disabled { opacity: 0.45; cursor: not-allowed; }
.streak-frequency__summary {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--streak-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
}