:root {
  --bg: #0f1420;
  --panel: #171e2e;
  --panel2: #1e2740;
  --border: #2a3550;
  --text: #e8ecf5;
  --muted: #9fabc7;
  --accent: #4f8cff;
  /* Defaults for the derived palette, so the app looks right before
     auth.js knows which workspace you're in. theme.js overwrites all of
     these from the customer's brand colour at login. */
  --accent-contrast: #ffffff;
  --accent-strong: #2f6ee0;
  --accent-soft: rgba(79,140,255,.16);
  --accent-glow: rgba(79,140,255,.28);
  --ok: #35c26b;
  --need: #ef4b4b;
  --warn: #f2b134;
  --info: #6da8ff;
  --cut: #6b7280;
  --purple: #a78bfa;
  font-size: 17px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height: 100%;
  overscroll-behavior: none;
}

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ---------- Free-text fields, everywhere ----------
   Every rule below that dresses an input was written as input[type=text],
   so the moment a field became type=email or type=date it dropped straight
   through to the browser's own white box. This is the safety net: match on
   every text-entry type, at the specificity of one attribute selector, so
   any scoped rule further down still wins on layout without !important.

   Enumerated rather than input:not(...) on purpose — chaining :not() would
   push specificity above the class-scoped rules and quietly break them.

   16px is not a taste call. Mobile Safari zooms the page in whenever you
   focus a field smaller than 16px, and never zooms back out, which on the
   iPhone build means the whole layout lurches sideways on every tap. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url], input[type=date],
input[type=time], input[type=datetime-local], textarea {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 11px; border-radius: 8px; font-size: 16px; font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=number]:focus, input[type=search]:focus, input[type=tel]:focus,
input[type=url]:focus, input[type=date]:focus, input[type=time]:focus,
input[type=datetime-local]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
select { font-family: inherit; font-size: 16px; }

header.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
header.top .brand { display: flex; align-items: center; gap: 10px; }
header.top .brand-logo { height: 42px; width: auto; max-width: 160px; object-fit: contain; border-radius: 6px; background: #fff; padding: 3px 6px; }
/* Generic initials badge — used in the header, and reused for the org-logo
   and avatar previews on the Admin/Setup tabs, so it's not scoped to
   header.top; each usage overrides height/width/font-size inline. */
.brand-initials {
  height: 36px; width: 36px; border-radius: 7px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0;
}
header.top h1 { font-size: 20px; margin: 0; font-weight: 700; letter-spacing: .2px; }
header.top .sub { font-size: 13px; color: var(--muted); }
header.top .who select {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: 15px; max-width: 150px;
}

main { flex: 1; overflow: hidden; position: relative; }
.tabpanel { display: none; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tabpanel.active { display: flex; flex-direction: column; }

nav.tabs {
  display: flex; background: var(--panel); border-top: 1px solid var(--border);
  flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom);
}
nav.tabs button {
  flex: 1; background: none; border: none; color: var(--muted);
  padding: 9px 2px 8px; font-size: 12px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; cursor: pointer;
}
nav.tabs button .ic { font-size: 21px; line-height: 1; }
/* The nav bar is the most-looked-at strip in the app, so it carries the
   brand colour: the active tab gets a tinted pill, not just coloured text.
   Without this the theme setting was invisible on the busiest screen. */
nav.tabs button.active {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 2px 0 var(--accent);
}
header.top { border-bottom: 2px solid var(--accent); }
nav.tabs button { position: relative; }
.nav-badge {
  position: absolute; top: 3px; right: calc(50% - 22px); min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--need); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
  align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--panel);
}

/* ---------- Floor plan tab ---------- */
.section-picker {
  display: flex; gap: 6px; overflow-x: auto; padding: 10px; flex-shrink: 0;
  background: var(--panel); border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.section-picker button {
  white-space: nowrap; background: var(--panel2); border: 1px solid var(--border);
  color: var(--text); padding: 8px 14px; border-radius: 999px; font-size: 14.5px; cursor: pointer;
}
.section-picker button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

#editPinsBtn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.edit-hint {
  background: rgba(242,177,52,.15); color: var(--warn); font-size: 14px;
  padding: 9px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}

.zoom-wrap {
  flex: 1; overflow: hidden; position: relative; background: #05070c; touch-action: none;
}
#planCanvas {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
}
#planCanvas img {
  display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none;
  image-rendering: -webkit-optimize-contrast;
}
#markerLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.pin {
  position: absolute; transform: translate(-50%, -100%);
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 800;
  padding: 6px 12px 7px; border-radius: 14px 14px 14px 3px; white-space: nowrap;
  pointer-events: auto; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.6);
  border: 2px solid rgba(255,255,255,.65); letter-spacing: .2px; line-height: 1.1;
}
.pin::after {
  content: ""; position: absolute; left: 8px; bottom: -8px; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 0px solid transparent; border-top: 8px solid currentColor;
}
.pin-default { background: var(--accent); }
.pin-red { background: var(--need); }
.pin-yellow { background: var(--warn); color: #2b1c00; }
.pin-green { background: var(--ok); color: #06210f; }
/* Struck gear. Grey rather than a status colour, because struck isn't a
   problem to fix — it's kit that's gone. Full opacity: it used to be
   grey-on-dark at 40% and was effectively invisible, which defeats the
   point of showing it in Edit pins mode at all. The strikethrough and the
   dashed edge carry the meaning instead. */
.pin-cut { background: #6b7280; color: #fff; border-color: rgba(255,255,255,.85); }
.pin-cut .pin-label { text-decoration: line-through; text-decoration-thickness: 2px; }

.pin-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-left: 4px; }
.pin-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.pin-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.zoom-controls {
  position: absolute; right: 10px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 5;
}
.zoom-controls button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(23,30,46,.9); color: var(--text); font-size: 20px; cursor: pointer;
}
.hint { position: absolute; left: 10px; bottom: 14px; font-size: 13px; color: var(--muted); background: rgba(23,30,46,.85); padding: 6px 10px; border-radius: 6px; }

/* ---------- Shared list/panel styling ---------- */
.panel-body { padding: 12px 12px 90px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.toolbar input[type=text], .toolbar select {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 10px; border-radius: 8px; font-size: 16px; flex: 1; min-width: 90px;
}
.toolbar button.small, button.small {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 13px; border-radius: 8px; font-size: 14px; cursor: pointer; white-space: nowrap;
}
button.primary { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-contrast); }
button.danger { background: var(--need); border: 1px solid var(--need); color: #fff; }
button.small:disabled { opacity: .45; cursor: default; }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 13px; margin-bottom: 10px;
}
.device-card .row1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; cursor: pointer; }
.device-card .booth { font-weight: 700; font-size: 18px; }
.device-card .details { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.badge {
  display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.badge.ok { background: rgba(53,194,107,.18); color: var(--ok); }
.badge.need { background: rgba(239,75,75,.18); color: var(--need); }
.badge.warn { background: rgba(242,177,52,.18); color: var(--warn); }
.badge.info { background: rgba(109,168,255,.18); color: var(--info); }
.badge.cut { background: rgba(107,114,128,.25); color: #c7cddc; text-decoration: line-through; }

/* Hardware status badge — colours match the pin colours exactly, so the
   badge on a device card and its bubble on the plan always agree. */
.deploy-badge { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.deploy-badge.hw-deployed { color: var(--ok); }
.deploy-badge.hw-not-deployed { color: var(--need); }
.deploy-badge.hw-needs-power { color: var(--warn); }
.deploy-badge.hw-struck { color: var(--cut); }

.device-card .meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 9px; font-size: 13.5px; color: var(--muted); }
.device-card .meta span b { color: var(--text); font-weight: 600; }

.device-card .expand { margin-top: 10px; display: none; border-top: 1px solid var(--border); padding-top: 10px; }
.device-card.open .expand { display: block; }
.device-card .expand label { font-size: 13px; color: var(--muted); display: block; margin: 9px 0 4px; }
.device-card .expand select, .device-card .expand textarea, .device-card .expand input {
  width: 100%; background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 9px; border-radius: 8px; font-size: 15px; font-family: inherit;
}
.device-card .expand textarea { min-height: 58px; resize: vertical; }

.ref-photo-thumb {
  width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px;
  background: #05070c; border: 1px solid var(--border); display: block; margin-top: 8px;
}

/* ---------- Dropbox preview ---------- */
.dropbox-preview { margin-top: 10px; }
.dropbox-preview img, .dropbox-preview video {
  width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px;
  background: #05070c; border: 1px solid var(--border); display: block;
}
.dropbox-fallback {
  background: var(--panel2); border: 1px dashed var(--border); border-radius: 8px;
  padding: 12px; font-size: 13.5px; color: var(--muted); text-align: center;
}
.dropbox-open-link {
  display: inline-block; margin-top: 7px; font-size: 13.5px; color: var(--accent); text-decoration: none; font-weight: 600;
}

/* ---------- Forms shared (todo/docs) ---------- */
.update-form { display: flex; flex-direction: column; gap: 9px; padding: 12px; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.update-form .row { display: flex; gap: 8px; }
.update-form input[type=text],
.update-form select,
.update-form textarea {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 10px; border-radius: 8px; font-size: 16px; font-family: inherit; width: 100%;
}

/* The schedule editor's field grid. Referenced by ui.js since the Schedule
   tab shipped, but never actually defined here — so it laid out as plain
   stacked divs. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.form-grid input, .form-grid select { width: 100%; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Todos ---------- */
.todo-item { padding: 11px; background: var(--panel); border: 1px solid var(--border); border-left: 5px solid var(--need); border-radius: 10px; margin-bottom: 9px; }
.todo-item.status-open { border-left-color: var(--need); }
.todo-item.status-progress { border-left-color: var(--warn); }
.todo-item.status-done { border-left-color: var(--ok); }
.todo-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.status-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.action-badge {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--border); color: var(--text);
}
.action-badge.act-add { border-color: var(--ok); color: var(--ok); }
.action-badge.act-strike { border-color: var(--need); color: var(--need); }
.action-badge.act-rotate { border-color: var(--info); color: var(--info); }
.action-badge.act-change { border-color: var(--warn); color: var(--warn); }
.action-badge.act-update { border-color: var(--purple); color: var(--purple); }
.todo-item .txt { font-size: 16px; }
.todo-item .txt .no-desc { color: var(--muted); font-style: italic; font-weight: 400; }
.todo-item .pad-tag { font-size: 13px; color: var(--accent); font-weight: 600; }
.todo-item .device-tag { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.todo-item .meta { font-size: 13px; color: var(--muted); }
.todo-item .actions { display: flex; gap: 7px; flex-wrap: wrap; }
.todo-item.done .txt { text-decoration: line-through; color: var(--muted); }

.comments-wrap { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 9px; }
.comment { padding: 7px 0; border-bottom: 1px dashed var(--border); }
.comment.system { opacity: .8; font-style: italic; }
.comment .c-msg { font-size: 14.5px; }
.comment .c-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.comment-form { display: flex; gap: 6px; margin-top: 9px; }
.comment-form .c-input {
  flex: 1; background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: 8px; font-size: 14.5px;
}

/* ---------- Mini map preview ---------- */
.minimap {
  width: 100%; height: 150px; border-radius: 10px; overflow: hidden; position: relative;
  background-color: #05070c; border: 1px solid var(--border);
}
.minimap-crosshair {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%,-50%);
  border: 3px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px var(--accent-glow);
}
.minimap-note {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 10px; font-size: 14px; color: var(--text); background: rgba(5,7,12,.6);
}

/* ---------- Chat ---------- */
.chat-log {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 8px;
}
.chat-row { display: flex; }
.chat-row.mine { justify-content: flex-end; }
.chat-bubble {
  max-width: 80%; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 12px 12px 12px 3px; padding: 8px 11px;
}
.chat-row.mine .chat-bubble { background: var(--accent); border-color: var(--accent); border-radius: 12px 12px 3px 12px; }
.chat-author { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.chat-row.mine .chat-author { color: rgba(255,255,255,.85); }
.chat-time { font-weight: 400; margin-left: 4px; }
.chat-text { font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.chat-row.mine .chat-text { color: #fff; }
.chat-input-row {
  display: flex; gap: 8px; padding: 10px 12px; background: var(--panel);
  border-top: 1px solid var(--border); flex-shrink: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.chat-input-row input {
  flex: 1; background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 10px; border-radius: 8px; font-size: 15px; font-family: inherit;
}

/* ---------- Chat mentions ---------- */
.chat-input-row { position: relative; }
.mention {
  border-radius: 5px; padding: 0 3px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
}
/* Being tagged yourself has to be findable by eye in a fast-moving log,
   so it's the filled treatment rather than the tinted one. */
.mention-me { background: var(--accent); color: var(--accent-contrast); }
.mention-booth {
  border: none; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.chat-row.tags-me .chat-bubble { border-left: 3px solid var(--accent); }
#chatMentionsFilter.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

.mention-menu {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% + 4px);
  background: var(--panel2); border: 1px solid var(--border); border-radius: 10px;
  max-height: 190px; overflow-y: auto; z-index: 30;
  box-shadow: 0 -6px 20px rgba(0,0,0,.35);
}
.mention-choice {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text); padding: 9px 11px; font-size: 15px; cursor: pointer;
}
.mention-choice.active, .mention-choice:hover { background: var(--accent-soft); }
.mention-sigil { color: var(--muted); margin-right: 4px; }

/* ---------- Docs ---------- */
.doc-item { padding: 13px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
/* The title is the button. Sized for a thumb, not a mouse — this is
   tapped one-handed on a show floor. */
.doc-open {
  display: block; width: 100%; text-align: left;
  font-weight: 600; font-size: 16px; color: var(--accent);
  text-decoration: none; padding: 4px 0; cursor: pointer;
}
.doc-open::after { content: " ↗"; font-size: 13px; opacity: .7; }
.doc-open:hover { text-decoration: underline; }
.doc-open-empty { color: var(--muted); font-style: italic; cursor: default; }
.doc-open-empty::after { content: " · no link yet"; font-style: normal; font-size: 13px; }
.doc-item .note { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }

/* ---------- Admin tab ----------
   Every setting is a collapsed card. The tab grew to nine sections of
   fully-expanded forms, which meant scrolling past a floor-plan uploader
   and a team roster to reach a checkbox. Collapsed by default, with a
   one-line hint on each summary, the whole tab fits on one screen and you
   pick what you came for. */
h2.section-title {
  font-size: 26px; font-weight: 800; letter-spacing: -.3px;
  color: var(--text); margin: 32px 0 16px;
}
h2.section-title:first-child { margin-top: 4px; }

.admin-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 8px; overflow: hidden;
}
.admin-card > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; cursor: pointer; list-style: none;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
/* Safari draws its own triangle unless both of these are cleared. */
.admin-card > summary::-webkit-details-marker { display: none; }
.admin-card > summary::marker { content: ""; }
.admin-card > summary::after {
  content: "▸"; margin-left: auto; color: var(--muted); font-size: 15px;
  transition: transform .15s ease;
}
.admin-card[open] > summary::after { transform: rotate(90deg); }
.admin-card[open] > summary { border-bottom: 1px solid var(--border); }
.admin-card > summary:hover { background: var(--accent-soft); }
.admin-card-title { font-size: 17px; font-weight: 700; }
.admin-card-hint { font-size: 13px; color: var(--muted); }
.admin-card-body { padding: 14px 16px 16px; }
.admin-card.danger-zone .admin-card-title { color: var(--need); }

/* The group headings collapse their whole section. */
.admin-group-title { cursor: pointer; user-select: none; }
.admin-group-title::after {
  content: "▾"; font-size: 16px; color: var(--muted); margin-left: 8px;
  display: inline-block; transition: transform .15s ease;
}
.admin-group-title.collapsed::after { transform: rotate(-90deg); }

.setup-section {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 17px 18px; margin-bottom: 14px;
}
.setup-section h3 { font-size: 18px; margin: 0 0 7px; font-weight: 700; }
.setup-section p, .setup-section li { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.setup-section p:last-child { margin-bottom: 0; }
.setup-section .field-label { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 8px; }

.setup-section input[type=text],
.setup-section input[type=email],
.setup-section input[type=password],
.setup-section input[type=number],
.setup-section input[type=date],
.setup-section select {
  width: 100%; background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 11px; border-radius: 8px; font-size: 16px; font-family: inherit; margin-bottom: 9px;
}
.setup-section .row { display: flex; gap: 8px; margin-bottom: 9px; }
.setup-section .row input, .setup-section .row select { margin-bottom: 0; flex: 1; }

/* Groups the "add a teammate" mini-form visually under the roster it's
   adding to, instead of a separate peer card. */
.team-add-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
/* Team used to live in #screen-admin-team, which styled .primary itself.
   Moving it into the collapsible admin cards left these two buttons with
   nothing but a background colour — native metrics, no padding, no radius. */
.team-add-form .primary {
  width: 100%; padding: 12px; border-radius: 9px; border: none;
  background: var(--accent); color: var(--accent-contrast);
  font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 2px;
}

/* Theme color: preset swatches + a native picker for an exact match to a
   customer's logo. Applying one just overrides --accent at :root, which
   every button/badge/pin already reads from — no per-component styling
   needed. */
.color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatch {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  padding: 0; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px transparent;
}
.color-swatch.active { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px currentColor; }
#brandColorPicker {
  -webkit-appearance: none; appearance: none; width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: 50%; padding: 0; background: none; cursor: pointer;
}
#brandColorPicker::-webkit-color-swatch-wrapper { padding: 2px; }
#brandColorPicker::-webkit-color-swatch { border: none; border-radius: 50%; }

/* Per-show tab visibility toggles */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px;
}
.toggle-row:last-child { border-bottom: none; }
.toggle-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; display: inline-block; }
.toggle-switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.toggle-switch .track {
  position: absolute; inset: 0; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 999px; transition: background .15s, border-color .15s;
}
.toggle-switch .thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s;
}
.toggle-switch input:checked ~ .track { background: var(--accent); border-color: var(--accent); }
.toggle-switch input:checked ~ .thumb { transform: translateX(18px); background: #fff; }

/* Destructive action gets a visual "danger zone" treatment instead of
   blending in with every other card. */
.setup-section.danger-zone { border-color: rgba(239,75,75,.4); background: rgba(239,75,75,.06); }
.setup-section.danger-zone h3 { color: var(--need); }

code { background: var(--panel2); padding: 2px 6px; border-radius: 4px; font-size: 13.5px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 74px; transform: translate(-50%, 20px);
  background: #10182b; border: 1px solid var(--border); color: var(--text);
  padding: 11px 17px; border-radius: 10px; font-size: 15px; max-width: 88vw;
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 50; box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none;
  align-items: flex-end; justify-content: center; z-index: 100;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px 16px 0 0;
  width: 100%; max-width: 520px; max-height: 82vh; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 640px) {
  .modal-overlay { align-items: center; }
  .modal-box { border-radius: 16px; max-height: 80vh; }
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 17px; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 19px; cursor: pointer; padding: 4px 8px; }
.modal-body { padding: 15px 17px; overflow-y: auto; font-size: 15px; }
.modal-body p { font-size: 14.5px; }
.modal-body .row { display: flex; gap: 8px; margin-bottom: 8px; }
.modal-body input[type=text], .modal-body input[type=email],
.modal-body input[type=password], .modal-body input[type=number],
.modal-body input[type=date], .modal-body textarea,
.modal-body select {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 10px; border-radius: 8px; font-size: 16px; font-family: inherit; width: 100%;
}
.modal-body select:disabled { opacity: .5; }

.pending-todo-box {
  background: rgba(242,177,52,.12); border: 1px solid var(--warn); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px;
}
.pending-todo-title { font-size: 13.5px; font-weight: 700; color: var(--warn); margin-bottom: 6px; }
.pending-todo-row { display: flex; align-items: center; gap: 8px; font-size: 14.5px; padding: 4px 0; }
.pending-todo-row .action-badge { flex-shrink: 0; }

.pin-choice {
  padding: 11px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px;
  font-size: 15px; cursor: pointer; background: var(--panel2);
}
.pin-choice:active { background: var(--accent); }

.inv-pad-title { font-weight: 700; font-size: 15px; margin: 14px 0 6px; display: flex; justify-content: space-between; align-items: baseline; }
.inv-pad-title:first-child { margin-top: 0; }
.inv-pad-total { font-weight: 400; font-size: 12px; color: var(--muted); }
.inv-row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 5px 0; border-bottom: 1px dashed var(--border); color: var(--muted); }
.inv-row span:first-child { color: var(--text); }
.inv-grand-total { font-weight: 700; font-size: 15.5px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); text-align: right; }

h2.section-title { font-size: 17px; margin: 4px 0 10px; }
.empty-state { color: var(--muted); font-size: 15px; text-align: center; padding: 32px 10px; }

.roster-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.roster-row:last-child { border-bottom: none; }
.roster-row-info { flex: 1; font-size: 14.5px; }
.roster-row select { max-width: 150px; }

/* ---- Sholo auth / workspace / show gate screens ---- */
.gate-screen {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.gate-box {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 22px;
}
.gate-box h1 {
  font-size: 22px; margin: 0 0 16px; text-align: center; font-weight: 700;
}
.gate-brand-img {
  display: block; margin: 0 auto 18px; height: 48px; width: auto; max-width: 100%;
}
.gate-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.gate-tab {
  flex: 1; padding: 9px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--muted); font-size: 14px; cursor: pointer;
}
.gate-tab.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.gate-pane input, .gate-pane select, #screen-admin-team input, #screen-admin-team select {
  width: 100%; padding: 11px; margin-bottom: 10px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--panel2); color: var(--text);
  font-size: 16px;
}
.gate-pane .primary, #screen-admin-team .primary {
  width: 100%; padding: 12px; border-radius: 9px; border: none;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.gate-hint { font-size: 13px; color: var(--muted); line-height: 1.4; margin: 0 0 12px; }
.gate-error { color: var(--need); font-size: 13px; margin-top: 8px; min-height: 16px; }
.gate-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 50vh; overflow-y: auto; }
.gate-list-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel2); color: var(--text);
  cursor: pointer; font-size: 15px;
}
.gate-list-item:hover { border-color: var(--accent); }
.gate-list-sub { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.gate-row { display: flex; gap: 8px; }
.gate-row button { flex: 1; }

/* The workspace and show pickers are the first thing anyone sees, often on
   a phone in bad light on a load-in day. Logos and avatars are sized to be
   recognised at a glance rather than squinted at — this screen has plenty
   of room, so there's no reason for them to be small. */
.gate-list-row { display: flex; align-items: center; gap: 14px; width: 100%; }
.gate-list-logo {
  height: 56px; width: 56px; object-fit: contain; border-radius: 10px;
  background: #fff; padding: 5px; flex-shrink: 0;
}
/* A show's own avatar, as opposed to a company logo above. The white ring
   is padding, not a border — a company logo needs it (wordmarks sit badly
   right against an edge), but a show avatar is usually a photo or a round
   badge that reads better filling the circle. Halved, and the image grows
   into the space it frees. */
.gate-list-avatar {
  height: 56px; width: 56px; object-fit: cover; border-radius: 50%;
  background: #fff; padding: 2.5px; flex-shrink: 0;
}
.gate-list-initials {
  height: 56px; width: 56px; border-radius: 10px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; flex-shrink: 0;
}
.gate-list-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gate-list-text b { font-size: 17px; line-height: 1.25; }
.gate-list-item { padding: 14px; }
.gate-list-sub { font-size: 13px; }

/* Workspace branding above "Choose a show". */
#eventScreenOrgBrand {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 18px;
}
#eventScreenOrgLogo {
  height: 56px; width: auto; max-width: 160px; object-fit: contain;
  border-radius: 10px; background: #fff; padding: 5px;
}
#eventScreenOrgInitials { height: 56px; width: 56px; border-radius: 10px; font-size: 20px; }
#eventScreenOrgName { font-weight: 700; font-size: 20px; }

header.top .who { display: flex; align-items: center; gap: 8px; }
header.top .who-name { font-size: 13px; font-weight: 600; }
/* Wraps the avatar + name so tapping either opens the "Your profile" modal
   (avatar upload, Sholo ID) — replaces the old dedicated Setup tab. Reset
   to look like plain header content, not a button. */
.who-profile-btn {
  display: flex; align-items: center; gap: 6px; background: none; border: none;
  padding: 2px; margin: 0; cursor: pointer; border-radius: 8px;
  /* Buttons don't inherit color/font from their parent by default in most
     browsers (UA stylesheet sets its own), which is why the name rendered
     in default black instead of the header's light text color. */
  color: inherit; font: inherit;
}
.who-profile-btn:hover { background: var(--panel2); }

/* ---- Device list import preview + version history ---- */
.import-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px; margin: 12px 0;
}
.import-stat {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 8px; text-align: center;
}
.import-stat b { display: block; font-size: 20px; font-weight: 700; }
.import-stat span { font-size: 12px; color: var(--muted); }
.import-stat.muted { opacity: .5; }
.import-detail {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; background: var(--panel2);
}
/* Conflicts and off-list devices are the two cases where an import would
   otherwise lose work quietly, so they read as warnings rather than as
   another collapsed list. */
.import-detail.warn { border-color: #f2b134; background: rgba(242,177,52,.08); }
.import-detail summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.import-detail ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.import-detail li { margin-bottom: 5px; }
.current-list {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; font-size: 14px;
}
.current-list .gate-list-sub { display: block; margin-top: 2px; }
.current-list a { margin-top: 4px; display: inline-block; }

/* ---- Per-device change history ---- */
.f-history-out { margin-top: 10px; font-size: 13px; }
.history-row {
  padding: 6px 0; border-top: 1px solid var(--border); color: var(--text);
}
.history-row:first-child { border-top: none; }
.history-meta { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ---- Pin drag + nudge (edit pins mode) ---- */
.pin-dragging {
  opacity: .85; cursor: grabbing;
  box-shadow: 0 0 0 3px rgba(255,255,255,.55);
  z-index: 50;
}
.nudge-pad { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.nudge-row { display: flex; align-items: center; gap: 8px; }
.nudge { min-width: 46px; font-size: 17px; line-height: 1; padding: 9px 12px; }
.nudge-readout {
  min-width: 110px; text-align: center; font-size: 13px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ---- Struck devices ----
   Not on the floor anymore: the pin leaves the map entirely (except while
   editing pins, where it stays dimmed so it can still be moved or removed)
   and the device row greys out rather than disappearing — you still need to
   find it to un-strike it or check what was there. */
/* Deliberately NOT opacity. Fading a pin on a dark plan makes it
   unreadable long before it looks "de-emphasised", and these only appear
   in Edit pins mode — where you're specifically looking for them. */
.pin-inactive {
  border-style: dashed;
  box-shadow: 0 3px 12px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.35);
}
.device-card.device-inactive { opacity: .5; }
.device-card.device-inactive .booth {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.device-card.device-inactive:hover,
.device-card.device-inactive.open { opacity: 1; }

/* To-do events in a device's timeline, distinguished from field edits. */
.history-row.history-todo { border-left: 3px solid var(--accent); padding-left: 8px; }
.history-row.history-todo.done { border-left-color: #35c26b; }

/* ---- Offline indicator ----
   Amber, not red: being offline is expected on a show floor and the work
   is still being saved. It's information, not an error. */
.offline-badge {
  background: rgba(242,177,52,.18); color: #f2b134;
  border: 1px solid rgba(242,177,52,.45);
  border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* ---- Editable equipment fields on a device card ----
   Collapsed by default: a tech on the floor needs status, notes and a photo
   fast; what hardware is at the location is a rarer, more deliberate edit. */
.equip-details {
  margin: 12px 0; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; background: var(--panel2);
}
.equip-details summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text);
}
.equip-details[open] summary { margin-bottom: 8px; }
.equip-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 10px; margin-top: 6px;
}
.equip-grid label { margin-top: 0; }
.equip-details input[disabled] { opacity: .55; cursor: not-allowed; }
.field-note { color: var(--muted); font-weight: 400; font-size: 12px; }

/* ---- Floor plan page list (admin): reorder + pad codes ---- */
.section-move { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; margin-right: 10px; }
.section-move button {
  min-width: 34px; padding: 3px 8px; line-height: 1.2; font-size: 14px;
}
.section-move button[disabled] { opacity: .3; cursor: not-allowed; }
.section-pads { margin-top: 6px; }
.section-pads input[type=text] { width: 100%; max-width: 280px; }

/* ---- Inventory: provider toggles ----
   A row on the device list is several pieces of kit owned by different
   companies, so these filter by who provides what, not by device type. */
.inv-providers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.inv-provider {
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.inv-provider.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* A cut/struck device in the place-pin list: still selectable, but clearly
   marked so nobody places one and wonders why the pin vanished. */
.pin-choice.choice-inactive { opacity: .6; }
.pin-choice.choice-inactive:hover { opacity: 1; }

/* ---- Import wizard: sheet picker + column mapping ---- */
.sheet-choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 8px; color: var(--text); font: inherit;
}
.sheet-choice:hover { border-color: var(--accent); }
.sheet-choice.suggested { border-color: var(--accent); }
.sheet-choice .gate-list-sub { display: block; margin-top: 2px; }
.sheet-cols {
  display: block; margin-top: 6px; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.map-list { max-height: 52vh; overflow-y: auto; }
.map-row {
  display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  padding: 9px 0; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.map-row:first-child { border-top: none; }
.map-col { flex: 1 1 140px; min-width: 0; }
.map-col b { font-size: 14px; }
/* Sample values are the thing that tells you whether a column counts gear
   or names it, so they're always visible rather than truncated away. */
.map-col .gate-list-sub { display: block; margin-top: 2px; word-break: break-word; }
.map-controls { display: flex; flex-direction: column; gap: 6px; flex: 0 0 190px; }
.map-controls select, .map-controls input { width: 100%; }

/* ---- Hover preview on a floor plan pin ----
   Positioned in the viewport (position:fixed) rather than inside the
   zoom canvas, so the plan's transform doesn't scale or clip it. */
.pin-preview {
  position: fixed; z-index: 200; width: 240px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55); overflow: hidden;
}
.pin-preview img { display: block; width: 100%; height: 130px; object-fit: cover; background: #05070c; }
.pin-preview-body { padding: 9px 11px; }
.pin-preview-device { font-size: 13px; margin-bottom: 7px; }
.pin-preview-device:last-child { margin-bottom: 0; }
.pin-preview-device b { display: block; font-size: 15px; }
.pin-preview-device span { display: block; color: var(--muted); margin-top: 1px; }
.pin-preview-tags { display: flex !important; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.pin-preview-tags i { font-style: normal; }
.pin-preview-todos {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--warn);
}
/* Editable page name in the Admin floor plan list. */
.section-name { width: 100%; max-width: 280px; font-weight: 600; }

/* Multi-select sheet picker: a workbook is often split one tab per area,
   so more than one can be the device list. */
.sheet-choice { display: block; }
.sheet-choice-head { display: flex; align-items: center; gap: 8px; }
.sheet-choice-head input { width: auto; margin: 0; flex-shrink: 0; }
.sheet-choice.picked { border-color: var(--accent); background: var(--accent-soft); }
.import-detail button.small { margin-top: 8px; }

/* ---- Devices not on any floor plan ---- */
.badge.no-pin { background: rgba(167,139,250,.18); color: var(--purple); }
.unpinned-nudge {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.4);
  color: var(--text); font: inherit; font-size: 14px;
  border-radius: 10px; padding: 11px 13px; margin-bottom: 10px;
}
.unpinned-nudge:hover { border-color: var(--purple); }
.unpinned-nudge b { color: var(--purple); }

/* ---- Status you can change from the list ----
   Native selects styled as the badges they replace: on a phone that means
   the system picker, which is far easier with gloves on than any custom
   menu, and it keeps keyboard and screen-reader behaviour for free. */
.quick-status {
  appearance: none; -webkit-appearance: none;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; padding: 4px 22px 4px 9px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; max-width: 190px;
  background-color: var(--panel2); color: var(--text);
  /* The chevron, drawn in CSS so there's no image to load. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 10px top 52%, right 6px top 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.quick-status:hover { border-color: currentColor; }
.quick-status:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Per-item gear ownership, inside the gear card's equipment section. */
.owner-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.owner-row { display: flex; align-items: center; gap: 8px; }
.owner-row .owner-item { flex: 1; font-size: 14.5px; }
.owner-row select {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 5px 7px; font-size: 14px; max-width: 46%;
}
.owner-changed { color: var(--accent); font-weight: 600; }
/* Same colours the read-only badges used, so nothing changed visually
   except that they're now live. */
.quick-status.hw-deployed { background-color: rgba(53,194,107,.18); color: var(--ok); }
.quick-status.hw-not-deployed { background-color: rgba(239,75,75,.18); color: var(--need); }
.quick-status.hw-needs-power { background-color: rgba(242,177,52,.18); color: var(--warn); }
.quick-status.hw-struck { background-color: rgba(107,114,128,.25); color: #c7cddc; }
.quick-status.badge-ok { background-color: rgba(53,194,107,.18); color: var(--ok); }
.quick-status.badge-need { background-color: rgba(239,75,75,.18); color: var(--need); }
.quick-status.badge-warn { background-color: rgba(242,177,52,.18); color: var(--warn); }
.quick-status.badge-info { background-color: rgba(109,168,255,.18); color: var(--info); }
.quick-status option { background: var(--panel); color: var(--text); text-transform: none; }

/* A chat message that tagged this booth, shown on its gear history. */
.history-row.history-chat { border-left: 3px solid var(--accent-strong); padding-left: 8px; }

/* ---------- Schedule ---------- */
.sched-day {
  font-size: 15px; font-weight: 700; color: var(--accent);
  margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.sched-day:first-child { margin-top: 0; }
.sched-item { display: flex; gap: 12px; align-items: flex-start; }
/* Fixed width so every time in the column lines up — a schedule is scanned
   down the left edge, not read left to right. */
.sched-when {
  flex: 0 0 92px; font-size: 14px; font-weight: 700; color: var(--text);
  line-height: 1.35; padding-top: 1px;
}
.sched-main { flex: 1; min-width: 0; }
.sched-title { font-size: 16px; font-weight: 600; }
.sched-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 4px; font-size: 13.5px; color: var(--muted);
}
.sched-notes { margin-top: 5px; font-size: 13.5px; color: var(--muted); }
.sched-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.sched-bell { font-size: 16px; line-height: 1; padding: 7px 9px; }
.sched-bell.active { background: var(--accent); border-color: var(--accent); }
#schedMineBtn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.sched-preview-row {
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}

/* The entry happening right now, while auto-follow is on. */
.sched-item.sched-now { border-color: var(--accent); background: var(--accent-soft); }
.sched-item.sched-now .sched-when { color: var(--accent); }
#schedNowBtn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

/* "Which schedules are mine" picker. */
.label-picker { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.label-pick {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px;
  border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 400;
}
.label-pick:hover { background: var(--panel2); }
.label-pick input { width: auto; margin: 0; }

/* Imported-from-a-web-page sources on the Admin tab. */
.source-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.source-row .gate-list-text { display: flex; flex-direction: column; min-width: 0; }