* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, "Segoe UI", "Inter", system-ui, sans-serif; background: #0f1117; color: #e6e8ef; }
a { color: #7aa2ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: #8b92a5; font-size: 0.92em; }
.hidden { display: none !important; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 10px 20px;
  background: #141826; border-bottom: 1px solid #232838;
}
.brand { font-weight: 600; font-size: 18px; }
.tabs { display: flex; flex: 1; gap: 4px; }
.tab {
  padding: 8px 14px; border-radius: 6px;
  color: #c0c6d4; font-size: 14px;
}
.tab:hover { background: #1b2030; text-decoration: none; }
.tab.active { background: #263050; color: #ffffff; }

.status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #a0a6b8; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #666; }
.dot.ok   { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15); }
.dot.warn { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15); }
.dot.err  { background: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15); }

main { padding: 20px; max-width: 1400px; margin: 0 auto; }
.tab-page { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #161a27; border: 1px solid #232838; border-radius: 10px;
  padding: 16px 18px;
}
.card h2 { margin: 0 0 12px 0; font-size: 15px; letter-spacing: 0.02em; color: #dfe4f0; display: flex; align-items: center; gap: 10px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.card-header h2 { margin: 0; }
.card h3 { margin: 14px 0 6px 0; font-size: 13px; color: #a0a6b8; text-transform: uppercase; letter-spacing: 0.08em; }
.card-inner { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #2c3244; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.kv dt { color: #8b92a5; }
.kv dd { margin: 0; color: #e6e8ef; font-variant-numeric: tabular-nums; word-break: break-all; }

.pill { background: #263050; padding: 2px 9px; border-radius: 999px; font-size: 11px; color: #c0c6d4; font-weight: 400; }

.session-list { display: flex; flex-direction: column; gap: 10px; }
.session-list.empty { color: #676c7a; font-style: italic; }
.session-card {
  padding: 12px 14px; border: 1px solid #2c3244; border-radius: 8px; background: #12162050;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px;
}
.session-card .session-id { font-family: ui-monospace, "SF Mono", monospace; font-size: 12px; color: #a0a6b8; }
.session-card .session-room { font-size: 14px; font-weight: 500; }
.session-card .session-stage { font-size: 12px; color: #a0a6b8; }
.session-card .progress {
  height: 4px; background: #1b2030; border-radius: 2px; overflow: hidden; margin-top: 6px; width: 100%;
  grid-column: 1 / -1;
}
.session-card .progress > div { height: 100%; background: linear-gradient(90deg, #3b82f6, #22d3ee); transition: width 0.4s ease; }
.session-card .btn { align-self: center; }

.sessions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sessions-grid.empty { color: #676c7a; font-style: italic; padding: 20px; text-align: center; }

/* ─── Tablet: ≤ 900px — tighten spacing ─────────────────────────────── */
@media (max-width: 900px) {
  main { padding: 14px; }
  .card { padding: 14px 14px; }
  .sessions-table thead th, .sessions-table tbody td { padding: 7px 9px; }
}

/* ─── Sessions tab: full-width table listing every active session ───── */
.sessions-table-wrap { width: 100%; overflow-x: auto; }
.sessions-table-wrap.empty { color: #676c7a; font-style: italic; padding: 20px; text-align: center; }
.sessions-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: #12162050; border: 1px solid #2c3244; border-radius: 8px;
  overflow: hidden;
}
.sessions-table thead th {
  text-align: left; padding: 9px 12px;
  background: #1b2030; color: #a0a6b8;
  font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid #2c3244; white-space: nowrap;
}
.sessions-table tbody td {
  padding: 9px 12px; border-bottom: 1px solid #232838; vertical-align: middle;
  color: #e6e8ef;
}
.sessions-table tbody tr:last-child td { border-bottom: none; }
.sessions-table tbody tr:hover td { background: #1a1f2e; }
.sessions-table .mono {
  font-family: ui-monospace, "SF Mono", monospace; font-size: 12px;
  color: #c0c6d4; word-break: break-all;
}
.sessions-table .mono.muted { color: #8b92a5; }
.sessions-table .mono.small { font-size: 11px; }
.sessions-table .small-btn { padding: 4px 9px; font-size: 11px; white-space: nowrap; }
.sessions-table td[data-col="jobId"] { max-width: 260px; }
.sessions-table td[data-col="correlationId"] { max-width: 220px; }
.sessions-table td[data-col="stage"] { min-width: 200px; }
.sessions-table td[data-col="actions"] { text-align: right; white-space: nowrap; }
.sessions-table .stage-cell { display: flex; flex-direction: column; gap: 4px; }
.sessions-table .stage-cell .stage-label { font-size: 12px; }
.sessions-table .progress.inline { height: 3px; background: #1b2030; border-radius: 2px; overflow: hidden; width: 100%; }
.sessions-table .progress.inline > div { height: 100%; background: linear-gradient(90deg, #3b82f6, #22d3ee); transition: width 0.4s ease; }
.sessions-table .row-actions { display: inline-flex; gap: 6px; }
.sessions-table .row-actions .btn { padding: 5px 10px; font-size: 12px; }

.btn {
  appearance: none; border: 1px solid #2c3244; background: #1b2030; color: #e6e8ef;
  padding: 7px 14px; font-size: 13px; border-radius: 6px; cursor: pointer;
}
.btn:hover { background: #263050; }
.btn.primary { background: #2749b8; border-color: #3258d9; color: #fff; }
.btn.primary:hover { background: #3258d9; }
.btn.danger { background: #b8283a; border-color: #d33146; color: #fff; }
.btn.danger:hover { background: #d33146; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.viewer-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.viewer-media {
  background: #000; border-radius: 8px; overflow: hidden;
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
}
.viewer-media video { width: 100%; height: 100%; object-fit: contain; }
.viewer-media .placeholder { color: #676c7a; font-size: 14px; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.toolbar select, .toolbar input { background: #12162080; color: #e6e8ef; border: 1px solid #2c3244; border-radius: 6px; padding: 5px 8px; }

.event-log {
  max-height: 520px; overflow-y: auto;
  font-family: ui-monospace, "SF Mono", monospace; font-size: 12px;
  background: #0b0e17; border-radius: 6px; padding: 8px 10px; border: 1px solid #1b2030;
}
.event-log .event { padding: 3px 0; display: flex; gap: 8px; align-items: baseline; border-bottom: 1px dotted #1b2030; }
.event-log .event:last-child { border-bottom: none; }
.event-log .ts { color: #5a6070; min-width: 80px; }
.event-log .kind { min-width: 50px; text-transform: uppercase; font-size: 10px; font-weight: 600; }
.event-log .kind.admin { color: #7aa2ff; }
.event-log .kind.show  { color: #ffb86b; }
.event-log .rk { color: #a0a6b8; min-width: 260px; }
.event-log .msg { color: #e6e8ef; word-break: break-word; }

.code {
  background: #0b0e17; padding: 12px; border-radius: 6px; overflow-x: auto;
  font-size: 12px; border: 1px solid #1b2030; color: #c0c6d4;
  white-space: pre-wrap; word-break: break-word; max-height: 600px;
}

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: #161a27; border: 1px solid #2c3244; border-radius: 10px;
  padding: 20px 22px; min-width: 340px; max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal h3 { margin: 0 0 10px 0; font-size: 16px; }
.modal p { margin: 0 0 14px 0; color: #c0c6d4; font-size: 14px; line-height: 1.4; }
.modal label { display: block; margin-bottom: 14px; font-size: 12px; }
.modal-input {
  display: block; width: 100%; margin-top: 6px; padding: 7px 10px;
  background: #0b0e17; color: #e6e8ef; border: 1px solid #2c3244; border-radius: 6px; font-size: 13px;
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

.toast-root {
  position: fixed; bottom: 20px; right: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.toast {
  padding: 10px 14px; border-radius: 6px; font-size: 13px;
  background: #1b2030; color: #e6e8ef; border: 1px solid #2c3244;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease;
}
.toast.fade { opacity: 0; }
.toast-ok   { border-color: #2f7a47; background: #12261b; }
.toast-err  { border-color: #933141; background: #27121a; }
.toast-warn { border-color: #7a5a1e; background: #26200f; }

.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px; margin-bottom: 14px;
}
.form-grid label { display: flex; flex-direction: column; font-size: 12px; color: #8b92a5; gap: 4px; }
.form-grid input, .form-grid select, .form-grid textarea {
  background: #0b0e17; color: #e6e8ef; border: 1px solid #2c3244; border-radius: 6px;
  padding: 6px 9px; font-size: 13px; font-family: inherit;
}
.form-grid textarea { min-height: 60px; resize: vertical; }
.form-actions { display: flex; gap: 10px; align-items: center; }
.form-note { color: #8b92a5; font-size: 12px; margin-top: 8px; }

.controls-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.controls-grid .control {
  padding: 12px; background: #12162080; border: 1px solid #2c3244; border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.controls-grid .control .muted { font-size: 11px; }

/* ─── Mobile: ≤ 640px ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* ── Topbar: 2-row layout ─────────────────────────────────────────── */
  /* Row 1: brand (left) + connection status (right)                     */
  /* Row 2: horizontally-scrollable tab strip (full width)               */
  .topbar {
    flex-wrap: wrap;
    padding: 8px 12px 0;
    gap: 0;
  }
  .brand { flex: 1; font-size: 15px; }
  /* Status stays on the brand row; hide text, keep the coloured dot */
  .status { gap: 6px; }
  #connText { display: none; }
  .tabs {
    order: 3;           /* push below the brand / status row */
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 0 8px;
    gap: 2px;
    border-top: 1px solid #1b2030;
    margin-top: 6px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; font-size: 13px; padding: 6px 10px; }

  /* ── Layout & spacing ─────────────────────────────────────────────── */
  main { padding: 10px; }
  .tab-page { gap: 10px; }
  .card { padding: 12px; }
  .card h2 { font-size: 14px; }
  .card-header { flex-wrap: wrap; gap: 6px; }
  .card-header .btn { align-self: flex-start; }
  .kv { gap: 4px 8px; font-size: 12px; }

  /* ── Sessions table: hide low-priority columns ────────────────────── */
  /* Kept visible: room, jobId, stage, startedAt, actions (+ recording) */
  .sessions-table [data-col="correlationId"],
  .sessions-table [data-col="progress"],
  .sessions-table [data-col="language"],
  .sessions-table [data-col="avatarId"],
  .sessions-table [data-col="durationSeconds"],
  .sessions-table [data-col="lastEventAt"] { display: none; }
  /* Tighten remaining cells */
  .sessions-table thead th, .sessions-table tbody td { padding: 7px 8px; }
  /* Action buttons: stack vertically to avoid overflow */
  .sessions-table .row-actions { flex-direction: column; gap: 3px; align-items: flex-start; }

  /* ── Modal ────────────────────────────────────────────────────────── */
  .modal {
    min-width: unset;
    width: calc(100% - 24px);
    max-width: unset;
    padding: 16px;
  }

  /* ── Toast ────────────────────────────────────────────────────────── */
  .toast-root { left: 10px; right: 10px; max-width: unset; bottom: 10px; }

  /* ── Event log ────────────────────────────────────────────────────── */
  .event-log { font-size: 11px; }
  .event-log .rk { display: none; }   /* routing key too wide for mobile */
  .event-log .ts { min-width: 60px; }

  /* ── Viewer controls ──────────────────────────────────────────────── */
  .viewer-controls { flex-wrap: wrap; gap: 6px; }

  /* ── Forms ────────────────────────────────────────────────────────── */
  .form-actions { flex-wrap: wrap; gap: 6px; }
  .form-grid { grid-template-columns: 1fr; }

  /* ── Controls grid ────────────────────────────────────────────────── */
  .controls-grid { grid-template-columns: 1fr 1fr; }
}