/**
 * CADENCE — Training Mission Link + Orphan UI Styles
 *
 * Single CSS file for all WP01 + WP02 styles:
 *   - Orphan chip (.training-row__orphan-chip)
 *   - Linked-mission handle (.training-row__mission-handle)
 *   - "Link to mission" inline button (.training-row__link-btn)
 *   - Sidebar badge (.orphan-badge)
 *   - Filter banner (.trainings-orphan-filter-banner)
 *   - Picker modal (.training-picker-overlay / .training-picker)
 *
 * Reuses CADENCE design tokens where available (--scb-color-*, Inter font).
 * Covers: FR-004, FR-006, FR-007, NFR-007
 */

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

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

    /* Amber pill — 7:1 contrast against #92400e on amber-100 background */
    background-color: #fef3c7; /* amber-100 */
    color: #92400e;             /* amber-800 — passes WCAG AA at 7:1 */

    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. Sidebar orphan badge
   ========================================================================== */

.orphan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid #f59e0b; /* amber-400 */

    background-color: #fffbeb; /* amber-50 */
    color: #78350f;             /* amber-900 */

    font-family: Inter, system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.4;

    transition: background-color 0.15s;
}

.orphan-badge:hover,
.orphan-badge:focus-visible {
    background-color: #fef3c7; /* amber-100 */
    outline: none;
}

.orphan-badge:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

.orphan-badge__count {
    font-size: 1rem;
    font-weight: 700;
    color: #b45309; /* amber-700 */
    min-width: 1.5ch;
    text-align: center;
}

.orphan-badge__label {
    font-size: 0.78rem;
    color: #78350f; /* amber-900 */
}

/* ==========================================================================
   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. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 0 4px 12px;
}

/* 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 {
    display: grid;
    grid-template-columns:
        minmax(96px, 110px)    /* date       */
        minmax(140px, 1.4fr)   /* type       */
        minmax(110px, 1fr)     /* duration   */
        minmax(120px, 1fr)     /* provider   */
        minmax(72px, 84px)     /* cert       */
        minmax(160px, 1.4fr)   /* consultant */
        minmax(72px, 90px)     /* sc id      */
        minmax(96px, 110px)    /* mission id */
        minmax(72px, 88px)     /* status     */
        1fr;                   /* actions cell — chip + Link button */
    column-gap: 12px;
    align-items: center;
    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 */
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.trainings-orphan-filter-list .training-row.training-row--linked {
    background-color: #f8fafc;          /* slate-50 — subtle linked tint */
}

.trainings-orphan-filter-list .training-row:hover {
    background-color: #f8fafc;          /* slate-50 */
    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;
}

.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 — replicates the row grid so the
   columns line up. */
.trainings-orphan-filter-list__header {
    display: grid;
    grid-template-columns:
        minmax(96px, 110px)
        minmax(140px, 1.4fr)
        minmax(110px, 1fr)
        minmax(120px, 1fr)
        minmax(72px, 84px)
        minmax(160px, 1.4fr)
        minmax(72px, 90px)
        minmax(96px, 110px)
        minmax(72px, 88px)
        1fr;
    column-gap: 12px;
    padding: 6px 12px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;                     /* slate-500 */
}

/* 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 chip — always renders, color-coded. */
.training-row__col--status {
    justify-self: start;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    background-color: #f1f5f9;
    color: #475569;
}
.training-row__col--status-orphan {
    background-color: #fef3c7;          /* amber-100 */
    color: #92400e;                     /* amber-800 */
}
.training-row__col--status-linked {
    background-color: #dcfce7;          /* green-100 */
    color: #166534;                     /* green-800 */
}

/* 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;
}
.training-row__col--actions {
    /* Indicator-added chip + button render as direct children of the
       row, not inside this column.  Keep this cell empty for grid
       alignment but allow the decorations to overflow visually. */
    min-width: 0;
}

/* 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 {
    .orphan-badge,
    .training-picker-overlay,
    .trainings-orphan-filter-banner__clear,
    .training-row__link-btn {
        display: none !important;
    }
}