:root {
  color-scheme: dark;
  --background: #080808;
  --surface: #101010;
  --panel: #151515;
  --panel-deep: #0d0d0d;
  --border: #303030;
  --border-strong: #4a4a4a;
  --text: #ffffff;
  --muted: #a8a8a8;
  --accent: #e21b25;
  --accent-bright: #f02a34;
  --success: #4ade80;
  --warning: #facc15;
  --danger: #ff5a62;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--background);
  color: var(--text);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-height: 100vh; margin: 0; background: var(--background); }
button, a, input { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 10;
  padding: .75rem 1rem;
  color: #000;
  background: #fff;
}
.skip-link:focus { top: 1rem; }

.header {
  min-height: 72px; display: flex;
  align-items: center;
  justify-content: space-between; gap: 1rem; padding: 0 4vw;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.brand { display: flex; align-items: center; color: inherit; text-decoration: none; }
.tci-dark-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.tci-dark-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
.portal-logo { width: 48px; height: 48px; }
.actions { display: flex; align-items: center; gap: .65rem; }
#session-status, #live-status { color: var(--muted); font-size: .78rem; }
#live-status { display: inline-flex; align-items: center; gap: .35rem; }
#live-status::before {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
#live-status.healthy { color: var(--success); }
#live-status.updating { color: #ff737a; }
#live-status.warning { color: var(--warning); }
.actions button, .back-button, .secondary-button {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: .55rem .8rem;
  color: var(--text);
  background: #181818;
}
.actions button:hover, .back-button:hover, .secondary-button:hover:not(:disabled) {
  border-color: var(--accent);
  background: #251113;
}

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid rgba(242, 31, 43, .52);
  outline-offset: 3px;
}

main { width: min(1400px, 92vw); margin: 0 auto; padding: 3.5rem 0 5rem; }
main.signed-out {
  min-height: calc(100dvh - 72px);
  display: grid;
  place-items: center;
  padding: 2rem 0;
}
.page-heading { margin-bottom: 1.75rem; }
.eyebrow {
  margin: 0;
  color: #ff626a;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
h1 { margin: .2rem 0; font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.04em; }
h2 { margin-top: 0; font-size: 1.15rem; }
.page-copy { max-width: 680px; color: var(--muted); line-height: 1.6; }
.site-detail-local-time { margin: .25rem 0 0; }

.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.site-card, .metric-card, .panel, .auth-card, .message-card, .empty-state {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.site-card {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.2rem;
  color: inherit;
  text-align: left;
}
.site-card:hover, .site-card:focus-visible { border-color: var(--accent); background: #1c1011; }
.site-card strong { margin: .7rem 0 .15rem; font-size: 1.25rem; }
.fleet-system-status {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: .35rem; color: var(--muted); font-size: .78rem;
}
.fleet-system-status .fleet-system-value { margin: 0; font-size: .78rem; text-align: right; }
.fleet-system-value.healthy { color: var(--success); }
.fleet-system-value.warning { color: var(--warning); }
.fleet-system-value.critical { color: var(--danger); }
.fleet-system-value.unknown { color: var(--muted); }
.site-state { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.site-state.online { color: var(--success); }
.site-state.offline { color: var(--danger); }
.site-state.unknown { color: var(--muted); }
.site-local-time { margin-top: .35rem; color: #d8d8d8; font-variant-numeric: tabular-nums; }
.availability-counter {
  margin-top: .35rem;
  color: var(--muted);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.availability-counter.online { color: var(--success); }
.availability-counter.offline { color: var(--danger); }
.availability-counter.unknown { font-size: .82rem; font-weight: 650; }
.open-label { margin-top: auto; color: #ff626a; }

.availability-banner {
  margin: 0 0 1rem;
  display: grid;
  gap: .3rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--muted);
  border-radius: 10px;
  background: #141414;
}
.availability-banner strong { color: var(--text); font-size: 1.05rem; }
.availability-banner span { color: var(--muted); }
.availability-banner.offline { border-color: #7c252c; border-left-color: var(--danger); background: #210d10; }
.availability-banner.offline span { color: #d2b3b5; }
.availability-banner.unknown { border-left-color: #777; }
.offline-live-data { opacity: .42; filter: grayscale(1); }
.offline-live-data :is(button, summary) { pointer-events: none; }
.technical-details.offline-live-data > summary { pointer-events: auto; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.detail-grid.single-panel-grid { grid-template-columns: 1fr; }
.embedded-schedule {
  margin: 1rem 0 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; background: transparent; box-shadow: none;
}
.processors-full-width { width: 100%; margin-top: 1rem; }
.processor-tabs {
  display: flex; gap: .45rem; margin-bottom: .8rem; padding-bottom: .2rem; overflow-x: auto;
  scrollbar-width: thin;
}
.processor-tab {
  flex: 0 0 auto; min-width: 180px; display: grid; gap: .18rem; padding: .65rem .8rem;
  border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--panel-deep);
  text-align: left; cursor: pointer;
}
.processor-tab strong, .processor-tab span { display: block; }
.processor-tab strong { color: var(--text); font-size: .82rem; }
.processor-tab span { max-width: 260px; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.processor-tab[aria-selected="true"] { border-color: var(--accent); color: #ffd4d6; background: #281214; }
.processor-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.metric-card { display: grid; gap: .3rem; padding: 1rem; }
.metric-label { color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.metric-value { font-size: 1.8rem; overflow-wrap: anywhere; }
.metric-detail, .record-time { color: var(--muted); font-size: .82rem; }

.panel { margin-top: 1rem; padding: 1.15rem; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h2, .section-heading p { margin: 0; }
.section-heading p { color: var(--muted); font-size: .85rem; text-align: right; }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .65rem; margin: 0; }
.fact, .system-card, .simple-row, .record, .stream-row {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-deep);
}
.fact { min-width: 0; padding: .8rem; }
.fact dt { color: var(--muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.fact dd { margin: .25rem 0 0; overflow-wrap: anywhere; font-weight: 700; }
.subsection { margin-top: 1.25rem; }
.subsection h3 { margin: 0 0 .7rem; font-size: .95rem; }
.system-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .75rem; }
.system-card { padding: .9rem; }
.compact-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .8rem; }
.compact-metric { min-width: 0; }
.compact-metric span, .compact-metric strong { display: block; }
.compact-metric span { color: var(--muted); font-size: .72rem; }
.compact-metric strong { margin-top: .15rem; font-size: 1.05rem; }
.simple-list { display: grid; gap: .5rem; }
.simple-row { display: grid; grid-template-columns: minmax(100px, .45fr) minmax(0, 1fr); gap: 1rem; padding: .7rem .8rem; }
.simple-row span { color: #d2d2d2; overflow-wrap: anywhere; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.technical-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #ff626a;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.technical-details > summary::-webkit-details-marker { display: none; }
.technical-details[open] > summary { margin-bottom: 1rem; }
.technical-summary strong, .technical-summary small { display: block; }
.technical-summary small { margin-top: .2rem; color: var(--muted); font-weight: 400; }
.connection-state { color: var(--muted); font-size: .78rem; }
.connection-state.connected { color: var(--success); }
.connection-state.offline { color: var(--danger); }
.connection-state.unknown { color: var(--muted); }
.stream-heading { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 .6rem; }
.stream-heading h3 { margin: 0; font-size: .9rem; }
.stream-list { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.stream-row { display: grid; grid-template-columns: minmax(130px, .7fr) repeat(2, minmax(180px, 1fr)); gap: 1rem; padding: .7rem .8rem; border: 0; border-radius: 0; }
.stream-row + .stream-row { border-top: 1px solid var(--border); }
.stream-row span { color: var(--muted); font-size: .8rem; }

.record-list { display: grid; gap: .75rem; }
.record { padding: .9rem; }
.record strong, .record-time { display: block; }
.alert-record { border-color: #6b2028; background: #1b0d10; }
.alert-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dismiss-alert {
  margin-top: .75rem; border: 1px solid #555; border-radius: 7px;
  padding: .45rem .7rem; color: #fff; background: #1b1b1b;
}
.dismiss-alert:hover { border-color: var(--tci-red); background: #251113; }
.panel > .section-heading { position: relative; padding-right: 5.8rem; }
.alarm-panel > .section-heading { padding-right: 10.5rem; }
.logs-button {
  position:absolute;top:0;right:5.2rem;display:inline-flex;align-items:center;gap:.38rem;
  min-height:30px;padding:.38rem .58rem;font-size:.7rem;font-weight:800;letter-spacing:.025em;
  white-space:nowrap;text-transform:uppercase;
}
.logs-button svg { flex:0 0 auto; }
.section-collapse-button {
  position: absolute; top: 0; right: 0; min-width: 4.7rem; padding: .48rem .62rem;
  border: 1px solid var(--border-strong); border-radius: 7px; color: var(--text);
  background: #1a1a1a; font-size: .72rem; font-weight: 750; cursor: pointer;
}
.section-collapse-button:hover, .section-collapse-button:focus-visible { border-color: var(--accent); background: #251113; }
.panel[data-collapsed="true"] > :not(.section-heading):not(.site-log-dialog) { display: none; }
.panel[data-collapsed="true"] > .section-heading { margin-bottom: 0; }
.site-log-dialog {
  width: min(920px, calc(100vw - 2rem)); max-height: min(82vh, 780px);
  padding: 0; border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); background: var(--panel); box-shadow: 0 22px 70px #000c;
}
.site-log-dialog::backdrop { background: #000b; backdrop-filter: blur(3px); }
.site-log-dialog-shell { position: relative; padding: 1.25rem; }
.site-log-dialog .site-log-panel { margin: 0; padding: 0; border: 0; background: transparent; }
.site-log-dialog .site-log-list { max-height: 50vh; overflow: auto; padding-right: .25rem; }
.dialog-close {
  position: absolute; z-index: 2; top: .8rem; right: .8rem; width: 2rem; height: 2rem;
  border: 1px solid #555; border-radius: 999px; color: #fff; background: #1b1b1b;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.site-log-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
.site-log-controls {
  display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: .65rem; margin-bottom: .8rem;
}
.site-log-control { display: grid; gap: .3rem; color: var(--tci-muted); font-size: .75rem; }
.site-log-control select {
  width: 100%; border: 1px solid #444; border-radius: 7px;
  padding: .5rem .6rem; color: #fff; background: #171717;
}
.site-log-list { display: grid; gap: .45rem; }
.site-log-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .8rem;
  align-items: center; padding: .7rem .8rem; border: 1px solid var(--border);
  border-left-width: 4px; border-radius: 8px; background: var(--panel-deep);
}
.site-log-row[hidden] { display: none; }
.site-log-row.pixera { border-left-color: #4ea7ff; }
.site-log-row.novastar { border-left-color: #b58cff; }
.site-log-row.system { border-left-color: #888; }
.site-log-row.critical { background: #1d0d0f; }
.site-log-row.warning { background: #1b160a; }
.site-log-labels { display: flex; flex-wrap: wrap; gap: .35rem; }
.source-badge {
  display: inline-flex; align-items: center; border-radius: 999px; padding: .23rem .48rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
}
.source-badge.pixera { color: #9dceff; background: #10263b; }
.source-badge.novastar { color: #d4bdff; background: #281b3c; }
.source-badge.system { color: #d0d0d0; background: #292929; }
.site-log-copy { min-width: 0; }
.site-log-copy strong, .site-log-copy span { display: block; overflow-wrap: anywhere; }
@media (max-width: 650px) {
  .site-log-controls { grid-template-columns: 1fr; }
  .site-log-row { grid-template-columns: 1fr; gap: .4rem; }
}

/* Online monitoring layout: dense, readable, and read-only. */
main { width:min(1560px,96vw);padding:2rem 0 4rem; }
.page-heading { margin-bottom:1.1rem; }
.page-heading h1 { font-size:clamp(1.8rem,3vw,2.7rem); }
.page-copy { margin:.35rem 0 0;line-height:1.45; }
.site-detail-local-time { margin-top:.15rem; }
.summary-grid { grid-template-columns:repeat(5,minmax(150px,1fr));gap:.65rem;margin:1rem 0; }
.metric-card { min-height:104px;padding:.85rem;border-left:3px solid var(--border-strong); }
.metric-card:nth-child(1) { border-left-color:var(--success); }
.metric-card:nth-child(2) { border-left-color:#60a5fa; }
.metric-card:nth-child(3) { border-left-color:#a78bfa; }
.metric-card:nth-child(4) { border-left-color:var(--warning); }
.metric-card:nth-child(5) { border-left-color:var(--danger); }
.metric-label { font-size:.7rem;font-weight:800;letter-spacing:.055em; }
.metric-value { font-size:1.45rem;line-height:1.15; }
.metric-detail { line-height:1.35; }
.panel { margin-top:.75rem;padding:1rem; }
.section-heading { min-height:42px;align-items:flex-start;margin-bottom:.8rem; }
.section-heading-copy { min-width:0;display:grid;gap:.22rem; }
.section-heading h2 { font-size:1rem;line-height:1.25; }
.section-heading p { max-width:760px;margin:0;text-align:left;font-size:.78rem;line-height:1.4; }
.section-collapse-button { top:0; }
.alarm-panel > .section-heading { padding-right:11.5rem; }
.record-list { gap:.5rem; }
.record { padding:.75rem; }
.alert-header strong { font-size:.84rem;line-height:1.4; }
.dismiss-alert { margin-top:.55rem;padding:.36rem .6rem;font-size:.72rem; }
.facts-grid { grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.5rem; }
.fact { padding:.65rem; }
.fact dt { font-size:.67rem; }
.fact dd { font-size:.82rem; }
.subsection { margin-top:1rem; }
.system-grid { grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.55rem; }
.system-card { padding:.75rem; }
.compact-metrics { gap:.4rem; }
.simple-list { gap:.4rem; }
.simple-row { padding:.65rem .75rem; }
.embedded-schedule { margin-top:.85rem;padding-top:.85rem; }
.embedded-schedule .section-heading { min-height:34px; }
.processors-full-width { margin-top:.75rem; }
.processor-tabs { gap:.35rem;margin-bottom:.6rem; }
.processor-tab { min-width:170px;padding:.55rem .7rem; }
.processor-list { gap:.55rem; }
.processor-card { padding:1rem; }
.processor-card-header > div > strong { font-size:1rem; }
.processor-facts { margin:1rem 0;gap:.75rem 2rem; }
.processor-subheading { margin-top:.6rem; }
.processor-health-facts { gap:.45rem; }
.processor-health-card { min-width:0;display:grid;gap:.45rem;padding:.7rem;border:1px solid var(--border);border-radius:6px;background:#0d0d0d; }
.processor-health-card-header { display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem; }
.processor-health-card-header > strong { font-size:.75rem;line-height:1.35; }
.processor-health-card > .record-time { font-size:.68rem; }
.reported-array-list { gap:.7rem; }
.reported-array-card { margin-top:.2rem;padding:1rem 0 0; }
.reported-array-header h3 { font-size:.9rem; }
.screen-array-summary { gap:.4rem;margin:.7rem 0; }
.cabinet-map-legend { margin-bottom:.45rem; }
.cloud-cabinet-map { min-height:330px; }
.cloud-cabinet-grid { min-height:330px;padding:clamp(1rem,3vw,2.5rem); }
.cloud-cabinet-detail { min-height:100%; }
.technical-details { margin-top:.75rem; }
.technical-details > summary { padding:.85rem 1rem; }
.stream-heading { margin:.8rem 0 .45rem; }
.stream-row { padding:.6rem .7rem; }
.alert-policy-form { gap:.75rem; }
.alert-policy-delivery { padding:.75rem .85rem; }
.alert-policy-options { gap:.5rem; }
.alert-policy-option { padding:.65rem; }
.site-log-dialog-shell { padding:1rem; }
.site-log-controls { gap:.5rem;margin-bottom:.6rem; }
.site-log-list { gap:.35rem; }
.site-log-row { padding:.6rem .7rem; }

@media (max-width:1100px) {
  main { width:min(100% - 2rem,1200px); }
  .summary-grid { grid-template-columns:repeat(3,minmax(150px,1fr)); }
  .processor-health-facts { grid-template-columns:repeat(2,minmax(180px,1fr)); }
  .screen-array-summary { grid-template-columns:repeat(2,minmax(150px,1fr)); }
  .cloud-cabinet-map { grid-template-columns:1fr; }
  .cloud-cabinet-detail { min-height:0; }
}

@media (max-width:700px) {
  main { width:calc(100% - 1rem);padding:1rem 0 2.5rem; }
  .header { min-height:64px;padding:.55rem .75rem; }
  .portal-logo { width:40px;height:40px; }
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-card { min-height:92px; }
  .panel { padding:.8rem; }
  .section-heading,.alarm-panel > .section-heading { padding-right:0;padding-bottom:2.7rem; }
  .logs-button { right:5.1rem;top:auto;bottom:0; }
  .section-collapse-button { top:auto;right:0;bottom:0; }
  .processor-enabled-count { margin:0; }
  .processor-facts,.processor-health-facts,.screen-array-summary { grid-template-columns:1fr 1fr; }
  .cloud-cabinet-grid { min-height:240px;padding:.65rem; }
  .cloud-cabinet-tile { min-height:70px; }
}

@media (max-width:440px) {
  .summary-grid,.processor-facts,.processor-health-facts,.screen-array-summary { grid-template-columns:1fr; }
  .actions { gap:.35rem; }
  #session-status { display:none; }
}
.severity {
  flex: 0 0 auto;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.severity.critical { color: #ff9aae; background: #451c28; }
.severity.warning { color: #ffe18f; background: #3b2b11; }
.severity.healthy { color: #8de5b5; background: #123525; }
.severity.info { color: #d0d0d0; background: #292929; }
.healthy-state {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .75rem;
  padding: 1rem;
  border: 1px solid #21543f;
  border-radius: 10px;
  background: #0b211a;
}

.processor-list, .reported-array-list { display: grid; gap: .8rem; }
.processor-enabled-count { margin-left:auto;margin-right:5.2rem;color:var(--muted);white-space:nowrap; }
.processor-card, .reported-array-card {
  padding: 1rem; border: 1px solid var(--border); border-radius: 7px; background: #101010;
}
.processor-card-header, .reported-array-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.processor-card-header strong, .reported-array-header h3 { display: block; margin: 0 0 .2rem; }
.processor-facts {
  display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 1rem 3rem; margin: 1.2rem 0;
}
.processor-facts .compact-metric { padding: 0; background: transparent; }
.processor-facts .compact-metric span, .processor-facts .compact-metric strong { display: block; }
.processor-facts .compact-metric span { margin-bottom:.4rem;color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase; }
.processor-facts .compact-metric strong { font-size:1rem; }
.processor-subheading { margin: .25rem 0 .7rem;padding-top:1rem;border-top:1px solid var(--border);font-size:.95rem;font-weight:800; }
.processor-health-facts {
  display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: .55rem; margin-bottom: 1rem;
}
.processor-health-facts .compact-metric { min-height:68px;padding:.75rem;border:1px solid var(--border);border-radius:6px;background:#0d0d0d; }
.processor-health-facts .compact-metric span, .processor-health-facts .compact-metric strong { display: block; }
.processor-health-facts .compact-metric span { color:var(--text);font-size:.76rem;font-weight:800; }
.processor-health-facts .compact-metric strong { width:fit-content;margin:.55rem 0 0;color:var(--success);font-size:.72rem; }
.reported-array-card { padding-top:1rem;border:0;border-top:1px solid var(--border);border-radius:0;background:transparent; }
.screen-array-summary { display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:.45rem;margin:.9rem 0; }
.screen-array-summary .compact-metric { min-width:0;padding:.65rem;border:1px solid var(--border);border-radius:6px;background:#0d0d0d; }
.screen-array-summary span,.screen-array-summary strong { display:block; }
.screen-array-summary span { margin-bottom:.35rem;color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; }
.screen-array-summary strong { font-size:.78rem; }
.cabinet-map-legend { display:flex;align-items:center;gap:.85rem;margin-bottom:.55rem;color:var(--muted);font-size:.7rem; }
.cabinet-map-legend span::before { width:.55rem;height:.55rem;display:inline-block;margin-right:.3rem;border-radius:2px;background:#4b5563;content:""; }
.cabinet-map-legend span.healthy::before { background:#26b879; }
.cabinet-map-legend span.warning::before { background:#b9952d; }
.cabinet-map-legend em { margin-left:auto; }
.cloud-cabinet-map { display:grid;grid-template-columns:minmax(0,1.8fr) minmax(250px,.9fr);gap:.65rem;align-items:stretch; }
.cloud-cabinet-grid { min-height:300px;display:grid;align-content:center;gap:1px;padding:2.5rem;border:1px solid var(--border);border-radius:7px;background-color:#0b0b0b;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:22px 22px; }
.cloud-cabinet-tile {
  min-height:90px;display:grid;align-content:center;gap:.12rem;padding:.35rem;overflow:hidden;border:2px solid #28c889;border-radius:4px;color:#f4fff9;background:rgba(22,108,73,.68);cursor:pointer;text-align:center;
}
.cloud-cabinet-tile strong, .cloud-cabinet-tile span, .cloud-cabinet-tile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-cabinet-tile strong { font-size:1.2rem; }
.cloud-cabinet-tile span { font-size:.72rem;font-weight:800; }
.cloud-cabinet-tile small { opacity: .75; font-size: .56rem; }
.cloud-cabinet-tile.warning { border-color: #8a6824; color: #ffe6a1; background: #38290e; }
.cloud-cabinet-tile.critical, .cloud-cabinet-tile.offline { border-color: #943346; color: #ffb5c2; background: #3b1520; }
.cloud-cabinet-tile.unknown { border-color: #555; color: #ccc; background: #292929; }
.cloud-cabinet-tile.selected, .cloud-cabinet-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cloud-cabinet-detail { padding:.85rem;border:1px solid var(--border);border-radius:7px;background:#0d0d0d; }
.cloud-cabinet-detail > strong { display:block;padding-bottom:.7rem;border-bottom:1px solid var(--border);font-size:1rem; }
.cloud-cabinet-detail .facts-grid { display:grid;grid-template-columns:1fr;margin:.35rem 0 0;gap:0; }
.cloud-cabinet-detail .fact { display:grid;grid-template-columns:minmax(100px,.9fr) minmax(0,1.1fr);gap:.5rem;padding:.6rem 0;border:0;border-bottom:1px solid rgba(255,255,255,.05);border-radius:0;background:transparent; }
.cloud-cabinet-detail .fact dt { text-transform:none;letter-spacing:0; }
.cloud-cabinet-detail .fact dd { margin:0;text-align:right;font-size:.74rem; }
@media (max-width: 700px) {
  .processor-facts { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .processor-health-facts { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .cloud-cabinet-map { grid-template-columns: 1fr; }
}
.healthy-state .healthy-mark {
  grid-row: 1 / span 2;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #07100c;
  background: var(--success);
  font-weight: 900;
}
.healthy-state > span:last-child { color: #a9cdbb; font-size: .82rem; }
.payload {
  max-height: 260px;
  margin: .75rem 0 0;
  padding: .75rem;
  overflow: auto;
  border-radius: 7px;
  color: #eee;
  background: #050505;
  font: .78rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.auth-card { width: min(560px, 100%); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem); text-align: center; }
.auth-card .page-copy { margin-right: auto; margin-left: auto; letter-spacing: .12em; }
.session-notice {
  margin: 1rem 0 0;
  padding: .7rem .8rem;
  border: 1px solid #6b3343;
  border-radius: 8px;
  color: #ffd8da;
  background: #1b0d10;
}
.primary-button {
  margin-top: 1rem;
  padding: .8rem 1.1rem;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--accent);
  font-weight: 700;
}
.primary-button:hover { background: var(--accent-bright); }
.message-card, .empty-state { display: grid; gap: .35rem; padding: 1.25rem; color: var(--muted); }
.message-card strong, .empty-state strong { color: var(--text); }
.error-card { border-color: #6b3343; }
.back-button { margin-bottom: 1rem; }

.alert-policy-form { display: grid; gap: 1rem; }
.alert-policy-delivery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-deep);
}
.alert-policy-delivery-copy, .alert-policy-option-copy { display: grid; gap: .2rem; }
.alert-policy-delivery-copy span, .field-help, .alert-policy-option-copy small, .alert-policy-message {
  color: var(--muted);
  font-size: .82rem;
}
.alert-policy-state {
  flex: 0 0 auto;
  min-width: 3rem;
  padding: .3rem .6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: #bdbdbd;
  text-align: center;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.alert-policy-state.enabled { border-color: #2b6e51; color: #7ee0ae; background: #0d2119; }
.alert-policy-state.unavailable { border-color: #6a4d24; color: #e1bd7c; background: #241b0e; }
.alert-policy-toggle, .alert-policy-option { display: flex; align-items: flex-start; gap: .7rem; }
.alert-policy-toggle { width: fit-content; align-items: center; font-weight: 700; }
.alert-policy-form input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: .12rem 0 0;
  accent-color: var(--accent);
}
.alert-policy-field { max-width: 540px; display: grid; gap: .4rem; }
.alert-policy-field > label, .alert-policy-options legend { color: var(--text); font-size: .86rem; font-weight: 700; }
.alert-policy-field input[type="email"] {
  width: 100%;
  min-height: 42px;
  padding: .65rem .75rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  background: #090909;
}
.alert-policy-field input[type="email"]:focus { border-color: var(--accent); }
.alert-policy-field input:disabled, .alert-policy-form input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .6;
}
.alert-policy-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.alert-policy-options legend { grid-column: 1 / -1; margin-bottom: .1rem; }
.alert-policy-option {
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-deep);
}
.alert-policy-option-copy strong { font-size: .88rem; }
.recovery-toggle { font-size: .86rem; font-weight: 600; }
.alert-policy-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.alert-policy-actions .primary-button { margin-top: 0; }
.secondary-button { padding: .8rem 1.1rem; border-radius: 9px; }
.alert-policy-actions button:disabled { cursor: not-allowed; opacity: .45; }
.alert-policy-message { min-height: 1.2em; margin: 0; }
.alert-policy-message.pending { color: #d5b879; }
.alert-policy-message.success { color: #7ee0ae; }
.alert-policy-message.error { color: #ff7b82; }
.alert-policy-form[aria-busy="true"] { cursor: wait; }

@media (max-width: 1050px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .header { padding: .75rem 4vw; align-items: flex-start; }
  .actions { flex-wrap: wrap; justify-content: flex-end; }
  #session-status { width: 100%; text-align: right; }
  main.signed-out { min-height: calc(100dvh - 72px); padding: 1rem 0; }
  .summary-grid, .detail-grid, .alert-policy-options { grid-template-columns: 1fr; }
  .section-heading { display: block; }
  .section-heading p { margin-top: .35rem; text-align: left; }
  .compact-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simple-row, .stream-row { grid-template-columns: 1fr; gap: .2rem; }
  .alert-policy-delivery { align-items: flex-start; }
}

/* Desktop-parity cloud shell ------------------------------------------------ */
:root {
  --bg: #080808;
  --background: #080808;
  --surface: #101010;
  --panel: #151515;
  --panel-soft: #111111;
  --panel-deep: #0d0d0d;
  --border: #303030;
  --border-strong: #4a4a4a;
  --text: #ffffff;
  --muted: #a8a8a8;
  --accent: #e21b25;
  --accent-hover: #f02a34;
  --success: #4ade80;
  --green: #4ade80;
  --warning: #facc15;
  --yellow: #facc15;
  --danger: #fb7185;
  --red: #fb7185;
  --tci-muted: #a8a8a8;
  --tci-red: #fb7185;
  --shadow: none;
}

html,
body { height: 100%; }
body { overflow: hidden; line-height: 1.45; }
.cloud-app-shell { height: 100%; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.sidebar {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.brand-lockup {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  color: inherit;
  text-decoration: none;
}
.sidebar-logo { width: 96px; height: 30px; }
.nav-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a transparent;
}
.nav-item {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  line-height: 1.25;
}
.nav-item > svg,
.ghost-button > svg,
.cloud-user-icon > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item:hover { color: var(--text); border-color: transparent; background: #202020; }
.nav-item.active { color: #fff; border-color: var(--accent); background: #bd111b; }
.site-nav-group {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.site-nav-heading { min-width: 0; display: grid; gap: 2px; padding: 3px 10px 7px; }
.site-nav-heading span {
  color: #737373;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.site-nav-heading strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub-nav-item { padding: 7px 10px 7px 18px; font-size: 12px; }
.sub-nav-item > svg { width: 16px; height: 16px; }
.sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
}
.user-summary { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.cloud-user-icon { display: grid; place-items: center; color: var(--muted); }
.strong { font-weight: 800; }
.muted { color: var(--muted); }
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { margin-top: 2px; font-size: 12px; }
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: #242424;
}
.ghost-button:not(:disabled):hover { border-color: var(--border-strong); background: #303030; }
.ghost-button.full { width: 100%; }
.ghost-button.compact { padding: 7px 10px; border-radius: 5px; white-space: nowrap; }
.sidebar-logout { margin-top: 8px; }
.sidebar-logout > svg { width: 15px; height: 15px; }
.main-shell { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.topbar {
  height: 56px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.topbar-heading { min-width: 0; display: flex; align-items: center; gap: 10px; }
.topbar-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.cloud-read-only-badge {
  padding: 3px 7px;
  border: 1px solid rgba(242, 31, 43, .25);
  border-radius: 5px;
  color: #ff737a;
  background: rgba(242, 31, 43, .08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.topbar-status { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
#session-status,
#live-status { color: var(--muted); font-size: 12px; white-space: nowrap; }
#live-status { display: inline-flex; align-items: center; gap: 6px; }
#live-status::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; content: ""; }
#live-status.healthy { color: var(--green); }
#live-status.updating { color: #ff737a; }
#live-status.warning { color: var(--yellow); }
#refresh-action > svg { width: 15px; height: 15px; }

main.content-shell {
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 20px;
  overflow: auto;
  scrollbar-color: #4a4a4a #111;
  scroll-behavior: smooth;
}
.content-shell > * { scroll-margin-top: 12px; }
.content-shell > .page-heading { display: grid; gap: 2px; margin: 0 0 14px; }
.content-shell > .page-heading .eyebrow { margin: 0 0 2px; font-size: 11px; letter-spacing: .12em; }
.content-shell > .page-heading h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0; }
.content-shell > .page-heading .page-copy { max-width: none; margin: 2px 0 0; font-size: 13px; line-height: 1.5; }
.content-shell > .back-button {
  width: fit-content;
  margin: 0 0 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  background: #242424;
  font-size: 12px;
}
.content-shell > .back-button:hover { color: var(--text); border-color: var(--border-strong); background: #303030; }
main.content-shell.signed-out { width: 100%; min-height: 100%; padding: 24px; }
.portal-signed-out .cloud-app-shell { grid-template-columns: minmax(0, 1fr); }
.portal-signed-out .sidebar,
.portal-signed-out .topbar { display: none; }
.portal-signed-out .main-shell { min-height: 100vh; }

/* Match desktop component density inside the cloud content canvas. */
.content-shell .site-card,
.content-shell .metric-card,
.content-shell .panel,
.content-shell .auth-card,
.content-shell .message-card,
.content-shell .empty-state {
  border-radius: 8px;
  box-shadow: none;
}
.content-shell .site-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.content-shell .site-card { min-height: 156px; padding: 16px; }
.content-shell .site-card strong { margin-top: 9px; font-size: 17px; }
.content-shell .summary-grid { gap: 10px; margin: 14px 0; }
.content-shell .monitoring-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.content-shell .monitoring-overview-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-left: 3px solid var(--border-strong);
}
.content-shell .monitoring-overview-card.tone-healthy { border-left-color: var(--green); }
.content-shell .monitoring-overview-card.tone-warning { border-left-color: var(--yellow); }
.content-shell .monitoring-overview-card.tone-critical { border-left-color: var(--red); }
.monitoring-overview-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #ff737a;
  background: rgba(242, 31, 43, .1);
}
.monitoring-overview-icon svg { width: 21px; height: 21px; }
.monitoring-overview-copy { min-width: 0; }
.small-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.monitoring-overview-value { min-height: 30px; display: flex; align-items: center; margin: 5px 0 2px; font-size: 22px; font-weight: 800; }
.monitoring-overview-number { font-size: 22px; }
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}
.status-badge.healthy { color: var(--green); border-color: rgba(61, 226, 151, .25); background: rgba(61, 226, 151, .09); }
.status-badge.warning { color: var(--yellow); border-color: rgba(255, 209, 102, .25); background: rgba(255, 209, 102, .08); }
.status-badge.critical { color: var(--red); border-color: rgba(255, 84, 112, .25); background: rgba(255, 84, 112, .08); }
.status-badge.info { color: var(--muted); background: rgba(255, 255, 255, .035); }
.content-shell .metric-card { min-height: 96px; padding: 13px; border-left-width: 1px; }
.content-shell .metric-label { font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.content-shell .metric-value { font-size: 19px; font-weight: 850; }
.content-shell .panel { margin-top: 14px; padding: 16px; }
.content-shell .section-heading { min-height: 34px; margin-bottom: 10px; }
.content-shell .section-heading h2 { font-size: 15px; font-weight: 800; }
.content-shell .section-heading p { color: var(--muted); font-size: 12px; }
.content-shell .fact,
.content-shell .system-card,
.content-shell .simple-row,
.content-shell .record,
.content-shell .stream-row { border-radius: 6px; }
.content-shell .availability-banner { margin-bottom: 14px; padding: 12px 14px; border-radius: 7px; }
.content-shell .processors-full-width { margin-top: 14px; }
.content-shell .processor-tab { border-radius: 6px; }
.content-shell .technical-details { border-radius: 8px; }
.content-shell .alert-policy-panel { margin-bottom: 4px; }

.section-collapse-button {
  width: 34px;
  min-width: 34px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 17px;
  line-height: 1;
}
.panel > .section-heading { padding-right: 44px; }
.alarm-panel > .section-heading { padding-right: 132px; }
.logs-button { right: 44px; min-height: 30px; padding: 5px 9px; border-radius: 6px; }
.site-log-dialog { border-radius: 8px; }

@media (max-width: 1280px) {
  .cloud-app-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .sidebar { padding: 14px 10px; }
  .content-shell .summary-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}

@media (max-width: 1050px) {
  .cloud-app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sidebar {
    padding: 8px 12px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .brand-lockup { min-height: 0; flex: 0 0 auto; padding: 0 10px 0 0; border-right: 1px solid var(--border); }
  .nav-list { display: flex; flex: 0 0 auto; align-items: center; overflow: visible; }
  .nav-item { width: auto; white-space: nowrap; }
  .site-nav-group { display: flex; flex: 0 0 auto; align-items: center; margin: 0 0 0 6px; padding: 0 0 0 9px; border-top: 0; border-left: 1px solid var(--border); }
  .site-nav-heading { max-width: 140px; padding: 0 7px; }
  .sub-nav-item { padding: 8px; }
  .sidebar-footer { margin: 0 0 0 auto; padding: 0; flex: 0 0 auto; border: 0; }
  .sidebar-footer .user-summary { display: none; }
  .sidebar-footer .sidebar-logout { width: auto; margin: 0; white-space: nowrap; }
  .topbar { height: 48px; }
  main.content-shell { padding: 16px; }
  .content-shell .monitoring-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .brand-lockup { display: none; }
  .sidebar { padding: 7px 8px; }
  .nav-item { padding: 8px; }
  .nav-item > span { display: none; }
  .site-nav-heading { display: none; }
  .site-nav-group { margin-left: 2px; padding-left: 5px; }
  .sidebar-footer .sidebar-logout { padding: 8px; gap: 0; }
  .sidebar-footer .sidebar-logout span { display: none; }
  .sidebar-footer .sidebar-logout > svg { width: 18px; height: 18px; }
  .topbar { padding: 0 12px; }
  .topbar-title { font-size: 14px; }
  .cloud-read-only-badge,
  #session-status { display: none; }
  #refresh-action { width: 34px; height: 34px; padding: 0; }
  #refresh-action > span { display: none; }
  main.content-shell { padding: 12px; }
  .content-shell > .page-heading h1 { font-size: 20px; }
  .content-shell .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-shell .panel { padding: 12px; }
  .content-shell .section-heading,
  .content-shell .alarm-panel > .section-heading { padding-right: 0; padding-bottom: 38px; }
  .section-collapse-button { top: auto; right: 0; bottom: 0; }
  .logs-button { top: auto; right: 44px; bottom: 0; }
}

@media (max-width: 480px) {
  .topbar-status { gap: 6px; }
  #live-status { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .content-shell .summary-grid { grid-template-columns: 1fr; }
  .content-shell .monitoring-overview { grid-template-columns: 1fr; }
}

@media (max-height: 680px) {
  .topbar { height: 44px; }
  main.content-shell { padding-top: 12px; padding-bottom: 12px; }
}