/**
 * CADENCE — Training Mission Link + Orphan UI Styles
 *
 * Single CSS file for the trainings-linking UI:
 *   - Orphan chip (.training-row__orphan-chip)
 *   - Linked-mission handle (.training-row__mission-handle)
 *   - "Link to mission" inline button (.training-row__link-btn)
 *   - Filter banner (.trainings-orphan-filter-banner)
 *   - Trainings list grid (.trainings-orphan-filter-list)
 *   - Picker modal (.training-picker-overlay / .training-picker)
 *
 * The legacy sidebar pill (.orphan-badge*) was retired by mission
 * trainings-ui-tidyup (the sidebar now uses a standard .menu-item entry).
 *
 * SCOPING RULE (mission trainings-ui-tidyup, NFR-003): selectors for the
 * trainings LIST layout are rooted under `.trainings-orphan-filter-list`.
 * The base chip/button/handle classes above stay unscoped because
 * js/posp_module.js hosts them too (via TrainingOrphanIndicator's legacy
 * append path) and must keep rendering unchanged.
 *
 * Reuses CADENCE design tokens where available (--scb-color-*, Inter font).
 * Covers (trainings-ui-tidyup): FR-003, FR-005, FR-006, NFR-001, NFR-003.
 */

/* ==========================================================================
   1. Orphan chip
   ========================================================================== */

.training-row__orphan-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 9999px;

    /* Amber pill — #92400e on #fef3c7 = 6.37:1 (WCAG AA ≥ 4.5:1 ✓) */
    background-color: #fef3c7; /* amber-100 */
    color: #92400e;             /* amber-800 */

    font-family: Inter, system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;

    border: 1px solid #fcd34d; /* amber-300 */
    vertical-align: middle;
}

.training--orphaned {
    /* Subtle left border to highlight the orphaned row */
    border-left: 3px solid #f59e0b; /* amber-400 */
    padding-left: 6px;
}

/* ==========================================================================
   2. "Link to mission" inline button
   ========================================================================== */

.training-row__link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #6366f1; /* indigo-500 */

    background-color: #eef2ff; /* indigo-50 */
    color: #4338ca;             /* indigo-700 */

    font-family: Inter, system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s, color 0.15s;
}

.training-row__link-btn:hover,
.training-row__link-btn:focus-visible {
    background-color: #6366f1; /* indigo-500 */
    color: #ffffff;
    outline: none;
}

.training-row__link-btn:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
}

/* ==========================================================================
   3. Linked-mission handle
   ========================================================================== */

.training-row__mission-handle {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background-color: #ede9fe; /* violet-100 */
    color: #5b21b6;             /* violet-800 */

    font-family: Inter, system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.15s;
}

.training-row__mission-handle:hover,
.training-row__mission-handle:focus-visible {
    background-color: #ddd6fe; /* violet-200 */
    outline: none;
}

.training-row__mission-handle:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 2px;
}

/* ==========================================================================
   4. (retired) Sidebar orphan badge
   --------------------------------------------------------------------------
   The .orphan-badge* pill block was deleted by mission trainings-ui-tidyup:
   the sidebar entry point is now a standard .menu-item with a
   .menu-item__count badge (styled in index.html like every other section).
   ========================================================================== */

/* ==========================================================================
   5. Filter banner
   ========================================================================== */

.trainings-orphan-filter-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    background-color: #fef3c7; /* amber-100 */
    border: 1px solid #fcd34d; /* amber-300 */

    font-family: Inter, system-ui, sans-serif;
    font-size: 0.82rem;
    color: #78350f; /* amber-900 */
}

.trainings-orphan-filter-banner__summary {
    flex: 1;
    font-weight: 500;
}

.trainings-orphan-filter-banner__clear {
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #d97706; /* amber-600 */
    background: transparent;
    color: #92400e;             /* amber-800 */
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.trainings-orphan-filter-banner__clear:hover,
.trainings-orphan-filter-banner__clear:focus-visible {
    background-color: #d97706;
    color: #ffffff;
    outline: none;
}

.trainings-orphan-filter-banner__clear:focus-visible {
    outline: 3px solid #d97706;
    outline-offset: 2px;
}

/* Panel class applied while filter is active */
.trainings--filter-orphan {
    /* Subtle amber tint on the panel container while filter is on */
    background-color: #fffbeb; /* amber-50 */
    border: 1px solid #fde68a; /* amber-200 */
    border-radius: 8px;
    padding: 12px;
}

/* The trainings panel mirrors the .view-section layout contract: it sits
   inside .content-area (overflow: hidden, flex column) and must hand its
   full remaining height to its own scroll surface.  Without this, the
   list of 100+ orphan rows extends past the viewport with no way to
   scroll, because every ancestor clips overflow. */
#trainings-panel[data-trainings-panel] {
    flex: 1;
    min-height: 0;
    display: none;          /* hidden by default; switchSection toggles */
    flex-direction: column;
}
#trainings-panel[data-trainings-panel]:not([hidden]) {
    display: flex;
}

.trainings-orphan-filter-list {
    /* Scroll context for the row list.  flex:1 + min-height:0 lets the
       list consume whatever vertical space the panel has after the
       banner; overflow-y here is the single scroll surface (parents
       clip).  Mirrors the .table-container pattern.
       NFR-003: overflow-x makes wide rows scroll INSIDE this container
       (rows carry a min-width, below); document.body never scrolls
       horizontally because every ancestor clips. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 0 4px 12px;
}

/* --------------------------------------------------------------------------
   Shared grid template — FR-005.  Header and body rows MUST use the exact
   same track list or the columns drift apart (each row is its own grid
   container, which is also why the status/action tracks are FIXED widths:
   max-content would resolve differently per row).  minmax(0, …) on the
   flexible text tracks is essential — it lets content ellipsize instead of
   blowing the track open and re-creating the chip/button overlap.
   -------------------------------------------------------------------------- */
.trainings-orphan-filter-list .training-row,
.trainings-orphan-filter-list .trainings-orphan-filter-list__header {
    display: grid;
    /* FR-004 rebalance (trainings-view-followups): fixed tracks are sized
       to their measured content (13px Inter, live-shaped fixture) and the
       three prose columns split the remaining space by fr weight.  Fixed
       px (never max-content / content-fitted minmax) everywhere else —
       each row is its OWN grid container, so any content-dependent track
       would resolve differently per row and the columns would drift.
         date      84px  — ISO date "2026-06-14" = 80px (tabular-nums)
         duration 120px  — "2.5 days (20 hours)" = 118px (was minmax(0,84px),
                           which cropped virtually every live duration)
         cert      60px  — widest chip "No cert" = 57px
         sc id     54px  — 4-digit SC + "SC ID ▲" header ≈ 52px
         mission   76px  — "#NNNNN" ≈ 50px; "MISSION ID" header ≈ 73px
       Prose columns (needs measured at p50/p90: type 161/214px, provider
       ~100/118px, consultant 109/150px) share what is left — at a 1440px
       viewport ≈ 320px, so the weights below give type ≈ 116px,
       provider ≈ 102px, consultant ≈ 102px; longer values keep the
       ellipsis + title-hover affordance. */
    grid-template-columns:
        84px                   /* date       */
        minmax(0, 1.3fr)       /* type       — ellipsis + title */
        120px                  /* duration   */
        minmax(0, 1.15fr)      /* provider   — ellipsis + title */
        60px                   /* cert       */
        minmax(0, 1.15fr)      /* consultant — ellipsis + title */
        54px                   /* sc id      */
        76px                   /* mission id */
        158px                  /* status     — fits the full "Not linked to
                                  a mission" chip at the default font size.
                                  LOAD-BEARING for mission #32 non-overlap —
                                  do not shrink. */
        126px;                 /* action     — fits "Link to mission…".
                                  LOAD-BEARING for mission #32 non-overlap —
                                  do not shrink. */
    /* 8px (was 12px) trades 36px of inter-column air for prose-column
       width; non-overlap is guaranteed by the minmax(0,…) tracks +
       per-cell ellipsis + inner chips (#32 architecture), not by gap. */
    column-gap: 8px;
    align-items: center;
    /* Below this width the LIST scrolls horizontally (overflow-x above)
       instead of squeezing chip/button into a collision. */
    min-width: 960px;
    /* FR-003: stretch header+rows to the full scroll-container width when
       more than 960px is available (the fr tracks absorb the surplus);
       the plain 960px line above stays as the fallback for engines
       without max() support. */
    min-width: max(960px, 100%);
}

/* Unified trainings rows rendered by TrainingOrphanFilter.  Same grid
   shape for linked and unlinked rows so the columns line up regardless
   of link state.  No WP subject is ever rendered inside this grid (the
   only subject the app surfaces lives in the picker — see further down). */
.trainings-orphan-filter-list .training-row {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;          /* slate-200 */
    border-radius: 8px;
    background-color: #ffffff;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    color: #0f172a;                      /* slate-900 — 17.85:1 on #ffffff ✓ */
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* NOTE: the global `.training--orphaned` accent (3px amber border-left +
   6px padding-left) is intentionally NOT reinstated here — this rule's
   border/padding shorthands outrank it, so orphan and linked rows keep the
   exact same interior width and the grid tracks stay aligned across rows.
   The orphan signal inside the list is the status chip. */

.trainings-orphan-filter-list .training-row.training-row--linked {
    /* slate-50 tint — body text #0f172a = 17.06:1, secondary #475569 =
       7.24:1 on #f8fafc (both ≥ 4.5:1 ✓) */
    background-color: #f8fafc;
}

.trainings-orphan-filter-list .training-row:hover {
    background-color: #f8fafc;          /* slate-50 — same ratios as above ✓ */
    border-color: #cbd5e1;              /* slate-300 */
}

.training-row__col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-row__col--date {
    font-variant-numeric: tabular-nums;
    color: #475569;                     /* slate-600 */
}

.training-row__col--type {
    font-weight: 600;
    color: #0f172a;
}

.training-row__col--duration {
    color: #475569;
}

.training-row__col--provider {
    color: #475569;
}

/* --------------------------------------------------------------------------
   Provider 3-state (FR-005, trainings-view-followups) — named / Internal /
   unknown.  The Internal chip renders INSIDE the provider grid track as an
   inner chip (the #32 non-overlap pattern: the cell is a plain grid cell,
   the pill styling lives on the chip, so nothing paints outside the track).
   -------------------------------------------------------------------------- */

/* "Internal" chip — house .etag-style pill sized to the table's chip idiom
   (11px/600 like the status chips).  Charter rule 8: WHITE text on an
   AA-dark background — #475569 (slate-600) vs #ffffff = 7.58:1 (≥ 4.5:1 ✓,
   verified with UIContrast in tests/trainings/provider_state.test.mjs). */
.trainings-orphan-filter-list .training-row__provider-chip {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    background-color: #475569;          /* slate-600 */
    color: #ffffff;                     /* white — 7.58:1 on slate-600 ✓ */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* When the marker coexists with a provider name the chip precedes the
   text (marker wins the STATE; the name stays visible after it). */
.trainings-orphan-filter-list .training-row__provider-chip--with-name {
    margin-right: 6px;
}

/* Unknown-provider placeholder — an EXPLICIT muted label (never a blank
   cell, FR-005).  #64748b (slate-500) = 4.76:1 on #ffffff and 4.55:1 on
   the #f8fafc hover/linked tint (both ≥ 4.5:1 ✓, NFR-002).  12px keeps
   the full "Provider unknown" string (≈ 94px) inside the rebalanced
   provider track at 1440px. */
.trainings-orphan-filter-list .training-row__col--provider-unknown {
    color: #64748b;                     /* slate-500 */
    font-size: 12px;
}

.training-row__col--cert {
    justify-self: start;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    background-color: #f1f5f9;          /* slate-100 */
    color: #475569;                     /* slate-600 */
}

.training-row__col--cert-yes {
    background-color: #dcfce7;          /* green-100 */
    color: #166534;                     /* green-800 */
}

.training-row__col--cert-no {
    background-color: #fee2e2;          /* red-100 */
    color: #991b1b;                     /* red-800 */
}

/* Header row above the trainings list — the grid template itself is the
   SHARED rule further up (same track list as .training-row, FR-005). */
.trainings-orphan-filter-list .trainings-orphan-filter-list__header {
    padding: 6px 12px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* slate-500 on the panel's amber-50 tint (#fffbeb) = 4.59:1; on plain
       #ffffff = 4.76:1 (both ≥ 4.5:1 ✓) */
    color: #64748b;
}

/* Header cells clip like body cells so a narrow track never overlaps its
   neighbour. */
.trainings-orphan-filter-list__header [role="columnheader"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Each sortable header is a button so it's keyboard-accessible. */
.trainings-orphan-filter-list__header [role="columnheader"] {
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.trainings-orphan-filter-list__header button[role="columnheader"]:hover,
.trainings-orphan-filter-list__header button[role="columnheader"]:focus-visible {
    color: #0f172a;                     /* slate-900 */
    outline: none;
}
.trainings-orphan-filter-list__header button[role="columnheader"]:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.trainings-orphan-filter-list__header span[role="columnheader"] {
    cursor: default;
}

/* Status cell — a dedicated grid track (FR-005).  The cell itself is a
   plain grid cell; the pill styling lives on the inner chip so the pill
   hugs its text and can never paint outside the cell's track. */
.trainings-orphan-filter-list .training-row__col--status {
    min-width: 0;
}

/* Generic status chip (currently the "Linked" variant; the orphan variant
   reuses the shared .training-row__orphan-chip class, overridden below). */
.trainings-orphan-filter-list .training-row__status-chip {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trainings-orphan-filter-list .training-row__status-chip--linked {
    /* Success-green family per mission #30: green-800 on green-100 —
       #166534 on #dcfce7 = 6.49:1 (≥ 4.5:1 ✓).  Never #10b981. */
    background-color: #dcfce7;          /* green-100 */
    color: #166534;                     /* green-800 */
}

/* Orphan chip inside the grid's status cell: drop the legacy inline
   margin and ellipsize instead of clipping if the track is ever squeezed
   (full text stays reachable via the chip's title attribute).  The base
   .training-row__orphan-chip colors (#92400e on #fef3c7 = 6.37:1 ✓) are
   defined in section 1 and shared with PoSP — do not fork them. */
.trainings-orphan-filter-list .training-row__orphan-chip {
    display: inline-block;
    max-width: 100%;
    margin-left: 0;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* If a linked-mission handle is rendered into the status cell it must fit
   the same track (colors defined in section 3: #5b21b6 on #ede9fe =
   7.57:1 ✓). */
.trainings-orphan-filter-list .training-row__col--status .training-row__mission-handle {
    display: inline-block;
    max-width: 100%;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Consultant column — slightly looser text-overflow than other cells
   because "lastName, firstName" can be long. */
.training-row__col--sp {
    color: #0f172a;
    font-weight: 500;
}
.training-row__col--sc-id {
    color: #475569;
    font-variant-numeric: tabular-nums;
}
.training-row__col--mission-id {
    color: #475569;
    font-variant-numeric: tabular-nums;
}
.trainings-orphan-filter-list .training-row__col--actions {
    /* Dedicated action track (FR-005): TrainingOrphanIndicator renders
       the "Link to mission…" button INTO this cell, so it can never
       overlap the status chip. */
    min-width: 0;
}

/* The link button inside the grid's action cell: drop the legacy inline
   margin and clip within the track (the base .training-row__link-btn
   styles in section 2 are shared with PoSP hosts — do not fork them).
   Idle: #4338ca on #eef2ff = 7.07:1 ✓. */
.trainings-orphan-filter-list .training-row__link-btn {
    margin-left: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/* Hover/focus fill: the shared rule uses #ffffff on #6366f1 = 4.47:1,
   which fails AA by a hair.  Scoped fix to indigo-600 here (#ffffff on
   #4f46e5 = 6.29:1 ✓) so PoSP-hosted buttons keep their exact legacy
   rendering. */
.trainings-orphan-filter-list .training-row__link-btn:hover,
.trainings-orphan-filter-list .training-row__link-btn:focus-visible {
    background-color: #4f46e5;          /* indigo-600 */
    color: #ffffff;
}

/* Filter chips (All / Orphans only / Linked only). */
.trainings-orphan-filter-chips {
    display: inline-flex;
    gap: 4px;
    padding: 2px;
    border-radius: 9999px;
    background-color: #f1f5f9;          /* slate-100 */
    margin: 0 12px;
}
.trainings-orphan-filter-chip {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 9999px;
    padding: 4px 12px;
    font: 600 11px/1.4 Inter, system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.trainings-orphan-filter-chip:hover {
    color: #0f172a;
}
.trainings-orphan-filter-chip:focus-visible {
    outline: 2px solid #6366f1;         /* indigo-500 */
    outline-offset: 2px;
}
.trainings-orphan-filter-chip--active,
.trainings-orphan-filter-chip--active:hover {
    background-color: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* ==========================================================================
   6. Picker modal
   ========================================================================== */

.training-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(15, 23, 42, 0.5); /* slate-900/50 */
    backdrop-filter: blur(2px);
}

.training-picker-overlay--loading {
    cursor: wait;
}

.training-picker {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
    display: flex;
    flex-direction: column;

    font-family: Inter, system-ui, sans-serif;
}

/* Header */
.training-picker header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
}

.training-picker h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a; /* slate-900 */
}

.training-picker__close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.25rem;
    color: #64748b; /* slate-500 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
}

.training-picker__close:hover {
    background-color: #f1f5f9; /* slate-100 */
}

.training-picker__close:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
}

/* Mission list */
.training-picker__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
}

.training-picker__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.12s;
}

.training-picker__row:hover {
    background-color: #f8fafc; /* slate-50 */
}

.training-picker__row input[type="radio"] {
    accent-color: #6366f1; /* indigo-500 */
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.training-picker__row label,
.training-picker__row .training-picker__row-label {
    flex: 1;
    cursor: pointer;
    font-size: 0.875rem;
    color: #1e293b; /* slate-800 */
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

/* Picker mission row segments — Mission ID, SP name, SC ID, subject.
   The subject is the ONE WP subject the app surfaces (Erik 2026-05-15). */
.training-picker__row-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;                     /* slate-600 */
    padding: 1px 6px;
    border-radius: 4px;
    background-color: #f1f5f9;          /* slate-100 */
}
.training-picker__row-sp {
    font-weight: 600;
    color: #0f172a;
}
.training-picker__row-sc {
    font-variant-numeric: tabular-nums;
    color: #6366f1;                     /* indigo-500 */
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: #eef2ff;          /* indigo-50 */
}
.training-picker__row-subject {
    color: #334155;                     /* slate-700 */
    flex: 1 1 100%;
    margin-top: 2px;
    font-size: 0.8125rem;
}

/* Focus ring on radio rows for keyboard navigation */
.training-picker__row input[type="radio"]:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
}

/* Empty state */
.training-picker__empty {
    padding: 24px 20px;
    text-align: center;
    color: #64748b; /* slate-500 */
    font-size: 0.875rem;
}

/* Loading state */
.training-picker__loading {
    padding: 24px 20px;
    text-align: center;
    color: #64748b; /* slate-500 */
    font-size: 0.875rem;
}

/* Footer */
.training-picker footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0; /* slate-200 */
}

.training-picker__cancel {
    padding: 6px 16px;
    border-radius: 7px;
    border: 1px solid #cbd5e1; /* slate-300 */
    background: transparent;
    color: #475569; /* slate-600 */
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.training-picker__cancel:hover {
    background-color: #f1f5f9; /* slate-100 */
}

.training-picker__cancel:focus-visible {
    outline: 24px solid #6366f1; /* 24 px focus ring per NFR-007 */
    outline-offset: 2px;
}

.training-picker__submit {
    padding: 6px 16px;
    border-radius: 7px;
    border: none;
    background-color: #6366f1; /* indigo-500 */
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
}

.training-picker__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.training-picker__submit:not(:disabled):hover {
    background-color: #4f46e5; /* indigo-600 */
}

.training-picker__submit:focus-visible {
    outline: 24px solid #a5b4fc; /* 24 px focus ring — indigo-300 */
    outline-offset: 2px;
}

/* Error region */
.training-picker__error {
    margin: 0 20px 14px;
    padding: 10px 14px;
    border-radius: 7px;
    background-color: #fef2f2; /* red-50 */
    border: 1px solid #fca5a5; /* red-300 */
    color: #b91c1c;             /* red-700 */
    font-size: 0.82rem;
}

/* ==========================================================================
   7. Print styles
   ========================================================================== */

@media print {
    .training-picker-overlay,
    .trainings-orphan-filter-banner__clear,
    .training-row__link-btn {
        display: none !important;
    }
}