/*
 * Polestar Pilates Asia — Shared Brand Styles
 * Source: extracted from polestarpilatesasia.com (movensmundi theme) Jun 2026
 * ⚠ TEMPORARY — replace with Ash's official brand guidelines when available
 *
 * To update branding across ALL TC review dashboards, edit only this file.
 * Each dashboard imports it via: <link rel="stylesheet" href="/ppa-brand.css">
 */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=League+Spartan:wght@700;800&display=swap');

/* ── Brand tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --ppa-navy:        #223146;   /* primary dark — headers, headings, body text */
  --ppa-navy-mid:    #2e4260;   /* slightly lighter navy for hover states */
  --ppa-blue-grey:   #536884;   /* secondary — subdued text, borders */
  --ppa-gold:        #f6a800;   /* primary accent — CTAs, active, links, hover */
  --ppa-gold-light:  #fff1da;   /* pale gold — chip backgrounds, highlights */
  --ppa-gold-hover:  #e09700;   /* gold darkened for hover */
  --ppa-linen:       #f7f3ee;   /* warm off-white page background */
  --ppa-teal:        #00a6b6;   /* occasional accent */
  --ppa-border:      #a7b9d2;   /* light blue-grey borders */
  --ppa-muted:       #707070;   /* caption / de-emphasised text */
  --ppa-text:        #3d3d3d;   /* body text (not pure black) */
  --ppa-white:       #ffffff;

  /* Override dashboard vars to match brand */
  --bg:              var(--ppa-linen);
  --card:            var(--ppa-white);
  --border:          var(--ppa-border);
  --text:            var(--ppa-navy);
  --text-muted:      var(--ppa-muted);
  --header-bg:       var(--ppa-navy);
  --header-accent:   var(--ppa-gold);
  --green:           #1a7a3a;
  --green-bg:        #d4f0de;
  --amber:           #b45309;
  --amber-bg:        #fef3c7;
  --red:             #b91c1c;
  --red-bg:          #fee2e2;
  --blue:            #1d5fa6;
  --blue-bg:         #dbeafe;
  --purple:          #5b21b6;
  --purple-bg:       #ede9fe;
  --grey:            #6c757d;
  --grey-bg:         #f1f3f5;
  --hover:           #f0ece7;   /* warm hover (linen-tinted) */
  --shadow:          0 1px 4px rgba(34,49,70,.10), 0 2px 12px rgba(34,49,70,.06);
}

/* ── Typography override ──────────────────────────────────────────────────── */
body, .content, .card, table, input, textarea, select, button {
  font-family: 'Poppins', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.section-title, .card-title, .proc-title,
.header-title, .stage-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
}

/* Labels, badges, chips, filter buttons — use League Spartan */
.chip, .pill, .filter-btn, .header-badge,
.stage-status, .proc-status, .label,
.tl-quarter, .tl-year {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-weight: 700;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.header {
  background: var(--ppa-navy);
}

.header-badge {
  background: var(--ppa-gold);
  color: var(--ppa-navy);
  font-weight: 800;
}

/* ── Accent color overrides ───────────────────────────────────────────────── */
/* Primary action buttons → gold */
button.primary, .btn-primary, #refresh-btn,
button[onclick*="refreshStatus"], #btn-csv,
.proc-run-btn, .filter-btn.active {
  background: var(--ppa-gold) !important;
  color: var(--ppa-navy) !important;
  border-color: var(--ppa-gold) !important;
}

button.primary:hover, #refresh-btn:hover {
  background: var(--ppa-gold-hover) !important;
}

/* Links */
a { color: var(--ppa-navy); }
a:hover { color: var(--ppa-gold); }

/* Tab active underline */
.tab-btn.active {
  border-bottom-color: var(--ppa-gold);
  color: var(--ppa-navy);
}

/* Stage step-circle active */
.step-circle.inprogress { background: var(--ppa-gold); color: var(--ppa-navy); border-color: var(--ppa-gold); }

/* KPI card accent */
.kpi-card.ok .value  { color: var(--ppa-gold); }
.kpi-card.blue .value { color: var(--ppa-navy); }

/* Filter button base */
.filter-btn {
  border-color: var(--ppa-border);
  color: var(--ppa-navy);
}

/* Comp chip → navy (matches brand primary) */
.chip-comp     { background: #e8ecf2; color: var(--ppa-navy); }
/* Reformer chip → gold tint */
.chip-reformer { background: var(--ppa-gold-light); color: #7a4a00; }

/* Stage card left border — gold for in-progress */
.stage.inprogress-border { border-left-color: var(--ppa-gold); }

/* ── Background ───────────────────────────────────────────────────────────── */
body { background: var(--ppa-linen); }

/* ── Scrollbar (subtle brand tint) ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ppa-linen); }
::-webkit-scrollbar-thumb { background: var(--ppa-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ppa-blue-grey); }