/* ---------- Theme tokens (W 0.6.4) ----------
   The Zotula brand (brand/01-ring, "graphite and mint"): graphite #1F2937 for
   the mark and what is pressed in the day theme, the mint "online light"
   (#22C55E on light, #4ADE80 on dark) for what is live, links and the active
   item. Day and night, chosen by the OS unless the person picked one with
   the switch in the sidebar (js/theme.js sets <html data-theme>).

   Colours are only used through these names. *-rgb holds the same colour as
   "r g b", for an opacity: rgb(var(--ok-rgb) / 0.15). The Tailwind colour
   names of the admin pages (js/tailwindConfig.js) read the same tokens, and
   the employee portal (css/portal.css) defines the same status names, so
   shared scripts (statusStyles.js, timeCommon.js) look right on both.
   Every text colour below is at least 4.5:1 on the surfaces it is used on. */

:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --sidebar: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f4f7;
  --surface-3: #e6ebf0;
  --input-bg: #ffffff;
  --border: #dde3ea;
  --border-strong: #c2ccd6;
  --text: #111827;
  --text-2: #374151;
  --text-3: #5b6675;
  --hover-rgb: 15 23 42;

  --primary: #1f2937;            /* the mark's graphite: buttons, selection */
  --primary-rgb: 31 41 55;
  --primary-hover: #111827;
  --primary-soft: rgba(31, 41, 55, 0.07);
  --on-primary: #ffffff;
  --brand-dot: #22c55e;          /* the mint light */
  --link: #15803d;
  --ring: #16a34a;
  --nav-active-bg: rgba(31, 41, 55, 0.07);
  --nav-active-fg: #111827;

  --ok: #15803d;      --ok-rgb: 22 163 74;     --ok-soft: #dcfce7;     --ok-fill: #16a34a;
  --warn: #92400e;    --warn-rgb: 217 119 6;   --warn-soft: #fef3c7;   --warn-fill: #d97706;
  --danger: #b91c1c;  --danger-rgb: 220 38 38; --danger-soft: #fee2e2; --danger-fill: #dc2626;
  --info: #1d4ed8;    --info-rgb: 37 99 235;   --info-soft: #dbeafe;   --info-fill: #2563eb;
  --violet: #6d28d9;  --violet-rgb: 124 58 237; --violet-soft: #ede9fe; --violet-fill: #7c3aed;
  --cyan: #0e7490;    --cyan-soft: #cffafe;    --cyan-fill: #0891b2;
  --pink: #be185d;    --pink-soft: #fce7f3;    --pink-fill: #db2777;
  --orange: #c2410c;  --orange-soft: #ffedd5;  --orange-fill: #ea580c;
  --neutral-rgb: 100 116 139; --neutral-fill: #94a3b8;

  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --overlay: rgba(15, 23, 42, 0.45);
  --code-bg: rgba(15, 23, 42, 0.06);

  /* Older names, still read by some page styles. */
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --muted: var(--text-3);
  --accent: var(--primary);
  --accent-2: var(--ok);
}

/* Night: the brand's dark ground #0E131B. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e131b;
  --sidebar: #111822;
  --surface: #151c26;
  --surface-2: #1b2430;
  --surface-3: #243040;
  --input-bg: #1b2430;
  --border: #263241;
  --border-strong: #3a4859;
  --text: #eef2f5;
  --text-2: #c7d0da;
  --text-3: #9aa6b4;
  --hover-rgb: 255 255 255;

  --primary: #4ade80;            /* on dark the mint carries the buttons; graphite text on it */
  --primary-rgb: 74 222 128;
  --primary-hover: #86efac;
  --primary-soft: rgba(74, 222, 128, 0.12);
  --on-primary: #0e131b;
  --brand-dot: #4ade80;
  --link: #4ade80;
  --ring: #4ade80;
  --nav-active-bg: rgba(74, 222, 128, 0.1);
  --nav-active-fg: #eef2f5;

  --ok: #4ade80;      --ok-rgb: 74 222 128;    --ok-soft: rgba(74, 222, 128, 0.14);  --ok-fill: #22c55e;
  --warn: #fbbf24;    --warn-rgb: 245 158 11;  --warn-soft: rgba(245, 158, 11, 0.15); --warn-fill: #f59e0b;
  --danger: #f87171;  --danger-rgb: 239 68 68; --danger-soft: rgba(239, 68, 68, 0.15); --danger-fill: #ef4444;
  --info: #93c5fd;    --info-rgb: 96 165 250;  --info-soft: rgba(96, 165, 250, 0.14); --info-fill: #60a5fa;
  --violet: #c4b5fd;  --violet-rgb: 167 139 250; --violet-soft: rgba(167, 139, 250, 0.16); --violet-fill: #a78bfa;
  --cyan: #67e8f9;    --cyan-soft: rgba(6, 182, 212, 0.16);  --cyan-fill: #22d3ee;
  --pink: #f9a8d4;    --pink-soft: rgba(236, 72, 153, 0.16); --pink-fill: #f472b6;
  --orange: #fdba74;  --orange-soft: rgba(249, 115, 22, 0.16); --orange-fill: #fb923c;
  --neutral-rgb: 148 163 184; --neutral-fill: #64748b;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --overlay: rgba(3, 6, 10, 0.7);
  --code-bg: rgba(0, 0, 0, 0.3);
}

/* No choice made: follow the OS. Same values as [data-theme="dark"]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e131b; --sidebar: #111822; --surface: #151c26; --surface-2: #1b2430; --surface-3: #243040; --input-bg: #1b2430;
    --border: #263241; --border-strong: #3a4859; --text: #eef2f5; --text-2: #c7d0da; --text-3: #9aa6b4; --hover-rgb: 255 255 255;
    --primary: #4ade80; --primary-rgb: 74 222 128; --primary-hover: #86efac; --primary-soft: rgba(74, 222, 128, 0.12); --on-primary: #0e131b;
    --brand-dot: #4ade80; --link: #4ade80; --ring: #4ade80; --nav-active-bg: rgba(74, 222, 128, 0.1); --nav-active-fg: #eef2f5;
    --ok: #4ade80; --ok-rgb: 74 222 128; --ok-soft: rgba(74, 222, 128, 0.14); --ok-fill: #22c55e;
    --warn: #fbbf24; --warn-rgb: 245 158 11; --warn-soft: rgba(245, 158, 11, 0.15); --warn-fill: #f59e0b;
    --danger: #f87171; --danger-rgb: 239 68 68; --danger-soft: rgba(239, 68, 68, 0.15); --danger-fill: #ef4444;
    --info: #93c5fd; --info-rgb: 96 165 250; --info-soft: rgba(96, 165, 250, 0.14); --info-fill: #60a5fa;
    --violet: #c4b5fd; --violet-rgb: 167 139 250; --violet-soft: rgba(167, 139, 250, 0.16); --violet-fill: #a78bfa;
    --cyan: #67e8f9; --cyan-soft: rgba(6, 182, 212, 0.16); --cyan-fill: #22d3ee;
    --pink: #f9a8d4; --pink-soft: rgba(236, 72, 153, 0.16); --pink-fill: #f472b6;
    --orange: #fdba74; --orange-soft: rgba(249, 115, 22, 0.16); --orange-fill: #fb923c;
    --neutral-rgb: 148 163 184; --neutral-fill: #64748b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --overlay: rgba(3, 6, 10, 0.7); --code-bg: rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.center-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow);
}

.card h1 {
  font-size: 20px;
  margin: 0 0 4px;
}

.card p.subtitle {
  color: var(--text-3);
  margin: 0 0 24px;
  font-size: 13px;
}

label {
  display: block;
  font-size: 13px;
  color: var(--text-3);
  margin: 14px 0 6px;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 0.8; }

input:focus, select:focus, textarea:focus { outline: 2px solid var(--ring); outline-offset: 1px; }

select option { background: var(--input-bg); color: var(--text); }

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}

button.primary {
  background: var(--primary);
  color: var(--on-primary);
  width: 100%;
  margin-top: 20px;
}

button.primary:hover { background: var(--primary-hover); }
button.primary:disabled { opacity: 0.6; cursor: default; }

.error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 12px;
  min-height: 16px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.topbar h1 { font-size: 18px; margin: 0; }
.topbar .who { color: var(--text-3); font-size: 13px; }

.container { padding: 24px; max-width: 1000px; margin: 0 auto; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.panel h2 { font-size: 15px; margin: 0 0 16px; }

.new-seat-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.new-seat-form .field { flex: 1; min-width: 140px; }
.new-seat-form label { margin-top: 0; }
.new-seat-form button { white-space: nowrap; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

th { color: var(--text-3); font-weight: 500; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge.pending { background: rgb(var(--neutral-rgb) / 0.15); color: var(--text-2); }
.badge.registered { background: var(--info-soft); color: var(--info); }
.badge .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.badge.online { background: var(--ok-soft); color: var(--ok); }
.badge.offline { background: rgb(var(--neutral-rgb) / 0.15); color: var(--text-3); }
.badge.stopped { background: var(--warn-soft); color: var(--warn); }

button.link {
  background: none;
  color: var(--danger);
  padding: 4px 8px;
}

.credential-banner {
  background: var(--ok-soft);
  border: 1px solid rgb(var(--ok-rgb) / 0.45);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.credential-banner code {
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

code { font-family: "Fira Code", ui-monospace, monospace; }

.muted { color: var(--text-3); }

a.device-link {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
}
a.device-link:hover { text-decoration: underline; }

/* ---------- Check-in (public/checkin.html, checkin-mobile.html) ---------- */

.checkin-card { max-width: 420px; }

.checkin-card .org-name { color: var(--text-3); font-size: 13px; margin: 0 0 2px; }
.checkin-card h1 { margin: 0 0 20px; }

.pin-input {
  font-size: 28px;
  letter-spacing: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.notice-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.status-line {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 12px;
  min-height: 16px;
  text-align: center;
}

.status-line.success { color: var(--ok); }
.status-line.warn { color: var(--warn); }

video.face-preview {
  width: 100%;
  border-radius: 10px;
  background: #000;
  transform: scaleX(-1); /* mirror, so it feels like a mirror not a security cam */
  border: 1px solid var(--border);
}

.face-frame { position: relative; }
.face-frame .face-ring {
  position: absolute;
  inset: 8%;
  border: 3px solid rgb(var(--info-rgb) / 0.5);
  border-radius: 50%;
  pointer-events: none;
}
.face-frame.matched .face-ring { border-color: var(--ok-fill); }
.face-frame.mismatched .face-ring { border-color: var(--danger-fill); }

button.secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  width: 100%;
  margin-top: 10px;
}
button.secondary:hover { background: var(--surface-3); }

/* Sign-in pages: the links around the form (login.html, accept-invite.html). */
a.link-btn { display: block; text-align: center; margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--link); text-decoration: none; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-label-row a { font-size: 12px; color: var(--link); text-decoration: none; }
.auth-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 13px; color: var(--text-3); }
.auth-foot a { color: var(--link); font-weight: 600; text-decoration: none; }
a.link-btn:hover, .auth-label-row a:hover, .auth-foot a:hover { text-decoration: underline; }

button.link-btn {
  background: none;
  color: var(--link);
  width: 100%;
  margin-top: 10px;
  padding: 6px;
  font-weight: 500;
  text-decoration: underline;
}

.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.qr-box canvas { border-radius: 8px; background: #fff; padding: 10px; }

.success-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
}

.step { }
.step[hidden] { display: none; }

.method-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 4px 0 18px; }
.method-tabs .tab-btn {
  background: none; color: var(--text-3); border: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 8px 4px; margin-right: 20px; font-size: 14px; cursor: pointer;
}
.method-tabs .tab-btn.active { color: var(--text); border-bottom-color: var(--brand-dot); }
.method-panel { display: none; }
.method-panel.active { display: block; }

/* ---------- Typography: Fira Sans for UI text, Fira Code for tabular/data
   values (stat numbers, timestamps, IDs), used consistently via .font-mono-data. ---------- */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

body { font-family: "Fira Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

.font-mono-data {
  font-family: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- Admin shell (sidebar + topbar), public/js/adminShell.js ---------- */

.shell-section-label {
  padding: 16px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shell-link {
  position: relative;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 8px;
  font-size: 13.5px; color: var(--text-2); text-decoration: none; cursor: pointer; border: none;
  background: none; font-family: inherit; text-align: left;
  transition: color 150ms ease, background-color 150ms ease;
}
.shell-link:hover { color: var(--text); background: rgb(var(--hover-rgb) / 0.05); }
.shell-link-active { color: var(--nav-active-fg); background: var(--nav-active-bg); font-weight: 600; }
.shell-link-bar {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 999px; background: var(--brand-dot);
  transition: height 150ms ease;
}
.shell-link-active .shell-link-bar { height: 16px; }
.shell-pro-badge {
  margin-left: auto; padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--info); background: var(--info-soft);
}
/* The version next to a download link (Downloads section, adminShell.js). */
.shell-version {
  margin-left: auto; font-size: 10.5px; color: var(--text-3); white-space: nowrap;
  font-family: "Fira Code", ui-monospace, monospace; font-variant-numeric: tabular-nums;
}
.shell-link:hover .shell-version { color: var(--text-2); }

.shell-sublink {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px;
  font-size: 13px; color: var(--text-3); text-decoration: none; cursor: pointer; border: none;
  background: none; font-family: inherit; text-align: left;
}
.shell-sublink:hover { color: var(--text); }
.shell-sublink-active { color: var(--link); }

.shell-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--primary-soft); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}

/* Day / night switch at the bottom of the sidebar (adminShell.js, theme.js). */
.shell-theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); }
.shell-theme button {
  display: inline-flex; align-items: center; gap: 5px; background: none; color: var(--text-3);
  padding: 4px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500;
}
.shell-theme button:hover { color: var(--text); }
.shell-theme button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.shell-theme svg { width: 13px; height: 13px; }

/* The brand mark in the sidebar: the ring and Z follow the text colour, the dot is the mint light. */
.shell-mark { width: 26px; height: 26px; color: var(--text); flex-shrink: 0; }
.shell-mark .dot { fill: var(--brand-dot); }

/* ---------- Live status dot: a real-time cue for Online/Checked-in, not
   decoration — pulses only while the state is actually live. ---------- */

.live-dot {
  position: relative;
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: currentColor;
}
.live-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  background: currentColor;
  animation: live-dot-pulse 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; opacity: 0; }
}
@keyframes live-dot-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ---------- Data table density + row affordance ---------- */

.data-table thead th {
  position: sticky; top: 0;
  background: var(--surface);
  z-index: 1;
}
.data-table tbody tr { transition: background-color 120ms ease; }
.data-table tbody tr:hover { background: rgb(var(--hover-rgb) / 0.03); }

.avatar-chip {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; color: var(--text);
}

/* Embedded pages (?embed=1, js/adminShell.js): a page shown as one tab of an
   employee on people-devices.html. It is a part of that page, not a page in a
   box: no menu, title bar, back link, header or tab row of its own
   (.standalone-only), no padding or background around it, sections divided
   by a line instead of boxed, and as tall as its content (the frame follows),
   so only the outer page scrolls. !important: over the Tailwind classes. */
html.embedded, html.embedded body { height: auto !important; min-height: 0 !important; background: transparent !important; }
html.embedded { overflow-x: auto; overflow-y: hidden; }
html.embedded #shell-sidebar, html.embedded #shell-topbar,
html.embedded .back-link, html.embedded .standalone-only { display: none !important; }
html.embedded .h-screen { height: auto !important; overflow: visible !important; }
html.embedded main { overflow: visible !important; padding: 0 !important; }
html.embedded .inv-container { max-width: none; }
html.embedded .panel {
  background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 18px 0 2px; margin: 0 0 16px;
}
html.embedded .panel:first-child { border-top: 0; padding-top: 2px; }
html.embedded .panel:last-child { margin-bottom: 0; }
html.embedded main > .t-card { background: none; border: 0; border-radius: 0; padding: 2px 0 0; margin: 0 !important; }

/* "Saved" after a settings form went through (monitoring-settings.html). */
.saved-notice {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 500; color: var(--ok);
  background: var(--ok-soft); border: 1px solid rgb(var(--ok-rgb) / 0.4);
  animation: saved-in 240ms ease-out both;
}
.saved-notice svg { width: 16px; height: 16px; flex-shrink: 0; }
@keyframes saved-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* "Continue with Google" (js/googleButton.js): Google's own button colours, in both themes. */
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: #ffffff; color: #1f1f1f; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.google-btn:hover { background: #f3f4f6; }
.google-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--text-3); font-size: 12px; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* The Zotula mark above a sign-in card (login.html, accept-invite.html). */
.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 18px; }
.auth-brand .shell-mark { width: 30px; height: 30px; }