/* ============================================================================
   CoachForce CRM — Global Primitives (Sprint 3)

   Authority: docs/projects/style/CoachForce_Token_Layer_Decision_v1_0.md (v1.2)
   Sprint:    docs/projects/style/Sprint_3_Portal_Shell_Global_Primitives.md
   Audit:    docs/projects/style/Sprint_3_Audit.md

   Five primitive families, each declared once and consumed across every
   portal via the shell. Every primitive references --cf-* tokens from
   design-tokens.css — no hex values appear below.

     1. Button hierarchy   — Decision §6.2 / brief §3.6
     2. Avatar component   — Decision §4.10 + §6.7 / brief §3.5
     3. Eyebrow variants   — Decision §5.4 / brief §3.7
     4. Tab variants       — Decision §6.4 / brief §3.8
     5. Section card       — Decision §6.1 / brief §3.9

   Legacy aliases (per Sprint 3 audit) keep existing markup cascading
   non-breaking. Aliases are page-touch-renamed in Sprints 4–7; do not
   delete them in this sprint.

   Champion Standard rules upheld in this file:
     - No hex values (all colour through --cf-* tokens).
     - No box-shadow (Decision §4.8).
     - Sharp corners except documented exceptions.
     - No font names, sizes, or weights duplicated (typography uses tokens
       and the body face --font-family-primary).
   ============================================================================ */


/* ============================================================================
   1. BUTTON HIERARCHY — Decision §6.2 / brief §3.6
   Variants: primary, secondary, tertiary, destructive.
   States:   :hover, :active, :disabled.
   ============================================================================ */

.cf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 8px 16px;
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition:
        background-color 120ms ease,
        color 120ms ease,
        border-color 120ms ease;
}

.cf-button:focus-visible {
    outline: 2px solid var(--cf-teal);
    outline-offset: 2px;
}

/* Primary — ink fill, white text */
.cf-button--primary {
    background: var(--cf-ink);
    color: #ffffff;
    border-color: var(--cf-ink);
}

.cf-button--primary:hover:not(:disabled) {
    background: var(--cf-ink-soft);
    border-color: var(--cf-ink-soft);
}

.cf-button--primary:active:not(:disabled) {
    background: var(--cf-ink-mute);
    border-color: var(--cf-ink-mute);
}

/* Secondary — ink outline, ink text, transparent fill */
.cf-button--secondary {
    background: transparent;
    color: var(--cf-ink);
    border-color: var(--cf-ink);
}

.cf-button--secondary:hover:not(:disabled) {
    background: var(--cf-ink);
    color: #ffffff;
}

.cf-button--secondary:active:not(:disabled) {
    background: var(--cf-ink-soft);
    border-color: var(--cf-ink-soft);
    color: #ffffff;
}

/* Tertiary — ink text, no border, no fill */
.cf-button--tertiary {
    background: transparent;
    color: var(--cf-ink);
    border-color: transparent;
    padding-left: 8px;
    padding-right: 8px;
}

.cf-button--tertiary:hover:not(:disabled) {
    color: var(--cf-ink-soft);
    text-decoration: underline;
}

.cf-button--tertiary:active:not(:disabled) {
    color: var(--cf-ink-mute);
}

/* Destructive — danger fill, white text */
.cf-button--destructive {
    background: var(--cf-status-danger);
    color: #ffffff;
    border-color: var(--cf-status-danger);
}

.cf-button--destructive:hover:not(:disabled) {
    /* Slight darken via inheriting status-danger token (no second hex). */
    filter: brightness(0.92);
}

.cf-button--destructive:active:not(:disabled) {
    filter: brightness(0.85);
}

/* Disabled — applies to every variant. No hover effect. */
.cf-button:disabled,
.cf-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Size modifier — small */
.cf-button--sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* ----------------------------------------------------------------------------
   Button aliases — Sprint 3 audit, populated for top-leverage classes.
   These do NOT redefine colours/sizes; they import the canonical specs
   above by sharing the same selectors. Pages that hardcode their own
   button styles in page-specific CSS will not cascade — they are addressed
   in the per-page sprint that owns them.
   ---------------------------------------------------------------------------- */

/* `.btn` baseline — adopts .cf-button shell defaults (sharp corners,
   inline-flex, padding) without forcing a colour. Pages that combine
   `.btn` with `.btn-primary` / `.btn-secondary` get the colour treatment
   from the variant alias below. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 8px 16px;
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition:
        background-color 120ms ease,
        color 120ms ease,
        border-color 120ms ease;
}

.btn:focus-visible {
    outline: 2px solid var(--cf-teal);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--cf-ink);
    color: #ffffff;
    border-color: var(--cf-ink);
}

.btn-primary:hover:not(:disabled) {
    background: var(--cf-ink-soft);
    border-color: var(--cf-ink-soft);
}

.btn-primary:active:not(:disabled) {
    background: var(--cf-ink-mute);
    border-color: var(--cf-ink-mute);
}

.btn-secondary {
    background: transparent;
    color: var(--cf-ink);
    border-color: var(--cf-ink);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--cf-ink);
    color: #ffffff;
}

.btn-secondary:active:not(:disabled) {
    background: var(--cf-ink-soft);
    border-color: var(--cf-ink-soft);
    color: #ffffff;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============================================================================
   2. AVATAR COMPONENT — Decision §4.10 + §6.7 / brief §3.5
   Sharp-cornered filled square with white initials. Three sizes; eight
   palette slots. Slot 1 is reserved for self.
   ============================================================================ */

.cf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    color: #ffffff;
    font-family: var(--font-family-primary);
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    overflow: hidden;
    /* Default slot for unrecovered hash — slot 2 (teal). */
    background: var(--cf-avatar-2);
}

/* Sizes */
.cf-avatar--40 { width: 40px; height: 40px; font-size: 14px; }
.cf-avatar--28 { width: 28px; height: 28px; font-size: 11px; }
.cf-avatar--24 { width: 24px; height: 24px; font-size: 10px; }

/* Palette slots */
.cf-avatar--slot-1 { background: var(--cf-avatar-1); }
.cf-avatar--slot-2 { background: var(--cf-avatar-2); }
.cf-avatar--slot-3 { background: var(--cf-avatar-3); }
.cf-avatar--slot-4 { background: var(--cf-avatar-4); }
.cf-avatar--slot-5 { background: var(--cf-avatar-5); }
.cf-avatar--slot-6 { background: var(--cf-avatar-6); }
.cf-avatar--slot-7 { background: var(--cf-avatar-7); }
.cf-avatar--slot-8 { background: var(--cf-avatar-8); }

/* Image variant — when an avatar wraps an <img> instead of initials.
   The image fills the square; sharp corners preserved. */
.cf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ----------------------------------------------------------------------------
   Avatar aliases — legacy patterns. Each alias reproduces the .cf-avatar
   baseline; pages that want a specific size or slot must add the
   .cf-avatar--40 / .cf-avatar--slot-N modifiers. The aliases below give
   a sensible default (28px, slot 2 / teal) so legacy markup like
   `<div class="user-avatar">MA</div>` still renders as a sharp teal square.
   ---------------------------------------------------------------------------- */

.user-avatar,
.nav-user-avatar,
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0;
    background: var(--cf-avatar-2);
    color: #ffffff;
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar img,
.nav-user-avatar img,
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ============================================================================
   3. EYEBROW — Decision §5.4 / brief §3.7
   11px tracked caps, mute colour. Two variants:
     --card    : with the 8px teal square (major section headers in cards).
     --within  : without the square (sub-section labels inside cards).
   ============================================================================ */

.cf-eyebrow {
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cf-text-mute);
    margin: 0;
}

.cf-eyebrow--card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cf-eyebrow--card::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--cf-teal);
    flex-shrink: 0;
}

.cf-eyebrow--within {
    /* Sub-section label — same baseline; tighter tracking permitted. */
    letter-spacing: 0.12em;
}


/* ============================================================================
   4. TABS — Decision §6.4 / brief §3.8
   Container has the bottom border. Two patterns:
     --content : navigation tabs (no count pills).
     --filter  : filter tabs (count pills on every tab).
   Active state for content tabs: bold word + 2px ink underline.
   Active state for filter tabs:  word + count pill in teal fill + 2px teal underline.
   ============================================================================ */

.cf-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--cf-border-subtle);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cf-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 16px;
    margin-bottom: -1px; /* sit on the container's border */
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cf-text-mute);
    cursor: pointer;
    text-decoration: none;
    transition: color 120ms ease, border-color 120ms ease;
}

.cf-tab:hover:not(.cf-tab--active) {
    color: var(--cf-ink);
}

.cf-tab:focus-visible {
    outline: 2px solid var(--cf-teal);
    outline-offset: -2px;
}

/* Content-tab active state — bold word + ink underline */
.cf-tabs--content .cf-tab--active {
    color: var(--cf-ink);
    font-weight: 700;
    border-bottom-color: var(--cf-ink);
}

/* Filter-tab active state — teal underline; pill turns teal-filled */
.cf-tabs--filter .cf-tab--active {
    color: var(--cf-ink);
    border-bottom-color: var(--cf-teal);
}

/* Count pill — used in filter tabs. Pill is the only documented circle
   exception in tab chrome (still sharp; just a small chip). Sharp corners
   per Champion Standard. */
.cf-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--cf-text-mute);
    background: var(--cf-surface-page);
    border: 1px solid var(--cf-border-subtle);
    border-radius: 0;
}

.cf-tabs--filter .cf-tab--active .cf-tab__count {
    color: #ffffff;
    background: var(--cf-teal);
    border-color: var(--cf-teal);
}

/* ----------------------------------------------------------------------------
   Tab aliases — `.tab-btn` is the most common legacy pattern (22 uses).
   Maps to the filter-tab default (most common usage).
   ---------------------------------------------------------------------------- */

.tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 16px;
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cf-text-mute);
    cursor: pointer;
    text-decoration: none;
    transition: color 120ms ease, border-color 120ms ease;
}

.tab-btn:hover:not(.active) {
    color: var(--cf-ink);
}

.tab-btn.active {
    color: var(--cf-ink);
    border-bottom-color: var(--cf-teal);
}


/* ============================================================================
   5. SECTION CARD — Decision §6.1 / brief §3.9
   Standard surface for any content block. Sharp corners, 0.5px subtle
   border, white fill, no shadow. 16–24px padding.
   Optional ribbon at the top for status callouts.
   ============================================================================ */

.cf-section-card {
    display: block;
    background: var(--cf-surface-card);
    border: 1px solid var(--cf-border-subtle);
    border-radius: 0;
    padding: 20px;
    /* No box-shadow per Decision §4.8. */
}

/* Ribbon — top-of-card alert. Decision §6.6 spec: 4px coloured strip
   over a 28px-tall text row with status-soft background and
   status-coloured text. Tightened in Sprint 4 (Phase 2). */
.cf-section-card__ribbon {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -20px -20px 16px;     /* flush to card edges */
    padding: 8px 16px;
    font-family: var(--font-family-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    /* The 4px coloured top strip + soft fill come from the variant
       modifier below. The default (no variant) renders as info. */
    background: var(--cf-status-info-soft);
    color: var(--cf-status-info);
    border-top: 4px solid var(--cf-status-info);
    border-bottom: 1px solid var(--cf-border-subtle);
}

.cf-section-card__ribbon--success {
    background: var(--cf-status-success-soft);
    color: var(--cf-status-success);
    border-top-color: var(--cf-status-success);
}
.cf-section-card__ribbon--warning {
    background: var(--cf-status-warning-soft);
    color: var(--cf-status-warning);
    border-top-color: var(--cf-status-warning);
}
.cf-section-card__ribbon--danger {
    background: var(--cf-status-danger-soft);
    color: var(--cf-status-danger);
    border-top-color: var(--cf-status-danger);
}
.cf-section-card__ribbon--info {
    background: var(--cf-status-info-soft);
    color: var(--cf-status-info);
    border-top-color: var(--cf-status-info);
}

/* Card sub-elements — match Decision §6.1 patterns. */
.cf-section-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.cf-section-card__title {
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cf-ink);
    margin: 0;
}

/* ----------------------------------------------------------------------------
   Card sub-element aliases — `.card-header` (18 uses) and `.card-title`
   (10 uses) are the most common legacy sub-element classes. There is no
   canonical legacy `.card` to alias because each page rolls its own card
   shell — those are touched per-page in Sprints 4–7.
   ---------------------------------------------------------------------------- */

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.card-title {
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cf-ink);
    margin: 0;
}

/* ============================================================================
   6. PAGE TITLE — Decision §5.4 / Sprint 4 §3.1
   The big page-level heading rendered alongside the eyebrow at the top
   of any page that uses the new page-header pattern. Body face (Bebas
   Neue is hero-only per Decision §5.1).
   ============================================================================ */

.cf-page-title {
    font-family: var(--font-family-primary);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--cf-ink);
    margin: 0;
}


/* ============================================================================
   7. CHIPS — Decision §6.3 / Sprint 4 §3.4
   Three tiers:
     --status         : status-coloured outline + label (ACTIVE, INJURED, etc.)
     --category       : category-coloured outline + label (Training/Wellness/Messages)
     --classification : neutral border + ink label (Recreational, Linear, etc.)
   Shared spec: zero radius, 10–11px caps, tracked 0.06–0.08em, 2–3px × 6–8px padding.
   ============================================================================ */

.cf-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--cf-border-strong);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-family-primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cf-ink);
    white-space: nowrap;
}

/* Status tier — outline + label both pick up status colour.
   Variant modifiers select which status. Default = success (teal). */
.cf-chip--status {
    border-color: var(--cf-status-success);
    color: var(--cf-status-success);
}
.cf-chip--status.cf-chip--success {
    border-color: var(--cf-status-success);
    color: var(--cf-status-success);
}
.cf-chip--status.cf-chip--warning {
    border-color: var(--cf-status-warning);
    color: var(--cf-status-warning);
}
.cf-chip--status.cf-chip--danger {
    border-color: var(--cf-status-danger);
    color: var(--cf-status-danger);
}
.cf-chip--status.cf-chip--info {
    border-color: var(--cf-status-info);
    color: var(--cf-status-info);
}

/* Category tier — domain chips (Training/Wellness/Messages). */
.cf-chip--category.cf-chip--cat-training {
    border-color: var(--cf-cat-training);
    color: var(--cf-cat-training);
}
.cf-chip--category.cf-chip--cat-wellness {
    border-color: var(--cf-cat-wellness);
    color: var(--cf-cat-wellness);
}
.cf-chip--category.cf-chip--cat-messages {
    border-color: var(--cf-cat-messages);
    color: var(--cf-cat-messages);
}

/* Classification tier — neutral. */
.cf-chip--classification {
    border-color: var(--cf-border-strong);
    color: var(--cf-ink);
}


/* ============================================================================
   8. PROGRESS BAR — Decision §6.5 / Sprint 4 §3.4
   ============================================================================ */

.cf-progress-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--cf-border-subtle);
    border-radius: 0;
    overflow: hidden;
}

.cf-progress-bar__fill {
    height: 100%;
    background: var(--cf-teal);
    transition: width 200ms ease;
}


/* ============================================================================
   9. VIEW TOGGLE — Sprint 4 §3.3
   Connected pill group, sharp corners, mutually-exclusive segments.
   Active segment = ink fill / white text. Inactive = white fill / ink border.
   Same pattern reusable for any small radio-style view-mode chooser
   (training plan zoom levels in Sprint 6, etc.).
   ============================================================================ */

.cf-view-toggle {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--cf-ink);
    border-radius: 0;
    overflow: hidden;
    /* Each segment carries its own border for separators. The wrapper
       border doubles as the outer line for the first/last segments. */
}

.cf-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: var(--cf-surface-card);
    border: none;
    border-left: 1px solid var(--cf-ink);
    border-radius: 0;
    color: var(--cf-ink);
    font-family: var(--font-family-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.cf-view-toggle__btn:first-child {
    border-left: none;
}

.cf-view-toggle__btn:hover:not(.cf-view-toggle__btn--active) {
    background: var(--cf-surface-page);
}

.cf-view-toggle__btn:focus-visible {
    outline: 2px solid var(--cf-teal);
    outline-offset: -2px;
    z-index: 1;
}

.cf-view-toggle__btn--active {
    background: var(--cf-ink);
    color: #ffffff;
}

/* End cf-primitives.css */