/* HSE training — per-page styles. Owned by the HSE training F1 agent.
   Tokens only (--atlas-* / --atlas-hse-*); class prefix .hse-training-*.
   Shared component/layout styles live in hse-base.css (owned by F0, do not edit). */

/* ── Local tab strip (Matrix View/Course Library/Categories, Calendar/List, Attendance tabs) ── */
.hse-training-tabs { display: flex; gap: var(--atlas-space-2); border-bottom: 1px solid var(--atlas-hse-line); margin-bottom: var(--atlas-space-4); flex-wrap: wrap; }
.hse-training-tab {
    background: none; border: none; padding: var(--atlas-space-2) var(--atlas-space-3);
    font-size: .85rem; font-weight: 600; color: var(--atlas-hse-muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.hse-training-tab.active { color: var(--atlas-hse-ok); border-bottom-color: var(--atlas-hse-ok); }
.hse-training-tab:hover { color: var(--atlas-hse-navy); }

/* ── Portal tab strip (Subcontractor Portal pages navigate between routes) ── */
.hse-training-portal-tabs { display: flex; gap: var(--atlas-space-2); flex-wrap: wrap; margin-bottom: var(--atlas-space-5); }
.hse-training-portal-tabs .nav-link { border-radius: var(--atlas-radius-full); font-size: .84rem; font-weight: 600; }

/* ── Matrix table cells ─────────────────────────────────────────────────── */
.hse-training-matrix-cell { text-align: center; font-weight: 700; font-size: .76rem; letter-spacing: .02em; }
.hse-training-matrix-cell.mandat { color: var(--atlas-hse-ok); }
.hse-training-matrix-cell.opt { color: var(--atlas-hse-warn); }
.hse-training-matrix-cell.na { color: var(--atlas-hse-muted); }
.hse-training-course-kind { font-family: var(--atlas-font-mono); font-size: .62rem; color: var(--atlas-hse-muted); margin-left: .4em; }
.hse-training-legend { display: flex; gap: var(--atlas-space-4); flex-wrap: wrap; margin-top: var(--atlas-space-3); font-size: .78rem; color: var(--atlas-hse-muted); }
.hse-training-legend span { display: inline-flex; align-items: center; gap: .35em; }
.hse-training-category-chips { display: flex; gap: var(--atlas-space-2); flex-wrap: wrap; }
.hse-training-category-chip {
    background: var(--atlas-surface-muted); border: 1px solid var(--atlas-hse-line);
    border-radius: var(--atlas-radius-full); padding: .35em .9em; font-size: .8rem; font-weight: 600; color: var(--atlas-hse-navy);
}

/* ── New Worker popover ─────────────────────────────────────────────────── */
.hse-training-popover-wrap { position: relative; display: inline-block; }
.hse-training-popover {
    position: absolute; right: 0; top: calc(100% + var(--atlas-space-2)); z-index: 30; width: 320px;
    background: var(--atlas-surface); border: 1px solid var(--atlas-hse-line);
    border-radius: var(--atlas-radius-xl); box-shadow: var(--atlas-shadow-3); padding: var(--atlas-space-4);
}
.hse-training-popover-opt { border: 1px solid var(--atlas-hse-line); border-radius: var(--atlas-radius-lg); padding: var(--atlas-space-3); margin-bottom: var(--atlas-space-3); }
.hse-training-popover-opt:last-child { margin-bottom: 0; }
.hse-training-rowlink { font-size: .82rem; font-weight: 600; color: var(--atlas-hse-brand); text-decoration: none; }

/* ── Worker profile ─────────────────────────────────────────────────────── */
.hse-training-kv { width: 100%; font-size: .86rem; }
.hse-training-kv td { padding: var(--atlas-space-2) 0; border-bottom: 1px solid var(--atlas-hse-line); }
.hse-training-kv td:first-child { color: var(--atlas-hse-muted); width: 40%; }
.hse-training-kv td:last-child { font-weight: 600; color: var(--atlas-text); }
.hse-training-qr-tile {
    width: 100%; aspect-ratio: 1 / 1; max-width: 200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--atlas-surface-muted); border: 1px dashed var(--atlas-hse-line);
    border-radius: var(--atlas-radius-lg); font-size: 4rem; color: var(--atlas-hse-navy);
}
.hse-training-chip-row { display: flex; gap: var(--atlas-space-2); flex-wrap: wrap; }

/* ── Calendar ────────────────────────────────────────────────────────────── */
.hse-training-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--atlas-hse-line); border: 1px solid var(--atlas-hse-line); border-radius: var(--atlas-radius-md); overflow: hidden; }
.hse-training-cal-head { background: var(--atlas-surface-muted); text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--atlas-hse-muted); padding: var(--atlas-space-2); }
.hse-training-cal-cell { background: var(--atlas-surface); min-height: 84px; padding: var(--atlas-space-2); display: flex; flex-direction: column; gap: 3px; }
.hse-training-cal-cell.is-today { background: var(--atlas-color-primary-soft); }
.hse-training-cal-daynum { font-size: .74rem; font-weight: 700; color: var(--atlas-hse-navy); }
.hse-training-event { font-size: .64rem; font-weight: 700; padding: .15em .5em; border-radius: var(--atlas-radius-xs); color: var(--atlas-text-on-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hse-training-event.ok { background: var(--atlas-hse-ok); }
.hse-training-event.warn { background: var(--atlas-hse-warn); }
.hse-training-event.accent { background: var(--atlas-hse-accent); }
.hse-training-event.purple { background: var(--atlas-hse-purple); }

/* ── Chip-action buttons (approve/reject/confirm/discard etc.) ──────────── */
.hse-training-actions { display: flex; gap: var(--atlas-space-2); }

/* ── Gap rows (Look Ahead planning) ─────────────────────────────────────── */
.hse-training-gaprow { display: flex; align-items: center; justify-content: space-between; gap: var(--atlas-space-3); padding: var(--atlas-space-3); border-radius: var(--atlas-radius-lg); border: 1px solid var(--atlas-hse-line); margin-bottom: var(--atlas-space-3); }
.hse-training-gaprow:last-child { margin-bottom: 0; }
.hse-training-gaprow.covered { background: var(--atlas-hse-ok-soft); border-color: color-mix(in srgb, var(--atlas-hse-ok) 40%, transparent); }
.hse-training-gaprow.gap { background: var(--atlas-hse-warn-soft); border-color: color-mix(in srgb, var(--atlas-hse-warn) 40%, transparent); }
.hse-training-gaprow-title { font-weight: 700; color: var(--atlas-hse-navy); font-size: .88rem; }
.hse-training-gaprow-sub { font-size: .78rem; color: var(--atlas-hse-muted); margin-top: 2px; }

/* ── Seat assignment blocks ──────────────────────────────────────────────── */
.hse-training-seat-block { margin-bottom: var(--atlas-space-5); }
.hse-training-seat-block:last-child { margin-bottom: 0; }
.hse-training-vacant { color: var(--atlas-hse-muted); font-style: italic; font-size: .82rem; }

/* ── Signage / leaderboard (Visual Communication) ───────────────────────── */
.hse-training-signage { border: 1px solid var(--atlas-hse-line); border-radius: var(--atlas-radius-lg); padding: var(--atlas-space-4); background: var(--atlas-hse-navy); color: var(--atlas-text-on-primary); }
.hse-training-signage-alert { background: var(--atlas-hse-no); color: var(--atlas-text-on-primary); border-radius: var(--atlas-radius-md); padding: var(--atlas-space-2) var(--atlas-space-3); font-weight: 700; font-size: .8rem; margin-bottom: var(--atlas-space-3); }
.hse-training-signage-sub { font-size: .74rem; opacity: .75; margin-bottom: 2px; }
.hse-training-signage-campaign { font-size: 1rem; font-weight: 700; }
.hse-training-rank { font-size: 1.1rem; }

/* ── Modal form labels (2026-07-22: Worker Profile + New Worker are modals now,
   plan 2026-07-22 A2/A3 — CSS here, never inline; see WARNINGS section 38) ── */
.hse-training-form-label {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--atlas-hse-muted); margin-bottom: var(--atlas-space-1);
}