/* Build 04F: final theme contrast and inspection/synchronization UI. */
html[data-theme]{
  --surface:var(--theme-surface);
  --panel-soft:var(--theme-surface2);
  --line:var(--theme-line);
  --muted:var(--theme-muted);
  --blue:var(--theme-accent);
}

/* Every general white-box component follows the selected theme. */
header,.toolbar,.panel,.metric,.table-wrap,
.b04-kpi article,.traffic-state-strip span,.cdr-summary,
.b04-form-section,.b04-rate-assignment,.report-grid .panel,
.runtime-sync-panel,.cdr-detail-item{
  background:var(--theme-surface)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-line)!important;
}
.b04-form-section,.traffic-state-strip span,.cdr-detail-item{
  background:var(--theme-surface2)!important;
}

/* Headings, values and table text must never inherit white over a light box. */
.panel h1,.panel h2,.panel h3,.panel b,.panel strong,
.metric strong,.b04-kpi strong,.traffic-state-strip b,
.cdr-summary b,.report-grid strong,.report-grid b,
table td,table td b,table code{
  color:var(--theme-text)!important;
}
.panel p,.panel small,.metric small,.metric .top,
.b04-kpi small,.traffic-state-strip span,
table td small,.b04-help,.b04-muted,.b04-auth-mode,
.panel-title small,.cdr-detail-item small{
  color:var(--theme-muted)!important;
}

/* Tables and filter controls. */
table th{
  background:var(--theme-surface2)!important;
  color:var(--theme-muted)!important;
  border-color:var(--theme-line)!important;
}
table td{border-color:var(--theme-line)!important}
.toolbar input,.toolbar select,.cdr-filter-grid input,.cdr-filter-grid select,
.b04-toolbar input,.b04-toolbar select,.b04-form input,.b04-form select,.b04-form textarea,
.rule-form input,.rule-form select{
  background:var(--theme-input)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-line)!important;
}
input::placeholder,textarea::placeholder{color:var(--theme-muted)!important;opacity:1}
select option{background:var(--theme-surface)!important;color:var(--theme-text)!important}

/* Light semantic cards retain a dark foreground regardless of theme. */
.b04-alert{background:#fffbeb!important;color:#78350f!important;border-color:#f59e0b!important}
.b04-alert b,.b04-alert code{color:#78350f!important}
.b04-message{background:#e8f1ff!important;color:#174ea6!important}
.b04-message b{color:#174ea6!important}
.b04-message.error{background:#fee2e2!important;color:#991b1b!important}
.b04-message.error b{color:#991b1b!important}
.b04-status.ok,.tag.green,.call-state.answered{color:#087853!important}
.b04-status.warn,.tag.amber,.call-state.ringing,.call-state.early-media,.call-state.routing,.call-state.progress{color:#8a5609!important}
.b04-status.bad{color:#991b1b!important}

/* Light theme explicitly uses dark text on all white surfaces. */
html[data-theme="noc-light"] header,
html[data-theme="noc-light"] .toolbar,
html[data-theme="noc-light"] .panel,
html[data-theme="noc-light"] .metric,
html[data-theme="noc-light"] .table-wrap,
html[data-theme="noc-light"] .b04-kpi article,
html[data-theme="noc-light"] .traffic-state-strip span,
html[data-theme="noc-light"] .cdr-summary,
html[data-theme="noc-light"] .runtime-sync-panel,
html[data-theme="noc-light"] .cdr-detail-item{
  background:#fff!important;color:#172033!important;border-color:#d5dfeb!important;
}
html[data-theme="noc-light"] table td,
html[data-theme="noc-light"] table td b,
html[data-theme="noc-light"] .panel h2,
html[data-theme="noc-light"] .b04-kpi strong,
html[data-theme="noc-light"] .traffic-state-strip b{color:#172033!important}
html[data-theme="noc-light"] table th{background:#f5f8fc!important;color:#526179!important}

/* CDR rows are directly inspectable without scrolling to the final column. */
.cdr-click-row{cursor:pointer;transition:background .12s,outline-color .12s}
.cdr-click-row:hover,.cdr-click-row:focus{
  background:color-mix(in srgb,var(--theme-accent) 12%,var(--theme-surface))!important;
  outline:2px solid color-mix(in srgb,var(--theme-accent) 55%,transparent);
  outline-offset:-2px;
}
.cdr-open-detail{white-space:nowrap}
.cdr-detail-modal .b04-modal-card{width:min(1050px,97vw)}
.cdr-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cdr-detail-item{border:1px solid var(--theme-line);border-radius:9px;padding:11px;min-width:0}
.cdr-detail-item.wide{grid-column:1/-1}
.cdr-detail-item small{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.45px;margin-bottom:5px}
.cdr-detail-item b{display:block;color:var(--theme-text);overflow-wrap:anywhere}
.cdr-decision-panel{margin-top:14px}
.cdr-decision-panel h3{color:var(--theme-text)}
.cdr-decision-panel pre{background:#0f172a;color:#e2e8f0;border-radius:9px;padding:14px;max-height:360px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}

/* Live configuration synchronization indicator. */
.runtime-sync-pill{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px;border:1px solid var(--theme-line);border-radius:999px;background:var(--theme-surface2);color:var(--theme-text);font-size:11px;font-weight:800;cursor:pointer}
.runtime-sync-pill i{width:8px;height:8px;border-radius:50%;background:#f59e0b}
.runtime-sync-pill.ok i{background:#16a34a}.runtime-sync-pill.bad i{background:#dc2626}
.runtime-sync-panel{margin-bottom:16px;border-left:5px solid #dc2626!important}
.runtime-sync-panel.ok{border-left-color:#16a34a!important}
.runtime-sync-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#fee2e2;color:#991b1b;font-size:11px;font-weight:900}
.runtime-sync-panel.ok .runtime-sync-badge{background:#dcfce7;color:#166534}
.runtime-sync-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.runtime-sync-grid>div{padding:11px;border:1px solid var(--theme-line);border-radius:9px;background:var(--theme-surface2);color:var(--theme-text)}
.runtime-sync-grid small{display:block;color:var(--theme-muted);font-size:10px;font-weight:850;margin-bottom:5px}
.runtime-sync-grid b{display:block;color:var(--theme-text)}
.runtime-sync-confirm,.runtime-sync-issues{margin-top:12px;padding:11px;border-radius:8px;font-weight:700}
.runtime-sync-confirm{background:#dcfce7;color:#166534}.runtime-sync-issues{background:#fee2e2;color:#991b1b}
.runtime-sync-actions{display:flex;justify-content:flex-end;margin-top:10px}

@media(max-width:900px){.cdr-detail-grid,.runtime-sync-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cdr-detail-grid,.runtime-sync-grid{grid-template-columns:1fr}.cdr-detail-item.wide{grid-column:auto}.runtime-sync-pill span{display:none}}