/*
 * STILL_ — Unified Design System
 * File: /app/assets/css/still.css
 * Version: 2.0 — Gold / Oswald rewrite
 *
 * Single source of truth for design tokens, typography, and base UI
 * shared across ALL pages: forms, reports, and coach dashboard.
 *
 * Canonical direction: dashboard.php gold/Oswald aesthetic.
 *
 * Pages using this:
 *   - /app/forms/assess.php
 *   - /app/forms/checkin.php
 *   - /app/reports/dashboard.php
 *   - /app/reports/bioage.php
 *   - /app/reports/diagnostic.php
 *   - /app/reports/movement.php
 *   - /app/reports/biomechanic.php
 *   - /app/coach/* (all coach dashboard pages)
 */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {

  /* ── Backgrounds (warm off-black, never true #000) ── */
  --bg:              #080807;
  --surface:         #0f0f0e;
  --surface-2:       #161614;
  --surface-3:       #1a1a18;
  --surface-hover:   #1e1d1a;

  /* ── Borders ── */
  --border:          #252420;
  --border-soft:     #1c1c19;
  --border-focus:    #3a3630;
  --border-gold:     rgba(184, 148, 42, 0.25);

  /* ── Gold palette ── */
  --gold:            #b8942a;
  --gold-bright:     #d4ad45;
  --gold-muted:      #6e5818;
  --gold-hot:        #f4e8c1;
  --gold-glow:       rgba(184, 148, 42, 0.10);
  --gold-glow-lg:    rgba(184, 148, 42, 0.06);

  /* ── Ember gradient (gold → burning white) ── */
  --ember-gradient:  linear-gradient(
    to right,
    #6e5818, #b8942a, #d4ad45, #f4e8c1
  );
  --ember-gradient-v: linear-gradient(
    to top,
    #6e5818, #b8942a, #d4ad45, #f4e8c1
  );
  --ember-glow:      0 0 12px rgba(212, 173, 69, 0.35),
                     0 0 24px rgba(184, 148, 42, 0.15);

  /* ── Text (warm white, never cold/blue) ── */
  --white:           #f4f1ea;
  --silver:          #c2bdb4;
  --dim:             #7a746a;
  --dim-2:           #4a4540;

  /* Backward-compat aliases for old class names */
  --text:            var(--white);
  --text-muted:      var(--silver);
  --text-dim:        var(--dim);
  --accent:          var(--gold-bright);
  --accent-bright:   var(--white);

  /* ── State colours (tonal brand palette, not traffic-light) ── */
  --positive:        #8aab7a;
  --positive-dim:    rgba(138, 171, 122, 0.12);
  --negative:        #b85c4a;
  --negative-dim:    rgba(184, 92, 74, 0.12);
  --amber:           var(--gold);
  --amber-dim:       var(--gold-glow);
  --pending:         #8a7a5a;
  --pending-dim:     rgba(138, 122, 90, 0.12);

  /* Semantic aliases */
  --success:         var(--positive);
  --success-dim:     var(--positive-dim);
  --error:           var(--negative);
  --error-dim:       var(--negative-dim);
  --warning:         var(--gold);
  --warning-dim:     var(--gold-glow);

  /* ── Band colours (score 1–5, tonal not neon) ── */
  --band-1:          #b85c4a;
  --band-2:          #c4873a;
  --band-3:          #d4ad45;
  --band-4:          #8aab7a;
  --band-5:          #7a9bb8;

  /* ── Typography ── */
  --font-head:       'Oswald', sans-serif;
  --font-body:       'Inter', sans-serif;
  --font-mono:       'JetBrains Mono', 'Courier New', monospace;

  /* Backward-compat aliases */
  --font-heading:    var(--font-head);

  /* ── Shape ── */
  --r:               4px;
  --r-lg:            8px;

  /* Backward-compat aliases */
  --radius:          var(--r);
  --radius-sm:       var(--r);
  --radius-pill:     100px;

  /* ── Layout ── */
  --max-width-form:   800px;
  --max-width-report: 860px;

  /* ── SOP / info panels (assess.php) ── */
  --sop-bg:          #0d0f0e;
  --sop-border:      #1c1c19;
  --sop-accent:      var(--gold);

  /* ── Required field dot ── */
  --required-dot:    var(--negative);
}


/* ============================================================
   RESET
   ============================================================ */

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


/* ============================================================
   BASE
   ============================================================ */

html {
  font-size: 15px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--white);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--gold-bright);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--white); }

img { max-width: 100%; display: block; }


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

/* Mono-style label (backward compat — now renders as Oswald) */
.brand-mono {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Section label — used across forms and reports */
.section-label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

/* Gold eyebrow — small uppercase label above headings */
.eyebrow {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}


/* ============================================================
   LOGO / BRAND MARK
   ============================================================ */

.still-logo {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--white);
  text-decoration: none;
}

.still-logo span,
.still-logo em {
  color: var(--gold-bright);
  font-style: normal;
}

/* Alias for dashboard.php pattern */
.logo-mark {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--white);
  text-decoration: none;
}
.logo-mark em { color: var(--gold-bright); font-style: normal; }


/* ============================================================
   INPUTS
   ============================================================ */

input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=date],
input[type=datetime-local],
input[type=search],
select,
textarea {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border-focus);
  border-radius: var(--r);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--white);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold-muted);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

input::placeholder,
textarea::placeholder {
  color: var(--dim);
  font-size: 0.875rem;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23565048' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--silver);
  display: block;
  margin-bottom: 6px;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--r);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  text-decoration: none;
  line-height: 1;
}

.btn:hover    { transform: translateY(-1px); }
.btn:active   { transform: scale(0.995); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Primary — gold CTA, sharp corners, confident */
.btn-primary {
  background: var(--gold-bright);
  color: var(--bg);
  padding: 12px 28px;
}
.btn-primary:hover { background: var(--white); color: var(--bg); }

/* Secondary — warm white outline, rounded, bold border */
.btn-secondary {
  background: transparent;
  color: var(--silver);
  border: 3px solid var(--silver);
  border-radius: var(--r-lg);
  padding: 9px 22px;
}
.btn-secondary:hover {
  border-color: var(--white);
  color: var(--white);
  background: rgba(244, 241, 234, 0.04);
}
.btn-secondary:active {
  background: rgba(244, 241, 234, 0.08);
}

/* Small variant */
.btn-sm {
  font-size: 10px;
  padding: 7px 16px;
  letter-spacing: 0.14em;
}
.btn-secondary.btn-sm {
  border-width: 2px;
  padding: 6px 16px;
}

/* Danger */
.btn-danger {
  background: var(--negative-dim);
  color: var(--negative);
  border: 1px solid rgba(184, 92, 74, 0.25);
  padding: 10px 22px;
}
.btn-danger:hover { background: var(--negative); color: var(--white); }

/* Full width */
.btn-block { width: 100%; }

/* Loading state */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid var(--gold-bright);
  border-top-color: transparent;
  border-radius: 50%;
  animation: still-spin 0.6s linear infinite;
}

/* CTA button (dashboard.php pattern) */
.btn-cta {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold-bright);
  padding: 13px 30px;
  border-radius: var(--r);
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.btn-cta:hover {
  background: var(--white);
  color: var(--bg);
  transform: translateY(-1px);
}


/* ============================================================
   BADGES / PILLS
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--r);
  color: var(--dim);
}

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
  flex-shrink: 0;
}

.badge--positive {
  background: var(--positive-dim);
  color: var(--positive);
  border-color: rgba(138, 171, 122, 0.20);
}
.badge--negative {
  background: var(--negative-dim);
  color: var(--negative);
  border-color: rgba(184, 92, 74, 0.20);
}
.badge--amber {
  background: var(--amber-dim);
  color: var(--amber);
  border-color: var(--border-gold);
}
.badge--gold {
  background: var(--gold-glow);
  color: var(--gold-bright);
  border-color: var(--gold-muted);
}
.badge--pending {
  background: var(--pending-dim);
  color: var(--pending);
  border-color: rgba(138, 122, 90, 0.25);
}


/* ============================================================
   BAND SCORE PILLS
   Used in reports: Critical → Excellent (1–5)
   ============================================================ */

.band-pill {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r);
}

.band-pill[data-band="1"] { background: rgba(184, 92, 74, 0.12);   color: var(--band-1); }
.band-pill[data-band="2"] { background: rgba(196, 135, 58, 0.12);  color: var(--band-2); }
.band-pill[data-band="3"] { background: rgba(212, 173, 69, 0.12);  color: var(--band-3); }
.band-pill[data-band="4"] { background: rgba(138, 171, 122, 0.12); color: var(--band-4); }
.band-pill[data-band="5"] { background: rgba(122, 155, 184, 0.12); color: var(--band-5); }


/* ============================================================
   STATUS / ALERT MESSAGES
   ============================================================ */

.status-msg {
  padding: 0.75rem 1rem;
  border-radius: var(--r);
  font-size: 0.9375rem;
  display: none;
}

.status-msg.error {
  display: block;
  background: var(--negative-dim);
  border: 1px solid rgba(184, 92, 74, 0.25);
  color: var(--negative);
}

.status-msg.success {
  display: block;
  background: var(--positive-dim);
  border: 1px solid rgba(138, 171, 122, 0.20);
  color: var(--positive);
}

.error-msg {
  color: var(--negative);
  background: var(--negative-dim);
  border: 1px solid rgba(184, 92, 74, 0.25);
  padding: 1rem 1.5rem;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}


/* ============================================================
   STATE SCREENS
   Full-page centred states: error, success, loading
   ============================================================ */

.state-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2.5rem;
  text-align: center;
  gap: 1rem;
}

.state-screen p {
  color: var(--silver);
  font-size: 15px;
  max-width: 460px;
  line-height: 1.6;
}

.success-icon {
  width: 72px;
  height: 72px;
  border: 2px solid var(--positive);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--positive);
}


/* ============================================================
   EMBER ACCENT COMPONENTS
   Gold → burning white gradient for charts, bars, borders
   Ready for JS animation in V2 (pulse, breathe)
   ============================================================ */

/* Horizontal ember line — section divider or card top accent */
.ember-line {
  height: 1px;
  background: var(--ember-gradient);
  border: none;
  opacity: 0.6;
}

/* Ember bar fill — for chart bars, progress indicators */
.ember-bar {
  background: var(--ember-gradient);
  border-radius: 2px;
  box-shadow: var(--ember-glow);
}

/* Vertical ember bar — for trend chart columns */
.ember-bar-v {
  background: var(--ember-gradient-v);
  border-radius: 2px 2px 0 0;
  box-shadow: var(--ember-glow);
}

/* Add ember top-border accent to any positioned element */
.ember-accent {
  position: relative;
}
.ember-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--ember-gradient);
  pointer-events: none;
}


/* ============================================================
   RAG INDICATORS
   Green / Amber / Red status colours for scores & flags
   ============================================================ */

.rag-green  { color: var(--positive); }
.rag-amber  { color: var(--amber); }
.rag-red    { color: var(--negative); }

.rag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.rag-dot--green  { background: var(--positive); }
.rag-dot--amber  { background: var(--amber); }
.rag-dot--red    { background: var(--negative); }


/* ============================================================
   STAT CARD
   Big number + small label (dashboard, reports, coach pages)
   ============================================================ */

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  position: relative;
  overflow: hidden;
}

/* Gold top-line accent */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-muted), transparent);
}

.stat-card__label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.stat-card__value {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-card__desc {
  font-size: 12px;
  color: var(--silver);
  font-family: var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ============================================================
   DATA TABLE
   Oswald uppercase headers, Inter body, subtle hover
   ============================================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  font-size: 0.9375rem;
  color: var(--silver);
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background 0.1s;
}

.data-table tbody tr:hover {
  background: var(--surface);
}

/* Clickable rows */
.data-table tbody tr.clickable {
  cursor: pointer;
}
.data-table tbody tr.clickable:hover {
  background: var(--surface-2);
}

/* Accent value in a cell */
.data-table .val-accent {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--white);
}


/* ============================================================
   CARD GRID
   Responsive layout for client lists, stat overviews
   ============================================================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s;
}

.card:hover {
  border-color: var(--gold-muted);
}

.card--clickable {
  cursor: pointer;
}
.card--clickable:hover {
  border-color: var(--gold);
}

/* Card with ember top accent */
.card--accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--ember-gradient);
}


/* ============================================================
   TABS
   Horizontal tab navigation
   ============================================================ */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}

.tab {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 12px 20px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tab:hover {
  color: var(--silver);
}

.tab.active,
.tab--active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}


/* ============================================================
   SEARCH BAR
   ============================================================ */

.search-bar {
  position: relative;
  margin-bottom: 24px;
}

.search-bar input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 14px 10px 40px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--white);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-bar input:focus {
  border-color: var(--gold-muted);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.search-bar input::placeholder {
  color: var(--dim);
}

.search-bar__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dim);
  pointer-events: none;
  font-size: 14px;
}


/* ============================================================
   SECTION HEADER (dashboard.php pattern)
   Title ── rule ── date
   ============================================================ */

.section-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
  margin-top: 48px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.section-header:first-child,
.tabs + .section-header,
.alert-banner + .section-header {
  margin-top: 0;
}

.section-title {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

.section-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-date {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ============================================================
   HONEYPOT (bot trap — always hidden from humans)
   ============================================================ */

.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.text-gold    { color: var(--gold-bright); }
.text-silver  { color: var(--silver); }
.text-dim     { color: var(--dim); }
.text-white   { color: var(--white); }
.text-positive { color: var(--positive); }
.text-negative { color: var(--negative); }
.text-amber   { color: var(--amber); }

.font-head    { font-family: var(--font-head); }
.font-body    { font-family: var(--font-body); }

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 8px; }
.mt-2  { margin-top: 16px; }
.mt-3  { margin-top: 24px; }
.mt-4  { margin-top: 32px; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 8px; }
.mb-2  { margin-bottom: 16px; }
.mb-3  { margin-bottom: 24px; }
.mb-4  { margin-bottom: 32px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes still-spin {
  to { transform: rotate(360deg); }
}

@keyframes still-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* V2-ready: ember pulse for JS animation */
@keyframes ember-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
  html { font-size: 14.5px; }

  .btn-primary { padding: 10px 20px; }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .section-rule { display: none; }

  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}