/* ── MQTT Console Layout ─────────────────────────────────────────────────── */

/* .tac-class-bar (18px) + .topbar (52px brand + 40px nav = 92px) = 110px total */
.mqtt-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);
  overflow: hidden;
}

/* Stats strip – compact horizontal bar */
.mqtt-grid {
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(6, 10, 6, 0.8);
  border-bottom: 1px solid var(--tac-line-strong);
  flex-shrink: 0;
  overflow-x: auto;
}

.mqtt-grid::-webkit-scrollbar { height: 3px; }
.mqtt-grid::-webkit-scrollbar-thumb { background: var(--tac-line); border-radius: 2px; }

.mqtt-card {
  background: rgba(8, 16, 12, 0.8);
  border: 1px solid var(--tac-line);
  border-radius: 3px;
  padding: 5px 10px;
  min-width: 120px;
  flex-shrink: 0;
}

.mqtt-card .label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tac-muted);
}

.mqtt-card .value {
  font-size: 18px;
  font-weight: 700;
  color: var(--tac-text-bright);
  line-height: 1.1;
}

.mqtt-card .meta {
  font-size: 9px;
  color: var(--tac-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* ── Two-column body ────────────────────────────────────────────────────── */
.mqtt-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Left: connection controls – scrolls independently */
.mqtt-stack-left {
  width: 370px;
  flex-shrink: 0;
  border-right: 1px solid var(--tac-line-strong);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Right: feed + topics – fills remaining space, split 1/3 + 2/3 */
.mqtt-stack-right {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr 2fr;
  overflow: hidden;
}

/* ── Panels ──────────────────────────────────────────────────────────────── */
.panel {
  border-bottom: 1px solid var(--tac-line-strong);
  flex-shrink: 0;
}

.panel-head {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--tac-muted);
  padding: 4px 10px;
  background: rgba(4, 8, 4, 0.9);
  border-bottom: 1px solid var(--tac-line);
}

.panel-body {
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Topic Explorer – compact, stays small */
.panel-topics {
  border-bottom: 1px solid var(--tac-line-strong);
  overflow: hidden;
}

.panel-topics .panel-body {
  padding: 4px 0;
  overflow-y: auto;
}

.panel-topics .mqtt-table th,
.panel-topics .mqtt-table td {
  padding: 2px 8px;
  font-size: 10px;
}

/* Feed panel – takes all remaining space */
.panel-feed {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-feed .panel-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 10px;
}

/* ── Form elements ───────────────────────────────────────────────────────── */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.form-row label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tac-muted);
}

input, select, textarea {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--tac-line);
  border-radius: 2px;
  background: rgba(6, 12, 8, 0.9);
  color: var(--tac-text-bright);
  font-family: var(--tac-font-mono);
}

input:focus, select:focus, textarea:focus {
  outline: 1px solid #57f287;
  border-color: #57f287;
}

input[type="checkbox"] {
  width: 12px;
  height: 12px;
  accent-color: #57f287;
}

.mqtt-input-row {
  display: flex;
  gap: 5px;
  align-items: end;
}

.mqtt-input-row .form-row {
  flex: 1;
}

.mqtt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.mqtt-actions button, .mqtt-actions .btn {
  font-size: 9px;
  padding: 3px 8px;
}

.mqtt-actions input[type="text"] {
  flex: 1;
  min-width: 0;
}

.mqtt-note {
  font-size: 9px;
  color: var(--tac-muted);
  line-height: 1.3;
}

.mqtt-logs {
  font-family: var(--tac-font-mono);
  font-size: 9px;
  line-height: 1.4;
  background: rgba(4, 10, 4, 0.8);
  border: 1px solid var(--tac-line);
  border-radius: 2px;
  padding: 4px 6px;
  overflow-y: auto;
  max-height: 120px;
  min-height: 40px;
}

.mqtt-logs div { padding: 1px 0; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.mqtt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  table-layout: fixed;
}

.mqtt-table th,
.mqtt-table td {
  padding: 2px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, .08);
  text-align: left;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mqtt-table th { font-size: 8px; text-transform: uppercase; letter-spacing: .12em; color: var(--tac-muted); }
.mqtt-table td:last-child { width: 90px; }

/* ── Live feed ──────────────────────────────────────────────────────────── */
.mqtt-feed {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--tac-line);
  border-radius: 2px;
  min-height: 0;
}

.mqtt-feed table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  table-layout: fixed;
}

.mqtt-feed thead th {
  position: sticky;
  top: 0;
  background: rgba(4, 10, 4, 0.97);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .12em;
  z-index: 2;
  padding: 3px 6px;
  border-bottom: 1px solid var(--tac-line);
}

.mqtt-feed tbody td {
  padding: 3px 6px;
  border-bottom: 1px solid rgba(148, 163, 184, .08);
  vertical-align: top;
  overflow: hidden;
}

/* Column widths: Time | Topic | Telemetry | Intel */
.mqtt-feed th:nth-child(1),
.mqtt-feed td:nth-child(1) { width: 72px; }
.mqtt-feed th:nth-child(2),
.mqtt-feed td:nth-child(2) { width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mqtt-feed th:nth-child(3),
.mqtt-feed td:nth-child(3) { width: 200px; }
.mqtt-feed th:nth-child(4),
.mqtt-feed td:nth-child(4) { min-width: 0; }

.mqtt-feed tbody tr:hover {
  background: rgba(87, 242, 135, .04);
}

.mqtt-feed tbody tr {
  border-left: 2px solid transparent;
  transition: border-color .1s;
}

.mqtt-feed tbody tr:hover {
  border-left-color: #57f287;
}

/* ── WOPR message styles ───────────────────────────────────────────────── */
.wop-time {
  font-family: var(--tac-font-mono);
  font-size: 9px;
  color: #39ff14;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(57,255,20,.4);
}

.wop-topic-text {
  font-family: var(--tac-font-mono);
  font-size: 9px;
  color: #39ff14;
  word-break: break-word;
  max-width: 160px;
  text-shadow: 0 0 4px rgba(57,255,20,.3);
}

.wop-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.wop-name {
  font-weight: 700;
  color: #ccffcc;
  font-size: 10px;
  text-shadow: 0 0 6px rgba(57,255,20,.5);
}

.wop-sub {
  color: #39ff14;
  font-size: 9px;
  opacity: 0.7;
  text-shadow: 0 0 4px rgba(57,255,20,.3);
}

.wop-intel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  font-size: 9px;
  min-width: 0;
}

.wop-row { display: contents; }

.wop-lbl {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #39ff14;
  font-weight: 700;
  white-space: nowrap;
  padding-top: 1px;
  text-shadow: 0 0 4px rgba(57,255,20,.4);
}

.wop-row.wop-warn .wop-lbl {
  color: #ffb000;
  text-shadow: 0 0 4px rgba(255,176,0,.4);
}

.wop-code {
  font-family: var(--tac-font-mono);
  font-size: 8px;
  color: #00e5ff;
  word-break: break-all;
  text-shadow: 0 0 4px rgba(0,229,255,.3);
}

.wop-row.wop-warn .wop-code {
  color: #ff4444;
  text-shadow: 0 0 4px rgba(255,68,68,.3);
}

.wop-json {
  white-space: pre-wrap;
  font-family: var(--tac-font-mono);
  font-size: 8px;
  padding: 3px 5px;
  background: rgba(6, 10, 6, .95);
  border: 1px solid #1a3a1a;
  color: #39ff14;
  overflow-wrap: anywhere;
  text-shadow: 0 0 4px rgba(57,255,20,.3);
}

/* ── Pill tags (WarGames neon) ─────────────────────────────────────────── */
.pill {
  font-family: var(--tac-font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 5px;
}

.pill.yes {
  background: rgba(57,255,20,.12) !important;
  border-color: #39ff14 !important;
  color: #39ff14 !important;
  box-shadow: 0 0 6px rgba(57,255,20,.25);
}

.pill.no, .pill.warn {
  background: rgba(255,68,68,.1) !important;
  border-color: #ff4444 !important;
  color: #ff4444 !important;
  box-shadow: 0 0 6px rgba(255,68,68,.2);
}

.pill.info {
  background: rgba(0,229,255,.08) !important;
  border-color: #00e5ff !important;
  color: #00e5ff !important;
  box-shadow: 0 0 6px rgba(0,229,255,.2);
}

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
.mqtt-feed::-webkit-scrollbar,
.mqtt-stack-left::-webkit-scrollbar,
.mqtt-logs::-webkit-scrollbar {
  width: 4px;
}
.mqtt-feed::-webkit-scrollbar-track,
.mqtt-stack-left::-webkit-scrollbar-track,
.mqtt-logs::-webkit-scrollbar-track {
  background: transparent;
}
.mqtt-feed::-webkit-scrollbar-thumb,
.mqtt-stack-left::-webkit-scrollbar-thumb,
.mqtt-logs::-webkit-scrollbar-thumb {
  background: var(--tac-line);
  border-radius: 2px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mqtt-layout { flex-direction: column; }
  .mqtt-stack-left { width: 100%; border-right: none; border-bottom: 1px solid var(--tac-line-strong); max-height: 40vh; }
  .mqtt-stack-right { min-height: 300px; }
  .mqtt-feed { max-height: 300px; }
}