/* css/app.css — FitTrack dark iOS-native theme */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --bg-primary:    #000000;
  --bg-secondary:  #1C1C1E;
  --bg-tertiary:   #2C2C2E;
  --bg-elevated:   #3A3A3C;

  --accent:        #7C3AED;
  --accent-light:  #A855F7;
  --accent-dim:    rgba(124,58,237,.18);

  --text-primary:  #FFFFFF;
  --text-secondary:#8E8E93;
  --text-tertiary: #636366;

  --success:  #34C759;
  --danger:   #FF3B30;
  --warning:  #FF9F0A;
  --info:     #0A84FF;
  --water:    #30B0C7;

  --separator:   rgba(255,255,255,.08);
  --card-border: rgba(255,255,255,.06);

  --nav-height:    64px;
  --header-height: 52px;

  /* iPhone notch / home bar safe areas */
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { height:100%; font-size:16px; -webkit-text-size-adjust:100%; }

body {
  height:100%;
  background:var(--bg-primary);
  color:var(--text-primary);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  overflow:hidden;
}

#app {
  display:flex;
  flex-direction:column;
  height:100dvh;
  padding-top:var(--sat);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.app-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-height);
  padding:0 20px;
  background:rgba(0,0,0,.85);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--separator);
  position:sticky;
  top:0;
  z-index:100;
  flex-shrink:0;
}

.app-header__title { font-size:17px; font-weight:600; letter-spacing:-.3px; }
.app-header__date  { font-size:13px; color:var(--text-secondary); }

/* ── Main content ────────────────────────────────────────────────────────── */
.main-content {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--nav-height) + var(--sab) + 8px);
}

/* ── Bottom nav ──────────────────────────────────────────────────────────── */
.bottom-nav {
  display:flex;
  height:calc(var(--nav-height) + var(--sab));
  padding-bottom:var(--sab);
  background:rgba(28,28,30,.94);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--separator);
  position:sticky;
  bottom:0;
  z-index:100;
  flex-shrink:0;
}

.bottom-nav__item {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:none;
  border:none;
  color:var(--text-tertiary);
  font-size:10px;
  font-weight:500;
  cursor:pointer;
  transition:color .15s;
  -webkit-tap-highlight-color:transparent;
  padding-top:8px;
}
.bottom-nav__item.active { color:var(--accent-light); }
.bottom-nav__item:active  { transform:scale(.92); }
.bottom-nav__icon { width:24px; height:24px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background:var(--bg-secondary);
  border:1px solid var(--card-border);
  border-radius:var(--radius-md);
  padding:16px;
  margin:0 16px 12px;
}
.card--elevated { background:var(--bg-tertiary); }
.card__header   { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.card__title    { font-size:15px; font-weight:600; }
.card__subtitle { font-size:12px; color:var(--text-secondary); margin-top:2px; }

/* ── Section headers ─────────────────────────────────────────────────────── */
.section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 16px 8px;
}
.section-title {
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-secondary);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 20px;
  border-radius:var(--radius-md);
  border:none;
  font-size:15px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:opacity .15s, transform .1s;
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}
.btn:active   { transform:scale(.97); opacity:.85; }
.btn:disabled { opacity:.4; pointer-events:none; }

.btn--primary { background:var(--accent);  color:#fff; width:100%; }
.btn--success { background:var(--success); color:#fff; }
.btn--danger  { background:var(--danger);  color:#fff; }
.btn--ghost   { background:transparent; color:var(--accent-light); border:1px solid var(--accent); }
.btn--sm      { padding:8px 14px; font-size:13px; border-radius:var(--radius-sm); width:auto; }
.btn--icon    { width:36px; height:36px; padding:0; border-radius:50%;
                background:var(--bg-elevated); color:var(--text-secondary); width:auto; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.form-group  { margin-bottom:14px; }
.form-label  {
  display:block; font-size:12px; font-weight:600; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;
}
.form-input, .form-select {
  width:100%; padding:12px 14px;
  background:var(--bg-tertiary);
  border:1px solid var(--card-border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:15px;
  font-family:inherit;
  -webkit-appearance:none;
  appearance:none;
  outline:none;
}
.form-input:focus, .form-select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ── Macro rings ─────────────────────────────────────────────────────────── */
.macro-rings    { display:flex; justify-content:space-around; padding:16px 8px; }
.macro-ring-item{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.macro-ring-svg { width:72px; height:72px; transform:rotate(-90deg); }
.macro-ring-bg  { fill:none; stroke:var(--bg-elevated); stroke-width:5; }
.macro-ring-fill{ fill:none; stroke-width:5; stroke-linecap:round;
                  transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1); }
.macro-ring-label{ font-size:11px; color:var(--text-secondary); text-align:center; }
.macro-ring-value{ font-size:13px; font-weight:700; }

/* ── Rest timer ring ─────────────────────────────────────────────────────── */
.timer-container { display:flex; flex-direction:column; align-items:center; padding:12px 0; }
.timer-ring      { position:relative; width:120px; height:120px; }
.timer-ring svg  { transform:rotate(-90deg); width:100%; height:100%; }
.timer-ring-bg   { fill:none; stroke:var(--bg-elevated); stroke-width:6; }
.timer-ring-track{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round;
                   transition:stroke-dashoffset .9s linear; }
.timer-ring-text {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;
}
.timer-ring-text.done { color:var(--success); }

/* ── Exercise cards ──────────────────────────────────────────────────────── */
.exercise-card {
  background:var(--bg-secondary);
  border:1px solid var(--card-border);
  border-radius:var(--radius-md);
  margin:0 16px 10px;
  overflow:hidden;
}
.exercise-card__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--separator);
}
.exercise-card__name { font-size:15px; font-weight:600; }
.exercise-card__meta { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.exercise-card__sets { padding:8px 16px 14px; }

.set-row {
  display:grid;
  grid-template-columns:28px 1fr 1fr auto;
  gap:8px;
  align-items:center;
  padding:5px 0;
}
.set-row__number { font-size:12px; color:var(--text-tertiary); font-weight:600; }
.set-row__input  {
  padding:8px; background:var(--bg-tertiary);
  border:1px solid var(--card-border); border-radius:var(--radius-sm);
  color:var(--text-primary); font-size:14px; text-align:center; outline:none; width:100%;
  font-family:inherit;
}
.set-row__input:focus { border-color:var(--accent); }

/* ── Progress bars ───────────────────────────────────────────────────────── */
.progress-bar       { height:6px; background:var(--bg-elevated); border-radius:3px; overflow:hidden; }
.progress-bar--lg   { height:10px; }
.progress-bar__fill { height:100%; border-radius:3px; transition:width .5s ease; }

/* ── Water tracker ───────────────────────────────────────────────────────── */
.water-display  { display:flex; flex-direction:column; align-items:center; padding:24px 16px 8px; }
.water-amount   { font-size:56px; font-weight:700; color:var(--water); line-height:1;
                  font-variant-numeric:tabular-nums; }
.water-unit     { font-size:18px; color:var(--text-secondary); margin-top:4px; }
.water-goal     { font-size:13px; color:var(--text-secondary); margin-top:8px; }

.water-quick-add { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px 16px; }
.water-btn {
  background:rgba(48,176,199,.12);
  border:1px solid rgba(48,176,199,.25);
  border-radius:var(--radius-md);
  color:var(--water);
  padding:14px 6px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
  font-family:inherit;
}
.water-btn:active { background:rgba(48,176,199,.25); transform:scale(.95); }

/* ── Stat chips (dashboard) ──────────────────────────────────────────────── */
.stat-row  { display:flex; gap:8px; padding:0 16px; flex-wrap:wrap; }
.stat-chip {
  flex:1; min-width:70px;
  background:var(--bg-secondary);
  border:1px solid var(--card-border);
  border-radius:var(--radius-md);
  padding:12px 10px;
  text-align:center;
}
.stat-chip__value { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.stat-chip__label { font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* ── Lists ───────────────────────────────────────────────────────────────── */
.list {
  background:var(--bg-secondary);
  border-radius:var(--radius-md);
  margin:0 16px 12px;
  overflow:hidden;
}
.list-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--separator);
}
.list-item:last-child { border-bottom:none; }
.list-item__title    { font-size:15px; font-weight:500; }
.list-item__subtitle { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.list-item__right    { font-size:14px; color:var(--text-secondary); flex-shrink:0; margin-left:12px; }

/* ── Toggle (settings) ───────────────────────────────────────────────────── */
.toggle          { position:relative; width:51px; height:31px; flex-shrink:0; }
.toggle input    { opacity:0; width:0; height:0; }
.toggle-track    {
  position:absolute; cursor:pointer; inset:0;
  background:var(--bg-elevated); border-radius:31px; transition:background .2s;
}
.toggle-track::after {
  content:''; position:absolute;
  width:27px; height:27px; left:2px; top:2px;
  background:#fff; border-radius:50%;
  transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.toggle input:checked + .toggle-track              { background:var(--success); }
.toggle input:checked + .toggle-track::after       { transform:translateX(20px); }

/* ── Modal (bottom sheet) ────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:500;
  display:flex; align-items:flex-end;
  padding-bottom:var(--sab);
}
.modal-overlay.hidden { display:none; }
.modal-box {
  width:100%;
  background:var(--bg-secondary);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:20px 20px calc(20px + var(--sab));
  max-height:85dvh;
  overflow-y:auto;
}
.modal-handle {
  width:36px; height:4px;
  background:var(--bg-elevated);
  border-radius:2px;
  margin:0 auto 20px;
}
.modal-title { font-size:18px; font-weight:700; margin-bottom:16px; text-align:center; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast-container {
  position:fixed;
  top:calc(var(--sat) + var(--header-height) + 8px);
  left:50%; transform:translateX(-50%);
  z-index:1000;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.toast {
  background:var(--bg-tertiary); color:var(--text-primary);
  border-radius:var(--radius-md); padding:10px 16px;
  font-size:14px; font-weight:500;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  animation:toastIn .25s ease, toastOut .25s ease 2.75s forwards;
  white-space:nowrap;
}
.toast--success { border-left:3px solid var(--success); }
.toast--error   { border-left:3px solid var(--danger);  }
.toast--info    { border-left:3px solid var(--info);    }

@keyframes toastIn  { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateY(-4px)} }

/* ── Install banner ──────────────────────────────────────────────────────── */
.install-banner { background:var(--bg-tertiary); border-bottom:1px solid var(--card-border);
                  padding:calc(var(--sat) + 12px) 16px 12px; }
.install-banner.hidden { display:none; }
.install-banner__content { display:flex; align-items:flex-start; gap:12px; }
.install-banner__icon    { font-size:28px; flex-shrink:0; }
.install-banner__content p { font-size:13px; color:var(--text-secondary); margin-top:3px; }
.install-banner__close   { background:none; border:none; color:var(--text-secondary);
                            font-size:18px; cursor:pointer; padding:4px; margin-left:auto; }

/* ── Update banner ───────────────────────────────────────────────────────── */
.update-banner { display:flex; align-items:center; justify-content:space-between;
                 background:var(--accent); color:#fff; padding:10px 16px;
                 font-size:14px; font-weight:500; }
.update-banner.hidden { display:none; }
.update-banner button { background:rgba(255,255,255,.2); border:none; color:#fff;
                         padding:6px 12px; border-radius:8px; font-size:13px; cursor:pointer; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.loading-spinner { display:flex; align-items:center; justify-content:center; padding:56px; }
.spinner { width:32px; height:32px; border:3px solid var(--bg-elevated);
            border-top-color:var(--accent); border-radius:50%;
            animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Day tags ────────────────────────────────────────────────────────────── */
.tag { display:inline-block; padding:2px 8px; border-radius:20px; font-size:12px; font-weight:600; }
.tag--pull  { background:rgba(168,85,247,.15); color:#A855F7; }
.tag--push  { background:rgba(249,115,22,.15);  color:#F97316; }
.tag--legs  { background:rgba(52,211,153,.15);  color:#34D399; }
.tag--upper { background:rgba(56,189,248,.15);  color:#38BDF8; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state      { text-align:center; padding:48px 24px; color:var(--text-secondary); }
.empty-state__icon{ font-size:48px; margin-bottom:12px; }
.empty-state h3   { font-size:17px; color:var(--text-primary); margin-bottom:6px; }
.empty-state p    { font-size:14px; line-height:1.5; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.hidden       { display:none !important; }
.text-success { color:var(--success); }
.text-danger  { color:var(--danger);  }
.text-muted   { color:var(--text-secondary); }
.text-center  { text-align:center; }
.mt-8         { margin-top:8px; }
.mt-16        { margin-top:16px; }
.mb-8         { margin-bottom:8px; }
.mb-12        { margin-bottom:12px; }
.px-16        { padding-left:16px; padding-right:16px; }
.w-full       { width:100%; }