@import url('tokens.css');

/* ============================================================================
   Events page (ADR 0031 — a custom full-page event/log viewer, not Template A/B): toolbar + status
   strip + virtualized row list + detail panel.
   The viewer's view-state lives on the component; the singleton IDiagnosticLogService
   feed is the read-model. Prefixed log-* ; every themed value resolves through var(--…)
   tokens (severity colour via the semantic caution/critical/success tokens).
   ============================================================================ */

/* ---- Page shell: header / toolbar / body / status (vertical, full-height) ---- */
.log-page {
    display: flex; flex-direction: column;
    height: 100vh; overflow: hidden;
    background: var(--color-bg);
    padding: var(--space-6) var(--space-7) 0;
}

/* ---- View tabs + mounted panels ------------------------------------------- */
.log-view-tabs { flex: 0 0 auto; margin-top: var(--space-2); }
.log-view {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
}
.log-view[hidden] { display: none; }

/* ---- Toolbar ---- */
.log-toolbar {
    flex: 0 0 auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-stroke-subtle);
}
.log-toolbar-spacer { flex: 1 1 auto; }
.log-toolbar-actions { display: flex; align-items: center; gap: var(--space-2); }
.log-toolbar-divider { width: 1px; height: 20px; margin: 0 var(--space-3); background: var(--color-stroke); }

/* ---- Search box (icon + input) ---- */
.log-search {
    flex: 1 1 320px; min-width: 260px; max-width: 440px;
    display: flex; align-items: center; gap: var(--space-2);
    height: 32px; padding: 0 var(--space-3);
    border: 1px solid var(--color-stroke); border-radius: var(--radius-md);
    background: var(--color-surface);
}
.log-search:focus-within { box-shadow: inset 0 -2px 0 0 var(--color-accent); }  /* Fluent reveal, matching .ui-input */
.log-search-icon { color: var(--color-text-disabled); }
.log-search-input {
    flex: 1 1 auto; min-width: 0;
    border: none; background: transparent; outline: none;
    font-family: var(--font-sans); font-size: var(--font-size-body); color: var(--color-text);
}

/* ---- Level chips (segmented multi-toggle: LED + label + live count) ---- */
.log-levels {
    display: flex; align-items: center; gap: var(--space-1);
    height: 32px; padding: var(--space-1);
    border: 1px solid var(--color-stroke); border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}
.log-chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 24px; padding: 0 var(--space-3);
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; cursor: pointer;
    font-family: var(--font-sans); font-size: var(--font-size-small);
    color: var(--color-text-disabled); opacity: 0.45;
}
.log-chip:hover { opacity: 0.8; background: var(--color-overlay-hover); }
.log-chip.on {
    opacity: 1; font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    background: var(--color-surface); border-color: var(--color-stroke);
}
.log-chip-count { font-size: var(--font-size-eyebrow); color: var(--color-text-secondary); }
/* Chip LED shade (Debug=disabled grey, Info=secondary grey; warn/err via StateDot state). */
.log-chip-debug .ui-state-dot { background: var(--color-text-disabled); }
.log-chip-info .ui-state-dot { background: var(--color-text-secondary); }

/* ---- Area + component selects. The shared select's vertical field padding is too tall for
   this compact toolbar, so the page owns its 32px line box explicitly. ---- */
.log-filter-field { flex: 0 0 auto; min-width: 0; }
.log-area-select,
.log-component-select {
    height: 32px;
    padding-block: 0; line-height: 30px;
}
.log-area-select { width: 142px; min-width: 142px; }
.log-component-select { width: 176px; min-width: 176px; }

/* ---- Opt-in detailed capture --------------------------------------------- */
.log-capture-button {
    flex: 0 0 188px; width: 188px; height: 32px;
    justify-content: center;
}
/* Recording: the red fill goes on background-color, the slot the shared toolbar hover leaves alone
   (it washes through background-image), so the signal stays up while the pointer is on the button. */
.log-capture-button.capturing {
    border-color: var(--color-critical);
    background-color: var(--color-critical-bg); color: var(--color-critical);
    font-weight: var(--font-weight-semibold);
}
/* The state of the station, drawn while the capture runs for whoever is reading the console, with
   or without the verb beside it. Same ink as the verb, and never a button: nothing here is pressed. */
.log-capture-state {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 32px; padding-inline: var(--space-3);
    border: 1px solid var(--color-critical); border-radius: var(--radius-sm);
    background: var(--color-critical-bg); color: var(--color-critical);
    font-size: var(--font-size-description); font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}
.log-capture-dot {
    flex: 0 0 auto;
    width: 8px; height: 8px; border-radius: var(--radius-pill);
    background: var(--color-critical);
}
.log-capture-time {
    min-width: 38px; margin-left: auto; color: var(--color-critical);
    font-size: var(--font-size-description); font-variant-numeric: tabular-nums;
}

/* ---- Icon tool buttons (word-wrap / follow / clear / open-in-window) ---- */
.log-tool-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; cursor: pointer; color: var(--color-text-secondary);
}
.log-tool-btn:hover { background: var(--color-overlay-hover); color: var(--color-text); }
.log-tool-btn:disabled { opacity: 0.45; cursor: default; }
.log-tool-btn:disabled:hover { background: transparent; color: var(--color-text-secondary); }
.log-tool-btn.active {
    background: var(--color-overlay-hover); border-color: var(--color-stroke);
    color: var(--color-text);
}
.log-export-btn { height: 32px; }

/* ---- Body: list column + detail panel ---- */
.log-body { flex: 1 1 auto; min-height: 0; display: flex; }
.log-list-col { flex: 1 1 auto; min-width: 0; position: relative; }
.log-list { height: 100%; overflow-y: auto; overflow-x: hidden; }

/* ---- One log row (lead bar + main grid) ----
   The height is declared, not left to the content, because the virtualized list is told the row
   height up front (Virtualize ItemSize): a row shorter than the number it was told leaves blank
   bands where the scroller expected content, and the bar stops matching what is on screen. The
   history list beside it declares its own 48px the same way. */
.log-row {
    display: grid; grid-template-columns: 3px minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: 30px;
    border-bottom: 1px solid var(--color-stroke-subtle);
}
.log-row:hover { background: var(--color-overlay-hover); }
.log-row.selected { background: var(--color-overlay-hover); }
.log-row-lead { background: transparent; }
.log-row.log-sev-warning .log-row-lead { background: var(--color-caution); }
.log-row.log-sev-error .log-row-lead { background: var(--color-critical); }
.log-row.selected .log-row-lead { background: var(--color-accent); }

.log-row-main {
    appearance: none;
    width: 100%; min-width: 0;
    display: grid;
    grid-template-columns: 86px auto minmax(180px, 240px) minmax(0, 1fr);
    align-items: start; gap: var(--space-3);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    border: 0; background: transparent; color: inherit;
    font-family: var(--font-sans); text-align: left; cursor: pointer;
}
.log-row-main:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.log-cell-time { font-size: var(--font-size-description); color: var(--color-text-disabled); }
.log-row-main .ui-state-dot { margin-top: 5px; }
/* Row LED shade by severity (Debug=disabled grey, Info=secondary grey; warn/err handled
   by StateDot's own caution/critical state). */
.log-row.log-sev-debug .log-row-main .ui-state-dot { background: var(--color-text-disabled); }
.log-row.log-sev-information .log-row-main .ui-state-dot { background: var(--color-text-secondary); }
.log-cell-context {
    min-width: 0;
    display: flex; align-items: baseline; gap: var(--space-2);
    overflow: hidden; white-space: nowrap;
    font-size: var(--font-size-description);
}
.log-cell-area {
    flex: 0 0 auto; color: var(--color-text-disabled);
    font-size: var(--font-size-eyebrow);
}
.log-cell-context-separator { flex: 0 0 auto; color: var(--color-text-disabled); }
.log-cell-component {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    color: var(--color-text-secondary);
}
.log-cell-msg {
    font-size: var(--font-size-body); color: var(--color-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Message colour by severity (only attention-worthy levels carry colour). */
.log-row.log-sev-information .log-cell-msg { color: var(--color-text); }
.log-row.log-sev-warning .log-cell-msg { color: var(--color-caution); }
.log-row.log-sev-error .log-cell-msg { color: var(--color-critical); }
/* Word-wrap toggle: ellipsis ↔ wrap. */
.log-row.wrap .log-cell-msg { white-space: normal; overflow: visible; text-overflow: clip; }

/* Per-row copy button: hidden until hover/selection. */
.log-row-copy { align-self: center; margin-right: var(--space-2); opacity: 0; }
.log-row:hover .log-row-copy,
.log-row.selected .log-row-copy,
.log-row-copy:focus-visible { opacity: 1; }

/* ---- Empty state ---- */
.log-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; text-align: center;
    max-width: 320px; margin: 0 auto;
    color: var(--color-text-disabled); font-size: var(--font-size-small);
    pointer-events: none;
}

/* ---- "N new" jump-to-tail pill ---- */
.log-pill {
    position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 30px; padding: 0 var(--space-5);
    border: none; border-radius: var(--radius-pill);
    background: var(--color-accent); color: var(--color-on-accent);
    font-size: var(--font-size-small); font-weight: var(--font-weight-semibold);
    cursor: pointer; box-shadow: var(--shadow-popover);
}

/* ---- Detail panel (right, on selection) ---- */
.log-detail {
    flex: 0 0 384px; width: 384px;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--color-stroke-subtle);
    background: var(--color-surface);
}
.log-detail-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-stroke-subtle);
}
.log-detail-source { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-description); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-sev-badge {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
    background: var(--color-neutral-bg);
    font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}
.log-sev-badge.log-sev-warning { color: var(--color-caution); }
.log-sev-badge.log-sev-error { color: var(--color-critical); }
.log-sev-badge.log-sev-information { color: var(--color-text); }

.log-detail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5); }
.log-detail-time { font-size: var(--font-size-description); color: var(--color-text-disabled); margin-bottom: var(--space-4); }
.log-detail-message { font-size: var(--font-size-body); color: var(--color-text); white-space: pre-wrap; word-break: break-word; margin-bottom: var(--space-6); }
.log-meta-card {
    border: 1px solid var(--color-stroke); border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    padding: var(--space-4); margin-bottom: var(--space-6);
}
.log-meta-row { display: flex; gap: var(--space-3); padding: var(--space-2) 0; }
.log-meta-label { flex: 0 0 78px; font-size: var(--font-size-description); color: var(--color-text-disabled); }
.log-meta-value { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-description); color: var(--color-text); word-break: break-word; }
.log-detail-stack {
    margin: 0; font-family: var(--font-mono); font-size: var(--font-size-eyebrow);
    color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-word;
}
.log-detail-foot {
    flex: 0 0 auto; padding: var(--space-4);
    border-top: 1px solid var(--color-stroke-subtle);
}
.log-copy-entry { width: 100%; justify-content: center; }

/* ---- Status strip (bottom) ---- */
.log-status {
    flex: 0 0 30px;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: 0 var(--space-5);
    border-top: 1px solid var(--color-stroke);
    background: var(--color-surface-alt);
    font-size: var(--font-size-description); color: var(--color-text-disabled);
}
.log-status-right { display: flex; align-items: center; gap: var(--space-5); }
.log-status-updated { color: var(--color-text-disabled); }

/* The mono utility (Cascadia Mono) for timestamp/area/logger cells. */
.log-page .mono { font-family: var(--font-mono); }

/* ============================================================================
   Persistent event history — separate Alarm and Occurrence timelines. Console stays
   mounted; both history tabs extend its toolbar/list/detail grammar while retaining
   an independent query snapshot and filter state.
   ============================================================================ */

.event-history-search {
    flex: 1 1 320px; min-width: 220px; max-width: 520px;
}
.event-history-filter-group {
    flex: 0 0 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: var(--space-3);
    color: var(--color-text-secondary);
}
.event-history-filter-label {
    font-size: var(--font-size-description); font-weight: var(--font-weight-medium);
    text-transform: capitalize;
}
.event-history-filter {
    width: 172px; min-width: 0; height: 32px;
    padding-block: 0; line-height: 30px;
}

.event-history-range {
    flex: 0 0 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: var(--space-4);
}
.event-history-date {
    width: 150px; min-width: 0; height: 32px;
    padding-block: 0;
}

/* The paged timeline stacks a scroller over its pager, so the band carrying Newer and Older keeps
   a row of its own; the list and the loading, empty and failed states place themselves inside the
   scroller instead of over the whole column. */
.event-history-col { display: flex; flex-direction: column; }
.event-history-scroll { position: relative; flex: 1 1 auto; min-height: 0; }

.event-history-pager {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-stroke-subtle);
}
.event-history-page-btn { height: 28px; padding-inline: var(--space-4); }
.event-history-page-mark {
    color: var(--color-text-secondary); font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
}

.event-history-list { position: absolute; inset: 0; }

.event-history-row {
    appearance: none;
    width: 100%; min-height: 48px; padding: 0;
    display: flex; align-items: stretch;
    border: 0; border-bottom: 1px solid var(--color-stroke-subtle);
    background: transparent; color: var(--color-text);
    font-family: var(--font-sans); text-align: left;
    cursor: pointer;
}
.event-history-row:hover,
.event-history-row.selected { background: var(--color-overlay-hover); }

.event-history-lead { flex: 0 0 3px; background: transparent; }
.event-history-row.event-tone-caution .event-history-lead { background: var(--color-caution); }
.event-history-row.event-tone-critical .event-history-lead { background: var(--color-critical); }
.event-history-row.event-tone-attention .event-history-lead { background: var(--color-accent); }
.event-history-row.selected .event-history-lead { background: var(--color-accent); }

.event-history-row-main {
    flex: 1 1 auto; min-width: 0;
    display: grid;
    grid-template-columns: 148px auto minmax(0, 1fr) 72px;
    align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
}
.event-history-time {
    font-size: var(--font-size-description); color: var(--color-text-disabled);
    font-variant-numeric: tabular-nums;
}
.event-history-primary {
    min-width: 0; display: flex; flex-direction: column; gap: var(--space-1);
}
.event-history-name-line {
    display: flex; align-items: center; gap: var(--space-1);
    min-width: 0;
}
.event-history-name-line .event-history-name { flex: 1 1 auto; min-width: 0; }

.event-history-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-text); font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}
.event-history-summary {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-text-disabled); font-size: var(--font-size-eyebrow);
}
.event-history-level {
    justify-self: end;
    color: var(--color-text-secondary); font-size: var(--font-size-description);
    font-weight: var(--font-weight-medium);
}
.event-tone-caution .event-history-level { color: var(--color-caution); }
.event-tone-critical .event-history-level { color: var(--color-critical); }
.event-tone-attention .event-history-level { color: var(--color-accent-text); }

.event-history-state {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-3); padding: var(--space-7);
    text-align: center;
}
.event-history-state-icon { color: var(--color-text-disabled); }
.event-history-state-title {
    color: var(--color-text); font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-semibold);
}
.event-history-state-copy {
    max-width: 420px; color: var(--color-text-disabled);
    font-size: var(--font-size-small); line-height: 1.5;
    text-wrap: pretty;
}
.event-history-retry { margin-top: var(--space-2); }

.event-history-detail .log-detail-source {
    color: var(--color-text); font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}
.event-history-level-badge {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-bg); color: var(--color-text-secondary);
    font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-semibold);
}
.event-history-level-badge.event-tone-caution {
    background: var(--color-caution-bg); color: var(--color-caution);
}
.event-history-level-badge.event-tone-critical {
    background: var(--color-critical-bg); color: var(--color-critical);
}
.event-history-level-badge.event-tone-attention {
    background: var(--color-accent-bg); color: var(--color-accent-text);
}
.event-history-transition {
    margin-bottom: var(--space-3);
    color: var(--color-text-secondary); font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
}

/* ============================================================================
   Alarms tab — two stacked cards: current alarms over transition history. Each card is the
   shared ui-card surface. Current keeps its own height and hands overflow to the grid; history
   fills what remains. Occurrences and Interlocks reuse the history Card with display: contents
   so their toolbar, body and status stay flex children of the panel.
   ============================================================================ */

.log-view.event-alarms {
    padding-bottom: var(--space-4);
}
.log-view.event-alarms > .ui-card + .ui-card { margin-top: var(--space-4); }

.ui-card.event-history-passthrough { display: contents; }

.ui-card.event-zone-current,
.ui-card.event-zone-history {
    padding: 0;
    overflow: hidden;
}
.ui-card.event-zone-current {
    flex: 0 0 auto;
}
.ui-card.event-zone-history {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.event-zone-head {
    flex: 0 0 auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-3);
}
.event-zone-title {
    color: var(--color-text);
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-semibold);
}

.event-live-head { padding-bottom: var(--space-3); }
.event-live-summary {
    color: var(--color-text-secondary); font-size: var(--font-size-description);
    font-variant-numeric: tabular-nums;
}
.event-live-summary.event-tone-caution { color: var(--color-caution); }
.event-live-summary.event-tone-critical { color: var(--color-critical); }
.event-live-summary.event-tone-attention { color: var(--color-accent-text); }
.event-live-spacer { flex: 1 1 auto; }

.event-live-name-cell {
    display: flex; align-items: center; gap: var(--space-2); min-width: 0;
}
.event-live-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: var(--font-weight-medium);
}
.event-live-ack { padding: var(--space-1) var(--space-3); font-size: var(--font-size-small); }

.event-zone-current .event-live-grid,
.event-zone-current .event-zone-empty {
    margin-inline: var(--space-5);
    margin-bottom: var(--space-5);
}

.event-zone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-5);
    text-align: center;
}

.event-zone-history .event-history-toolbar {
    padding: var(--space-3) var(--space-5);
}
.event-zone-history .log-body {
    flex: 1 1 auto;
    min-height: 0;
}

/* ---- Responsive toolbar + timeline ----------------------------------------- */
@media (max-width: 1360px) {
    .log-toolbar-spacer { display: none; }
    .log-search { flex: 1 1 280px; max-width: none; }
    .log-toolbar-actions { margin-left: auto; }
}

@media (max-width: 900px) {
    .log-page { padding-inline: var(--space-5); }
    .log-search,
    .event-history-search { flex-basis: 100%; max-width: none; }
    .log-levels { max-width: 100%; overflow-x: auto; }
    .log-area-select { width: 132px; min-width: 132px; }
    .log-component-select { width: 164px; min-width: 164px; }
    .log-row-main {
        grid-template-columns: 78px auto minmax(132px, 180px) minmax(0, 1fr);
    }
    .log-detail { flex-basis: 320px; width: 320px; }
    .event-history-filter-group { flex: 1 1 220px; }
    .event-history-filter { flex: 1 1 auto; width: auto; }
    .event-history-range { flex: 1 1 100%; }
    .event-history-date { flex: 1 1 auto; width: auto; }
    .event-history-row-main {
        grid-template-columns: 132px auto minmax(0, 1fr);
    }
    .event-history-level { display: none; }
    .event-history-detail { flex-basis: 320px; width: 320px; }
}

@media (max-width: 720px) {
    .log-toolbar-actions { margin-left: 0; }
    .log-body { flex-direction: column; }
    .log-detail,
    .event-history-detail {
        flex: 0 0 44%; width: 100%;
        border-left: 0; border-top: 1px solid var(--color-stroke-subtle);
    }
    .log-row-main {
        grid-template-columns: 72px auto minmax(112px, 160px) minmax(0, 1fr);
        gap: var(--space-2);
    }
}