/* ============================================================================
   MOTIV ANALYTICS HUB — DESIGN SYSTEM
   Canonical tokens + core components for "The Hub" (hub.motivsports.com).
   This is the single source of truth: every new page must use these values.

   Usage for design references / Claude Design:
   - Keep the :root tokens and @font-face block verbatim.
   - Build on the component classes below, or copy their exact values inline.
   - Dark theme only. Do not introduce new colors, fonts, or radii.
   - The Transducer .otf files ship alongside this file in /fonts.
   ============================================================================ */

/* ---- Fonts (Transducer — the Motiv brand typeface) ------------------------ */
@font-face{font-family:'Transducer';src:url('fonts/Transducer-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Transducer';src:url('fonts/Transducer-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Transducer';src:url('fonts/Transducer-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Transducer Ext';src:url('fonts/Transducer-ExtendedBold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Transducer Ext';src:url('fonts/Transducer-ExtendedBlackOblique.otf') format('opentype');font-weight:900;font-style:italic;font-display:swap}

:root{
  /* ---- Brand (exact, from the Motiv brand guide) ---- */
  --crimson:#f3294e;   /* Crimson Red   — alerts / urgent / soonest event      */
  --greyred:#d0cac9;   /* Grey Red      — multi-region neutral accent          */
  --darkblue:#222430;  /* Dark Blue     — brand dark (reference)               */
  --sky:#96caf5;       /* Light Skyblue — VR / Vacation Races                  */
  --green:#d3ee5b;     /* Energy Green  — primary accent, UK, revenue          */
  --violet:#bd99d8;    /* Dynamic Violet— NA / Motiv US                        */

  /* ---- UI palette (dark theme) ---- */
  --bg:#0a0c11;        /* page background base (plus two radial glows, below)  */
  --bg-2:#0e1118;      /* icon wells, table header/footer, calendar block      */
  --panel:#12151e;     /* cards / panels / inputs / pills                      */
  --panel-2:#171b26;   /* hover / raised surface                               */
  --row-hover:#1b1f2b; /* search-result & row hover                           */
  --line:#1f2533;      /* hairline borders, dividers                          */
  --line-2:#2b3346;    /* stronger borders, inputs, scrollbar thumb           */
  --t1:#eef1f7;        /* primary text                                        */
  --t2:#98a3b6;        /* secondary text                                      */
  --t3:#566073;        /* tertiary / muted labels / placeholders              */
  --warn:#f0b13e;      /* amber — stale / behind-pace                         */
  --ok:#7bd88f;        /* green dot — "all systems live"                      */

  /* ---- Region → color (semantic; drives left borders, badges, filters) ---- */
  --na:var(--violet);  /* NA / Motiv US   */
  --uk:var(--green);   /* UK              */
  --vr:var(--sky);     /* Vacation Races  */
  /* Multi-region → var(--greyred) */

  /* ---- Type families ---- */
  --fx:'Transducer Ext','Transducer','Verdana',system-ui,sans-serif; /* display / big numbers */
  --fb:'Transducer','Verdana',system-ui,-apple-system,sans-serif;    /* body / UI / data      */

  /* ---- Radii ---- */
  --r-card:14px;   /* large cards / tables */
  --r-tile:11px;   /* dashboard tiles      */
  --r-input:9px;   /* inputs / buttons     */
  --r-badge:6px;   /* square tags          */
  --r-pill:30px;   /* full pills           */

  /* ---- Accent fill (green KPI card) ---- */
  --accent-grad:linear-gradient(150deg,var(--green),#bfe038);
  --on-accent:#0c0e13; /* dark text on green */
}

/* ---- Base ---------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  /* Two faint radial glows over the base bg, fixed on scroll */
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(189,153,216,.10), transparent 60%),
    radial-gradient(900px 640px at -8% 8%, rgba(150,202,245,.07), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--t1);font-family:var(--fb);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(211,238,91,.28)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
*::-webkit-scrollbar-track{background:transparent}
.tabular{font-variant-numeric:tabular-nums}  /* always use on numbers */

/* ---- Type roles ---------------------------------------------------------- */
.eyebrow{font-family:var(--fb);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--t3)}
.h1-display{font-family:var(--fx);font-weight:900;font-style:italic;font-size:30px;letter-spacing:.005em;text-transform:uppercase;line-height:1.05;color:var(--t1)}
.h2-section{font-family:var(--fx);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--t1)}
.kpi-number{font-family:var(--fx);font-weight:900;font-style:italic;font-size:42px;line-height:.86;font-variant-numeric:tabular-nums;color:var(--t1)}
.label{font-family:var(--fb);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t2)}

/* Section header: green tick + uppercase label */
.sec-hd{display:flex;align-items:center;gap:11px;margin:20px 0 12px}
.sec-hd .tick{width:18px;height:4px;border-radius:3px;background:var(--green)}

/* ---- Layout shell -------------------------------------------------------- */
/* Full-viewport app: sticky 60px top bar + content. Content max-width 1640px,
   centered, 26px side gutters. */
.app{height:100vh;display:flex;flex-direction:column;min-height:0}
.content{max-width:1640px;margin:0 auto;width:100%;padding:22px 26px 48px}

.topbar{display:flex;align-items:center;gap:22px;padding:0 26px;height:60px;flex-shrink:0;
  border-bottom:1px solid var(--line);background:rgba(10,12,17,.72);backdrop-filter:blur(10px);position:relative;z-index:40}
/* Animated gradient "wire" under the top bar */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--green),var(--sky),var(--violet),transparent);
  background-size:200% 100%;opacity:.5;animation:wire 7s linear infinite}

/* Breadcrumb back-link used on sub-pages */
.crumb{display:inline-flex;align-items:center;gap:7px;font-family:var(--fb);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--t3);cursor:pointer}
.crumb:hover{color:var(--t2)}

/* ---- Badges (region tags) ------------------------------------------------ */
.badge{font-family:var(--fb);font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:4px;border:1px solid;white-space:nowrap}
.badge.na{color:var(--na);background:rgba(189,153,216,.12);border-color:rgba(189,153,216,.3)}
.badge.uk{color:var(--uk);background:rgba(211,238,91,.12);border-color:rgba(211,238,91,.3)}
.badge.vr{color:var(--vr);background:rgba(150,202,245,.12);border-color:rgba(150,202,245,.3)}
.badge.new{color:var(--on-accent);background:var(--green);border-color:var(--green)}

/* Status day-pill (event cards): kind = soon / up / far / past */
.pill{font-family:var(--fb);font-size:10px;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}
.pill.soon{background:rgba(243,41,78,.16);color:var(--crimson)}
.pill.up{background:rgba(189,153,216,.16);color:var(--violet)}
.pill.far{background:rgba(150,202,245,.14);color:var(--sky)}
.pill.past{background:rgba(86,96,115,.18);color:var(--t2)}

/* ---- Segmented filter / toggle ------------------------------------------- */
.filters{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-input);overflow:hidden;background:var(--panel)}
.filters button{font-family:var(--fb);font-size:10.5px;font-weight:700;padding:7px 14px;background:transparent;border:none;
  color:var(--t2);text-transform:uppercase;letter-spacing:.05em;transition:.1s}
.filters button.active{background:var(--t1);color:var(--on-accent)}
/* region-tinted active state */
.filters button.active[data-region="na"]{background:var(--na)}
.filters button.active[data-region="uk"]{background:var(--uk);color:var(--on-accent)}
.filters button.active[data-region="vr"]{background:var(--vr)}

/* Round pill filter (portfolio-style) */
.pill-btn{font-family:var(--fb);font-size:11px;font-weight:700;padding:7px 13px;border-radius:var(--r-pill);letter-spacing:.02em;
  white-space:nowrap;background:var(--panel);border:1px solid var(--line-2);color:var(--t2);transition:.1s}
.pill-btn.on-violet{background:rgba(189,153,216,.16);border-color:var(--violet);color:var(--violet)}
.pill-btn.on-green{background:rgba(211,238,91,.16);border-color:var(--green);color:var(--green)}
.pill-btn.on-sky{background:rgba(150,202,245,.16);border-color:var(--sky);color:var(--sky)}

/* ---- Buttons / inputs ---------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-input);
  color:var(--t1);font-family:var(--fb);font-size:11.5px;font-weight:700;padding:9px 14px;letter-spacing:.02em}
.btn:hover{border-color:var(--t2)}
.input{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-input);color:var(--t1);
  font-family:var(--fb);font-size:12px;padding:9px 14px;outline:none}
.input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(211,238,91,.13)}

/* ---- Cards --------------------------------------------------------------- */
/* Base panel/card. Add a 3px left accent border color-coded by region/status. */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:15px 16px}
.card.r-na{border-left:3px solid var(--na)}
.card.r-uk{border-left:3px solid var(--uk)}
.card.r-vr{border-left:3px solid var(--vr)}
.card.r-multi{border-left:3px solid var(--greyred)}
/* region-tinted lift on hover */
.card.hoverable{transition:transform .12s,background .12s,box-shadow .12s;cursor:pointer}
.card.hoverable:hover{transform:translateY(-2px);background:var(--panel-2)}

/* KPI card: label → big number → optional secondary/delta row. */
.kpi-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:17px 19px;display:flex;flex-direction:column}
.kpi-card.accent{background:var(--accent-grad);border-color:var(--green);color:var(--on-accent)}
.kpi-card.accent .label,.kpi-card.accent .kpi-number{color:var(--on-accent)}

/* ---- Pacing bar (reg/rev progress) --------------------------------------- */
.bar-track{flex:1;height:6px;background:var(--line);border-radius:5px;overflow:hidden}
.bar-fill{height:100%;border-radius:5px;width:var(--w);animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
.bar-fill.reg{background:var(--violet)}   /* registrations */
.bar-fill.rev{background:var(--green)}    /* revenue */
.pct{font-family:var(--fb);font-size:11.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--t1)}
.pct.hit{color:var(--green)}              /* >= 100% of target */
.pct.warn{color:var(--warn)}              /* behind pace */

/* ---- Data table (portfolio-style) ---------------------------------------- */
.table{border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);overflow:hidden}
.table-scroll{overflow-x:auto}
.table-head{padding:13px 20px;border-bottom:1px solid var(--line-2);background:var(--bg-2)}
.table-row{padding:12px 20px;border-bottom:1px solid var(--line)}
.table-row:hover{background:var(--panel-2)}
.table-total{padding:14px 20px;background:var(--bg-2);border-top:1px solid var(--line-2)}
.th{font-family:var(--fb);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);cursor:pointer;user-select:none}
.th.active{color:var(--t1)}
.th.hl{color:var(--green)}   /* sorted-by-this-year highlight */
.td{font-family:var(--fb);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--t2)}
.td.num{text-align:right}
.td.null{color:var(--t3)}    /* render nulls as "—" */

/* ---- Freshness dot ------------------------------------------------------- */
.fresh{font-family:var(--fb);font-size:10px;color:var(--t3);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fresh .fd{width:6px;height:6px;border-radius:50%;background:var(--t3)}
.fresh.ok{color:var(--t2)} .fresh.ok .fd{background:var(--ok)}
.fresh.stale{color:var(--warn)} .fresh.stale .fd{background:var(--warn)}

/* ---- Live status chip (top bar) ------------------------------------------ */
.live-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-family:var(--fb);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:beat 2.2s infinite}

/* ---- Avatar / view pill (top bar) ---------------------------------------- */
.avatar{width:32px;height:32px;border-radius:7px;background:var(--violet);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#1a1426;font-family:var(--fx)}
.view-pill{font-family:var(--fb);font-size:10px;font-weight:700;padding:5px 10px;border-radius:5px;letter-spacing:.07em;
  text-transform:uppercase;background:rgba(211,238,91,.12);color:var(--green);border:1px solid rgba(211,238,91,.32)}

/* ---- Animations ---------------------------------------------------------- */
@keyframes wire{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(123,216,143,.55)}70%{box-shadow:0 0 0 6px rgba(123,216,143,0)}100%{box-shadow:0 0 0 0 rgba(123,216,143,0)}}
@keyframes grow{from{width:0}to{width:var(--w)}}
@keyframes viewfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---- Responsive breakpoints (match the hub) ------------------------------ */
/* <=1180px: multi-column grids collapse to 1 column; app height becomes auto. */
/* <=720px:  hide live-chip/clock/sign-out; shrink hero; KPI grids to 2 cols.  */