/* ================================================================
   Data Availability — Page-specific styles
   Shared styles are in ../shared.css
   ================================================================ */

/* ── Freshness colors ──────────────────────────────────────────── */
.dot-fresh   { background: #00A86B; }
.dot-waiting { background: #77BB93; }
.dot-stale   { background: var(--error-1); }
.dot-missing { background: var(--slate); }

/* ── Summary bar (data-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.waiting { color: #77BB93; }
.summary-stat-value.stale   { color: var(--error-1); }
.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-waiting { background: #77BB93; }
.seg-stale   { background: var(--error-1); }
.seg-missing { 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-freshness-dots { display: flex; gap: 3px; flex-shrink: 0; }
.table-freshness-dot  { width: 8px; height: 8px; border-radius: 50%; }
.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: 8px; 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; }
.table-chevron {
    color: var(--slate); font-size: 14px; transition: transform 0.2s; flex-shrink: 0;
}
.table-card.expanded .table-chevron { transform: rotate(90deg); }

/* Freshness badge colors */
.badge-fresh   { background: #EDF6F0; color: #006644; }
.badge-waiting { background: #EDF6F0; color: #3d7a52; }
.badge-stale   { background: var(--error-2); color: #881717; }
.badge-missing { background: var(--ash); color: #5a6e78; }
.badge-mixed   { background: var(--mist); color: var(--indigo); }

/* ── Schema 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-card.expanded .schema-row { 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-waiting { background: #77BB93; color: #1a4d33; }
.schema-icon.si-stale   { background: var(--error-1); }
.schema-icon.si-mixed   { 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: 8px; align-items: center; flex-shrink: 0; }
.schema-mini-bar {
    width: 60px; height: 6px; border-radius: 3px;
    overflow: hidden; display: flex; background: #f1f5f9;
}
.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); }
.schema-details { display: none; padding: 12px 16px 16px 16px; }
.schema-card.expanded .schema-details { display: block; }
.schema-details .table-card {
    box-shadow: none; border: 1px solid #e2e8f0;
    border-radius: 8px; margin-bottom: 8px;
}
.schema-details .table-card:last-child { margin-bottom: 0; }

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

.feed-list { margin-top: 12px; }
.feed-header {
    display: grid;
    grid-template-columns: 60px 1fr 170px 90px 75px 100px 70px;
    gap: 12px; padding: 6px 12px;
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    color: var(--slate); letter-spacing: 0.5px;
    border-bottom: 1px solid #f1f5f9;
}
.feed-row {
    display: grid;
    grid-template-columns: 60px 1fr 170px 90px 75px 100px 70px;
    gap: 12px; padding: 10px 12px; font-size: 13px;
    align-items: center; border-bottom: 1px solid #f8fafc; transition: background 0.1s;
}
.feed-row:hover { background: #f8fafc; }
.feed-row:last-child { border-bottom: none; }

.client-view-header { grid-template-columns: 2fr 170px 90px 75px 100px 70px !important; }
.client-view-row    { grid-template-columns: 2fr 170px 90px 75px 100px 70px !important; }

.feed-id        { font-weight: 600; color: var(--slate); font-size: 12px; }
.feed-client    { color: var(--charcoal); font-weight: 500; }
.feed-timestamp { font-size: 12px; color: var(--slate); font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; }
.feed-age       { font-size: 12px; font-weight: 600; }
.feed-age.age-fresh   { color: #00A86B; }
.feed-age.age-waiting { color: #77BB93; }
.feed-age.age-stale   { color: var(--error-1); }
.feed-age.age-missing { color: var(--slate); font-style: italic; }
.feed-records { font-size: 12px; color: var(--slate); text-align: right; }
.feed-sla     { font-size: 12px; color: var(--slate); font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; }
.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 ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .feed-header, .feed-row { grid-template-columns: 50px 1fr 130px 80px 70px; }
    .feed-header > :nth-child(4), .feed-row > :nth-child(4) { display: none; }
    .feed-header > :nth-child(5), .feed-row > :nth-child(5) { display: none; }
}
@media (max-width: 600px) {
    .table-row { flex-wrap: wrap; gap: 10px; }
    .table-name { flex: 1 1 100%; min-width: 0; }
    .summary-stats { gap: 12px; }
    .feed-header, .feed-row { grid-template-columns: 50px 1fr 70px; }
    .feed-header > :nth-child(3), .feed-row > :nth-child(3) { display: none; }
    .feed-header > :nth-child(4), .feed-row > :nth-child(4) { display: none; }
    .feed-header > :nth-child(5), .feed-row > :nth-child(5) { display: none; }
    .feed-header > :nth-child(6), .feed-row > :nth-child(6) { display: none; }
}

/* ================================================================
   DARK THEME — Data Availability
   Token neutrals/surfaces flip via shared.css; this handles the
   page's hardcoded hex values and accent-on-dark text.
   ================================================================ */
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 on dark surfaces */
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"] .summary-stat-value.fresh { color: #34D399; }
html[data-theme="dark"] .feed-age.age-fresh { color: #34D399; }

/* Schema 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-card.expanded .schema-row { 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); }

/* Freshness badges */
html[data-theme="dark"] .badge-fresh   { background: var(--jade-light); color: #5FE3A9; }
html[data-theme="dark"] .badge-waiting { background: var(--jade-light); color: #86C9A4; }
html[data-theme="dark"] .badge-stale   { color: #FCA5A5; }
html[data-theme="dark"] .badge-missing { background: var(--dark-surface-3); color: var(--slate); }
html[data-theme="dark"] .badge-mixed   { color: var(--accent-text); }

/* Feed detail rows */
html[data-theme="dark"] .feed-header { border-bottom-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); }
html[data-theme="dark"] .table-details { border-top-color: var(--dark-border-soft); }

/* 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); }