/* ============================================================
   FitTrack — Design System
   Signature: the "pulse ring" — a heartbeat-style circular
   progress indicator used for daily goal completion.
   Type: Space Grotesk (display) + Inter (body/data)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* -- Light theme -- */
  --bg:            #F5F7F6;
  --surface:       #FFFFFF;
  --surface-glass: rgba(255,255,255,0.65);
  --border:        #E3E8E6;
  --text:          #10241F;
  --text-muted:    #5B6E68;

  --ink:           #0B2620;
  --teal:          #0D8F79;
  --teal-dark:     #0A6E5C;
  --lime:          #B7E24D;
  --coral:         #FF6F5E;
  --amber:         #F5A524;
  --sky:           #3AA6FF;

  --grad-primary:  linear-gradient(135deg, #0D8F79 0%, #0B6E5C 55%, #08483C 100%);
  --grad-pulse:    linear-gradient(135deg, #B7E24D 0%, #0D8F79 100%);
  --grad-warm:     linear-gradient(135deg, #FF6F5E 0%, #F5A524 100%);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(11,38,32,0.06);
  --shadow-md: 0 8px 24px rgba(11,38,32,0.08);
  --shadow-lg: 0 16px 40px rgba(11,38,32,0.14);

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  color-scheme: light;
}

[data-theme="dark"]{
  --bg:            #0B1512;
  --surface:       #12211D;
  --surface-glass: rgba(18,33,29,0.65);
  --border:        #1E332C;
  --text:          #EAF3EF;
  --text-muted:    #8FA69D;

  --ink:           #EAF3EF;
  --teal:          #21C4A4;
  --teal-dark:     #17A088;
  --lime:          #C6F24E;
  --coral:         #FF8676;

  color-scheme: dark;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height:100vh;
  transition: background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.display{ font-family: var(--font-display); letter-spacing:-0.02em; color: var(--ink); }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ---------------- Layout shell ---------------- */
.app-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}
@media (max-width: 900px){
  .app-shell{ grid-template-columns: 1fr; }
}

/* ---------------- Sidebar ---------------- */
.sidebar{
  background: var(--grad-primary);
  color:#EAFBF6;
  padding: 24px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position: sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  z-index: 40;
}
@media (max-width: 900px){
  .sidebar{
    position: fixed;
    left:0; top:0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open{ transform: translateX(0); }
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:700; font-size:1.3rem;
  color:#fff; padding: 6px 10px 22px;
}
.sidebar-brand .pulse-dot{
  width:12px; height:12px; border-radius:50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(183,226,77,.6);
  animation: pulseDot 2.2s infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(183,226,77,.55); }
  70%{ box-shadow:0 0 0 10px rgba(183,226,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(183,226,77,0); }
}
.nav-link{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius: var(--radius-sm);
  color: rgba(234,251,246,0.78);
  font-size:.93rem; font-weight:500;
  transition: background .15s ease, color .15s ease;
}
.nav-link svg{ width:18px; height:18px; flex-shrink:0; }
.nav-link:hover{ background: rgba(255,255,255,0.08); color:#fff; }
.nav-link.active{ background: rgba(255,255,255,0.16); color:#fff; font-weight:600; }
.sidebar-footer{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,0.12); }

/* ---------------- Topbar (mobile) ---------------- */
.topbar{
  display:none;
  align-items:center; justify-content:space-between;
  padding: 14px 18px;
  background: var(--surface);
  border-bottom:1px solid var(--border);
  position: sticky; top:0; z-index:30;
}
@media (max-width:900px){ .topbar{ display:flex; } }
.hamburger{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
  background: var(--surface); display:flex; align-items:center; justify-content:center;
}
.overlay{
  display:none; position:fixed; inset:0; background:rgba(11,38,32,.4); z-index:35;
}
.overlay.show{ display:block; }

/* ---------------- Main content ---------------- */
.main{ padding: 28px 32px 60px; max-width:1280px; }
@media (max-width:900px){ .main{ padding: 18px 16px 48px; } }

.page-header{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-bottom:24px;
}
.page-header h1{ font-size:1.7rem; font-weight:700; }
.page-header p{ color:var(--text-muted); margin-top:4px; }

/* ---------------- Cards ---------------- */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-glass{
  background: var(--surface-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.grid{ display:grid; gap:18px; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width:1100px){ .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:600px){ .grid-4,.grid-3,.grid-2{ grid-template-columns: 1fr; } }

/* Stat card */
.stat-card{ display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; }
.stat-card .icon-badge{
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--grad-pulse); color:#0B2620;
}
.stat-card .icon-badge svg{ width:20px; height:20px; }
.stat-card .stat-value{ font-family: var(--font-display); font-size:1.6rem; font-weight:700; }
.stat-card .stat-label{ color:var(--text-muted); font-size:.82rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.stat-card .stat-sub{ font-size:.8rem; color: var(--text-muted); }
.stat-card .progress-track{ height:6px; border-radius:6px; background: var(--border); overflow:hidden; margin-top:4px; }
.stat-card .progress-fill{ height:100%; background: var(--grad-pulse); border-radius:6px; transition: width .5s ease; }

/* Pulse ring (signature element) */
.pulse-ring-wrap{ position:relative; width:150px; height:150px; margin:0 auto; }
.pulse-ring-wrap svg{ transform: rotate(-90deg); width:100%; height:100%; }
.pulse-ring-bg{ fill:none; stroke: var(--border); stroke-width:10; }
.pulse-ring-fg{ fill:none; stroke: url(#ringGradient); stroke-width:10; stroke-linecap:round; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.pulse-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pulse-ring-center .val{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; }
.pulse-ring-center .lbl{ font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius: var(--radius-sm); border:none;
  font-weight:600; font-size:.9rem; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--grad-primary); color:#fff; box-shadow: 0 6px 16px rgba(13,143,121,.28); }
.btn-primary:hover{ box-shadow: 0 8px 20px rgba(13,143,121,.38); }
.btn-outline{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-outline:hover{ border-color: var(--teal); color: var(--teal); }
.btn-ghost{ background: rgba(13,143,121,.08); color: var(--teal-dark); }
.btn-danger{ background: var(--coral); color:#fff; }
.btn-sm{ padding:7px 12px; font-size:.8rem; }
.btn-block{ width:100%; }
.btn-icon{ width:38px; height:38px; padding:0; border-radius:10px; border:1px solid var(--border); background:var(--surface); }

.quick-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* Forms */
.form-group{ margin-bottom:16px; }
label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color: var(--text); }
.form-control{
  width:100%; padding:11px 14px; border-radius: var(--radius-sm);
  border:1px solid var(--border); background: var(--surface); color: var(--text); font-size:.92rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{ border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,143,121,.15); outline:none; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.chip-group{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:9px 16px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); font-size:.85rem; font-weight:600; color:var(--text-muted);
}
.chip.active{ background: var(--grad-pulse); color:#0B2620; border-color:transparent; }

/* Table */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.88rem; }
th,td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
th{ color:var(--text-muted); font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; }
tr:last-child td{ border-bottom:none; }

/* Badges */
.badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge-teal{ background: rgba(13,143,121,.12); color: var(--teal-dark); }
.badge-coral{ background: rgba(255,111,94,.14); color:#C1503F; }
.badge-amber{ background: rgba(245,165,36,.16); color:#8A5B0C; }

/* Auth pages */
.auth-shell{
  min-height:100vh; display:grid; place-items:center;
  background: var(--grad-primary);
  padding:20px;
}
.auth-card{
  width:100%; max-width:400px; background: var(--surface);
  border-radius: var(--radius-lg); padding:36px 30px; box-shadow: var(--shadow-lg);
}
.auth-logo{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.auth-logo .pulse-dot{ width:12px; height:12px; border-radius:50%; background: var(--teal); animation: pulseDot 2.2s infinite; }
.auth-card h1{ font-size:1.5rem; margin-bottom:4px; }
.auth-card p.sub{ color:var(--text-muted); font-size:.88rem; margin-bottom:24px; }
.auth-links{ display:flex; justify-content:space-between; font-size:.83rem; margin-top:6px; }

.alert{ padding:12px 14px; border-radius: var(--radius-sm); font-size:.85rem; margin-bottom:16px; }
.alert-error{ background: rgba(255,111,94,.12); color:#B23A2C; border:1px solid rgba(255,111,94,.3); }
.alert-success{ background: rgba(13,143,121,.12); color: var(--teal-dark); border:1px solid rgba(13,143,121,.3); }

/* Toggle switch (theme) */
.switch{ position:relative; width:46px; height:26px; }
.switch input{ opacity:0; width:0; height:0; }
.slider-toggle{
  position:absolute; inset:0; background: var(--border); border-radius:999px; transition:.2s;
}
.slider-toggle::before{
  content:''; position:absolute; height:20px; width:20px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow: var(--shadow-sm);
}
input:checked + .slider-toggle{ background: var(--teal); }
input:checked + .slider-toggle::before{ transform: translateX(20px); }

/* Calendar */
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; }
.cal-day{
  aspect-ratio:1; border-radius:12px; border:1px solid var(--border);
  padding:8px; font-size:.8rem; display:flex; flex-direction:column; gap:4px;
  background: var(--surface); cursor:pointer; transition: box-shadow .15s ease;
}
.cal-day:hover{ box-shadow: var(--shadow-sm); }
.cal-day.today{ border-color: var(--teal); }
.cal-day.muted{ opacity:.35; }
.cal-day .dot-row{ display:flex; gap:3px; flex-wrap:wrap; margin-top:auto; }
.cal-day .dot{ width:6px; height:6px; border-radius:50%; }
.cal-weekday{ text-align:center; font-size:.72rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; }

/* Map / GPS */
#gpsMap{ width:100%; height:320px; border-radius: var(--radius-md); border:1px solid var(--border); background: var(--bg); }
.gps-stat{ text-align:center; }
.gps-stat .val{ font-family:var(--font-display); font-size:1.4rem; font-weight:700; }
.gps-stat .lbl{ font-size:.72rem; color:var(--text-muted); text-transform:uppercase; }

/* Utility */
.text-muted{ color: var(--text-muted); }
.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;}
.mb-1{margin-bottom:8px;} .mb-2{margin-bottom:16px;} .mb-3{margin-bottom:24px;}
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-1{gap:8px;} .gap-2{gap:14px;}
.empty-state{ text-align:center; padding:40px 20px; color: var(--text-muted); }
.empty-state svg{ width:48px; height:48px; margin:0 auto 12px; opacity:.5; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius:8px; }