/* ============================================================
   FUEL — mobile.css
   App shell · Header · Bottom nav · Mobile nav card
   Calendars · Modals (base) · Tablet overrides
   ============================================================ */

/* ── APP SHELL ───────────────────────────────────────────────── */
.app { display:flex; flex-direction:column; height:100dvh; max-width:480px; margin:0 auto; position:relative; }
.main-area { display:contents; }
.scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px 16px calc(var(--safe-bottom) + 100px); }
.page { display:none; }
.page.active { display:block; }

/* ── HEADER ──────────────────────────────────────────────────── */
.header {
  padding:calc(var(--safe-top) + 16px) 20px 14px;
  background:rgba(8,10,9,.74)!important;
  border-bottom:1px solid var(--border)!important;
  backdrop-filter:var(--glass-blur); box-shadow:var(--shadow-sm);
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
}
body.light .header { background:rgba(255,255,255,.72)!important; }
.header-title { font-family:'Bebas Neue',sans-serif; font-size:30px; letter-spacing:1.5px; cursor:pointer; }
.header-title span { color:var(--green); }
.header-left { display:flex; align-items:center; gap:16px; }
.header-right { display:flex; align-items:center; gap:10px; }
.header-date { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.logout-btn { background:var(--surface2); border:none; color:var(--muted); font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; padding:5px 10px; border-radius:6px; cursor:pointer; }

/* Header auth */
.header-auth-btn {
  display:flex; align-items:center; gap:5px;
  background:var(--green); color:#09090d; border:none; border-radius:20px;
  padding:7px 13px; font-family:'DM Mono',monospace; font-size:10px;
  letter-spacing:1px; text-transform:uppercase; font-weight:700;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 0 16px var(--accent-glow); transition:all .2s;
}
.header-auth-btn:active { opacity:.8; transform:scale(.96); }
.header-user-pill { display:flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:4px 6px 4px 10px; }
.header-user-name { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.5px; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header-logout-mini { background:none; border:none; color:var(--muted); font-size:11px; cursor:pointer; padding:3px 6px; border-radius:5px; transition:color .15s, background .15s; }
.header-logout-mini:hover { color:var(--red); background:var(--red-dim); }

/* Theme toggle */
.theme-toggle { background:var(--surface2); border:none; color:var(--muted); font-size:18px; width:34px; height:34px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.theme-toggle:active { transform:scale(.9); }

/* Desktop top nav — hidden on mobile, shown via desktop.css */
.desktop-topnav { display:none; }
.desktop-topnav-btn {
  display:flex; align-items:center; gap:6px;
  padding:9px 15px; border-radius:999px; border:none;
  background:none; color:var(--muted);
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1.2px; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.desktop-topnav-btn:hover { color:var(--white); background:var(--surface2); }
.desktop-topnav-btn.active { background:var(--green-dim)!important; color:var(--green)!important; font-weight:500; }
.desktop-topnav-btn .dn-icon { font-size:13px; }

/* ── BOTTOM NAV ──────────────────────────────────────────────── */
.bottom-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:calc(100% - 24px)!important; margin:0 auto 10px;
  background:rgba(8,10,9,.78)!important; border:1px solid var(--border)!important;
  border-radius:28px; backdrop-filter:var(--glass-blur); box-shadow:var(--shadow-lg);
  padding:10px 0 calc(var(--safe-bottom) + 6px);
  display:flex; justify-content:space-around; z-index:50; overflow:hidden;
  transition:transform .25s ease, opacity .25s ease;
}
body.light .bottom-nav { background:rgba(255,255,255,.78)!important; }
.bottom-nav.nav-hidden { transform:translateX(-50%) translateY(120%)!important; opacity:0; pointer-events:none; }
.nav-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; cursor:pointer;
  padding:6px 16px; color:var(--muted); border-radius:20px; margin:0 4px;
  transition:background .18s ease, color .18s ease;
}
.nav-btn.active { background:var(--green-dim)!important; color:var(--green)!important; }
.nav-icon { font-size:20px; line-height:1; }
.nav-label { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; }

/* ── MOBILE NAV CARD ─────────────────────────────────────────── */
.mobile-nav-scrim { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:199; backdrop-filter:blur(4px); }
.mobile-nav-scrim.visible { display:block; }
.mobile-nav-card {
  display:none; position:fixed; bottom:0; left:50%;
  transform:translateX(-50%) translateY(100%);
  width:calc(100% - 24px); max-width:480px;
  background:var(--surface); border:1px solid var(--border); border-radius:28px 28px 0 0;
  box-shadow:var(--shadow-lg); backdrop-filter:var(--glass-blur);
  z-index:200; padding:20px 16px calc(var(--safe-bottom) + 16px);
  transition:transform .3s cubic-bezier(0.34,1.2,0.64,1);
}
.mobile-nav-card.visible { display:block; transform:translateX(-50%) translateY(0); }
.mobile-nav-card-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.mobile-nav-kicker { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.mobile-nav-title { font-family:'Bebas Neue',sans-serif; font-size:28px; line-height:1; }
.mobile-nav-close { background:var(--surface2); border:none; color:var(--muted); width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mobile-nav-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mobile-nav-item {
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:var(--surface2); border:1.5px solid var(--border); border-radius:18px;
  padding:16px 14px; cursor:pointer; transition:all .18s ease; text-align:left; font-family:'DM Sans',sans-serif;
}
.mobile-nav-item span { font-size:24px; }
.mobile-nav-item strong { font-size:14px; font-weight:600; color:var(--white); }
.mobile-nav-item small { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.5px; color:var(--muted); text-transform:uppercase; }
.mobile-nav-item.active { background:var(--green-dim); border-color:var(--accent-border-mid); }
.mobile-nav-item.active strong { color:var(--green); }
.mobile-nav-item:hover { border-color:var(--green); transform:translateY(-1px); }
.mobile-nav-item:active { transform:scale(.97); }

/* ── HISTORY CALENDAR ────────────────────────────────────────── */
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal-month { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:.5px; }
.cal-nav { display:flex; gap:8px; }
.cal-nav-btn { background:var(--surface); border:1px solid var(--border); color:var(--white); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:20px; }
.cal-day-label { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); text-align:center; padding:6px 0; }
.cal-day {
  aspect-ratio:1; border-radius:18px!important;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; position:relative;
  border:1px solid transparent; gap:2px;
  background:var(--surface)!important; box-shadow:var(--shadow-sm);
}
.cal-day:empty, .cal-day.empty { pointer-events:none; background:transparent!important; border-color:transparent; box-shadow:none; }
.cal-day.has-data { border-color:var(--accent-glow-border)!important; }
.cal-day.has-data:hover { border-color:var(--green); }
.cal-day.has-data:active { transform:scale(.95); }
.cal-day.today { border-color:var(--green)!important; background:var(--green-dim)!important; box-shadow:0 0 0 3px var(--green-dim),var(--shadow-sm)!important; }
.cal-day.selected { border-color:var(--amber)!important; background:var(--amber-dim)!important; box-shadow:0 0 0 3px var(--amber-dim),var(--shadow-sm)!important; }
.cal-day-num { font-family:'DM Mono',monospace; font-size:12px; font-weight:500; }
.cal-day-dot { width:4px; height:4px; border-radius:50%; background:var(--green); }
.cal-day-cal { font-family:'DM Mono',monospace; font-size:8px; color:var(--muted); }
.cal-day-workout { font-family:'DM Mono',monospace; font-size:7px; color:var(--purple); text-align:center; line-height:1; }
.cal-detail {
  background:var(--surface)!important; border-radius:var(--radius)!important;
  padding:20px; border:1px solid var(--border)!important;
  box-shadow:var(--shadow-md)!important; backdrop-filter:var(--glass-blur); display:none;
}
.cal-detail.visible { display:block; animation:slideUp .3s ease; }

/* ── WORKOUT CALENDAR ────────────────────────────────────────── */
.workout-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:20px; }
.workout-cal-day {
  aspect-ratio:1; border-radius:18px!important;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; border:1px solid var(--border);
  background:var(--surface)!important; box-shadow:var(--shadow-sm); gap:2px; padding:4px;
}
.workout-cal-day.today { border-color:var(--green); background:var(--green-dim)!important; box-shadow:0 0 0 3px var(--green-dim),var(--shadow-sm)!important; }
.workout-cal-day.rest { opacity:.5; }
.workout-cal-day.selected { border-color:var(--amber); background:var(--amber-dim)!important; box-shadow:0 0 0 3px var(--amber-dim),var(--shadow-sm)!important; }
.workout-cal-day:active, .workout-cal-day:hover { border-color:var(--green); transform:scale(.95); }
.wcd-num { font-family:'DM Mono',monospace; font-size:11px; font-weight:500; }
.wcd-tag { font-family:'DM Mono',monospace; font-size:7px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); text-align:center; line-height:1.2; }
.workout-cal-day.today .wcd-tag { color:var(--green); }

/* ── MODALS — shared base ────────────────────────────────────── */
.workout-log-modal,
.workout-library-modal,
.edit-meal-modal,
.recipe-modal,
.analytics-modal,
.hist-day-modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.75); z-index:400;
  align-items:flex-end; justify-content:center;
}
.workout-log-modal.visible,
.workout-library-modal.visible,
.edit-meal-modal.visible,
.recipe-modal.visible,
.analytics-modal.visible,
.hist-day-modal.visible { display:flex; }

/* Modal sheets */
.workout-log-sheet,
.workout-library-sheet,
.edit-meal-sheet,
.recipe-sheet,
.analytics-sheet,
.hist-day-sheet,
.add-meal-sheet {
  background:var(--surface)!important;
  border-radius:20px 20px 0 0;
  padding:24px; width:100%;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow-lg)!important;
  backdrop-filter:var(--glass-blur);
  overflow-y:auto;
}
.workout-log-sheet   { max-width:480px; max-height:88vh; }
.workout-library-sheet { max-width:520px; max-height:88vh; }
.edit-meal-sheet     { max-width:480px; max-height:88vh; }
.recipe-sheet        { max-width:480px; max-height:90vh; padding:0; }
.analytics-sheet     { max-width:480px; max-height:88vh; padding:22px; }
.add-meal-sheet      { max-width:480px; max-height:85vh; }

/* Hist day popup */
.hist-day-modal { z-index:450; align-items:center; justify-content:center; padding:16px; }
.hist-day-sheet { background:var(--surface)!important; border-radius:var(--radius)!important; width:100%; max-width:440px; max-height:82vh; padding:0; }
.hist-day-header { position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--border); padding:18px 20px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; z-index:5; backdrop-filter:var(--glass-blur); }
.hist-day-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:.5px; line-height:1; }
.hist-day-close { background:var(--surface2); border:none; color:var(--muted); width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hist-day-body { padding:18px 20px 24px; }

/* Modal titles */
.workout-log-title { font-family:'Bebas Neue',sans-serif; font-size:26px; margin-bottom:4px; }
.workout-log-suggested { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--muted); margin-bottom:20px; }
.workout-lib-title { font-family:'Bebas Neue',sans-serif; font-size:26px; margin-bottom:4px; }
.workout-lib-sub { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--muted); margin-bottom:18px; }

/* Analytics modal specifics */
.analytics-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.analytics-title { font-family:'Bebas Neue',sans-serif; font-size:28px; line-height:1; }
.analytics-sub { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-top:5px; }
.analytics-close { background:var(--surface2); border:none; color:var(--muted); width:34px; height:34px; border-radius:50%; font-size:16px; cursor:pointer; flex-shrink:0; }

/* ── TABLET ──────────────────────────────────────────────────── */
@media (min-width:768px) {
  html, body { overflow:auto; }
  .app { max-width:100%; height:auto; min-height:100dvh; }
  .bottom-nav { position:sticky; bottom:0; transform:none; max-width:100%; }
  .scroll { padding-bottom:24px; }
  .workout-log-sheet, .edit-meal-sheet { max-width:560px; border-radius:16px; }
}

/* Hide secondary nav items on mobile — accessible via nav card instead */
#nav-settings,
#nav-feedback {
  display: none;
}
@media (min-width: 768px) {
  #nav-settings,
  #nav-feedback {
    display: flex;
  }
}