/* WalkTrack — Mobile-first Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
    --forest:    #1B4332;
    --leaf:      #2D6A4F;
    --sage:      #40916C;
    --mint:      #74C69D;
    --mist:      #B7E4C7;
    --cream:     #F8FAF9;
    --white:     #FFFFFF;
    --ink:       #0D1F17;
    --charcoal:  #2C3E35;
    --stone:     #6B8070;
    --border:    #D8EDE3;
    --shadow:    rgba(27,67,50,.09);
    --shadow-md: rgba(27,67,50,.17);
    --danger:    #C0392B;
    --success:   #27AE60;
    --radius:    10px;
    --radius-lg: 14px;
    --ease:      .2s cubic-bezier(.4,0,.2,1);

    /* header heights — used to offset body */
    --hbar-h:  52px;
    --snav-h:  44px;
    --nav-total: calc(var(--hbar-h) + var(--snav-h));
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
}

/* ══════════════════════════════════════════
   TWO-ROW HEADER
══════════════════════════════════════════ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 12px var(--shadow-md);
}

/* Row 1: branding + user */
.header-bar {
    background: var(--forest);
    height: var(--hbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    gap: .75rem;
}

.header-logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    letter-spacing: -.02em;
    flex-shrink: 0;
}
.header-logo span { color: var(--mint); }

.header-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}

.header-username {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--mist);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.header-signout {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .7rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mist);
    background: rgba(255,255,255,.1);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--ease);
    flex-shrink: 0;
}
.header-signout:hover { background: rgba(255,255,255,.22); color: var(--white); }

/* Row 2: navigation links */
.subnav {
    background: var(--leaf);
    height: var(--snav-h);
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }

/* ── All subnav items share base styles ── */
.subnav-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .9rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mist);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all var(--ease);
    flex-shrink: 0;
}
.subnav-item:hover  { color: var(--white); background: rgba(255,255,255,.08); }
.subnav-item.active { color: var(--white); border-bottom-color: var(--mint); }

/* ── CTA button — always full text ── */
.subnav-cta {
    color: var(--forest);
    background: var(--mint);
    margin: 6px 8px 6px 8px;
    border-radius: 6px;
    border-bottom: none !important;
    padding: 0 .85rem;
}
.subnav-cta:hover { background: var(--white); }

/* ── Secondary items: icon-only on mobile ── */
/* On small screens hide the text label, show larger icon, shrink padding */
@media (max-width: 639px) {
    .subnav-secondary {
        padding: 0 .7rem;
        gap: 0;
        /* Show active indicator as bottom border */
    }
    .subnav-secondary .subnav-label {
        display: none;          /* hide text */
    }
    .subnav-secondary .subnav-icon {
        width: 20px;
        height: 20px;
    }
}

/* On desktop show label and smaller icon */
@media (min-width: 640px) {
    .subnav-secondary .subnav-icon {
        width: 14px;
        height: 14px;
    }
}

/* ══════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════ */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-hero {
    background: linear-gradient(155deg, var(--forest) 0%, var(--leaf) 65%, var(--sage) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 3.5rem;
    position: relative;
    overflow: hidden;
}
.auth-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2374C69D' fill-opacity='0.07'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
.auth-hero-logo { font-size:1.5rem; font-weight:700; color:var(--white); letter-spacing:-.02em; margin-bottom:2.5rem; position:relative; }
.auth-hero-logo span { color: var(--mint); }
.auth-hero h1  { font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight:700; color:var(--white); line-height:1.15; letter-spacing:-.03em; margin-bottom:1rem; position:relative; }
.auth-hero p   { font-size:.95rem; color:var(--mist); max-width:360px; line-height:1.7; position:relative; }
.hero-stats    { display:flex; gap:2rem; margin-top:2.5rem; position:relative; }
.hero-stat-val { font-size:1.8rem; font-weight:700; color:var(--white); font-family:'DM Mono',monospace; line-height:1; }
.hero-stat-label { font-size:.72rem; color:var(--mist); text-transform:uppercase; letter-spacing:.08em; margin-top:.2rem; }

.auth-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 3rem;
    background: var(--white);
    overflow-y: auto;
}
.auth-form-panel h2      { font-size:1.6rem; font-weight:700; color:var(--ink); letter-spacing:-.025em; margin-bottom:.3rem; }
.auth-form-panel .subtitle { color:var(--stone); font-size:.88rem; margin-bottom:1.75rem; }

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-group { margin-bottom: 1.1rem; }
.form-group label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}
.form-control {
    width: 100%;
    padding: .7rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .95rem;
    color: var(--ink);
    background: var(--cream);
    transition: border-color var(--ease), box-shadow var(--ease);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.form-control:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(64,145,108,.14);
    background: var(--white);
}
select.form-control { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B8070' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem; }

.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .9rem; }

.form-check { display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--charcoal); cursor:pointer; }
.form-check input[type="checkbox"] { accent-color:var(--leaf); width:1rem; height:1rem; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.3rem;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ease);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.btn-primary { background:var(--leaf); color:var(--white); }
.btn-primary:hover { background:var(--forest); box-shadow:0 4px 12px var(--shadow-md); }
.btn-outline { background:transparent; color:var(--leaf); border:1.5px solid var(--leaf); }
.btn-outline:hover { background:var(--leaf); color:var(--white); }
.btn-ghost   { background:transparent; color:var(--stone); border:1.5px solid var(--border); }
.btn-ghost:hover { background:var(--border); color:var(--ink); }
.btn-danger  { background:#FDECEA; color:var(--danger); border:1.5px solid #F5B7B1; }
.btn-full    { width:100%; justify-content:center; }
.btn-lg      { padding:.8rem 1.75rem; font-size:.95rem; }
.btn-sm      { padding:.38rem .75rem; font-size:.78rem; }

/* ══════════════════════════════════════════
   ALERTS
══════════════════════════════════════════ */
.alert { padding:.75rem 1rem; border-radius:var(--radius); font-size:.86rem; margin-bottom:1.1rem; display:flex; align-items:flex-start; gap:.5rem; }
.alert-error   { background:#FDECEA; color:#C0392B; border:1px solid #F5B7B1; }
.alert-success { background:#EAFAF1; color:#1E8449; border:1px solid #A9DFBF; }
.alert-info    { background:#EBF5FB; color:#1A5276; border:1px solid #AED6F1; }

/* ══════════════════════════════════════════
   PAGE LAYOUT
══════════════════════════════════════════ */
.page-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.page-title    { font-size:1.35rem; font-weight:700; color:var(--ink); letter-spacing:-.025em; }
.page-subtitle { font-size:.83rem; color:var(--stone); margin-top:.15rem; }

/* ══════════════════════════════════════════
   STAT CARDS — 3-up on mobile, 5-up on desktop
══════════════════════════════════════════ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    margin-bottom: 1.1rem;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: .85rem .8rem .75rem;
    box-shadow: 0 1px 3px var(--shadow);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.stat-icon  { font-size: 1.2rem; margin-bottom: .1rem; line-height: 1; }
.stat-value { font-size: 1.4rem; font-weight: 700; font-family:'DM Mono',monospace; color:var(--forest); line-height:1; letter-spacing:-.02em; word-break:break-all; }
.stat-unit  { font-size: .65rem; color:var(--stone); font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
.stat-label { font-size: .72rem; color:var(--charcoal); font-weight:500; line-height:1.3; margin-top:.05rem; }

/* ══════════════════════════════════════════
   CHART CARDS
══════════════════════════════════════════ */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.chart-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1rem 1rem;
    box-shadow: 0 1px 3px var(--shadow);
    border: 1px solid var(--border);
    min-width: 0;
}
.chart-title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.chart-title::before {
    content: '';
    display: inline-block;
    width: 3px; height: 12px;
    background: var(--sage);
    border-radius: 2px;
    flex-shrink: 0;
}
.chart-canvas-wrap {
    position: relative;
    height: 200px;  /* taller on mobile for readability */
    width: 100%;
}
.chart-canvas-wrap canvas {
    max-width: 100% !important;
}

/* ══════════════════════════════════════════
   FORM CARDS
══════════════════════════════════════════ */
.form-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1rem;
    box-shadow: 0 1px 3px var(--shadow);
    border: 1px solid var(--border);
    margin-bottom: 1rem;
}
.form-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sage);
    padding-bottom: .65rem;
    margin-bottom: 1rem;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ══════════════════════════════════════════
   GOALS PAGE
══════════════════════════════════════════ */
.goals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.ai-review-card {
    background: linear-gradient(155deg, var(--forest), var(--leaf));
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
.ai-review-card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    background: rgba(116,198,157,.13);
    border-radius: 50%;
    pointer-events: none;
}
.ai-review-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mint);
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.ai-review-text { font-size: .88rem; line-height: 1.78; color: var(--mist); }
.ai-spinner     { display:flex; align-items:center; gap:.65rem; color:var(--mist); font-size:.86rem; }
.spinner        { width:16px; height:16px; border:2px solid rgba(255,255,255,.18); border-top-color:var(--mint); border-radius:50%; animation:spin .8s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════ */
.progress-bar-wrap { background:var(--border); border-radius:8px; height:10px; overflow:hidden; margin:.4rem 0; }
.progress-bar-fill { height:100%; border-radius:8px; background:linear-gradient(90deg,var(--sage),var(--mint)); transition:width .6s cubic-bezier(.4,0,.2,1); }

/* ══════════════════════════════════════════
   PILL SELECTOR
══════════════════════════════════════════ */
.pill-group { display:flex; flex-wrap:wrap; gap:.4rem; }
.pill-opt {
    padding:.38rem .8rem;
    border-radius:100px;
    font-size:.8rem;
    font-weight:500;
    border:1.5px solid var(--border);
    cursor:pointer;
    transition:all var(--ease);
    background:var(--white);
    color:var(--charcoal);
    -webkit-tap-highlight-color:transparent;
    user-select:none;
}
.pill-opt:hover,.pill-opt.selected { background:var(--leaf); color:var(--white); border-color:var(--leaf); }

/* ══════════════════════════════════════════
   WALKS TABLE (reports)
══════════════════════════════════════════ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius:var(--radius-lg); }
.walks-table { width:100%; border-collapse:collapse; font-size:.8rem; min-width:680px; }
.walks-table th { background:var(--forest); color:var(--white); padding:.55rem .8rem; text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.walks-table td { padding:.6rem .8rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.walks-table tr:last-child td { border-bottom:none; }
.walks-table tr:hover td { background:var(--cream); }
.badge { display:inline-block; padding:.18rem .5rem; border-radius:100px; font-size:.7rem; font-weight:600; white-space:nowrap; }
.badge-pos  { background:#EAFAF1; color:#1E8449; }
.badge-neg  { background:#FDECEA; color:#C0392B; }
.badge-neu  { background:#F4F6F7; color:#5D6D7E; }
.badge-pain { background:#FEF9E7; color:#9A7D0A; }

/* ══════════════════════════════════════════
   MISC UTILS
══════════════════════════════════════════ */
.divider { text-align:center; color:var(--stone); font-size:.8rem; margin:1rem 0; position:relative; }
.divider::before,.divider::after { content:''; position:absolute; top:50%; width:44%; height:1px; background:var(--border); }
.divider::before { left:0; } .divider::after { right:0; }
.link { color:var(--leaf); text-decoration:none; font-weight:500; }
.link:hover { text-decoration:underline; }
.text-center { text-align:center; }
.mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:.5rem; } .mb-2 { margin-bottom:1rem; }
/* ── 24-hour time selects ── */
.time-select-wrap {
    display: flex;
    align-items: center;
    gap: .3rem;
}
.time-select-wrap .time-sel {
    flex: 1;
    padding-right: .5rem; /* override the arrow padding slightly */
    min-width: 0;
}
.time-colon {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1;
    flex-shrink: 0;
}

.readonly-field { background:var(--border) !important; cursor:default; }

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════ */

/* Tablet: 2-col charts */
@media (min-width: 640px) {
    .page-wrap { padding: 1.5rem 1.25rem 3rem; }
    .charts-grid { grid-template-columns: 1fr 1fr; }
    .form-card   { padding: 1.5rem; }
    .stat-value  { font-size: 1.55rem; }
    .chart-canvas-wrap { height: 220px; }
}

/* Desktop: 5-col stats, wider goals grid */
@media (min-width: 900px) {
    :root { --hbar-h: 56px; --snav-h: 46px; }
    .page-wrap   { padding: 1.75rem 2rem 3rem; }
    .stats-grid  { grid-template-columns: repeat(5, 1fr); gap: .85rem; }
    .stat-card   { padding: 1rem 1rem .9rem; }
    .stat-value  { font-size: 1.65rem; }
    .goals-grid  { grid-template-columns: 360px 1fr; }
    .chart-canvas-wrap { height: 230px; }
    .header-username { max-width: 240px; }
    /* Secondary items: show label on desktop */
    .subnav-secondary { font-size: .82rem; padding: 0 1.1rem; }
}

/* Auth page: hide hero on mobile */
@media (max-width: 700px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-hero  { display: none; }
    .auth-form-panel { padding: 2rem 1.25rem; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
}

/* Very small: tighten up */
@media (max-width: 380px) {
    .stats-grid  { grid-template-columns: 1fr 1fr; }
    .stat-value  { font-size: 1.25rem; }
}