/* Workout Tracker - app.css
   Palette/tokens ported from the "beer" app's look and feel:
   near-neutral slate dark theme with a warm amber accent, plus a
   light theme toggle. Category colors (success/warn/flag/never) are
   reused here to color-code exercise/day types instead of overdue levels. */

:root {
  --bg:         #1a1c1e;
  --panel:      #23262a;
  --panel-2:    #2c3036;
  --border:     #363b42;
  --text:       #d8dde3;
  --text-dim:   #7a8390;
  --text-faint: #4a5260;
  --accent:     #c8a96e;
  --accent-dim: #8a7248;
  --accent-contrast: #1a1410;
  --accent-tint:      #231f14;
  --accent-2:   #90c890;

  --danger:         #e88080;
  --danger-border:  #5a2828;
  --danger-bg:      #7a2828;
  --danger-bg-hover:#8a3030;
  --danger-contrast:#f0c0c0;

  --success-bg:   #182218;
  --success-line: #2a4a2a;
  --success-text: #90c890;

  --warn-bg:   #272318;
  --warn-line: #6b5a2a;
  --flag-bg:   #291e18;
  --flag-line: #7a4020;
  --never-bg:  #1e2228;
  --never-line:#3a4a60;

  --radius: 6px;
  --bottom-nav-h: 60px;
}

/* -- Light theme overrides -- */
[data-theme="light"] {
  --bg:         #f7f6f3;
  --panel:      #ffffff;
  --panel-2:    #ececea;
  --border:     #ddd9d2;
  --text:       #2a2a28;
  --text-dim:   #6b6862;
  --text-faint: #9c988f;
  --accent:     #9c7a3c;
  --accent-dim: #c8a96e;
  --accent-contrast: #fdf8ee;
  --accent-tint:      #f3e9d3;
  --accent-2:   #2a7a2a;

  --danger:         #b03030;
  --danger-border:  #e0b0b0;
  --danger-bg:      #c84040;
  --danger-bg-hover:#b03030;
  --danger-contrast:#ffffff;

  --success-bg:   #e3f3e3;
  --success-line: #8ac08a;
  --success-text: #2a7a2a;

  --warn-bg:   #fbf3df;
  --warn-line: #c9a23a;
  --flag-bg:   #fbe9df;
  --flag-line: #c46a30;
  --never-bg:  #e9eef6;
  --never-line:#5878a8;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  overscroll-behavior-y: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Smooth theme-switch transition, matching the reference app */
body, .topbar, .btn, .card, .exercise-block, table, input, select, textarea, .bottom-nav {
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.brand {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.topbar nav { display: flex; gap: 14px; flex-wrap: wrap; }
.topbar nav a { color: var(--text-dim); font-size: 0.85rem; padding: 4px 2px; }
.topbar nav a.active, .topbar nav a:hover { color: var(--accent); font-weight: 600; text-decoration: none; }

.account-menu { margin-left: auto; display: flex; align-items: center; gap: 10px; }

#theme-toggle { margin-left: 0; }

/* Logged-out account-menu state only (login/signup/forgot-password pages) -
   a plain link rather than a .btn so it doesn't compete visually with the
   one real action there (Log In). Logged-in pages fold Help into the
   account dropdown below instead - see header.php for why. */
.help-link { color: var(--text-dim); font-size: 0.85rem; padding: 4px 2px; }
.help-link:hover { color: var(--accent); text-decoration: none; }

/* Account dropdown (logged-in account-menu state): one icon button instead
   of separate Help/Admin/Account/Log Out buttons, so the topbar's account
   corner stays a single tap target at every viewport width, including the
   phone-next-to-the-rack case this app is built for. Toggled by
   header.php's inline script via the .open class; no framework, matching
   the rest of the app's plain-JS style (same pattern as #theme-toggle). */
.dropdown { position: relative; }
.dropdown-toggle { gap: 4px; }
.dropdown-caret { font-size: 0.55rem; opacity: 0.7; }
.dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  padding: 6px;
  z-index: 30;
}
.dropdown.open .dropdown-menu { display: flex; }
.dropdown-menu a {
  display: block;
  padding: 9px 10px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.85rem;
}
.dropdown-menu a:hover { background: var(--panel-2); text-decoration: none; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.table-scroll table { width: auto; min-width: 100%; }
.table-scroll th, .table-scroll td { white-space: nowrap; }

.container { max-width: 900px; margin: 0 auto; padding: 20px 16px 60px; }

h1 { font-size: 1.5rem; margin: 0 0 6px; }
h2 { font-size: 1.15rem; margin: 24px 0 10px; }
h3 { font-size: 1rem; margin: 16px 0 8px; color: var(--text-dim); }
.subtitle { color: var(--text-dim); margin-bottom: 20px; }

.flash {
  background: rgba(144, 200, 144, 0.12);
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.flash-error {
  background: var(--danger-bg, rgba(200, 90, 90, 0.12));
  border-color: var(--danger-border);
  color: var(--danger);
}

.auth-card { max-width: 380px; margin: 40px auto; }
.auth-card h1 { margin-bottom: 16px; }
.auth-card p { color: var(--text-dim); font-size: 0.9rem; }
.auth-card .form-row { margin-bottom: 4px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

/* Category-coded left border, ported from the reference app's
   "overdue level" rows - here used for day/exercise type instead. */
.day-strength { border-left-color: var(--accent-dim); }
.day-cardio   { background: var(--success-bg); border-left-color: var(--success-line); }
.day-mixed    { background: var(--flag-bg);    border-left-color: var(--flag-line); }
.day-rest     { background: var(--never-bg);   border-left-color: var(--never-line); }

.card-list { display: flex; flex-direction: column; gap: 12px; }

.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }

.muted { color: var(--text-dim); }
.small { font-size: 0.85rem; }

.badge {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.badge-strength { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-tint); }
.badge-cardio   { color: var(--success-text); border-color: var(--success-line); background: var(--success-bg); }
.badge-rest     { color: var(--text-dim); border-color: var(--border); background: var(--panel-2); }
.badge-mixed    { color: var(--flag-line); border-color: var(--flag-line); background: var(--flag-bg); }
/* "Already done today/this week" indicator on Today's cards, in place of a
   Log button. Deliberately its own success styling rather than reusing
   .badge-cardio, so it still reads clearly on a strength/mixed day card
   that has no green tint of its own. */
.badge-complete { color: var(--success-text); border-color: var(--success-line); background: var(--success-bg); font-size: 0.8rem; padding: 6px 12px; }
/* Workout History: marks whether a log came from a routine day or was
   logged freely. Reuses the same visual language as the badges above. */
.badge-routine  { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-tint); margin-right: 6px; }
.badge-adhoc    { color: var(--text-dim); border-color: var(--border); background: var(--panel-2); margin-right: 6px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
th { color: var(--text-dim); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }
tr:last-child td { border-bottom: none; }

/* Rows that navigate on tap (history.php, index.php recent activity):
   the whole row is the touch target, not just the small "View" text, so
   taps land wherever the user's thumb naturally goes on mobile. */
tr.row-link { cursor: pointer; }
tr.row-link:active { background: var(--panel-2); }

/* Each day card on routine_edit.php has its own separate <table>, so plain
   auto-layout sizes the Exercise column per-table based on that table's own
   longest name - the Target column then lands at a different x position in
   every card. table-layout: fixed alone isn't enough to fix this reliably:
   percentage column widths under fixed layout still resolve against the
   table's own used width, and getting that used width to actually be a
   definite, consistent value (rather than "auto" plus whatever
   .table-scroll table's min-width/width rules contribute) turned out to be
   fragile across the two earlier attempts here. The first column's width is
   now set with an explicit pixel value on a <colgroup><col> in
   routine_edit.php's markup instead (inline styles beat every stylesheet
   rule outright, and a fixed px value has nothing left to resolve against) -
   this rule just has to guarantee the table itself is pinned to the card's
   full width so the second column's start position is identical everywhere. */
.table-scroll .day-summary-table { table-layout: fixed; width: 100% !important; }

form { display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
label { font-size: 0.8rem; color: var(--text-dim); }

/* .form-row/.form-grid blocks are often nested a level deeper than <form>
   itself (e.g. stacked inside a .card or .exercise-block), so they don't
   get the outer form's flex gap - with no margin of their own they'd sit
   flush against whatever comes next, crowding label text right up against
   the previous row's input. Deliberately matches ANY next sibling (`* `),
   not just other .form-row/.form-grid elements - the "+ Add Exercise"
   button, for instance, sits in a plain unclassed wrapper div right after
   a .form-row, and a narrower selector missed that case. This also covers
   a set list followed by its "Add Set" button, then a trailing Notes row. */
.form-grid + *,
.form-row + *,
.sets + .btn,
.add-set + .form-row {
  margin-top: 12px;
}

/* Override for .form-row cells that sit side-by-side inside a .form-grid
   (e.g. Name/Type/Muscle group/Default unit on exercises.php) rather than
   stacked one below another - the rule above still matches them too,
   since a later grid cell is technically the next DOM sibling of an
   earlier one even though it renders in the same row, not below it. That
   pushed every cell but the first down 12px within its own grid track,
   misaligning it from the first column. .form-grid's own `gap` already
   spaces grid children in both directions, so grid children never need
   this margin on top of that.
   .form-grid > .form-row (two classes) outweighs .form-row + * (one class
   - the universal selector contributes nothing) regardless of source
   order, so this doesn't have to chase the rule above if it ever moves. */
.form-grid > .form-row {
  margin-top: 0;
}

input, select, textarea {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 10px;
  color: var(--text);
  /* 16px minimum keeps iOS Safari from auto-zooming into the field on focus */
  font-size: 16px;
  font-family: inherit;
  width: 100%;
  min-height: 44px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-dim); }
textarea { min-height: 60px; resize: vertical; }
input[type="checkbox"] { width: auto; min-height: auto; accent-color: var(--accent); }
/* iOS Safari's native date control ignores width:100% and renders at its
   own intrinsic size, making it wider than sibling fields in the same form. */
input[type="date"] { max-width: 100%; -webkit-appearance: none; appearance: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  min-height: 42px;
}
.btn:hover { opacity: 0.9; text-decoration: none; }
.btn:active { opacity: 0.75; }
.btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
.btn-danger { background: transparent; border: 1px solid var(--danger-border); color: var(--danger); }
.btn-sm { padding: 7px 12px; font-size: 0.78rem; min-height: 36px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.theme-toggle { line-height: 1; }
.theme-icon { display: none; font-size: 0.95rem; }
.theme-icon-dark  { display: inline; }
.theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark  { display: none; }
[data-theme="light"] .theme-icon-light { display: inline; }

.inline-form { display: inline; }

.set-row { display: grid; grid-template-columns: 22px 1.3fr 1fr 0.8fr 40px; gap: 6px; align-items: center; }
.set-row .set-num { color: var(--text-dim); font-size: 0.85rem; }
.set-row .remove-set { padding: 8px 0; min-height: 44px; }

.target-set-row { display: grid; grid-template-columns: 22px 1fr 1fr 40px; gap: 6px; align-items: center; margin-bottom: 6px; }
.target-set-row .set-num { color: var(--text-dim); font-size: 0.85rem; }
.target-set-row .remove-target-set { padding: 8px 0; min-height: 44px; }
.sets-wrap { margin-bottom: 4px; }

.exercise-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--panel-2); margin-bottom: 12px; }
.exercise-block h3 { margin-top: 0; color: var(--text); }

.empty-state { color: var(--text-dim); font-style: italic; padding: 20px 0; }

.cycle-day { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cycle-day:last-child { border-bottom: none; }
.cycle-pos { width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--text-dim); flex-shrink: 0; }

.move-arrows { display: flex; flex-direction: column; gap: 2px; }
.move-btn { padding: 0 6px; min-height: 18px; line-height: 1; font-size: 0.6rem; }
.move-btn:disabled { opacity: 0.3; cursor: default; }
.day-edit-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Bottom tab bar: hidden on wide screens, shown fixed-to-bottom on phones */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: var(--bottom-nav-h);
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 2px 6px;
  color: var(--text-dim);
  font-size: 0.68rem;
  min-height: 52px;
}
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a.active, .bottom-nav a:hover { color: var(--accent); font-weight: 600; text-decoration: none; }

@media (max-width: 720px) {
  .topbar .top-nav { display: none; }
  .bottom-nav { display: flex; }
  .container { padding-bottom: calc(var(--bottom-nav-h) + 10px + env(safe-area-inset-bottom, 0)); }
}

@media (max-width: 600px) {
  .set-row { grid-template-columns: 20px 1.3fr 1fr 0.8fr 40px; gap: 5px; }
  .target-set-row { grid-template-columns: 20px 1fr 1fr 40px; gap: 5px; }
  .topbar-inner { padding: 12px; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .bottom-nav a span { font-size: 0.62rem; }
}