/* ── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d1117;
  --bg2:       #161b22;
  --bg3:       #1c2128;
  --border:    #30363d;
  --border2:   #21262d;
  --text:      #e6edf3;
  --text2:     #8b949e;
  --text3:     #6e7681;
  --cyan:      #39d0d8;
  --green:     #3fb950;
  --green-dim: #1a3f24;
  --yellow:    #d29922;
  --red:       #f85149;
  --red-dim:   #3d1a1a;
  --blue:      #58a6ff;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
  --font-ui:   -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --radius:    6px;
  --sidebar-w: 210px;
  --header-h:  52px;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
}
.hidden { display: none !important; }
.muted { color: var(--text2); font-size: 0.85rem; }
.error-text { color: var(--red); font-size: 0.85rem; min-height: 1.2em; }

/* ── Buttons / Inputs ────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { border-color: var(--cyan); }
.btn-primary { background: var(--cyan); color: #04282a; border-color: var(--cyan); font-weight: 600; }
.btn-primary:hover { opacity: 0.9; }
.btn-outline { background: transparent; }
.btn-link { background: none; border: none; color: var(--cyan); cursor: pointer; padding: 0; font-size: inherit; }
.btn-danger-ghost { color: var(--red); border-color: var(--red-dim); background: transparent; }
.btn-block { width: 100%; }
.btn-reveal { background: none; border: none; color: var(--text2); font-size: 0.75rem; cursor: pointer; text-decoration: underline; }
.btn-row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin: 10px 0; }

input[type=text], input[type=password], input[type=number],
input[type=datetime-local], select {
  display: block;
  width: 100%;
  max-width: 360px;
  padding: 7px 10px;
  margin: 4px 0 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
input:focus, select:focus { outline: none; border-color: var(--cyan); }
/* 2026-07-30: <select> has no styling rule of its own anywhere in this
   file until now — it fell back to the browser's native widget rendering
   (typically a light background), and since <option> then inherited this
   page's light `color: var(--text)` from the cascade with no dark
   background of its own to sit on, the text was effectively invisible
   (light-on-light) even though the dropdown had real options in it. */
select { appearance: none; -webkit-appearance: none; }
select option { background: var(--bg); color: var(--text); }
label { font-size: 0.8rem; color: var(--text2); }

/* ── Login ───────────────────────────────────────────────────── */
#login-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card {
  width: 320px;
  padding: 32px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.login-card h1 { font-size: 1.3rem; margin-bottom: 4px; }
.login-sub { color: var(--text2); font-size: 0.85rem; margin-bottom: 20px; }

/* ── Topbar / Layout ─────────────────────────────────────────── */
.topbar {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.topbar-title { font-weight: 600; color: var(--cyan); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.pill { font-size: 0.7rem; }
.pill-unknown { color: var(--text3); }
.pill-ok { color: var(--green); }
.pill-bad { color: var(--red); }

.layout { display: flex; height: calc(100vh - var(--header-h)); }
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  padding: 14px 0;
  overflow-y: auto;
}
.nav-section { padding: 10px 16px 4px; font-size: 0.7rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; }
.nav-link {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--text2);
  padding: 8px 16px; cursor: pointer; font-size: 0.85rem;
}
.nav-link:hover { color: var(--text); background: var(--bg3); }
.nav-link.active { color: var(--cyan); border-right: 2px solid var(--cyan); background: var(--bg3); }

.main { flex: 1; overflow-y: auto; padding: 22px 28px; }
.view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.view-header h2 { font-size: 1.1rem; font-weight: 600; }

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tab-link {
  background: none; border: none; color: var(--text2);
  padding: 8px 14px; cursor: pointer; font-size: 0.85rem;
  border-bottom: 2px solid transparent;
}
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.tab-panel { padding-top: 4px; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  max-width: 520px;
}
.card h3 { font-size: 0.95rem; margin-bottom: 10px; }
/* 2026-08-05: the Missions card's table grew a 6th column (Delivered) and
   overflowed the base 520px .card width -- nothing scrolled, the card
   itself just got wider than its container and broke the page layout.
   card-wide raises the cap for tables with more columns than a plain
   key/value card needs; .table-scroll on the table's wrapper is the actual
   fix (contains overflow *inside* the card via horizontal scroll) so this
   doesn't recur the next time a column gets added. */
.card-wide { max-width: 760px; }
.table-scroll { overflow-x: auto; }
.switch-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer; }
.switch-row input { width: auto; margin: 0; }
/* 2026-08-05: Repeater mode forces PVT/IMU/RAWX/MissionPulse off — visibly
   grey those rows out the instant "Allow Repeater Mode" is checked, before
   the user even saves, so the forced state is obvious rather than a
   surprise after the fact (see saveControlPermissions()/app.js). */
.switch-row:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* ── Status tab (device detail) ─────────────────────────────────
   2026-08-05: replaces the old flat "every column as a same-size stat
   card, alphabetical-ish DB column order" dump — that layout gave no
   indication of what was actually being looked at (no grouping, no units,
   raw column names like VPWR_MV/NTRIP_UPTIME_S). Grouped .card sections
   below, each with a normal two-column key/value table, mirror the visual
   language the Control/NTRIP/Repeater tabs already use elsewhere on this
   same page — see renderDeviceStatus() in app.js. */
.status-sections { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.status-sections .card { flex: 1 1 320px; }
.status-sections .data-table td:first-child { color: var(--text3); width: 55%; }
.status-sections .data-table { margin-bottom: 0; }

/* ── Generic status badges (online dot, allow_* flags, …) ───────── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 0.72rem; font-weight: 600;
}
.badge-green { background: var(--green-dim); color: var(--green); }
.badge-red   { background: var(--red-dim);   color: var(--red); }
.badge-gray  { background: var(--bg3);       color: var(--text3); }
.badge-cyan  { background: #0f2a3f;          color: var(--cyan); }

/* ── Tables ──────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.data-table th {
  text-align: left; font-size: 0.7rem; color: var(--text3); text-transform: uppercase;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--border2); font-size: 0.85rem; }
.data-table tbody tr:hover { background: var(--bg3); cursor: pointer; }
/* 2026-07-30: the shared input[type=...]/select rule above is written for
   standalone form fields in a card (block, 100% width, 12px bottom margin
   to separate stacked fields) — inside a table cell that turns every row
   with an input in it into a tall, sparse-looking block instead of a
   normal compact table row. Servo Sequence / waypoint-steps tables were
   the first tables to actually put inputs in cells, which is what exposed
   this. */
.data-table td input[type=number],
.data-table td input[type=text],
.data-table td select {
  display: inline-block;
  width: auto;
  max-width: 100px;
  margin: 0;
}
.row-actions { white-space: nowrap; }
.row-actions .btn { padding: 4px 10px; font-size: 0.78rem; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-card {
  width: 380px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 22px;
}
.modal-card h3 { margin-bottom: 8px; }
.secret-box {
  display: flex; align-items: center; gap: 8px; margin: 12px 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px;
}
.secret-box code { flex: 1; font-family: var(--font-mono); word-break: break-all; }

/* ── Chart ───────────────────────────────────────────────────── */
#history-chart { max-width: 100%; margin: 14px 0; }

/* ── Role badges ─────────────────────────────────────────────── */
.role-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.role-superadmin { background: var(--red-dim);   color: var(--red);    }
.role-admin      { background: #0f2a3f;           color: var(--cyan);   }
.role-operator   { background: #3a2c00;           color: var(--yellow); }
.role-readonly   { background: var(--bg3);        color: var(--text3);  }

/* ── Topbar user display ─────────────────────────────────────── */
.topbar-user { font-size: 0.82rem; color: var(--text2); display: flex; align-items: center; gap: 6px; }
.btn-sm { font-size: 0.78rem; padding: 5px 10px; }

/* ── Setup overlay ───────────────────────────────────────────── */
#setup-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}

/* ── Select input ────────────────────────────────────────────── */
.select-input {
  display: block; width: 100%; max-width: 360px;
  padding: 7px 10px; margin: 4px 0 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  font-family: inherit; font-size: 0.9rem;
}
.select-input:focus { outline: none; border-color: var(--cyan); }

/* ── Status chip (enabled/disabled) ─────────────────────────── */
.status-enabled  { color: var(--green); font-size: 0.8rem; }
.status-disabled { color: var(--red);   font-size: 0.8rem; }

/* ── System settings ─────────────────────────────────────────── */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.form-grid-2 label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 2px; }
.form-grid-2 input { width: 100%; }
.sys-test-result {
  font-size: 0.82rem;
  margin-top: 8px;
  min-height: 1.2em;
  word-break: break-all;
}
.sys-test-result.ok  { color: var(--green); }
.sys-test-result.err { color: var(--red); }