/* GymTrack Theme: tokens + components (mobile-first) */

/* Design Tokens */
:root {
  color-scheme: dark light;
  
  /* Colors */
  --bg: #0a0c11;
  --panel: #0f141c;
  --card: #111826;
  --text: #f2f6ff;
  --muted: #b1bccb;
  --primary: #3a86ff;
  --success: #2ec27e;
  --warning: #f7b500;
  --danger: #ff6b6b;
  --border: #2b3647;

  /* Type scale with responsive clamping */
  --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
  --text-sm: clamp(0.875rem, 2vw, 1rem);
  --text: clamp(1rem, 2.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 3.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 4vw, 2rem);

  /* Spacing */
  --space-2: clamp(0.5rem, 2vw, 0.5rem);
  --space-3: clamp(0.75rem, 2.5vw, 0.75rem);
  --space-4: clamp(1rem, 3vw, 1rem);
  --space-6: clamp(1.5rem, 4vw, 1.5rem);

  /* Radius */
  --radius: 12px;
  --radius-lg: 16px;

  /* Elevation */
  --shadow-appbar: 0 6px 16px rgba(0,0,0,.4);
  --shadow-card: 0 10px 28px rgba(0,0,0,.35);
  --shadow-fab: 0 10px 24px rgba(58,134,255,.45);

  /* Safe Areas */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f8fb;
    --panel: #ffffff;
    --card: #ffffff;
    --text: #121722;
    --muted: #5b6678;
    --border: #e5eaf1;
    --shadow-appbar: 0 6px 16px rgba(16, 23, 34, .08);
    --shadow-card: 0 10px 24px rgba(16, 23, 34, .08);
    --shadow-fab: 0 10px 20px rgba(58,134,255,.35);
  }
}

/* Base */
* { 
  box-sizing: border-box; 
}

html, body { 
  height: 100%; 
  /* Prevent font scaling in landscape mode on mobile */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 400 var(--text)/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
  color: var(--text);
  /* Brand background photo with overlay and subtle glow */
  background-image:
    linear-gradient(0deg, rgba(10,12,17,.65), rgba(10,12,17,.65)),
    radial-gradient(900px 460px at 50% -12%, rgba(58,134,255,.10), transparent 60%),
    url('/yousaf.png'),
    linear-gradient(var(--bg), var(--bg));
  background-size: auto, auto, cover, auto;
  background-position: center, 50% -12%, center, center;
  background-repeat: no-repeat;
  
  /* Enhanced font smoothing for maximum clarity */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  
  /* Text rendering optimization */
  text-rendering: optimizeLegibility;
  
  /* Remove tap highlight on mobile */
  -webkit-tap-highlight-color: transparent;
}
.auth-page {
  /* Raise portrait focal point so the face is visible */
  background-position: center, 50% -12%, center 22%, center;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  body {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    font-smooth: auto;
  }
  
  .title,
  .subtitle,
  h1, h2, h3,
  label,
  .btn,
  .tab {
    text-shadow: none !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * { 
    animation: none !important; 
    transition: none !important; 
  }
}

.app { 
  min-height: 100%; 
  display: grid; 
  grid-template-rows: auto 1fr auto; 
}

/* Top App Bar */
.topbar {
  position: sticky; 
  top: 0; 
  z-index: 20;
  background: rgba(12,14,20,.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-appbar);
  color: var(--text);
}

@media (prefers-color-scheme: light) { 
  .topbar { 
    background: rgba(255,255,255,.9); 
  } 
}

.topbar__inner { 
  display: grid; 
  grid-template-columns: 40px 1fr 40px; 
  align-items: center; 
  gap: var(--space-2);
  padding: calc(var(--safe-top) + 8px) var(--space-4) 8px; 
}
/* Center brand on auth pages and hide side buttons */
.auth-page .topbar__inner { grid-template-columns: 1fr auto 1fr; }
.auth-page .topbar .icon-btn { visibility: hidden; }

.topbar__title { 
  display: grid; 
  gap: 2px; 
}

.title { 
  font-weight: 700; 
  font-size: var(--text-lg); 
  letter-spacing: -.01em; 
  color: var(--text); 
  text-shadow: none; 
}

.subtitle { 
  font-size: var(--text-sm); 
  color: var(--muted); 
  text-shadow: none; 
}

.icon-btn { 
  width: 40px; 
  height: 40px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 10px; 
  border: 1px solid transparent; 
  background: transparent; 
  color: var(--text); 
  cursor: pointer;
  /* Ensure icon buttons have clear text */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-btn:active { 
  background: rgba(255,255,255,.04); 
}

/* Content */
.content { 
  padding: var(--space-4); 
  padding-bottom: calc(84px + var(--safe-bottom)); 
  max-width: 720px; 
  margin: 0 auto; 
}
/* On auth pages, allow more vertical space for hero image */
.auth-page .content { padding-top: 10vh; }

/* Cards */
.card { 
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--card); 
  border: 1px solid var(--border); 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-card); 
}

.card.pad { 
  padding: var(--space-4); 
}

/* Buttons */
.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  height: 44px; 
  padding: 0 var(--space-4); 
  border-radius: 12px; 
  border: 1px solid transparent; 
  font-weight: 700; 
  text-decoration: none; 
  cursor: pointer;
  /* Enhanced button text clarity */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

.btn.primary { 
  background: linear-gradient(180deg, var(--primary), #2d6de0); 
  color: #fff; 
  box-shadow: var(--shadow-fab); 
}

.btn.ghost { 
  background: transparent; 
  color: var(--text); 
  border: 1px solid var(--border); 
}

.btn.secondary { 
  background: var(--panel); 
  color: var(--text); 
  border-color: var(--border); 
}

/* Inputs */
.field { 
  display: grid; 
  gap: 6px; 
}

.field label { 
  color: var(--muted); 
  font-size: var(--text-sm); 
}

.input, .select {
  width: 100%; 
  height: 44px; 
  padding: 10px 12px; 
  border-radius: 12px; 
  border: 1px solid var(--border); 
  background: var(--panel); 
  color: var(--text); 
  outline: none; 
  transition: border-color .15s, box-shadow .15s;
  /* Improve input text clarity */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-size: var(--text);
}

.input:focus, .select:focus { 
  border-color: var(--primary); 
  box-shadow: 0 0 0 3px rgba(58,134,255,.25); 
}

/* List */
.list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: grid; 
  gap: var(--space-3); 
}

.list-item { 
  display: flex; 
  align-items: center; 
  gap: var(--space-3); 
  padding: var(--space-3) var(--space-4); 
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  background: var(--panel); 
}

.item-right { 
  margin-left: auto; 
  color: var(--muted); 
}

/* Bottom Navigation */
.tabbar { 
  position: fixed; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 30; 
  background: rgba(12,14,20,.92); 
  backdrop-filter: saturate(160%) blur(10px); 
  border-top: 1px solid var(--border); 
}

@media (prefers-color-scheme: light) { 
  .tabbar { 
    background: rgba(255,255,255,.9); 
  } 
}

.tabbar__inner { 
  max-width: 720px; 
  margin: 0 auto; 
  display: grid; 
  grid-auto-flow: column; 
  gap: 8px; 
  padding: 8px 10px calc(8px + var(--safe-bottom)); 
}

.tab { 
  display: grid; 
  justify-items: center; 
  align-items: center; 
  gap: 4px; 
  padding: 8px; 
  border-radius: 12px; 
  color: var(--muted); 
  text-decoration: none; 
  font-weight: 600; 
  text-shadow: none; 
  cursor: pointer;
  /* Ensure tab text is clear */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tab:hover { 
  background: rgba(255,255,255,.04); 
  color: var(--text); 
}

.tab.active { 
  background: linear-gradient(180deg, var(--primary), #2d6de0); 
  color: #fff; 
  box-shadow: var(--shadow-fab); 
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

.tab svg { 
  width: 24px; 
  height: 24px; 
}

/* FAB (Log tab only) */
.fab { 
  position: fixed; 
  right: 16px; 
  bottom: calc(76px + var(--safe-bottom)); 
  z-index: 40; 
  width: 56px; 
  height: 56px; 
  border-radius: 16px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  background: linear-gradient(180deg, var(--primary), #2d6de0); 
  color: #fff; 
  box-shadow: var(--shadow-fab); 
  text-decoration: none; 
  font-weight: 800; 
  cursor: pointer;
  /* Enhanced FAB text clarity */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Banners */
.banner { 
  position: sticky; 
  top: 0; 
  z-index: 25; 
  display: none; 
  grid-template-columns: 1fr auto; 
  gap: var(--space-2); 
  align-items: center; 
  padding: 8px var(--space-4); 
  font-size: var(--text-sm); 
}

.banner.offline { 
  display: grid; 
  background: rgba(255, 197, 61, .12); 
  color: #ffd166; 
  border-bottom: 1px solid rgba(255, 197, 61, .35); 
}

/* Typography helpers */
.h1 { 
  font-size: var(--text-2xl); 
  font-weight: 700; 
  letter-spacing: -.01em; 
  margin: 0 0 var(--space-3); 
  /* Ensure heading clarity */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.muted { 
  color: var(--muted); 
}

/* Utility */
.row { 
  display: flex; 
  gap: var(--space-3); 
  align-items: center; 
}

.right { 
  margin-left: auto; 
}

.space-2 { 
  height: var(--space-2); 
}

.space-3 { 
  height: var(--space-3); 
}

.space-4 { 
  height: var(--space-4); 
}

/* Bottom Sheet Menu */
.sheet { 
  position: fixed; 
  inset: 0; 
  z-index: 50; 
  display: none; 
}

.sheet[data-open="true"] { 
  display: block; 
}

.sheet__backdrop { 
  position: absolute; 
  inset: 0; 
  background: rgba(0,0,0,.4); 
}

.sheet__panel { 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: var(--panel); 
  border-top-left-radius: 16px; 
  border-top-right-radius: 16px; 
  box-shadow: var(--shadow-card); 
  border: 1px solid var(--border); 
  padding: var(--space-2) var(--space-4) calc(var(--space-4) + var(--safe-bottom)); 
}

.sheet__title { 
  font-weight: 700; 
  margin: var(--space-2) 0; 
  /* Ensure sheet title clarity */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sheet__list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

.sheet__item { 
  padding: 12px 4px; 
  border-bottom: 1px solid var(--border); 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  color: var(--text); 
  text-decoration: none; 
  cursor: pointer;
  /* Ensure sheet item text clarity */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--text);
}

.sheet__item:last-child { 
  border-bottom: 0; 
}

.h1, h1, h2, h3, label { 
  color: var(--text); 
  text-shadow: none; 
}

.subtitle, .muted { 
  color: var(--muted); 
}

/* Dark mode text enhancement */
@media (prefers-color-scheme: dark) {
  .title,
  h1, h2, h3,
  .btn:not(.ghost):not(.secondary),
  .tab.active,
  .fab,
  .sheet__title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  
  /* Ensure all text elements have proper smoothing in dark mode */
  .title, h1, h2, h3, .subtitle, .muted, .tab, .icon-btn {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Brand chip in header */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand img { width: 28px; height: 28px; object-fit: cover; border-radius: 999px; border: 1px solid var(--border); }
.brand .label { font-weight: 700; font-size: var(--text-sm); color: var(--text); letter-spacing: .2px; }

/* High DPI screen optimization */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .btn, .tab, .fab, .title, h1, h2, h3 {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

/* Bridge legacy link to new theme */
/* @import url('/assets/css/theme.css'); */

/* Legacy selectors kept for current pages until full refactor */
main { 
  padding-bottom: calc(84px + env(safe-area-inset-bottom)); 
}

label { 
  display: grid; 
  gap: 6px; 
  font-size: var(--text-sm); 
  color: var(--muted); 
  /* Enhanced label clarity */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input, select { 
  height: 44px; 
  padding: 10px 12px; 
  border-radius: 12px; 
  border: 1px solid var(--border); 
  background: var(--panel); 
  color: var(--text); 
  font-size: var(--text);
  /* Enhanced input text clarity */
  -webkit-font-smoothing: subpixel-antialiated;
  -moz-osx-font-smoothing: auto;
}

input:focus, select:focus { 
  border-color: var(--primary); 
  box-shadow: 0 0 0 3px rgba(58,134,255,.25); 
  outline: none; 
}

/* Legacy .btn override with enhanced clarity */
.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  height: 44px; 
  padding: 0 var(--space-4); 
  border-radius: 12px; 
  border: 1px solid transparent; 
  font-weight: 700; 
  text-decoration: none; 
  cursor: pointer; 
  background: linear-gradient(180deg, var(--primary), #2d6de0); 
  color: #fff; 
  box-shadow: var(--shadow-fab);
  /* Enhanced legacy button clarity */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

/* Legacy .card override with enhanced clarity */
.card { 
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--card); 
  border: 1px solid var(--border); 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-card); 
  padding: var(--space-4);
  /* Ensure card content is clear */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Enhanced .error clarity */
.error { 
  color: var(--danger); 
  font-weight: 600; 
  background: rgba(255,107,107,.08); 
  border: 1px solid rgba(255,107,107,.25); 
  padding: 10px 12px; 
  border-radius: 12px;
  /* Enhanced error text clarity */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: none;
}