/* Readable summaries first; diagnostics stay in a shared disclosure panel. */
.mc-redis { margin-top: 14px; }
.mc-redis .mc-state-pill { white-space: normal; line-height: 1.8; }
#master-control-room {
  --mc-accent: var(--primary-ink); --mc-blue: #0284c7; --mc-violet: #7c3aed;
  --mc-good: #087c59; --mc-warn: #a15b09; --mc-bad: #c53349;
  --mc-panel: var(--surface); --mc-soft: var(--surface-2);
  --mc-text: var(--text); --mc-muted: var(--text-muted); --mc-line: var(--border);
}
html[data-theme="dark"] #master-control-room {
  --mc-accent: var(--primary-ink); --mc-blue: #7dd3fc; --mc-violet: #c4b5fd;
  --mc-good: #6ee7b7; --mc-warn: #fcd34d; --mc-bad: #fda4af;
}
.mc-shell { color: var(--mc-text); margin-bottom: 20px; }
.mc-toolbar, .mc-toolbar-copy, .mc-card-head, .mc-details-actions { display: flex; align-items: center; }
.mc-toolbar { justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mc-toolbar-copy { flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--mc-muted); }
.mc-section-label { color: var(--mc-text); font-size: 14px; font-weight: 700; }
.mc-connection { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.mc-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mc-muted); flex-shrink: 0; }
.mc-connection[data-state="healthy"] .mc-dot, .mc-dot[data-state="healthy"] { background: var(--mc-good); }
.mc-connection[data-state="down"] .mc-dot { background: var(--mc-bad); }
.mc-button { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; font-weight: 500; padding: 9px 14px; cursor: pointer; white-space: nowrap; }
.mc-button:hover { border-color: var(--primary); }
.mc-button:disabled { opacity: .5; cursor: default; }
.mc-button:focus-visible, .mc-detail-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.mc-notice { padding: 10px 14px; border: 1px solid var(--mc-line); border-inline-start: 3px solid var(--warning); border-radius: 10px; background: var(--mc-panel); color: var(--mc-muted); font-size: 13px; margin-bottom: 12px; }
.mc-notice[hidden], .mc-details[hidden], [data-mc-panel][hidden] { display: none; }
/* Use the existing KPI component instead of a separate widget design. */
.mc-grid, #mtab-overview > .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mc-grid { margin-bottom: 0; }
.mc-card { min-width: 0; }
.mc-card.mc-selected { border-color: var(--primary); }
.mc-kpi-value { color:var(--primary-ink); }
.mc-kpi-value > strong { font-size: inherit; font-weight: inherit; font-variant-numeric: tabular-nums; }
.mc-crm .mc-kpi-value { color: var(--success); }
.mc-health .mc-kpi-value { color: var(--text); }
.mc-sms .mc-kpi-value { color: var(--text); }
.mc-card-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; color: var(--text-muted); font-size: 11px; }
.mc-online-line { display: inline; }
.mc-online-line > strong { color: var(--text); font-weight: 700; }
.mc-state-pill { color: var(--mc-muted); }
.mc-state-pill[data-state="healthy"] { color: var(--mc-good); }
.mc-state-pill[data-state="degraded"] { color: var(--mc-warn); }
.mc-state-pill[data-state="down"] { color: var(--mc-bad); }
.mc-detail-button { border: 0; padding: 0; background: transparent; color: var(--text-muted); font-size: inherit; cursor: pointer; text-align: right; }
.mc-detail-button:hover, .mc-detail-button[aria-expanded="true"] { color:var(--primary-ink); }
.mc-service-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.mc-service-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; }
.mc-service-chip > strong, .mc-service-chip > span { font-size: 13px; }
.mc-service-chip > strong { font-weight: 500; }
.mc-service-chip > span { color: var(--text-muted); }
.mc-service-chip[data-state="healthy"] > span { color: var(--mc-good); }
.mc-service-chip[data-state="degraded"] > span { color: var(--mc-warn); }
.mc-service-chip[data-state="down"] > span { color: var(--mc-bad); }
.mc-details { margin-top: 14px; background: var(--mc-panel); border: 1px solid var(--mc-line); border-radius: 14px; padding: 18px; }
.mc-details > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mc-details h3 { font-size: 15px; }
.mc-detail-description { color: var(--mc-muted); font-size: 13px; line-height: 1.9; margin-bottom: 16px; }
.mc-chart-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; margin-bottom: 12px; }
.mc-chart-heading > span { color: var(--mc-muted); }
.mc-hourly { height: 85px; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 5px; direction: ltr; border-bottom: 1px solid var(--mc-line); }
.mc-hour { height: 100%; display: flex; align-items: flex-end; }
.mc-hour > i { display: block; width: 100%; height: var(--bar-height); min-height: 2px; background: var(--mc-accent); border-radius: 3px 3px 0 0; }
[data-mc-panel="crm"] .mc-hour > i { background: var(--mc-blue); }
.mc-hour-future > i, .mc-hour-unknown > i, [data-mc-panel="crm"] .mc-hour-future > i, [data-mc-panel="crm"] .mc-hour-unknown > i { background: var(--mc-line); }
.mc-chart-axis { display: flex; justify-content: space-between; direction: ltr; color: var(--mc-muted); font-size: 12px; margin: 6px 0 14px; }
.mc-detail-stamp { color: var(--mc-muted); font-size: 12px; }
.mc-detail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
[data-mc-panel="sms"] .mc-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-detail-list > div { padding: 12px; border-radius: 10px; background: var(--mc-soft); min-width: 0; }
.mc-detail-list dt { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.mc-detail-list dd > strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.mc-detail-list dd > span { display: block; color: var(--mc-muted); font-size: 13px; line-height: 1.8; margin-top: 5px; }
.mc-database { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; margin-bottom: 12px; }
.mc-database > span { display: inline-flex; align-items: center; gap: 6px; }
.mc-details-actions { justify-content: space-between; gap: 12px; }
@media (max-width: 1100px) { .mc-grid, #mtab-overview > .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  #mc-sync-note { display: none; }
  .mc-toolbar-copy { gap: 8px; }
  .mc-detail-list, [data-mc-panel="sms"] .mc-detail-list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .mc-grid, #mtab-overview > .kpi-grid { grid-template-columns: 1fr; } }

/* Overview uses the CRM's opaque cards, typography and neutral surfaces. */
.sg-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.sg-icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--primary-light); color: var(--primary-ink); }
.sg-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sg-caption { font-size: 11px; color: var(--text-muted); }
/* Both four-card rows use one layout, including title/icon and footer slots. */
.overview-metric { display: grid; grid-template-rows: minmax(34px, auto) minmax(40px, auto) minmax(20px, auto); gap: 8px; }
.overview-metric > .kpi-value { margin: 0; font-size: 24px; line-height: 1.65; }
.overview-metric > .sg-caption { align-self: end; }
.overview-metric .mc-card-meta { align-items: baseline; }
.kpi-card { min-width: 0; cursor: default; }
.kpi-value { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mc-details { border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
#mtab-overview > #master-sms-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.master-brand-caption { font-size: 11px; color: var(--text-muted); }
.sidebar .brand-box > div:last-child { min-width: 0; }
.mobile-top-nav { max-width: 100%; }
.mobile-top-nav .btn { flex-shrink: 0; }
.btn:focus-visible, .nav-btn:focus-visible, .mc-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 650px) { .mc-toolbar { flex-wrap: wrap; } }
@media (max-width: 520px) { #mtab-overview > #master-sms-widgets { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .kpi-card { transition: none; } .kpi-card:hover { transform: none; } }