/* ============================================================
   utilities.css — Static utility classes for SoapMetrics Web
   Naming: property-abbreviated + value (px unless noted)
   Generated from inline style audit of all JS view files
   ============================================================ */

/* ─── DISPLAY ─────────────────────────────────────────────── */
.d-flex          { display: flex; }
.d-inline-flex   { display: inline-flex; }
.d-grid          { display: grid; }
.d-block         { display: block; }
.d-inline-block  { display: inline-block; }
.d-inline        { display: inline; }
.d-none          { display: none; }

/* ─── FLEX ────────────────────────────────────────────────── */
.ai-center       { align-items: center; }
.ai-start        { align-items: flex-start; }
.ai-end          { align-items: flex-end; }
.ai-stretch      { align-items: stretch; }
.ai-baseline     { align-items: baseline; }

.jc-center       { justify-content: center; }
.jc-between      { justify-content: space-between; }
.jc-end          { justify-content: flex-end; }
.jc-start        { justify-content: flex-start; }
.jc-around       { justify-content: space-around; }
.jc-evenly       { justify-content: space-evenly; }

.fw-wrap         { flex-wrap: wrap; }
.fw-nowrap       { flex-wrap: nowrap; }

.fd-column       { flex-direction: column; }
.fd-row          { flex-direction: row; }
.fd-column-rev   { flex-direction: column-reverse; }

.f-1             { flex: 1; }
.f-shrink-0      { flex-shrink: 0; }
.f-grow-1        { flex-grow: 1; }
.f-grow-0        { flex-grow: 0; }
.f-auto          { flex: auto; }

/* ─── GAP ─────────────────────────────────────────────────── */
.gap-2           { gap: 2px; }
.gap-3           { gap: 3px; }
.gap-4           { gap: 4px; }
.gap-6           { gap: 6px; }
.gap-8           { gap: 8px; }
.gap-10          { gap: 10px; }
.gap-12          { gap: 12px; }
.gap-14          { gap: 14px; }
.gap-16          { gap: 16px; }
.gap-20          { gap: 20px; }
.gap-24          { gap: 24px; }
.gap-32          { gap: 32px; }

/* ─── PADDING: ALL ────────────────────────────────────────── */
.p-0             { padding: 0; }
.p-2             { padding: 2px; }
.p-3             { padding: 3px; }
.p-4             { padding: 4px; }
.p-5             { padding: 5px; }
.p-6             { padding: 6px; }
.p-8             { padding: 8px; }
.p-10            { padding: 10px; }
.p-12            { padding: 12px; }
.p-14            { padding: 14px; }
.p-16            { padding: 16px; }
.p-20            { padding: 20px; }
.p-24            { padding: 24px; }
.p-30            { padding: 30px; }
.p-32            { padding: 32px; }
.p-40            { padding: 40px; }
.p-48            { padding: 48px; }

/* ─── PADDING: DIRECTIONAL ────────────────────────────────── */
.px-0            { padding-left: 0; padding-right: 0; }
.px-4            { padding-left: 4px; padding-right: 4px; }
.px-6            { padding-left: 6px; padding-right: 6px; }
.px-8            { padding-left: 8px; padding-right: 8px; }
.px-10           { padding-left: 10px; padding-right: 10px; }
.px-12           { padding-left: 12px; padding-right: 12px; }
.px-14           { padding-left: 14px; padding-right: 14px; }
.px-16           { padding-left: 16px; padding-right: 16px; }
.px-20           { padding-left: 20px; padding-right: 20px; }
.px-24           { padding-left: 24px; padding-right: 24px; }
.px-32           { padding-left: 32px; padding-right: 32px; }

.py-0            { padding-top: 0; padding-bottom: 0; }
.py-1            { padding-top: 1px; padding-bottom: 1px; }
.py-2            { padding-top: 2px; padding-bottom: 2px; }
.py-3            { padding-top: 3px; padding-bottom: 3px; }
.py-4            { padding-top: 4px; padding-bottom: 4px; }
.py-5            { padding-top: 5px; padding-bottom: 5px; }
.py-6            { padding-top: 6px; padding-bottom: 6px; }
.py-8            { padding-top: 8px; padding-bottom: 8px; }
.py-10           { padding-top: 10px; padding-bottom: 10px; }
.py-12           { padding-top: 12px; padding-bottom: 12px; }
.py-14           { padding-top: 14px; padding-bottom: 14px; }
.py-16           { padding-top: 16px; padding-bottom: 16px; }
.py-20           { padding-top: 20px; padding-bottom: 20px; }

.pt-0            { padding-top: 0; }
.pt-2            { padding-top: 2px; }
.pt-4            { padding-top: 4px; }
.pt-8            { padding-top: 8px; }
.pt-10           { padding-top: 10px; }
.pt-12           { padding-top: 12px; }
.pt-16           { padding-top: 16px; }
.pt-20           { padding-top: 20px; }
.pt-24           { padding-top: 24px; }

.pb-0            { padding-bottom: 0; }
.pb-4            { padding-bottom: 4px; }
.pb-6            { padding-bottom: 6px; }
.pb-8            { padding-bottom: 8px; }
.pb-12           { padding-bottom: 12px; }
.pb-16           { padding-bottom: 16px; }
.pb-20           { padding-bottom: 20px; }

.pl-0            { padding-left: 0; }
.pl-4            { padding-left: 4px; }
.pl-12           { padding-left: 12px; }
.pl-16           { padding-left: 16px; }
.pl-34           { padding-left: 34px; }

.pr-0            { padding-right: 0; }
.pr-8            { padding-right: 8px; }
.pr-12           { padding-right: 12px; }
.pr-16           { padding-right: 16px; }
.pr-32           { padding-right: 32px; }
.pr-40           { padding-right: 40px; }

/* ─── MARGIN: ALL ─────────────────────────────────────────── */
.m-0             { margin: 0; }
.m-auto          { margin: auto; }
.mx-auto         { margin-left: auto; margin-right: auto; }

/* ─── MARGIN: DIRECTIONAL ─────────────────────────────────── */
.mt-0            { margin-top: 0; }
.mt-2            { margin-top: 2px; }
.mt-4            { margin-top: 4px; }
.mt-6            { margin-top: 6px; }
.mt-8            { margin-top: 8px; }
.mt-10           { margin-top: 10px; }
.mt-12           { margin-top: 12px; }
.mt-16           { margin-top: 16px; }
.mt-20           { margin-top: 20px; }

.mb-0            { margin-bottom: 0; }
.mb-2            { margin-bottom: 2px; }
.mb-3            { margin-bottom: 3px; }
.mb-4            { margin-bottom: 4px; }
.mb-6            { margin-bottom: 6px; }
.mb-8            { margin-bottom: 8px; }
.mb-10           { margin-bottom: 10px; }
.mb-12           { margin-bottom: 12px; }
.mb-14           { margin-bottom: 14px; }
.mb-16           { margin-bottom: 16px; }
.mb-20           { margin-bottom: 20px; }
.mb-24           { margin-bottom: 24px; }
.mb-32           { margin-bottom: 32px; }

.ml-0            { margin-left: 0; }
.ml-4            { margin-left: 4px; }
.ml-6            { margin-left: 6px; }
.ml-8            { margin-left: 8px; }
.ml-260          { margin-left: 260px; } /* clears the 260px fixed sidebar */
.ml-auto         { margin-left: auto; }

.mr-0            { margin-right: 0; }
.mr-4            { margin-right: 4px; }
.mr-6            { margin-right: 6px; }
.mr-8            { margin-right: 8px; }

/* ─── FONT WEIGHT ─────────────────────────────────────────── */
.fw-300          { font-weight: 300; }
.fw-400          { font-weight: 400; }
.fw-500          { font-weight: 500; }
.fw-600          { font-weight: 600; }
.fw-700          { font-weight: 700; }
.fw-800          { font-weight: 800; }

/* ─── FONT SIZE ───────────────────────────────────────────── */
.fs-10           { font-size: 10px; }
.fs-11           { font-size: 11px; }
.fs-12           { font-size: 12px; }
.fs-13           { font-size: 13px; }
.fs-14           { font-size: 14px; }
.fs-15           { font-size: 15px; }
.fs-16           { font-size: 16px; }
.fs-18           { font-size: 18px; }
.fs-20           { font-size: 20px; }
.fs-22           { font-size: 22px; }
.fs-24           { font-size: 24px; }
.fs-28           { font-size: 28px; }
.fs-32           { font-size: 32px; }
.fs-36           { font-size: 36px; }
.fs-48           { font-size: 48px; }

/* ─── TEXT ALIGN ──────────────────────────────────────────── */
.ta-center       { text-align: center; }
.ta-left         { text-align: left; }
.ta-right        { text-align: right; }

/* ─── TEXT DECORATION ─────────────────────────────────────── */
.td-none         { text-decoration: none; }
.td-underline    { text-decoration: underline; }

/* ─── TEXT TRANSFORM ──────────────────────────────────────── */
.tt-uppercase    { text-transform: uppercase; }
.tt-capitalize   { text-transform: capitalize; }

/* ─── TEXT OVERFLOW / ELLIPSIS ─────────────────────────────── */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── WHITE SPACE ─────────────────────────────────────────── */
.ws-nowrap       { white-space: nowrap; }
.ws-pre-wrap     { white-space: pre-wrap; }
.ws-normal       { white-space: normal; }

/* ─── WORD / OVERFLOW BREAK ───────────────────────────────── */
.word-break-all  { word-break: break-all; }
.word-break-word { word-break: break-word; overflow-wrap: break-word; }

/* ─── LETTER SPACING ──────────────────────────────────────── */
.ls-0            { letter-spacing: 0; }
.ls-half         { letter-spacing: 0.5px; }
.ls-06           { letter-spacing: 0.6px; }
.ls-1            { letter-spacing: 1px; }
.ls-2            { letter-spacing: 2px; }

/* ─── LINE HEIGHT ─────────────────────────────────────────── */
.lh-1            { line-height: 1; }
.lh-1-2          { line-height: 1.2; }
.lh-1-4          { line-height: 1.4; }
.lh-1-5          { line-height: 1.5; }
.lh-1-6          { line-height: 1.6; }

/* ─── BORDER RADIUS ───────────────────────────────────────── */
.br-0            { border-radius: 0; }
.br-2            { border-radius: 2px; }
.br-3            { border-radius: 3px; }
.br-4            { border-radius: 4px; }
.br-5            { border-radius: 5px; }
.br-6            { border-radius: 6px; }
.br-8            { border-radius: 8px; }
.br-10           { border-radius: 10px; }
.br-12           { border-radius: 12px; }
.br-14           { border-radius: 14px; }
.br-16           { border-radius: 16px; }
.br-20           { border-radius: 20px; }
.br-24           { border-radius: 24px; }
.br-50p          { border-radius: 50%; }
.br-full         { border-radius: 9999px; }

/* ─── WIDTH ───────────────────────────────────────────────── */
.w-auto          { width: auto; }
.w-100           { width: 100%; }
.w-14            { width: 14px; }
.w-18            { width: 18px; }
.w-20            { width: 20px; }
.w-24            { width: 24px; }
.w-28            { width: 28px; }
.w-30            { width: 30px; }
.w-32            { width: 32px; }
.w-36            { width: 36px; }
.w-40            { width: 40px; }
.w-44            { width: 44px; }
.w-48            { width: 48px; }
.w-60            { width: 60px; }
.w-64            { width: 64px; }
.w-80            { width: 80px; }
.w-100px         { width: 100px; }
.w-120           { width: 120px; }
.w-140           { width: 140px; }
.w-150           { width: 150px; }
.w-160           { width: 160px; }
.w-200           { width: 200px; }

.min-w-0         { min-width: 0; }
.min-w-36        { min-width: 36px; }
.min-w-80        { min-width: 80px; }
.min-w-100       { min-width: 100px; }
.min-w-140       { min-width: 140px; }
.min-w-180       { min-width: 180px; }
.min-w-200       { min-width: 200px; }
.max-w-100       { max-width: 100%; }
.max-w-70p       { max-width: 70%; }
.max-w-140       { max-width: 140px; }
.max-w-400       { max-width: 400px; }
.max-w-500       { max-width: 500px; }
.max-w-520       { max-width: 520px; }
.max-w-580       { max-width: 580px; }
.max-w-640       { max-width: 640px; }
.max-w-720       { max-width: 720px; }

/* ─── HEIGHT ──────────────────────────────────────────────── */
.h-auto          { height: auto; }
.h-100           { height: 100%; }
.h-100vh         { height: 100vh; }
.h-1             { height: 1px; }
.h-6             { height: 6px; }
.h-8             { height: 8px; }
.h-10            { height: 10px; }
.h-18            { height: 18px; }
.h-20            { height: 20px; }
.h-28            { height: 28px; }
.h-30            { height: 30px; }
.h-32            { height: 32px; }
.h-36            { height: 36px; }
.h-40            { height: 40px; }
.h-44            { height: 44px; }
.h-48            { height: 48px; }
.h-60            { height: 60px; }
.h-64            { height: 64px; }
.h-80            { height: 80px; }

.min-h-0         { min-height: 0; }
.min-h-20        { min-height: 20px; }
.min-h-44        { min-height: 44px; }
.min-h-400       { min-height: 400px; }
.max-h-200       { max-height: 200px; }
.max-h-300       { max-height: 300px; }
.max-h-350       { max-height: 350px; }
.max-h-400       { max-height: 400px; }
.max-h-500       { max-height: 500px; }
.max-h-80vh      { max-height: 80vh; }

/* ─── OVERFLOW ────────────────────────────────────────────── */
.of-hidden       { overflow: hidden; }
.of-auto         { overflow: auto; }
.of-visible      { overflow: visible; }
.of-x-auto       { overflow-x: auto; }
.of-x-hidden     { overflow-x: hidden; }
.of-y-auto       { overflow-y: auto; }
.of-y-hidden     { overflow-y: hidden; }

/* ─── POSITION ────────────────────────────────────────────── */
.pos-relative    { position: relative; }
.pos-absolute    { position: absolute; }
.pos-fixed       { position: fixed; }
.pos-sticky      { position: sticky; }

/* ─── INSET / DIRECTIONAL ─────────────────────────────────── */
.top-0           { top: 0; }
.bottom-0        { bottom: 0; }
.left-0          { left: 0; }
.right-0         { right: 0; }
.inset-0         { inset: 0; }
.top-50p         { top: 50%; }
.left-12         { left: 12px; }
.left-20         { left: 20px; }
.right-8         { right: 8px; }
.top-n2          { top: -2px; }
.right-n2        { right: -2px; }

/* ─── CURSOR ──────────────────────────────────────────────── */
.cur-pointer     { cursor: pointer; }
.cur-default     { cursor: default; }
.cur-grab        { cursor: grab; }
.cur-not-allowed { cursor: not-allowed; }

/* ─── Z-INDEX ─────────────────────────────────────────────── */
.z-1             { z-index: 1; }
.z-10            { z-index: 10; }
.z-40            { z-index: 40; }
.z-50            { z-index: 50; }
.z-100           { z-index: 100; }
.z-110           { z-index: 110; }
.z-200           { z-index: 200; }
.z-1000          { z-index: 1000; }

/* ─── OPACITY ─────────────────────────────────────────────── */
.op-0            { opacity: 0; }
.op-30           { opacity: 0.3; }
.op-50           { opacity: 0.5; }
.op-70           { opacity: 0.7; }
.op-80           { opacity: 0.8; }
.op-100          { opacity: 1; }

/* ─── VISIBILITY ──────────────────────────────────────────── */
.vis-hidden      { visibility: hidden; }
.vis-visible     { visibility: visible; }

/* ─── POINTER EVENTS ──────────────────────────────────────── */
.pe-none         { pointer-events: none; }
.pe-auto         { pointer-events: auto; }

/* ─── USER SELECT ─────────────────────────────────────────── */
.us-none         { user-select: none; -webkit-user-select: none; }
.us-auto         { user-select: auto; }
.us-all          { user-select: all; }

/* ─── RESIZE ──────────────────────────────────────────────── */
.resize-none     { resize: none; }
.resize-vertical { resize: vertical; }
.resize-both     { resize: both; }

/* ─── LIST STYLE ──────────────────────────────────────────── */
.ls-none         { list-style: none; }

/* ─── BOX SIZING ──────────────────────────────────────────── */
.bs-border-box   { box-sizing: border-box; }

/* ─── BORDER: GENERAL ─────────────────────────────────────── */
.b-none          { border: none; }
.b-1             { border: 1px solid var(--border); }
.b-2             { border: 2px solid var(--border); }
.b-3             { border: 3px solid var(--border); }
.bb-1            { border-bottom: 1px solid var(--border); }
.bt-1            { border-top: 1px solid var(--border); }
.bl-1            { border-left: 1px solid var(--border); }
.br-1-solid      { border-right: 1px solid var(--border); }
.bl-3            { border-left: 3px solid var(--border); }
.bl-3-warn       { border-left: 3px solid var(--warning); }

/* ─── BORDER COLOR VARIANTS ───────────────────────────────── */
.b-brand         { border-color: var(--brand); }
.b-muted         { border-color: var(--text-muted); }
.b-transparent   { border-color: transparent; }

/* ─── OBJECT FIT ──────────────────────────────────────────── */
.obj-cover       { object-fit: cover; }
.obj-contain     { object-fit: contain; }

/* ─── BACKGROUND ──────────────────────────────────────────── */
.bg-transparent  { background: transparent; }
.bg-none         { background: none; }
.bg-dark         { background: var(--bg-dark); }
.bg-card         { background: var(--bg-card); }
.bg-primary      { background: var(--bg-primary); }
.bg-card-hover   { background: var(--bg-card-hover); }
.bg-brand        { background: var(--brand); }
.bg-success      { background: var(--success); }
.bg-warning      { background: var(--warning); }
.bg-danger       { background: var(--danger); }
.bg-white        { background: #fff; }
.bg-black        { background: #000; }

/* ─── TEXT COLOR ──────────────────────────────────────────── */
.c-primary       { color: var(--text-primary); }
.c-secondary     { color: var(--text-secondary); }
.c-muted         { color: var(--text-muted); }
.c-brand         { color: var(--brand); }
.c-success       { color: var(--success); }
.c-warning       { color: var(--warning); }
.c-danger        { color: var(--danger); }
.c-white         { color: white; }
.c-black         { color: #000; }
.c-inherit       { color: inherit; }

/* ─── TRANSITION ──────────────────────────────────────────── */
.tr-all-150      { transition: all 0.15s ease; }
.tr-all-200      { transition: all 0.2s ease; }
.tr-all-300      { transition: all 0.3s ease; }
.tr-border-200   { transition: border-color 0.2s ease; }
.tr-color-150    { transition: color 0.15s ease; }

/* ─── TRANSFORM ───────────────────────────────────────────── */
.tf-center-y     { transform: translateY(-50%); }
.tf-center-x     { transform: translateX(-50%); }
.tf-center-both  { transform: translate(-50%, -50%); }

/* ─── GRID: TEMPLATE COLUMNS ──────────────────────────────── */
.gtc-2           { grid-template-columns: repeat(2, 1fr); }
.gtc-3           { grid-template-columns: repeat(3, 1fr); }
.gtc-4           { grid-template-columns: repeat(4, 1fr); }
.gtc-auto-140    { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.gtc-auto-150    { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gtc-auto-260    { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gtc-auto-280    { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gtc-auto-300    { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gtc-fill-140    { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.gtc-fill-280    { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ─── GRID: SPAN ──────────────────────────────────────────── */
.gc-full         { grid-column: 1 / -1; }

/* ─── APPEARANCE / OUTLINE ────────────────────────────────── */
.appearance-none { appearance: none; -webkit-appearance: none; }
.outline-none    { outline: none; }

/* ─── VERTICAL ALIGN ──────────────────────────────────────── */
.va-middle       { vertical-align: middle; }
.va-top          { vertical-align: top; }
.va-baseline     { vertical-align: baseline; }

/* ─── ASPECT RATIO ────────────────────────────────────────── */
.ar-1            { aspect-ratio: 1; }

/* ─── SCROLL ──────────────────────────────────────────────── */
.scroll-smooth   { scroll-behavior: smooth; }
.scroll-x        { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── TEXT WRAPPING ───────────────────────────────────────── */
.text-wrap-balance { text-wrap: balance; }

/* ─── FONT FAMILY ─────────────────────────────────────────── */
.ff-mono         { font-family: monospace; }
.ff-system       { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* ─── ACCENT COLOR ────────────────────────────────────────── */
.accent-brand    { accent-color: var(--brand); }

/* ─── COMMON COMPOSITES ───────────────────────────────────── *
   High-frequency inline style combos found across views.
   These save repetitive multi-class combos.
   ────────────────────────────────────────────────────────── */

/* Flex row: center-aligned with gap */
.flex-center     { display: flex; align-items: center; }
.flex-center-gap-4  { display: flex; align-items: center; gap: 4px; }
.flex-center-gap-6  { display: flex; align-items: center; gap: 6px; }
.flex-center-gap-8  { display: flex; align-items: center; gap: 8px; }
.flex-center-gap-10 { display: flex; align-items: center; gap: 10px; }
.flex-center-gap-12 { display: flex; align-items: center; gap: 12px; }
.flex-center-gap-16 { display: flex; align-items: center; gap: 16px; }

/* Flex row: space-between with center-aligned items (most common pattern) */
.flex-between    { display: flex; justify-content: space-between; align-items: center; }

/* Flex column */
.flex-col        { display: flex; flex-direction: column; }
.flex-col-center { display: flex; flex-direction: column; align-items: center; }

/* Centering: flex center both axes */
.flex-center-both { display: flex; align-items: center; justify-content: center; }

/* Inline-flex centering (for icon containers, avatars) */
.iflex-center    { display: inline-flex; align-items: center; justify-content: center; }

/* Circle avatar containers — common sizes used for coach/student initials */
.circle-18       { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-20       { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-28       { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-30       { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-32       { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-36       { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-40       { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-44       { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-48       { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-60       { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-64       { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.circle-120      { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* Rounded icon box (e.g., sidebar logo, stat card icons) */
.icon-box-36     { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.icon-box-40     { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.icon-box-60     { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }

/* Icon width helper (consistent icon column alignment) */
.icon-w-14       { width: 14px; text-align: center; }
.icon-w-18       { width: 18px; text-align: center; }
.icon-w-20       { width: 20px; text-align: center; }

/* Search input with left icon — the icon uses pos-absolute + tf-center-y */
/* The input needs pl-34 to avoid overlapping the icon */

/* Stat block (used in competition stats, attendance insights, technique analytics) */
.stat-block {
  text-align: center;
  padding: 10px;
  background: var(--bg-card-hover);
  border-radius: 8px;
}
.stat-block-lg {
  text-align: center;
  padding: 12px;
  background: var(--bg-card-hover);
  border-radius: 10px;
}
.stat-block-dark {
  text-align: center;
  padding: 8px;
  background: var(--bg-dark);
  border-radius: 8px;
}

/* Tag / badge — small rounded pill for categories, positions, etc. */
.tag-sm {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-block;
}
.tag-md {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 10px;
  display: inline-block;
}
.tag-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  display: inline-block;
}

/* Separator line (used between form sections, action bars) */
.separator {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}

/* Section header (settings page) */
.section-label {
  padding: 8px 16px 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

/* Settings card wrapper */
.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 4px;
}

/* Row item with bottom border (used in settings, lists, feeds) */
.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.list-row:last-child {
  border-bottom: none;
}
.list-row-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.list-row-compact:last-child {
  border-bottom: none;
}

/* Clickable nav row (settings) */
.nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* Page header row: title left, actions right */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* Page title */
.page-title {
  font-size: 22px;
  font-weight: 700;
}

/* Page subtitle */
.page-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 2px;
}

/* Filter bar card (search + selects row) */
.filter-bar {
  margin-bottom: 16px;
  padding: 14px 16px;
}
.filter-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Search input wrapper with icon */
.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}

/* Empty state (centered muted text in a card) */
.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 40px;
}

/* Tabs row (border-bottom container) */
.tabs-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

/* Card with no padding (for tables) */
.card-flush {
  padding: 0;
  overflow: hidden;
}

/* Message bubble alignment helpers */
.msg-right       { display: flex; justify-content: flex-end; }
.msg-left        { display: flex; justify-content: flex-start; }

/* Full-width centered button (forms) */
.btn-full {
  width: 100%;
  justify-content: center;
}

/* Form spacing: used between form fields */
.form-gap        { margin-bottom: 12px; }
.form-gap-lg     { margin-bottom: 16px; }

/* Progress bar (override width inline, bg inline) */
.progress-sm {
  height: 6px;
  background: var(--bg-dark);
  border-radius: 3px;
  overflow: hidden;
}

/* Unread badge (message threads, notifications) */
.unread-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: var(--danger);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
}

/* Dropdown menu (post actions, context menus) */
.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
  min-width: 140px;
  overflow: hidden;
}
.dropdown-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-item:hover {
  background: var(--bg-card-hover);
}

/* Mobile more menu */
.more-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  bottom: 56px;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

/* Tag: category (purple) */
.tag-category {
  background: rgba(139,92,246,0.12);
  color: #8B5CF6;
}

/* Tag: position (blue) */
.tag-position {
  background: rgba(59,130,246,0.12);
  color: var(--brand);
}

/* Tag: sport */
.tag-sport {
  background: rgba(59,130,246,0.08);
  color: var(--text-secondary);
}

/* Tag: all-levels fallback (grey) */
.tag-all-levels {
  background: rgba(100,100,100,0.2);
  color: var(--text-secondary);
}

/* Section heading with icon */
.section-heading {
  font-size: 14px;
  font-weight: 600;
}

/* Detail label (muted small text) */
.detail-label {
  color: var(--text-muted);
}

/* Detail value */
.detail-value {
  font-weight: 500;
  margin-top: 2px;
}

/* Video link button */
.video-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--brand);
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

/* Tabs row variant with larger bottom margin */
.tabs-row-lg {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

/* Detail stat card (times taught / last taught) */
.detail-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* Belt tag: card grid variant (smaller, block-level) */
.belt-tag-card {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* Belt tag: detail page variant (pill) */
.belt-tag-detail {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

/* ── Noscript fallback (no JS to run applyDynamicStyles) ────── */
.noscript-msg {
  background: #0F172A;
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
}

/* ── min-height: 100vh ────── */
.min-h-100vh { min-height: 100vh; }