/* style.css — plain CSS, no build step, no external fonts/CDN (must run from a static bucket). */

:root {
  --bg: #14151a;
  --panel: #1d1e24;
  --panel-2: #23242c;
  --border: #33343c;
  --text: #e8e8ea;
  --muted: #9a9bb0;
  --accent: #3a5cff;
  --accent-hover: #5271ff;
  --danger: #ff5a5a;
  --ok: #35c36b;
  --warn: #e0a83a;
  --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

code {
  background: var(--panel-2);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.92em;
}

.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); }

button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
}
button:hover { background: var(--accent-hover); }
button:disabled { background: #45465a; color: #8c8d9c; cursor: not-allowed; }
button.secondary { background: var(--panel-2); border: 1px solid var(--border); }
button.secondary:hover { background: #2c2d36; }
button.danger { background: var(--danger); }
button.danger:hover { background: #ff7373; }

input[type="text"], textarea {
  width: 100%;
  background: #0f1014;
  color: var(--text);
  border: 1px solid #3a3b45;
  border-radius: var(--radius);
  padding: 7px 9px;
  font: inherit;
  resize: vertical;
}
input:disabled { opacity: 0.5; }

label { display: block; margin: 10px 0 4px; font-size: 12px; color: var(--muted); }

/* ---------------- sign-in gate ---------------- */
#authGate { max-width: 480px; margin: 80px auto; padding: 0 16px; }

/* ---------------- topbar ---------------- */
#topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}
#brand { font-weight: 700; letter-spacing: 0.2px; flex-shrink: 0; }

#tabBar {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 120px;
}
.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.tab:hover { background: var(--panel-2); color: var(--text); }
.tab-active { background: var(--panel-2); color: var(--text); border-color: var(--accent); }
.tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.tab-dot.status-running { background: var(--ok); }
.tab-dot.status-pending, .tab-dot.status-placing { background: var(--warn); }
.tab-dot.status-stopped, .tab-dot.status-failed { background: var(--danger); }

#fleetControls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#authArea { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#whoami { color: var(--muted); font-size: 12px; }

.badge {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
}
.badge-unknown { color: var(--muted); }
.badge-off { color: var(--danger); border-color: var(--danger); }
.badge-starting, .badge-draining { color: var(--warn); border-color: var(--warn); }
.badge-on { color: var(--ok); border-color: var(--ok); }

/* ---------------- layout / cards ---------------- */
#main { max-width: 1400px; margin: 0 auto; padding: 16px; }
/* Keep the overview (session list) readable-narrow; only the live viewer uses the full width. */
#overviewView { max-width: 900px; margin: 0 auto; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}
.card h1 { margin: 0 0 8px; font-size: 20px; }
.card h2 { margin: 0 0 10px; font-size: 15px; }

.offline-card { border-color: var(--warn); }
.offline-card h2 { color: var(--warn); }

.fleetbar { display: flex; align-items: center; justify-content: space-between; }

/* ---------------- sessions list ---------------- */
#sessionList { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.session-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.session-item.watching { border-color: var(--accent); }
.session-row1 { display: flex; align-items: center; gap: 8px; }
.session-sid { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.session-status { margin-left: auto; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.3px; }
.status-running { color: var(--ok); border-color: var(--ok); }
.status-pending, .status-placing, .status-stopping { color: var(--warn); border-color: var(--warn); }
.status-stopped, .status-failed { color: var(--danger); border-color: var(--danger); }
.session-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.session-actions { display: flex; gap: 6px; margin-top: 8px; }
.session-actions button { padding: 4px 10px; font-size: 12px; font-weight: 500; }

/* ---------------- viewer ---------------- */
#viewerHeader { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#viewerHeader h2 { margin: 0; flex: 1 1 auto; }
#canvasWrap { position: relative; margin-top: 10px; background: #000; border: 1px solid var(--border); border-radius: var(--radius); min-height: 200px; display: flex; align-items: center; justify-content: center; }
#viewerCanvas { display: block; max-width: 100%; height: auto; outline: none; cursor: crosshair; }
#viewerCanvas[hidden] { display: none; }
#viewerPlaceholder { padding: 40px 16px; text-align: center; }

/* ---------------- toast ---------------- */
#toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 360px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  z-index: 50;
}
#toast.toast-error { border-left-color: var(--danger); }
#toast.toast-ok { border-left-color: var(--ok); }

@media (max-width: 700px) {
  #topbar { gap: 8px; }
  #brand { display: none; }
}