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

   2026-07-22: mobile field-capture / checkpoint-scan-result rules (chip pickers,
   photo tile, checklist item, critical-defect card, passport-style scan card,
   kv rows, ref-banner, map placeholder, field-row) removed along with the mobile
   screens that used them (New Observation, Daily Checklist, the whole Restricted
   Area Access scan-result set, Audit Findings) — see
   docs/hse-mobile-screens-for-trac.md for the parked spec. */

/* ── Cycle / colour swatch note under banner (Colour Code Inspection) ───── */
.hse-mon-cycle-note {
    display: inline-flex; align-items: center; gap: var(--atlas-space-2);
    font-size: .82rem; color: var(--atlas-hse-muted); margin-bottom: var(--atlas-space-4);
}

/* Colour-code swatch rendered inside the AtlasTable cell (hseMonitoring.js). */
.hse-mon-swatch {
    display: inline-block; width: 12px; height: 12px; border-radius: var(--atlas-radius-full);
    border: 1px solid var(--atlas-border); vertical-align: middle; margin-right: var(--atlas-space-1);
}
.hse-mon-swatch-green  { background: var(--atlas-hse-ok); }
.hse-mon-swatch-orange { background: var(--atlas-hse-warn); }
.hse-mon-swatch-blue   { background: var(--atlas-hse-accent); }
.hse-mon-swatch-red    { background: var(--atlas-hse-no); }

/* ══ POP Observation detail modal ═══════════════════════════════════════════
   Adapted (copied, not refactored) from the legacy Access Control observation
   modal — see .obs-* rules in css/pages/accessControl/accessControl-pages.css.
   Prefixed .hse-obs-* so the two never collide. Tokens only, no inline CSS
   (WARNINGS section 38). */

/* .hse-modal-backdrop lives in hse-base.css (shared by all HSE modals). */

.hse-obs-layout { display: flex; min-height: 0; }
.hse-obs-history-pane {
    width: 250px; min-width: 210px; max-width: 270px;
    background: var(--atlas-surface-sunken); border-right: 1px solid var(--atlas-border);
    padding: var(--atlas-space-4) var(--atlas-space-3); overflow-y: auto; flex-shrink: 0;
}
.hse-obs-detail-pane { flex: 1; overflow-y: auto; min-width: 0; }
.hse-obs-history-title {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--atlas-hse-muted); margin-bottom: var(--atlas-space-3);
}
.hse-obs-history-empty { font-size: .8rem; color: var(--atlas-hse-muted); text-align: center; padding: var(--atlas-space-4) 0; }

.hse-obs-timeline { list-style: none; padding: 0; margin: 0; }
.hse-obs-tl-item { display: flex; gap: var(--atlas-space-2); padding-bottom: var(--atlas-space-4); position: relative; }
.hse-obs-tl-item:not(:last-child)::before {
    content: ''; position: absolute; left: .85rem; top: 1.4rem; bottom: 0; width: 1px; background: var(--atlas-border);
}
.hse-obs-tl-dot {
    width: 1.7rem; height: 1.7rem; border-radius: var(--atlas-radius-full);
    display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0;
    background: var(--atlas-surface-sunken); color: var(--atlas-text-secondary);
}
.hse-obs-tl-dot-primary   { background: var(--atlas-color-primary-soft); color: var(--atlas-color-primary); }
.hse-obs-tl-dot-success   { background: var(--atlas-sev-ok-bg);     color: var(--atlas-sev-ok-text); }
.hse-obs-tl-dot-danger    { background: var(--atlas-sev-danger-bg); color: var(--atlas-sev-danger-text); }
.hse-obs-tl-dot-warning   { background: var(--atlas-sev-warn-bg);   color: var(--atlas-sev-warn-text); }
.hse-obs-tl-dot-info      { background: var(--atlas-hse-purple-soft); color: var(--atlas-hse-purple); }
.hse-obs-tl-dot-secondary { background: var(--atlas-surface-sunken); color: var(--atlas-text-secondary); }
.hse-obs-tl-content { flex: 1; min-width: 0; }
.hse-obs-tl-event { font-size: .8rem; font-weight: 600; color: var(--atlas-text); line-height: 1.3; word-break: break-word; }
.hse-obs-tl-actor { font-size: .72rem; color: var(--atlas-hse-muted); overflow: hidden; text-overflow: ellipsis; }
.hse-obs-tl-note  { font-size: .72rem; color: var(--atlas-hse-no); font-style: italic; margin-top: .15rem; word-break: break-word; }
.hse-obs-tl-date  { font-size: .68rem; color: var(--atlas-hse-muted); margin-top: .1rem; }

.hse-obs-banner {
    display: flex; align-items: center; gap: var(--atlas-space-4); padding: var(--atlas-space-5);
    background: var(--atlas-surface-muted); border-bottom: 1px solid var(--atlas-border); flex-wrap: wrap;
}
.hse-obs-avatar {
    width: 64px; height: 64px; border-radius: var(--atlas-radius-full); background: var(--atlas-hse-brand);
    color: var(--atlas-white); display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; flex-shrink: 0;
}
.hse-obs-banner-info { flex: 1; min-width: 200px; }
.hse-obs-banner-tag { margin-bottom: var(--atlas-space-1); }
.hse-obs-banner-name { font-size: 1.25rem; font-weight: 700; color: var(--atlas-text); margin-bottom: var(--atlas-space-1); }
.hse-obs-banner-meta { display: flex; flex-wrap: wrap; gap: var(--atlas-space-3); font-size: .82rem; color: var(--atlas-text-secondary); }
.hse-obs-banner-meta span { display: inline-flex; align-items: center; }
.hse-obs-banner-right { text-align: right; font-size: .82rem; color: var(--atlas-text-secondary); line-height: 1.7; }
.hse-obs-banner-date { font-weight: 600; color: var(--atlas-text); font-size: .9rem; }

.hse-obs-count-banner {
    display: flex; justify-content: center; padding: var(--atlas-space-4);
    background: var(--atlas-hse-warn-soft); border-bottom: 1px solid var(--atlas-border);
}
.hse-obs-count-box {
    text-align: center; padding: var(--atlas-space-3) var(--atlas-space-6);
    background: var(--atlas-surface); border: 2px solid var(--atlas-hse-brand); border-radius: var(--atlas-radius-lg);
}
.hse-obs-count-number { font-size: 2.2rem; font-weight: 800; color: var(--atlas-hse-brand); line-height: 1.1; }
.hse-obs-count-label {
    font-size: .76rem; color: var(--atlas-text-secondary); font-weight: 500;
    text-transform: uppercase; letter-spacing: .04em; margin-top: var(--atlas-space-1);
}

.hse-obs-observer { background: var(--atlas-surface-sunken); padding: var(--atlas-space-4) var(--atlas-space-5); border-bottom: 1px solid var(--atlas-border); }
.hse-obs-observer-title {
    font-size: .85rem; font-weight: 600; color: var(--atlas-hse-brand);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--atlas-space-2);
}
.hse-obs-observer-meta { display: flex; flex-wrap: wrap; gap: var(--atlas-space-5); font-size: .85rem; color: var(--atlas-text); }

.hse-obs-kpi-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--atlas-space-4);
    padding: var(--atlas-space-4) var(--atlas-space-5); border-bottom: 1px solid var(--atlas-border);
}
.hse-obs-kpi { text-align: center; padding: var(--atlas-space-4) var(--atlas-space-2); background: var(--atlas-surface); border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-md); }
.hse-obs-kpi-icon {
    width: 44px; height: 44px; border-radius: var(--atlas-radius-md); display: inline-flex;
    align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: var(--atlas-space-2);
    background: var(--atlas-surface-sunken); color: var(--atlas-text-secondary);
}
.hse-obs-kpi-icon.acc-info    { background: var(--atlas-hse-purple-soft); color: var(--atlas-hse-purple); }
.hse-obs-kpi-icon.acc-warn    { background: var(--atlas-sev-warn-bg);   color: var(--atlas-sev-warn-text); }
.hse-obs-kpi-icon.acc-primary { background: var(--atlas-color-primary-soft); color: var(--atlas-color-primary); }
.hse-obs-kpi-icon.acc-success { background: var(--atlas-sev-ok-bg);     color: var(--atlas-sev-ok-text); }
.hse-obs-kpi-label { font-size: .72rem; text-transform: uppercase; font-weight: 600; color: var(--atlas-text-secondary); letter-spacing: .04em; margin-bottom: var(--atlas-space-1); }
.hse-obs-kpi-value { font-size: 1rem; font-weight: 700; color: var(--atlas-text); }

.hse-obs-section { padding: var(--atlas-space-4) var(--atlas-space-5); }
.hse-obs-block { margin-bottom: var(--atlas-space-4); }
.hse-obs-section-title {
    color: var(--atlas-hse-brand); font-size: .9rem; text-transform: uppercase; font-weight: 600;
    letter-spacing: .04em; border-bottom: 2px solid var(--atlas-border);
    padding-bottom: var(--atlas-space-1); margin-bottom: var(--atlas-space-2);
}
.hse-obs-detail-content { font-size: .9rem; color: var(--atlas-text); line-height: 1.6; padding: var(--atlas-space-1) 0; white-space: pre-line; }
.hse-obs-finding {
    border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-md);
    padding: var(--atlas-space-3); margin-bottom: var(--atlas-space-2); background: var(--atlas-surface-muted);
}

.hse-obs-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--atlas-space-3); }
.hse-obs-photo-thumb {
    aspect-ratio: 1; border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-md);
    background: var(--atlas-surface-sunken); display: flex; align-items: center; justify-content: center;
    flex-direction: column; padding: var(--atlas-space-2); text-align: center; overflow: hidden;
}
.hse-obs-photo-thumb i { font-size: 2rem; color: var(--atlas-text-secondary); }
.hse-obs-photo-name { font-size: .7rem; color: var(--atlas-text-secondary); margin-top: var(--atlas-space-1); word-break: break-all; }

/* ── Create / edit observation form ─────────────────────────────────────── */
.hse-obs-form-section { margin-bottom: var(--atlas-space-4); padding-bottom: var(--atlas-space-4); border-bottom: 1px solid var(--atlas-border); }
.hse-obs-form-section:last-child { border-bottom: none; }
.hse-obs-form-label {
    display: block; font-size: .85rem; font-weight: 600; color: var(--atlas-hse-brand);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--atlas-space-2);
}
.hse-obs-type-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--atlas-space-2); }
.hse-obs-type-btn {
    display: flex; flex-direction: column; align-items: center; gap: var(--atlas-space-1);
    padding: var(--atlas-space-3) var(--atlas-space-2); border: 2px solid var(--atlas-border);
    background: var(--atlas-surface); border-radius: var(--atlas-radius-md);
    color: var(--atlas-text-secondary); font-size: .8rem; font-weight: 500; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hse-obs-type-btn:hover { border-color: var(--atlas-hse-brand); color: var(--atlas-hse-brand); }
.hse-obs-type-btn.active { border-color: var(--atlas-hse-brand); background: var(--atlas-color-primary-soft); color: var(--atlas-hse-brand); }
.hse-obs-type-btn i { font-size: 1.5rem; }
.hse-obs-cat-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem;
    border: 1px solid var(--atlas-border); background: var(--atlas-surface);
    border-radius: var(--atlas-radius-full); font-size: .78rem; color: var(--atlas-text-secondary);
    cursor: pointer; margin: .15rem; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hse-obs-cat-chip:hover { border-color: var(--atlas-hse-brand); color: var(--atlas-hse-brand); }
.hse-obs-cat-chip.selected { background: var(--atlas-hse-brand); border-color: var(--atlas-hse-brand); color: var(--atlas-white); }

@media (max-width: 992px) {
    .hse-obs-layout { flex-direction: column; }
    .hse-obs-history-pane { width: 100%; max-width: none; border-right: none; border-bottom: 1px solid var(--atlas-border); }
    .hse-obs-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .hse-obs-type-selector { grid-template-columns: 1fr; }
}