/* ── Namespace tabs ── */
.oumta-ns-tab {
    font-family: var(--font-pixel, 'Silkscreen', cursive);
    font-size: 10px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--t-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-right: 2px;
}
.oumta-ns-tab:hover { color: var(--t-bright); }
.oumta-ns-tab.active { color: var(--t-accent); border-bottom-color: var(--t-accent); }

/* ── View tabs ── */
.oumta-view-tab {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-pixel, 'Silkscreen', cursive);
    font-size: 10px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--t-muted);
    cursor: pointer;
    border-radius: var(--ui-radius-button);
    transition: all 0.15s;
}
.oumta-view-tab:hover { color: var(--t-bright); }
.oumta-view-tab.active { color: var(--t-accent); border-color: var(--t-accent); }

.oumta-view.hidden { display: none; }
.oumta-view { padding: 20px 24px; }

/* ── Overview cards ── */
.oumta-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.oumta-card {
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: var(--ui-radius-card);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
    align-items: center;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.oumta-card-wide { grid-column: span 4; }
.oumta-card-label {
    font-family: var(--font-pixel, 'Silkscreen', cursive);
    font-size: 9px;
    color: var(--t-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.oumta-card-value {
    font-family: var(--font-content, monospace);
    font-size: 56px;
    color: var(--t-bright);
    font-weight: bold;
    line-height: 1.05;
}
.oumta-card-value-sm { font-size: 18px; font-weight: normal; line-height: 1.3; }
.oumta-card-sub { font-size: 10px; color: var(--t-dim); }
.oumta-danger { color: var(--t-danger); }

/* Fail state: whole card goes red; label, value, sub all flip to white
 * so the box reads as a single alarm tile rather than a coloured number
 * on dark chrome. Triggered from JS via the oumta-fail class. Uses the
 * theme's --t-danger to stay consistent with the "unavailable" state
 * labels and workload state colours elsewhere in the dashboard. */
.oumta-card.oumta-fail {
    background: var(--t-danger);
    border-color: var(--t-danger);
    color: #fff;
}
.oumta-card.oumta-fail .oumta-card-label,
.oumta-card.oumta-fail .oumta-card-value,
.oumta-card.oumta-fail .oumta-card-sub {
    color: #fff;
}

.oumta-cluster-status[data-state="healthy"]   .oumta-card-value { color: #4ade80; }
.oumta-cluster-status[data-state="degraded"]  .oumta-card-value { color: #fb923c; }
.oumta-cluster-status[data-state="unknown"]   .oumta-card-value { color: var(--t-dim); }
/* data-state="down" is handled by .oumta-fail (toggled from JS) so the
 * cluster tile goes fully red + white like the other alarms. */

/* ── Attention list ── */
.oumta-section { margin-top: 8px; }
.oumta-section-title {
    font-family: var(--font-pixel, 'Silkscreen', cursive);
    font-size: 10px;
    color: var(--t-accent);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.oumta-attention-list { display: flex; flex-direction: column; gap: 6px; }
.oumta-attention-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: var(--ui-radius-card);
    cursor: pointer;
    transition: border-color 0.15s;
}
.oumta-attention-row:hover { border-color: var(--t-accent); }
.oumta-attention-name { flex: 1; color: var(--t-bright); font-size: 13px; }
.oumta-attention-ns { color: var(--t-dim); font-size: 11px; font-family: var(--font-content, monospace); }
.oumta-attention-reason { color: var(--t-muted); font-size: 11px; font-style: italic; }
.oumta-attention-state {
    font-family: var(--font-pixel, 'Silkscreen', cursive);
    font-size: 9px;
    padding: 2px 6px;
    border: 1px solid var(--t-border);
    border-radius: 2px;
}
.oumta-attention-state[data-state="degraded"]    { color: #fb923c; border-color: #fb923c; }
.oumta-attention-state[data-state="unavailable"] { color: var(--t-danger); border-color: var(--t-danger); }

.oumta-empty {
    padding: 32px;
    text-align: center;
    color: var(--t-dim);
    font-size: 12px;
    font-style: italic;
}

/* ── Workload toolbar + table ── */
.oumta-toolbar {
    display: flex; gap: 10px; margin-bottom: 14px;
    align-items: center;
}
.oumta-input {
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    color: var(--t-bright);
    padding: 6px 10px;
    border-radius: var(--ui-radius-input);
    font-size: 12px;
    font-family: var(--font-content, monospace);
    outline: none;
}
.oumta-input:focus { border-color: var(--t-accent); }
#oumta-wl-search { flex: 1; min-width: 200px; }

.oumta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.oumta-table th {
    text-align: left;
    padding: 8px 10px;
    font-family: var(--font-pixel, 'Silkscreen', cursive);
    font-size: 9px;
    color: var(--t-dim);
    text-transform: uppercase;
    border-bottom: 1px solid var(--t-border);
    letter-spacing: 0.5px;
}
.oumta-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--t-border);
    color: var(--t-text);
    font-family: var(--font-content, monospace);
    vertical-align: middle;
}
.oumta-table tbody tr { cursor: pointer; transition: background 0.15s; }
.oumta-table tbody tr:hover { background: var(--t-bg); }
.oumta-table .wl-state-healthy    { color: #4ade80; }
.oumta-table .wl-state-degraded   { color: #fb923c; }
.oumta-table .wl-state-unavailable{ color: var(--t-danger); }

/* ── Timeline ── */
.oumta-timeline-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.oumta-btn-ghost {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-pixel, 'Silkscreen', cursive);
    font-size: 10px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--t-border);
    color: var(--t-muted);
    cursor: pointer;
    border-radius: var(--ui-radius-button);
    transition: all 0.15s;
}
.oumta-btn-ghost:hover { border-color: var(--t-accent); color: var(--t-accent); }

/* Workload filter pills: inline quick-pick. Horizontal-scrolls if the row
 * runs out of space; an overflow dropdown is injected from JS when the
 * pill count would blow out past the container. */
.oumta-tl-filters {
    display: flex; gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.oumta-tl-pill {
    font-family: var(--font-pixel, 'Silkscreen', cursive);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    background: transparent;
    border: 1px solid var(--t-border);
    color: var(--t-muted);
    cursor: pointer;
    border-radius: var(--ui-radius-button);
    transition: all 0.12s;
    white-space: nowrap;
}
.oumta-tl-pill:hover { border-color: var(--t-accent); color: var(--t-accent); }
.oumta-tl-pill.active { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-bg); }

.oumta-tl-more {
    position: relative;
}
.oumta-tl-more-menu {
    position: absolute;
    top: calc(100% + 4px); left: 0;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--ui-radius-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 4px;
    z-index: 10;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
}
.oumta-tl-more-menu button {
    display: block; width: 100%; text-align: left;
    padding: 6px 10px;
    background: transparent; border: none;
    color: var(--t-text);
    font-family: var(--font-content, monospace);
    font-size: 11px;
    cursor: pointer;
    border-radius: var(--ui-radius-input);
}
.oumta-tl-more-menu button:hover { background: var(--t-bg); color: var(--t-bright); }
.oumta-tl-more-menu button.active { color: var(--t-accent); }

/* Timeline body: two-column layout (left = date badge + time + dot, right
 * = event list). Clusters of events that fired within the same tolerance
 * window get a single row with all sub-events listed in the right column.
 *
 * The decorative connector line is drawn ONCE on the body, not per entry —
 * that's the only way to guarantee it's truly continuous (per-entry
 * pseudo-elements collapse into gaps the moment an entry has a shorter
 * left column than right). */
.oumta-timeline-body {
    display: flex; flex-direction: column;
    gap: 20px;
    position: relative;
}
.oumta-timeline-body::before {
    content: "";
    position: absolute;
    left: 79px;       /* right edge of the 80px left column */
    top: 24px;        /* begin a bit below the first dot */
    bottom: 24px;     /* end a bit above the last dot */
    width: 2px;
    /* Soft fade at both ends so the line feels like it eases into the
     * timeline rather than being clipped. The middle stays fully opaque. */
    background: linear-gradient(
        to bottom,
        transparent 0,
        var(--t-border) 28px,
        var(--t-border) calc(100% - 28px),
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}
.oumta-timeline-entry {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;    /* optional date row on top, dot-row + events below */
    gap: 0 14px;
    position: relative;
}
.oumta-timeline-entry > * { position: relative; z-index: 1; }
/* Time + dot share a horizontal row so clusters without a date badge
 * show the time label LEFT of the dot, not stacked underneath. The row
 * lives in grid row 2 so events in the right column (also row 2) stay
 * vertically aligned with it — regardless of whether a date badge
 * occupies row 1 above. */
.oumta-tl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 1;
    grid-row: 2;
    justify-self: end;   /* hug the connector line on the right */
    align-self: start;   /* don't stretch to the events column's full height — stay at the top */
}
.oumta-tl-date {
    display: flex; flex-direction: column;
    align-items: center;
    line-height: 1;
    border: 1px solid var(--t-border);
    border-radius: var(--ui-radius-card);
    padding: 4px 0 5px;
    width: 44px;
    background: var(--t-bg);   /* solid, so the connector line behind doesn't strike through the text */
    grid-column: 1;
    grid-row: 1;
    justify-self: start;       /* badge hugs the left edge of the column */
    margin-bottom: 8px;        /* spacing before the dot-row below */
}
.oumta-tl-date .day {
    font-family: var(--font-content, monospace);
    font-size: 18px; font-weight: 700;
    color: var(--t-bright);
}
.oumta-tl-date .mon {
    font-family: var(--font-pixel, 'Silkscreen', cursive);
    font-size: 8px;
    color: var(--t-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}
.oumta-tl-time {
    font-family: var(--font-content, monospace);
    font-size: 10px;
    color: var(--t-dim);
    margin-top: 2px;
    text-align: center;
}
.oumta-tl-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    /* Dot sits at the right end of the time+dot row, which align-items:
     * flex-end of the left column pushes to the right edge (x=80).
     * Translate by half the dot width so its centre lines up exactly with
     * the connector line (also at x=80). */
    transform: translateX(5px);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--oumta-dot-color) 22%, transparent);
    background: var(--oumta-dot-color);
}
.oumta-tl-dot[data-sev="info"]      { --oumta-dot-color: var(--t-accent); }
.oumta-tl-dot[data-sev="warning"]   { --oumta-dot-color: #fb923c; }
.oumta-tl-dot[data-sev="error"]     { --oumta-dot-color: var(--t-danger); }
.oumta-tl-dot[data-sev="recovered"] { --oumta-dot-color: #4ade80; }
.oumta-tl-dot[data-sev="image"]     { --oumta-dot-color: #60a5fa; }

.oumta-tl-right {
    display: flex; flex-direction: column;
    gap: 23px;
    min-width: 0;
    grid-column: 2;
    grid-row: 2;             /* pinned to the same row as .oumta-tl-row so events line up with the dot */
}
.oumta-tl-event {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.oumta-tl-event-head {
    display: flex; align-items: baseline; gap: 8px;
    flex-wrap: wrap;
}
.oumta-tl-severity {
    font-family: var(--font-pixel, 'Silkscreen', cursive);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.oumta-tl-severity[data-sev="info"]      { color: var(--t-accent); }
.oumta-tl-severity[data-sev="warning"]   { color: #fb923c; }
.oumta-tl-severity[data-sev="error"]     { color: var(--t-danger); }
.oumta-tl-severity[data-sev="recovered"] { color: #4ade80; }
.oumta-tl-severity[data-sev="image"]     { color: #60a5fa; }
.oumta-tl-workload {
    font-family: var(--font-content, monospace);
    font-size: 11px;
    color: var(--t-muted);
    cursor: pointer;
    transition: color 0.1s;
}
.oumta-tl-workload:hover { color: var(--t-accent); }
.oumta-tl-reason { font-size: 10px; color: var(--t-dim); }
.oumta-tl-message { font-size: 12px; color: var(--t-bright); line-height: 1.4; word-break: break-word; }

/* ── Live indicator ── */
.oumta-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--t-dim);
    display: inline-block;
    transition: background 0.2s;
}
#oumta-live-indicator[data-state="live"]     .oumta-dot { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
#oumta-live-indicator[data-state="polling"]  .oumta-dot { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
#oumta-live-indicator[data-state="error"]    .oumta-dot { background: var(--t-danger); }