/* ================================================================
   Data Trust — Page-specific styles
   Shared styles are in ../shared.css. Adapted from ../data/style.css.
   ================================================================ */

/* ── Status colors (Fresh / At Risk / Stale / Training) ────────── */
.dot-fresh    { background: #00A86B; }
.dot-atrisk   { background: var(--amber); }
.dot-stale    { background: var(--error-1); }
.dot-training { background: var(--slate); }

/* Status-coloured active chips are now shared across all dashboards via the chip-good/warn/bad/muted
   tone classes in shared.css (the builder adds the tone alongside .chip). */

/* ── Summary bar (MC-specific content) ─────────────────────────── */
.summary-bar { display: none; }
.summary-bar.visible { display: block; }
.summary-stats {
    display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px;
}
.summary-stat {
    display: flex; flex-direction: column; align-items: center; min-width: 80px;
}
.summary-stat-value { font-size: 28px; font-weight: 700; color: var(--royal); }
.summary-stat-value.fresh    { color: #00A86B; }
.summary-stat-value.atrisk   { color: var(--amber-dark); }
.summary-stat-value.stale    { color: var(--error-1); }
.summary-stat-value.training { color: var(--slate); }
.summary-stat-label { font-size: 11px; color: var(--slate); font-weight: 500; text-transform: uppercase; }

.summary-bar-seg { height: 100%; min-width: 2px; transition: width 0.3s; }
.seg-fresh    { background: #00A86B; }
.seg-atrisk   { background: var(--amber); }
.seg-stale    { background: var(--error-1); }
.seg-training { background: var(--slate); }

/* ── Table cards ───────────────────────────────────────────────── */
.table-list { display: flex; flex-direction: column; gap: 10px; }

.table-card {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.table-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.table-row {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px; cursor: pointer;
}
.table-name {
    font-weight: 600; font-size: 13px; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
.table-schema { color: var(--slate); font-weight: 400; }
.table-tbl    { color: var(--royal); }
.table-summary { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.table-summary-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 10px; white-space: nowrap;
}
.table-feed-count  { font-size: 11px; color: var(--slate); white-space: nowrap; flex-shrink: 0; }
.table-chevron {
    color: var(--slate); font-size: 14px; transition: transform 0.2s; flex-shrink: 0;
}
.table-card.expanded .table-chevron { transform: rotate(90deg); }

/* ── Unified aligned stat columns ──────────────────────────────
   Status | Last Update | Uptime | MTTR | Since/Thr | chevron.
   Domain, table, and segment rows all emit this identical grid so
   the columns line up vertically at every expansion level. */
.mc-stats {
    display: grid;
    /* col2 (Last Update) widened so the full "Mon DD, YYYY, HH:MM AM" timestamp is not clipped;
       col1 (Status) widened to fit the extra Training badge alongside stale/at-risk. */
    grid-template-columns: 128px 168px 60px 60px 116px 68px 14px;
    gap: 12px; align-items: center; flex-shrink: 0;
}
.mc-stat { font-size: 12px; min-width: 0; }
.mc-stat-status { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mc-stat-time { color: var(--slate); font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-stat-metric { font-weight: 600; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; text-align: right; }
.mc-stat-metric.good  { color: #00A86B; }
.mc-stat-metric.warn  { color: var(--amber-dark); }
.mc-stat-metric.bad   { color: var(--error-1); }
.mc-stat-metric.muted { color: var(--slate); font-weight: 400; }
.mc-stat-thr { color: var(--slate); font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; text-align: right; white-space: nowrap; }
.mc-stat-thr strong { font-weight: 700; }
.mc-stat-fresh { text-align: right; }
.mc-muted { color: var(--smoke); }

/* ── Freshness gauge (Freshness column) ─────────────────────────
   Track = the staleness threshold (the segment's freshness budget); fill = how much of it the
   age-since-update has used. Full + red = past threshold (overdue). See freshnessCell() in script.js. */
.mc-fresh { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
/* Fixed-width track (identical length on every row) so only the fill varies; a faint inset ring
   keeps the empty portion of the track visible when the fill is small. */
.mc-fresh-bar {
    position: relative; flex-shrink: 0;
    width: 44px; height: 6px; border-radius: 3px;
    background: #dbe2ea; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.10);
}
.mc-fresh-bar.is-over { box-shadow: inset 0 0 0 1px var(--error-1); }
.mc-fresh-fill { position: absolute; left: 0; top: 0; height: 100%; min-width: 2px; border-radius: 3px; }
.mc-fresh-fill.good { background: #00A86B; }
.mc-fresh-fill.warn { background: var(--amber); }
.mc-fresh-fill.bad  { background: var(--error-1); }
/* Fixed-width, right-aligned so the bar lands at the same x on every row (short labels like
   "8h left" pad on the left instead of shoving the bar right); tabular figures keep digits even. */
.mc-fresh-label {
    font-size: 11px; font-weight: 600; white-space: nowrap;
    min-width: 60px; text-align: right;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
}
.mc-fresh-label.good { color: #00A86B; }
.mc-fresh-label.warn { color: var(--amber-dark); }
.mc-fresh-label.bad  { color: var(--error-1); }
.mc-chevron-slot { color: var(--slate); font-size: 13px; text-align: center; transition: transform 0.2s; }
.schema-card.expanded > .schema-row .mc-chevron-slot,
.table-card.expanded  > .table-row  .mc-chevron-slot { transform: rotate(90deg); }

/* Column-label header, aligned to the same stat grid, shown once atop the list */
.mc-list-header {
    display: flex; align-items: center; gap: 16px;
    padding: 2px 20px 8px 20px;
}
.mc-header-label { flex: 1; min-width: 0; }
.mc-list-header .mc-stat, .mc-list-header .mc-chevron-slot {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    color: var(--slate); letter-spacing: 0.5px; text-align: right;
}
.mc-list-header .mc-stat-status { text-align: left; }

/* Status badge colors */
.badge-fresh    { background: #EDF6F0; color: #006644; }
.badge-atrisk   { background: var(--amber-light); color: var(--amber-dark); }
.badge-stale    { background: var(--error-2); color: #881717; }
.badge-training { background: var(--ash); color: var(--slate); }
.feed-badge.has-pop { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }

/* ── Domain cards (group view) ─────────────────────────────────── */
.schema-card {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.schema-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.schema-row {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; cursor: pointer;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}
.schema-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: var(--white);
    flex-shrink: 0; text-transform: uppercase;
}
.schema-icon.si-fresh    { background: #00A86B; }
.schema-icon.si-atrisk   { background: var(--amber); }
.schema-icon.si-stale    { background: var(--error-1); }
.schema-icon.si-training { background: var(--slate); }
.schema-name {
    font-weight: 500; font-size: 15px; color: var(--royal); flex: 1;
    display: flex; flex-direction: column; gap: 2px;
}
.schema-name-label { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; }
.schema-name-sub   { font-size: 11px; font-weight: 400; color: var(--slate); }
.schema-stats { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.schema-mini-bar {
    width: 60px; height: 6px; border-radius: 3px; flex-shrink: 0;
    overflow: hidden; display: flex; background: #f1f5f9;
}
.schema-mini-bar.mini-bar-sm { width: 44px; height: 5px; }
.schema-mini-seg { height: 100%; min-width: 1px; }
.schema-chevron {
    color: var(--slate); font-size: 14px; transition: transform 0.2s; flex-shrink: 0;
}
.schema-card.expanded .schema-chevron { transform: rotate(90deg); }
/* Right padding is 0 so nested rows keep the same right edge as top-level
   rows (→ stat columns align); hierarchy is shown by left indent only. */
.schema-details { display: none; padding: 10px 0 14px 0; }
.schema-card.expanded .schema-details { display: block; }
.schema-details .table-card {
    box-shadow: none; border: 1px solid #e2e8f0;
    border-radius: 8px; margin: 0 0 8px 16px;
}
.schema-details .table-card:last-child { margin-bottom: 0; }

/* ── Expanded segment detail rows ──────────────────────────────── */
.table-details {
    display: none; padding: 0 0 12px 20px; border-top: 1px solid #f1f5f9;
}
.table-card.expanded .table-details { display: block; }

.feed-row {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 20px; font-size: 13px;
    border-bottom: 1px solid #f8fafc; transition: background 0.1s;
}
.feed-row:hover { background: #f8fafc; }
.feed-row:last-child { border-bottom: none; }
.feed-label { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; overflow: hidden; }
.feed-table-name { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── At-Risk hover popover (structured pipeline detail) ────────── */
.pipe-popover {
    display: none; position: fixed; z-index: 3000; max-width: 420px;
    background: var(--navy); color: #e2e8f0; border-radius: 8px;
    padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,0.28);
    font-size: 12px; line-height: 1.5; pointer-events: none;
}
.pipe-popover.visible { display: block; }
.pipe-popover .pp-head { font-weight: 500; color: #fff; margin-bottom: 6px; }
.pipe-popover .pp-meta { color: var(--smoke); font-size: 11px; margin-bottom: 8px; }
.pipe-popover .pp-row { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.pipe-popover .pp-name { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; color: #fff; word-break: break-all; }
.pipe-popover .pp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pipe-popover .pp-chip {
    font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px;
    background: rgba(255,255,255,0.12); color: #cbd5e1; white-space: nowrap;
}
.pipe-popover .pp-chip.good  { background: #0f5132; color: #d1fae5; }
.pipe-popover .pp-chip.warn  { background: #7c4a03; color: #fde68a; }
.pipe-popover .pp-chip.bad   { background: #7f1d1d; color: #fecaca; }
.pipe-popover .pp-chip.run   { background: #1e3a8a; color: #dbeafe; }

.feed-id        { font-weight: 600; color: var(--slate); font-size: 12px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; flex-shrink: 0; }
.feed-client    { color: var(--charcoal); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ── Cross-page drill-in links (Incidents / Pipeline) ──────────────
   Kept subtle and revealed on row hover / keyboard focus so they don't clutter the dense list. */
.drill-links { margin-left: auto; display: inline-flex; gap: 10px; flex-shrink: 0; align-items: baseline; }
.drill-link {
    font-size: 11px; font-weight: 600; color: var(--royal); text-decoration: none;
    white-space: nowrap; flex-shrink: 0;
}
.drill-link:hover { text-decoration: underline; }
.feed-row .drill-links { opacity: 0; transition: opacity 0.1s; }
.feed-row:hover .drill-links,
.drill-links:focus-within { opacity: 1; }
.table-row .drill-link.table-drill { opacity: 0; transition: opacity 0.1s; flex-shrink: 0; }
.table-row:hover .drill-link.table-drill,
.table-row .drill-link.table-drill:focus { opacity: 1; }
html[data-theme="dark"] .drill-link { color: var(--accent-text); }
.feed-timestamp { font-size: 12px; color: var(--slate); font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; }
.feed-metric    { font-size: 12px; font-weight: 600; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; text-align: right; }
.feed-metric.good { color: #00A86B; }
.feed-metric.warn { color: var(--amber-dark); }
.feed-metric.bad  { color: var(--error-1); }
.feed-metric.muted { color: var(--slate); font-weight: 400; }
.feed-threshold { font-size: 12px; color: var(--slate); font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; text-align: right; }
.feed-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 10px; text-align: center; white-space: nowrap;
}

/* ── Debug footer ──────────────────────────────────────────────── */
.debug-footer {
    display: none; flex-wrap: wrap; gap: 4px 12px;
    padding: 14px 4px 6px;
    font-size: 11px; color: var(--slate);
    border-top: 1px solid #e8edf2;
    margin-top: 16px;
}
.debug-footer.visible { display: flex; }
.debug-footer strong { color: #8a9aa3; font-weight: 500; }
.debug-sep { color: #d0d8de; }

/* ── Responsive ────────────────────────────────────────────────── */
/* Narrower: drop Last Update (col 2), Freshness (col 5) and Threshold (col 6) from every level */
@media (max-width: 900px) {
    .mc-stats { grid-template-columns: 128px 60px 60px 14px; }
    .mc-stats > :nth-child(2), .mc-stats > :nth-child(5), .mc-stats > :nth-child(6) { display: none; }
}
/* Narrowest: keep only Status + Uptime */
@media (max-width: 600px) {
    .table-row { flex-wrap: wrap; gap: 10px; }
    .table-name { flex: 1 1 100%; min-width: 0; }
    .summary-stats { gap: 12px; }
    .mc-stats { grid-template-columns: 96px 56px 14px; }
    .mc-stats > :nth-child(2), .mc-stats > :nth-child(4), .mc-stats > :nth-child(5), .mc-stats > :nth-child(6) { display: none; }
}

/* ================================================================
   DARK THEME — MC-Data
   ================================================================ */
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .schema-card {
    border: 1px solid var(--dark-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .table-card:hover,
html[data-theme="dark"] .schema-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.55); }

/* Accent text */
html[data-theme="dark"] .summary-stat-value,
html[data-theme="dark"] .table-tbl,
html[data-theme="dark"] .schema-name { color: var(--accent-text); }
html[data-theme="dark"] .mc-stat-metric.good,
html[data-theme="dark"] .feed-metric.good { color: #34D399; }

/* ── Status colours — brightened & mutually distinct on the dark surface ──
   The light palette (dark green / dark amber) reads muddy on navy, so the four
   statuses are remapped to vivid, clearly-separable hues:
     Fresh #34D399 (emerald) · At Risk #FBBF24 (amber) · Stale #F87171 (red) · Training #94A3B8 (slate). */

/* Fills: status dots, mini-bar segments, and domain icons */
html[data-theme="dark"] .dot-fresh,
html[data-theme="dark"] .seg-fresh,
html[data-theme="dark"] .schema-icon.si-fresh    { background: #34D399; }
html[data-theme="dark"] .dot-atrisk,
html[data-theme="dark"] .seg-atrisk,
html[data-theme="dark"] .schema-icon.si-atrisk   { background: #FBBF24; }
html[data-theme="dark"] .dot-stale,
html[data-theme="dark"] .seg-stale,
html[data-theme="dark"] .schema-icon.si-stale    { background: #F87171; }
html[data-theme="dark"] .dot-training,
html[data-theme="dark"] .seg-training,
html[data-theme="dark"] .schema-icon.si-training { background: #94A3B8; }

/* Summary stat values (text) */
html[data-theme="dark"] .summary-stat-value.fresh    { color: #34D399; }
html[data-theme="dark"] .summary-stat-value.atrisk   { color: #FBBF24; }
html[data-theme="dark"] .summary-stat-value.stale    { color: #F87171; }
html[data-theme="dark"] .summary-stat-value.training { color: #A9B4CE; }

/* Dark-theme active status chips are now shared across dashboards (chip-good/warn/bad/muted in
   shared.css). */

/* Freshness gauge — brightened fills + a clearly-visible track (so every bar reads the same length) */
html[data-theme="dark"] .mc-fresh-bar { background: rgba(148,163,184,0.28); box-shadow: inset 0 0 0 1px rgba(148,163,184,0.35); }
html[data-theme="dark"] .mc-fresh-bar.is-over { box-shadow: inset 0 0 0 1px #F87171; }
html[data-theme="dark"] .mc-fresh-fill.good { background: #34D399; }
html[data-theme="dark"] .mc-fresh-fill.warn { background: #FBBF24; }
html[data-theme="dark"] .mc-fresh-fill.bad  { background: #F87171; }
html[data-theme="dark"] .mc-fresh-label.good { color: #34D399; }
html[data-theme="dark"] .mc-fresh-label.warn { color: #FBBF24; }
html[data-theme="dark"] .mc-fresh-label.bad  { color: #F87171; }

/* Status badges — distinct translucent tints so they separate at a glance */
html[data-theme="dark"] .badge-fresh    { background: rgba(52,211,153,0.15);  color: #5FE3A9; }
html[data-theme="dark"] .badge-atrisk   { background: rgba(251,191,36,0.15);  color: #FBBF24; }
html[data-theme="dark"] .badge-stale    { background: rgba(248,113,113,0.15); color: #FCA5A5; }
html[data-theme="dark"] .badge-training { background: rgba(148,163,184,0.16); color: #C3CBDD; }

/* Domain group header */
html[data-theme="dark"] .schema-row {
    background: linear-gradient(135deg, var(--dark-surface-2) 0%, var(--dark-surface-3) 100%);
    border-bottom-color: var(--dark-border);
}
html[data-theme="dark"] .schema-icon { color: #fff; }
html[data-theme="dark"] .schema-mini-bar { background: var(--dark-surface-3); }
html[data-theme="dark"] .schema-details .table-card { border-color: var(--dark-border); }

/* Segment detail rows */
html[data-theme="dark"] .table-details { border-top-color: var(--dark-border-soft); }
html[data-theme="dark"] .feed-row { border-bottom-color: var(--dark-border-soft); }
html[data-theme="dark"] .feed-row:hover { background: var(--dark-surface-2); }

/* At-risk popover (already dark-tinted; add definition on dark page) */
html[data-theme="dark"] .pipe-popover { border: 1px solid var(--dark-border); }

/* Debug footer */
html[data-theme="dark"] .debug-footer { border-top-color: var(--dark-border); }
html[data-theme="dark"] .debug-footer strong { color: var(--slate); }
html[data-theme="dark"] .debug-sep { color: var(--smoke); }