/* ==========================================================================
   styles.css — all styling for the User Directory
   Colors and sizes used in many places are defined once here as variables.
   ========================================================================== */

:root {
  --brand: #2f2e2e;
  --accent: #2563eb;
  --accent-soft: #eff4ff;
  --ink: #1f2937;
  --muted: #6b7280;
  --faint: #9ca3af;
  --line: #e5e7eb;
  --line-soft: #f0f1f3;
  --bg: #f6f7f9;
  --white: #ffffff;
  --danger: #dc2626;
  --ok: #15803d;
  --radius: 8px;
  --row-h: 34px;
  --topbar-h: 52px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  white-space: nowrap;
}
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: #000; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: #fef2f2; border-color: #fecaca; }

/* ── Top bar ─────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 16px;
  background: var(--brand);
  color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; }
a.brand { color: inherit; text-decoration: none; flex-shrink: 0; white-space: nowrap; }
a.brand:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: #fff;
  object-fit: contain;
  display: block;
}
.brand-name { font-size: 17px; font-weight: 700; }
.tabs { display: flex; gap: 2px; align-self: stretch; align-items: flex-end; overflow-x: auto; }
.tab {
  border: 0; background: transparent;
  color: rgba(255, 255, 255, 0.7);
  padding: 9px 14px;
  border-radius: 7px 7px 0 0;
  font-weight: 500;
  white-space: nowrap;
}
.tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.tab.active { background: var(--white); color: var(--ink); font-weight: 600; }

/* ── Layout ──────────────────────────────────────────── */
.app { flex: 1; min-height: 0; display: flex; }
.sidebar {
  width: 236px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  overflow-y: auto;
  background: var(--white);
}
.sidebar-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--faint); padding: 0 8px 8px;
}
.sidebar[hidden] { display: none; }
.side-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  border: 0; background: transparent; padding: 7px 8px; border-radius: 6px;
  text-align: left; font-weight: 500; color: var(--ink);
}
.side-btn:hover { background: var(--bg); }
.side-btn span { font-size: 16px; line-height: 1; width: 16px; text-align: center; }
.view-find { position: relative; margin: 4px 0 10px; }
.view-find-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-52%); color: var(--faint); }
.view-find input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent;
  padding: 7px 8px 7px 28px; outline: none;
}
.view-find input:focus { border-bottom-color: var(--accent); }
.view-none { color: var(--faint); font-size: 12px; padding: 4px 8px; margin: 0; }
.view-row { position: relative; display: flex; align-items: center; border-radius: 6px; }
.view-row:hover { background: var(--bg); }
.view-row.active { background: var(--accent-soft); }
.view {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  border: 0; background: transparent;
  padding: 7px 8px; border-radius: 6px; text-align: left;
}
.view-row.active .view { color: var(--accent); font-weight: 600; }
.view-icon { color: var(--accent); display: inline-flex; }
.view-type-icon { color: var(--muted); display: inline-flex; }
.view-type-icon svg { width: 13px; height: 13px; }
.view-more {
  border: 0; background: transparent; color: var(--muted);
  width: 26px; height: 26px; margin-right: 3px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
}
.view-row:hover .view-more, .view-row.active .view-more, .view-more:focus-visible, .view-more[aria-expanded="true"] { opacity: 1; }
.view-more:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.view-row:hover .view-count, .view-row.active .view-count { display: none; }
.view-rename {
  flex: 1; min-width: 0; margin: 3px 4px 3px 0;
  border: 1px solid var(--accent); border-radius: 5px; padding: 4px 6px;
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft); font-weight: 600;
}
.view-row:has(.view-rename) { padding-left: 8px; gap: 8px; }
.view-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-count { color: var(--faint); font-size: 12px; font-weight: 500; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Toolbar ─────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.toolbar-title { font-weight: 700; font-size: 14px; margin-right: 4px; display: flex; align-items: center; gap: 4px; }
.sidebar-toggle {
  border: 0; background: transparent; color: var(--muted);
  width: 30px; height: 30px; border-radius: 6px; font-size: 16px;
}
.sidebar-toggle:hover { background: var(--bg); color: var(--ink); }
.view-switch {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  padding: 5px 9px; border-radius: 7px; font-weight: 700; font-size: 14px;
}
.view-switch:hover { background: var(--bg); }
.view-switch[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.view-caret { color: var(--muted); font-size: 11px; }
.view-desc { display: inline-flex; color: var(--faint); cursor: help; border-radius: 50%; }
.view-desc:hover, .view-desc:focus-visible { color: var(--accent); }

/* ── View menu (floating) ──────────────────────────────── */
.view-menu {
  position: fixed; z-index: 200; width: 340px; max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16); padding: 8px;
}
.vm-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  border: 0; background: transparent; color: var(--ink);
  padding: 8px 10px; border-radius: 6px; text-align: left; font-size: 14px;
}
.vm-item:hover:not([disabled]), .vm-item:focus-visible { background: var(--bg); outline: none; }
.vm-item[disabled] { color: var(--faint); cursor: not-allowed; }
.vm-item.danger { color: var(--danger); }
.vm-item.danger[disabled] { color: #f0a6a6; }
.vm-icon { display: inline-flex; flex-shrink: 0; color: currentColor; }
.vm-type { align-items: flex-start; }
.vm-type-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vm-note { color: var(--muted); font-size: 12px; font-weight: 400; }
.vm-chevron { display: inline-flex; color: var(--muted); transition: transform 0.15s; align-self: center; }
.vm-chevron.open { transform: rotate(90deg); }
.vm-types { margin: 2px 0 4px 26px; border-left: 2px solid var(--line-soft); padding-left: 4px; }
.vm-type-choice { align-items: flex-start; }
.vm-check { display: inline-flex; color: var(--accent); width: 16px; align-self: center; }
.vm-sep { height: 1px; background: var(--line-soft); margin: 6px 8px; }

/* ── Pop-up forms (create view, description…) ──────────── */
.modal {
  border: 0; border-radius: 12px; padding: 0; width: min(460px, calc(100vw - 32px));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); color: var(--ink);
}
.modal::backdrop { background: rgba(17, 24, 39, 0.4); }
.modal-form { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.modal-title { margin: 0; font-size: 17px; }
.modal-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; border: 0; padding: 0; margin: 0; }
.modal-field legend { padding: 0; margin-bottom: 6px; }
.modal-field input, .modal-field textarea, .modal-field select {
  font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; outline: none;
}
.modal-field textarea { resize: vertical; }
.modal-field input:focus, .modal-field textarea:focus, .modal-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.type-choices { gap: 4px; }
.type-choice, .check-row { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.type-choice:hover, .check-row:hover { background: var(--bg); }
.type-choice > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.type-choice input, .check-row input { margin-top: 2px; }
.modal-error { color: var(--danger); margin: 0; min-height: 0; font-size: 13px; }
.modal-error:empty { display: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.menu-note { color: var(--muted); font-size: 12px; margin: 0 8px 6px; }
.menu-item.disabled { color: var(--faint); cursor: not-allowed; }
.search { position: relative; width: 240px; }
.search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-52%); color: var(--faint); font-size: 15px; }
.search input {
  width: 100%;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px 6px 28px;
  outline: none;
}
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tool {
  border: 0; background: transparent;
  padding: 6px 10px; border-radius: 6px; color: var(--muted); font-weight: 500;
}
.tool:hover { background: var(--bg); color: var(--ink); }
.tool-active { background: #e0f2fe; color: #0369a1; }

/* Table · Split · Org Chart switch */
.segmented { display: inline-flex; background: #eef0f3; border-radius: 7px; padding: 2px; }
.segmented button {
  border: 0; background: transparent;
  padding: 5px 12px; border-radius: 5px;
  font-weight: 600; color: var(--muted);
}
.segmented button.on { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }

/* Hide-fields menu */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  width: 240px; max-height: 420px; overflow-y: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 6px;
}
.menu-title { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 8px; }
.menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: pointer; }
.menu-item:hover { background: var(--bg); }
.menu-foot { display: flex; gap: 6px; border-top: 1px solid var(--line-soft); margin-top: 4px; padding: 6px 4px 2px; }
.menu-foot button { flex: 1; border: 1px solid var(--line); background: var(--white); border-radius: 5px; padding: 4px; }

/* ── Content area (table and/or chart) ──────────────── */
.content-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content[data-shows="table"] .grid-area,
.content[data-shows="chart"] .chart-area { flex: 1; }
.content[data-shows="split"] .grid-area { flex: 1; min-height: 0; }
.message { margin: auto; color: var(--muted); }
.message.error { color: var(--danger); }

.splitter {
  height: 7px; flex-shrink: 0; cursor: row-resize;
  background: var(--line-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: relative;
}
.splitter::after {
  content: ''; position: absolute; left: 50%; top: 2px; width: 36px; height: 1px; margin-left: -18px;
  border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); height: 2px;
}
.splitter:hover { background: #e6ebf5; }
body.resizing-rows { cursor: row-resize; user-select: none; }
body.resizing { cursor: col-resize; user-select: none; }

/* ── The grid (spreadsheet) ─────────────────────────── */
.grid-area { display: flex; flex-direction: column; min-height: 0; background: var(--white); }
.grid-scroll { flex: 1; min-height: 0; overflow: auto; position: relative; }
.grid-footer {
  flex-shrink: 0; padding: 6px 14px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--white);
}
.grid-empty { padding: 30px; text-align: center; color: var(--faint); }

table.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
table.grid th, table.grid td {
  height: var(--row-h);
  padding: 0 10px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left;
  background: var(--white);
}
table.grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: #fafafa;
  font-weight: 600; color: #374151;
  border-bottom: 1px solid var(--line);
  cursor: pointer; user-select: none;
}
table.grid thead th:hover { background: #f3f4f6; }
.th-label { display: inline-flex; align-items: center; gap: 6px; }
.col-icon { color: var(--faint); font-size: 11px; width: 12px; text-align: center; }
.sort-arrow { color: var(--accent); }
.col-resize {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 3;
}
.col-resize:hover { background: var(--accent); opacity: 0.4; }

/* Row number column + the first ("pinned") column stay put when scrolling sideways */
table.grid .rownum {
  position: sticky; left: 0; z-index: 1;
  color: var(--faint); font-size: 12px; text-align: left;
}
table.grid thead .rownum { z-index: 4; }
table.grid .pinned {
  position: sticky; left: 64px; z-index: 1;
  border-right: 1px solid var(--line);
}
table.grid td.pinned { font-weight: 500; }
table.grid thead .pinned { z-index: 4; }

.rownum .expand {
  display: none;
  border: 1px solid var(--line); background: var(--white); border-radius: 4px;
  width: 22px; height: 22px; padding: 0; margin-left: 6px; color: var(--accent);
}
tbody tr:hover .rownum .expand { display: inline-block; }
tbody tr:hover .rownum .n { display: none; }

tbody tr:hover td { background: #fafbfc; }
tbody tr.is-selected td { background: var(--accent-soft); }
td.cell { cursor: default; }
td.cell.selected { box-shadow: inset 0 0 0 2px var(--accent); }
td.cell.editing { padding: 0; box-shadow: inset 0 0 0 2px var(--accent); overflow: visible; }
td.cell.editing input, td.cell.editing select {
  width: 100%; height: calc(var(--row-h) - 1px);
  border: 0; outline: none; padding: 0 9px; background: var(--white);
}
td.cell.editing input[type="color"] { padding: 4px 8px; }
td.type-count .num { color: var(--muted); }
td.type-avatar { padding-top: 3px; }

.row-actions { text-align: center !important; padding: 0 !important; }
.row-actions button { border: 0; background: transparent; color: #d1d5db; font-size: 12px; }
tbody tr:hover .row-actions button { color: var(--faint); }
.row-actions button:hover { color: var(--danger) !important; }
.add-row td { background: #fcfcfd; }
.add-row input { width: 100%; border: 0; background: transparent; outline: none; color: var(--ink); }
.add-row input::placeholder { color: var(--faint); }

/* Cell contents */
.chip {
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
  padding: 2px 8px; border-radius: 5px;
  background: #eef2f7; color: #1f2937;
  line-height: 18px;
}
.status { font-weight: 600; }
.status-active { color: var(--ok); }
.status-inactive, .status-exited { color: var(--faint); }
.email { color: var(--accent); text-decoration: underline; text-decoration-color: #bfd0f8; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: -2px; border: 1px solid rgba(0, 0, 0, 0.1); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700;
  object-fit: cover; border: 2px solid transparent; flex-shrink: 0;
}
img.avatar { background: var(--line); }

/* ── Record panel ───────────────────────────────────── */
.panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 30;
  width: 380px; max-width: 100%;
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.18s ease;
}
.panel.open { transform: none; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.avatar-new { width: 56px; height: 56px; background: var(--line); color: var(--muted); font-size: 24px; }
.panel-title { flex: 1; min-width: 0; }
.panel-name { font-size: 18px; font-weight: 700; }
.panel-sub { color: var(--muted); margin-top: 2px; }
.panel-close { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--faint); align-self: flex-start; }
.panel-close:hover { color: var(--ink); }
.panel-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.panel-body .section-label { margin: 18px 0 8px; }
.panel-body .section-label:first-child { margin-top: 2px; }
.field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px;
  font: inherit; resize: vertical; outline: none;
}
.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.facts { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; margin: 0; font-size: 12px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.panel-facts:empty { display: none; }
.field-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.req { color: var(--danger); }
.field input, .field select {
  width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 9px; background: var(--white); outline: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input[type="color"] { height: 34px; padding: 3px; }
.panel-section { margin-top: 8px; }
.section-label { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.report {
  width: 100%; display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; padding: 6px; border-radius: 6px; text-align: left;
}
.report:hover { background: var(--bg); }
.report > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.report-name { font-weight: 600; }
.report-role { color: var(--muted); font-size: 12px; }
.panel-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }
.panel-foot .btn:first-child { margin-right: auto; }

/* ── Toast ──────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 100;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--brand); color: #fff;
  padding: 9px 16px; border-radius: 8px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: opacity 0.15s, transform 0.15s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); }

/* ── Org chart ──────────────────────────────────────── */
.chart-area { position: relative; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.chart-toolbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 2px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 4px 6px;
  white-space: nowrap;
}
.chart-toolbar button {
  border: 0; background: transparent; border-radius: 999px;
  padding: 4px 11px; font-size: 12px; font-weight: 600; color: #4b5563;
}
.chart-toolbar button:hover { background: #f3f4f6; }
.chart-toolbar button.on { background: #f0efef; color: var(--brand); }
.chart-toolbar button.icon { width: 28px; height: 28px; padding: 0; font-size: 15px; }
.chart-toolbar .zoom { width: 40px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tb-divider { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }

.chart-canvas {
  flex: 1; min-height: 0; overflow: auto; cursor: grab;
  background-image: radial-gradient(#dfe3e8 1px, transparent 1px);
  background-size: 22px 22px;
}
.chart-canvas.grabbing { cursor: grabbing; user-select: none; }
.chart-inner { display: inline-block; min-width: 100%; padding: 80px 60px 60px; }
.chart-empty { padding: 80px; text-align: center; color: var(--faint); }

/* Person cards */
.card-wrap { position: relative; }
.card-wrap.dim { opacity: 0.35; }
.person-card {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 200px; padding: 9px 12px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line); border-radius: 12px;
  transition: box-shadow 0.15s;
}
.person-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.person-card.dashed { border-style: dashed; }
.person-card.ref { background: rgba(249, 250, 251, 0.85); }
.person-card.selected { border-color: var(--c); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.person-card.matched { box-shadow: 0 0 0 2px var(--c); }
.card-bar { position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--c); }
.person-card.ref .card-bar { opacity: 0.5; }
.card-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.card-name { font-size: 13px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-name.tbd { color: var(--faint); font-style: italic; }
.card-role {
  font-size: 11px; color: var(--muted); line-height: 1.25; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ref-badge {
  position: absolute; top: -8px; right: 8px;
  font-size: 9px; font-weight: 700; color: #fff; background: var(--c);
  padding: 1px 6px; border-radius: 999px;
}
.card-toggle {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); z-index: 2;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 999px; border: 1px solid var(--c);
  background: #fff; color: var(--c);
  font-size: 11px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.card-toggle.closed { background: var(--c); color: #fff; }

/* Tree connector lines.
   Managers branch HORIZONTALLY; a manager whose reports have no reports of their own
   lists them VERTICALLY (keeps big teams from becoming very wide). */
.tree { display: flex; justify-content: center; }
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree li { position: relative; display: flex; flex-direction: column; }
.tree ul.kids-h > li { align-items: center; }
.tree ul.kids-v > li { align-items: flex-start; }

.tree ul.kids-h { display: flex; justify-content: center; position: relative; padding-top: 26px; }
.tree ul.kids-h > li { padding: 26px 12px 0; }
.tree ul.kids-h > li::before,
.tree ul.kids-h > li::after {
  content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 26px;
  border-top: 2px solid #d5d8de;
}
.tree ul.kids-h > li::after { right: auto; left: 50%; border-left: 2px solid #d5d8de; }
.tree ul.kids-h > li:only-child::before,
.tree ul.kids-h > li:only-child::after { display: none; }
.tree ul.kids-h > li:only-child { padding-top: 26px; }
.tree ul.kids-h > li:first-child::before,
.tree ul.kids-h > li:last-child::after { border: 0 none; }
.tree ul.kids-h > li:last-child::before { border-right: 2px solid #d5d8de; border-radius: 0 6px 0 0; }
.tree ul.kids-h > li:first-child::after { border-radius: 6px 0 0 0; }
.tree ul.kids-h::before { content: ''; position: absolute; top: 0; left: 50%; height: 26px; border-left: 2px solid #d5d8de; }

.tree ul.kids-v { display: flex; flex-direction: column; position: relative; margin-left: 26px; padding-top: 14px; padding-left: 26px; }
.tree ul.kids-v > li { padding: 5px 0; }
.tree ul.kids-v > li::before { content: ''; position: absolute; left: -26px; top: 50%; width: 26px; border-top: 2px solid #d5d8de; }
.tree ul.kids-v > li::after { content: ''; position: absolute; left: -26px; top: 0; bottom: 0; border-left: 2px solid #d5d8de; }
.tree ul.kids-v > li:last-child::after { bottom: 50%; }
.tree ul.kids-v::before { content: ''; position: absolute; left: 0; top: 0; height: 14px; border-left: 2px solid #d5d8de; }

/* The top of the tree has no line coming into it */
.tree > ul.kids-h { padding-top: 0; }
.tree > ul.kids-h::before { display: none; }
.tree > ul.kids-h > li { padding-top: 0; }
.tree > ul.kids-h > li::before,
.tree > ul.kids-h > li::after { display: none; }

/* Compact layout: each top person's team wraps into rows; deeper levels list downward */
.org-stack { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.org-section { width: 100%; }
.tree ul.kids-top > li { align-items: center; }
.tree ul.kids-wrap {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 26px 30px; max-width: 1480px; margin-top: 30px; padding: 26px 28px 24px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid #e3e6ea; border-radius: 16px;
}
.tree ul.kids-wrap::before { content: ''; position: absolute; left: 50%; top: -31px; height: 30px; border-left: 2px solid #d5d8de; }
.tree ul.kids-wrap > li { align-items: flex-start; }
.org-loners { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.org-loners-title { font-size: 12px; font-weight: 600; color: var(--muted); }
.org-loners-title:empty { display: none; }
.org-loners ul.kids-wrap { list-style: none; margin: 0; }
.org-loners ul.kids-wrap::before { display: none; }
.org-loners li { position: relative; display: flex; flex-direction: column; }
.org-loners ul.kids-t { list-style: none; margin: 0; }

/* A list going downward, lines joined to the middle of each card */
ul.kids-t { display: flex; flex-direction: column; align-items: flex-start; position: relative; margin-left: 18px; padding: 16px 0 0 24px; }
ul.kids-t > li { padding: 5px 0; }
ul.kids-t > li::after { content: ''; position: absolute; left: -24px; top: 0; bottom: 0; border-left: 2px solid #d5d8de; }
ul.kids-t > li:last-child::after { display: none; }
ul.kids-t > li > .card-wrap::before { content: ''; position: absolute; left: -24px; top: 50%; width: 24px; border-top: 2px solid #d5d8de; }
ul.kids-t > li:last-child > .card-wrap::after { content: ''; position: absolute; left: -24px; top: -5px; height: calc(50% + 5px); border-left: 2px solid #d5d8de; }
ul.kids-t::before { content: ''; position: absolute; left: 0; top: 0; height: 16px; border-left: 2px solid #d5d8de; }

/* ── Smaller screens ────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .search { width: 160px; }
}
.panel-section:empty { display: none; }

/* ── Multi-record picker (e.g. a role's Systems) ─────── */
.picker {
  position: fixed; z-index: 60; width: 300px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  display: flex; flex-direction: column;
}
.picker-search { margin: 8px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; outline: none; }
.picker-search:focus { border-color: var(--accent); }
.picker-list { max-height: 280px; overflow-y: auto; padding: 0 4px; }
.picker-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; cursor: pointer; }
.picker-item:hover { background: var(--bg); }
.picker-empty { padding: 12px; color: var(--faint); text-align: center; }
.picker-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-top: 1px solid var(--line-soft); }
.picker-count { color: var(--muted); font-size: 12px; }
td.type-links, td.type-lookup { text-overflow: clip; }
td.type-links .chip, td.type-lookup .chip { margin-right: 2px; }

/* ── Checkbox cells ─────────────────────────────────── */
td.type-checkbox { text-align: center; }
.checkbox {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid #c4c8cf; background: var(--white);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  cursor: pointer; vertical-align: middle;
}
.checkbox.on { background: var(--accent); border-color: var(--accent); }
.picker-add {
  display: block; width: calc(100% - 8px); margin: 2px 4px 4px;
  border: 1px dashed var(--line); background: var(--white); border-radius: 5px;
  padding: 6px 8px; text-align: left; color: var(--accent); font-weight: 600;
}
.picker-add:hover { background: var(--accent-soft); }

/* ── Badge (e.g. changes waiting on the Google sync button) ── */
a.tool { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}

/* ── Google sync page (/sync.html) ─────────────────────── */
body.sync-page { overflow: auto; background: var(--bg); display: block; }
.sync-page .topbar { position: sticky; top: 0; z-index: 10; justify-content: space-between; }
.sync-page .brand { color: #fff; text-decoration: none; }
.topbar-link { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-weight: 500; }
.topbar-link:hover, .topbar-link:focus-visible { color: #fff; text-decoration: underline; }
.sync-main { max-width: 900px; margin: 0 auto; padding: 24px 16px 120px; }
.sync-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sync-head h1 { margin: 0 0 6px; font-size: 22px; }
.sync-intro { margin: 0; color: var(--muted); line-height: 1.5; max-width: 620px; }
.sync-head .btn { flex-shrink: 0; }
.sync-head .btn:disabled { opacity: 0.5; cursor: progress; }
.sync-facts {
  display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px;
  margin: 18px 0; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 10px;
}
.sync-facts dt { color: var(--muted); }
.sync-facts dd { margin: 0; }
.sync-msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: var(--accent-soft); color: #1e40af; }
.sync-msg.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.sync-msg.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.sync-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
fieldset.sync-card { min-width: 0; }
.sync-ok { color: var(--ok); font-weight: 600; }
.sync-section-head { display: flex; align-items: center; }
.select-all { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.select-all input, .change-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.sync-section-title { font-weight: 700; font-size: 15px; }
.count-pill { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; text-align: center; }
.muted-pill { background: var(--bg); color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 12px; margin: 4px 0 10px 27px; line-height: 1.45; }
.sync-info .small { margin-left: 0; }
.change-list, .info-list { list-style: none; margin: 0; padding: 0; }
.change-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px; border-top: 1px solid var(--line-soft);
}
.change-row:hover { background: #fafbfc; }
.change-text { flex: 1; min-width: 0; cursor: pointer; line-height: 1.4; }
.from { text-decoration: line-through; color: var(--faint); }
.to { font-weight: 600; }
.add-as { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.add-as select { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: var(--white); color: var(--ink); }
.link-btn { border: 0; background: none; padding: 2px 4px; color: var(--accent); font-weight: 600; font-size: 12px; cursor: pointer; }
.link-btn:hover, .link-btn:focus-visible { text-decoration: underline; }
.hide-btn { color: var(--faint); }
.info-list li { padding: 4px 0; border-top: 1px solid var(--line-soft); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.apply-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 12px max(16px, calc((100vw - 900px) / 2 + 16px));
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
}
.apply-bar #selected-count { color: var(--muted); }
.apply-bar .btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 640px) {
  .sync-head { flex-direction: column; }
  .change-row { flex-wrap: wrap; }
  .add-as { margin-left: 27px; }
}
.sync-page .toast { bottom: 84px; }

/* ── Google account marks next to Status (✓ active, ⚠ needs review) ── */
.gmark { display: inline-flex; vertical-align: -3px; margin-left: 6px; width: 15px; height: 15px; }
.gmark svg { width: 15px; height: 15px; }
.gmark-ok svg { fill: #16a34a; }
.gmark-warn svg { fill: #d97706; }
.modal .small { margin: 0; }

/* ── View tools: Hide fields · Filter · Group · Sort · Color · Row height · Share ── */
.tool-group { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tool-btn .tool-icon, .tool-btn.icon-only { display: inline-flex; align-items: center; }
.tool-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.tool-btn.on { color: #1f2937; }
.tint-blue { background: #dbeafe; }
.tint-green { background: #dcfce7; }
.tint-purple { background: #ede9fe; }
.tint-orange { background: #ffedd5; }
.tint-pink { background: #fce7f3; }
.tool-btn.on:hover { filter: brightness(0.96); }
.search { width: 200px; }

.tool-pop {
  position: fixed; z-index: 150; min-width: 300px; max-width: min(720px, calc(100vw - 24px)); overflow-y: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16); padding: 12px;
}
.pop-filter, .pop-color { width: 660px; }
.pop-sort, .pop-group { width: 470px; }
.pop-hide { width: 380px; }
.pop-share { width: 440px; }
.tool-body { border: 0; padding: 0; margin: 0; min-width: 0; }
.tool-body[disabled] { opacity: 0.6; }
.tool-locked { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; background: #fef3c7; color: #92400e; font-size: 13px; }
.tool-title { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.small-note { font-size: 12.5px; margin: 0 0 10px; line-height: 1.45; }
.tool-actions { display: flex; gap: 16px; margin-top: 10px; }
.tool-foot { display: flex; gap: 8px; margin-top: 12px; }
.tool-foot.two button { flex: 1; border: 0; background: var(--bg); border-radius: 6px; padding: 7px; font-weight: 500; color: var(--muted); }
.tool-foot.two button:hover { background: #eceef1; color: var(--ink); }
.link-btn.muted { color: var(--muted); }
.tool-pop select, .tool-pop input[type="text"], .tool-pop input[type="number"], .tool-pop input[type="date"], .tool-pop input[type="search"], .tool-pop input[readonly] {
  font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--white); min-width: 0;
}
.tool-pop select:focus, .tool-pop input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Hide fields */
.tool-find input { width: 100%; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 6px 2px !important; box-shadow: none !important; }
.field-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 420px; overflow-y: auto; }
.field-row { display: flex; align-items: center; border-radius: 6px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.field-row:hover { background: var(--bg); }
.field-row.dragging { opacity: 0.4; }
.field-row.drop-before { border-top-color: var(--accent); }
.field-row.drop-after { border-bottom-color: var(--accent); }
.switch-row { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 6px; cursor: pointer; min-width: 0; }
.field-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drag-handle { color: var(--faint); cursor: grab; display: inline-flex; padding: 4px; }
.switch {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 26px; height: 15px; border-radius: 8px; background: #d1d5db; position: relative; cursor: pointer; transition: background 0.15s; margin: 0;
}
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(11px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Filter conditions */
.fc-list { display: flex; flex-direction: column; gap: 8px; }
.fc-row { display: flex; align-items: flex-start; gap: 8px; }
.fc-conj { width: 62px; flex-shrink: 0; padding-top: 6px; font-size: 13px; color: var(--muted); }
.fc-conj select { padding: 5px 4px !important; width: 62px; margin-top: -6px; }
.fc-where { display: inline-block; }
.fc-cond { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.4fr); border: 1px solid var(--line); border-radius: 6px; overflow: visible; }
.fc-cond > select, .fc-cond > .fc-value { border: 0 !important; border-radius: 0 !important; border-right: 1px solid var(--line) !important; }
.fc-cond > .fc-value { border-right: 0 !important; display: flex; gap: 4px; align-items: center; padding: 0 2px; min-height: 32px; }
.fc-value > input, .fc-value > select { flex: 1; border: 0 !important; box-shadow: none !important; }
.fc-value .fc-days { max-width: 70px; flex: 0 0 70px; border-left: 1px solid var(--line) !important; border-radius: 0 !important; }
.fc-group { flex: 1; background: #f8f9fb; border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fc-group .fc-list { width: 100%; }
.fc-empty { margin: 0; color: var(--faint); font-size: 12.5px; }
.fc-del { border: 0; background: transparent; color: var(--faint); width: 28px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fc-del:hover { background: var(--bg); color: var(--danger); }
.fc-multi { position: relative; flex: 1; min-width: 0; }
.fc-multi summary { list-style: none; cursor: pointer; padding: 6px 8px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-multi summary::-webkit-details-marker { display: none; }
.fc-multi summary::after { content: ' ▾'; color: var(--faint); }
.fc-multi-list {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px; max-height: 240px; overflow-y: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); padding: 6px;
}
.fc-multi-find { width: 100%; margin-bottom: 4px; }
.fc-option { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 5px; font-size: 13px; cursor: pointer; }
.fc-option:hover { background: var(--bg); }
.fc-option[hidden] { display: none; }

/* Sort and group */
.lv-list { display: flex; flex-direction: column; gap: 8px; }
.lv-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 150px 28px; gap: 8px; align-items: center; }
.lv-n { font-size: 13px; color: var(--muted); }
.lv-add { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--accent); font-weight: 500; font-size: 13px; }
.lv-add select { color: var(--ink); }

/* Color */
.big-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; border: 0; background: transparent; padding: 12px; border-radius: 8px; text-align: left; }
.big-choice + .big-choice { border-top: 1px solid var(--line-soft); border-radius: 0 0 8px 8px; }
.big-choice:hover { background: var(--bg); }
.big-choice-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.pop-color:has(.big-choice) { width: 380px; padding: 6px; }
.color-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.color-legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.color-rule { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.color-rule .fc-list { width: 100%; }
.color-rule-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch-btn { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); padding: 0; }
.swatch-btn.on { box-shadow: 0 0 0 2px var(--ink); }

/* Row height */
.height-list { display: flex; flex-direction: column; gap: 2px; }
.pop-height { width: 220px; }
.height-choice { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 7px 8px; border-radius: 6px; text-align: left; }
.height-choice:hover { background: var(--bg); }
.height-choice.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.height-bars { width: 18px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: 0.6; }
.h-short { height: 6px; } .h-medium { height: 10px; } .h-tall { height: 14px; } .h-xtall { height: 18px; }

/* Share */
.share-row { display: flex; gap: 8px; }
.share-row input { flex: 1; color: var(--muted); }

/* Rows taller than "short": text wraps */
table.grid[data-row-height="medium"] td.cell { height: 56px; }
table.grid[data-row-height="tall"] td.cell { height: 88px; }
table.grid[data-row-height="xtall"] td.cell { height: 128px; }
table.grid:not([data-row-height="short"]) td.cell { vertical-align: top; padding-top: 7px; }
table.grid:not([data-row-height="short"]) td.cell .cv { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-word; }
table.grid[data-row-height="medium"] .cv { -webkit-line-clamp: 2; }
table.grid[data-row-height="tall"] .cv { -webkit-line-clamp: 4; }
table.grid[data-row-height="xtall"] .cv { -webkit-line-clamp: 6; }

/* Group headings in the table */
tr.group-row td { background: #f3f4f6; border-bottom: 1px solid var(--line); padding: 0; position: sticky; left: 0; }
tr.group-row.lvl-1 td { background: #f8f9fa; }
tr.group-row.lvl-2 td { background: #fbfbfc; }
.group-head { display: flex; align-items: center; gap: 10px; height: 38px; position: sticky; left: 0; width: max-content; }
.group-toggle { border: 0; background: transparent; width: 22px; height: 22px; border-radius: 4px; color: var(--muted); }
.group-toggle:hover { background: rgba(0, 0, 0, 0.06); }
.group-field { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.group-value { font-weight: 600; }
.group-empty { color: var(--faint); font-weight: 500; }
.group-count { font-size: 12px; color: var(--muted); background: #e5e7eb; border-radius: 10px; padding: 1px 8px; }
.tool-label { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.toolbar .search { width: 170px; }
.toolbar { gap: 8px; }
table.grid:not([data-row-height="short"]) td.rownum { vertical-align: top; padding-top: 9px; }
.toast.show { pointer-events: auto; display: flex; align-items: center; gap: 18px; }
.toast-action { border: 0; background: none; color: #93c5fd; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 4px; cursor: pointer; }
.toast-action:hover { text-decoration: underline; }

/* ── View kinds (viewtypes.js) ───────────────────────────── */
.kind-icon { display: inline-flex; }
.create-menu { width: 230px; }
.create-menu .vm-item { padding: 9px 10px; }
.modal-warn { margin: 0; padding: 8px 10px; border-radius: 6px; background: #fef3c7; color: #92400e; font-size: 13px; }
.kind-area { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.kind-scroll { flex: 1; min-height: 0; overflow: auto; }
.kind-empty { padding: 30px; max-width: 460px; }
.kind-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--white); flex-wrap: wrap; }
.kind-heading { font-size: 16px; margin: 0 8px; }
.icon-btn { border: 1px solid var(--line); background: var(--white); width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ink); }
.icon-btn:hover { background: var(--bg); }
.kind-add { border: 0; background: transparent; color: var(--muted); border-radius: 6px; padding: 6px 10px; text-align: left; font-weight: 500; }
.kind-add:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
.dragging { opacity: 0.4; }
.drop-on { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft) !important; }

/* Cards (gallery and kanban) */
.card { background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); overflow: hidden; cursor: pointer; text-align: left; display: flex; flex-direction: column; }
.card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-cover { height: 150px; background: #eef0f3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-initials { font-size: 36px; font-weight: 700; color: #9ca3af; }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card-title { font-weight: 700; font-size: 14px; }
.card-field { min-width: 0; }
.card-label { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.card-value { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }
.card-value .chip { margin: 0 2px 0 0; }
.gallery-wrap { padding: 18px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card-new { align-items: center; justify-content: center; min-height: 120px; border-style: dashed; color: var(--muted); font-weight: 600; box-shadow: none; }

.kanban { display: flex; gap: 12px; padding: 14px; align-items: flex-start; }
.stack { width: 270px; flex-shrink: 0; background: #eceef1; border-radius: 10px; display: flex; flex-direction: column; max-height: 100%; }
.stack-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 6px; font-weight: 600; }
.stack-count { color: var(--muted); font-size: 12px; font-weight: 500; }
.stack-cards { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 8px; overflow-y: auto; min-height: 60px; border-radius: 8px; }
.kcard .card-cover { height: 110px; }

/* Calendar */
.cal { display: flex; flex-direction: column; background: var(--white); }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); font-weight: 600; }
.cal-week div { padding: 6px 8px; }
.cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 4px; min-width: 0; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-day.other { background: #fafafb; color: var(--faint); }
.cal-date { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 2px 4px; }
.cal-day.today .cal-date span { background: var(--danger); color: #fff; border-radius: 10px; padding: 1px 7px; font-weight: 700; }
.cal-add { border: 0; background: transparent; color: var(--muted); border-radius: 4px; width: 20px; height: 20px; opacity: 0; }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-add:hover { background: var(--bg); }
.cal-items { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.cal-event { font-size: 12px; padding: 2px 6px; border-left: 3px solid; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: var(--ink); }
.cal-event:not(.start) { border-left-style: dotted; }

/* Timeline and Gantt */
.tl { background: var(--white); }
.tl-inner { display: flex; min-width: max-content; }
.tl-left { position: sticky; left: 0; z-index: 3; background: var(--white); border-right: 1px solid var(--line); width: 220px; flex-shrink: 0; }
.tl-left.gantt { width: 380px; }
.tl-head-left, .tl-head { height: 54px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--white); z-index: 2; }
.tl-head-left { display: flex; align-items: flex-end; gap: 0; padding: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); z-index: 4; }
.tl-right { position: relative; flex-shrink: 0; }
.tl-months { position: relative; height: 26px; }
.tl-month { position: absolute; top: 6px; font-size: 12px; font-weight: 700; padding-left: 6px; border-left: 1px solid var(--line); white-space: nowrap; }
.tl-ticks { position: relative; height: 28px; }
.tl-tick { position: absolute; top: 0; bottom: 0; font-size: 11px; color: var(--muted); text-align: center; line-height: 28px; border-left: 1px solid var(--line-soft); }
.tl-tick.weekend { background: #fafafb; }
.tl-body { position: relative; }
.tl-row { height: 38px; border-bottom: 1px solid var(--line-soft); position: relative; display: flex; align-items: center; }
.tl-grouprow { background: #f3f4f6; }
.tl-grouprow .group-head { height: 38px; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); z-index: 1; }
.tl-bar { position: absolute; top: 6px; height: 26px; border: 1px solid; border-radius: 6px; display: flex; align-items: center; cursor: pointer; z-index: 2; min-width: 6px; }
.tl-bar.movable { cursor: grab; }
.tl-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-bar-label { padding: 0 8px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: visible; }
.tl-resize { position: absolute; right: -1px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.gantt-left { cursor: pointer; padding: 0; }
.gantt-left:hover { background: var(--bg); }
.gantt-name { width: 150px; padding: 0 10px; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.gantt-cell { width: 76px; padding: 0 6px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.tl-head-left .gantt-name { font-weight: 600; }

/* List */
.list { padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; }
.list-group { margin-top: 6px; }
.list-row { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; cursor: pointer; min-width: 0; }
.list-row:hover { border-color: #cbd5e1; }
.list-title { font-weight: 600; width: 220px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-fields { display: flex; gap: 18px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; }
.list-field { display: inline-flex; align-items: center; gap: 6px; }
.list-label { color: var(--faint); font-size: 11px; }
.list-add { margin-top: 6px; }

/* Form */
.form-wrap { padding: 28px 16px 60px; }
.form-card { max-width: 640px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 0 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.form-cover { margin: 0 -32px; height: 90px; background: linear-gradient(120deg, #2f2e2e, #4b5563); border-radius: 12px 12px 0 0; display: flex; align-items: flex-end; padding: 0 32px; }
.form-cover img { background: #fff; border-radius: 10px; padding: 4px; transform: translateY(22px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.form-title { margin: 24px 0 0; font-size: 26px; }
.form-desc { margin: -8px 0 0; color: var(--muted); white-space: pre-wrap; line-height: 1.5; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-weight: 600; }
.form-field input:not([type="checkbox"]), .form-field select, .form-field textarea { font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; width: 100%; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-checks { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.form-submit { align-self: flex-start; padding: 9px 22px; font-size: 15px; }
.form-error { color: var(--danger); margin: 0; }
.form-error:empty { display: none; }
.form-note { margin: 0; }
.form-done { align-items: center; text-align: center; padding: 48px 32px; font-size: 16px; }
.form-check { width: 54px; height: 54px; border-radius: 50%; background: #dcfce7; color: var(--ok); font-size: 28px; display: flex; align-items: center; justify-content: center; }
body.form-only > :not(#form-only):not(#toast):not(script) { display: none !important; }
.form-only-page { display: none; }
body.form-only .form-only-page { display: block; min-height: 100vh; background: var(--bg); }
.req { color: var(--danger); }

/* View settings (toolbar) */
.opt-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.opt-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.opt-row .opt-label { margin: 0; }
.opt-row textarea { font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; resize: vertical; }
.opt-checks { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; margin-bottom: 8px; }
.pop-settings { width: 360px; }

/* Expanded record */
.record { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; }
.record[hidden] { display: none; }
.rec-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.45); }
.rec-window { position: relative; width: min(760px, 100%); max-height: calc(100vh - 96px); background: var(--white); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; }
.rec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.rec-kicker { font-size: 12px; color: var(--muted); }
.rec-title { margin: 2px 0 0; font-size: 20px; }
.rec-actions { display: flex; gap: 6px; }
.rec-body { overflow-y: auto; padding: 16px 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.rec-field { display: flex; flex-direction: column; gap: 6px; }
.rec-label { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.rec-value input:not([type="checkbox"]), .rec-value select, .rec-value textarea { font: inherit; width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.rec-value input:focus, .rec-value select:focus, .rec-value textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rec-value.readonly { padding: 6px 0; min-height: 20px; }
.rec-links { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 0; }
.rec-hidden summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; margin-bottom: 12px; }
.rec-hidden[open] { display: flex; flex-direction: column; gap: 16px; }
.rec-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--line); }
.rec-foot .form-error { margin-right: auto; }
.picker { z-index: 160; }
.stack-cards > * { flex-shrink: 0; }
.tl-left.gantt { width: auto; }
.gantt-cell { width: 96px; }
.gantt-name { width: 170px; }
.tl-none { color: var(--faint); font-size: 12px; padding-left: 12px; }
.tl-empty { padding: 30px; color: var(--muted); position: sticky; left: 0; width: max-content; }
.tl-bar.narrow .tl-bar-label { position: absolute; left: calc(100% + 4px); padding: 0 4px; background: rgba(255, 255, 255, 0.85); border-radius: 4px; }
.tl-left:not(.gantt) { width: 200px; }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-solid:hover { background: #b91c1c; }
.modal-text { margin: 0; line-height: 1.5; color: var(--ink); }

/* ── Sign-in and access (access.js) ───────────────────── */
.account { margin-left: auto; display: flex; align-items: center; position: relative; padding-right: 4px; }
.acct-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 3px 10px 3px 3px; color: #fff; }
.acct-btn:hover { background: rgba(255, 255, 255, 0.16); }
.acct-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #4b5563; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.acct-role { font-size: 12px; font-weight: 600; opacity: 0.85; }
.acct-role.is-admin { color: #fde68a; opacity: 1; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 160; width: 280px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18); padding: 8px; }
.acct-menu form { margin: 0; }
.acct-who { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.acct-who span { font-size: 13px; color: var(--muted); }
.open-pill { font-size: 12px; font-weight: 600; color: #92400e; background: #fef3c7; border-radius: 20px; padding: 4px 10px; cursor: help; }
.admin-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; max-height: 240px; overflow-y: auto; }
.admin-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.admin-row:last-child { border-bottom: 0; }
.admin-add { display: flex; gap: 8px; }
.admin-add input { flex: 1; font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; }
body.read-only .kind-add, body.read-only .cal-add, body.read-only .card-new { display: none !important; }
#panel input:disabled, #panel select:disabled, #panel textarea:disabled { background: var(--bg); color: var(--ink); cursor: default; opacity: 1; }

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); padding: 40px 44px; width: min(400px, calc(100vw - 32px)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.login-card h1 { margin: 8px 0 0; font-size: 22px; }
.login-card p { margin: 0 0 8px; }
.google-btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #dadce0; border-radius: 6px; padding: 10px 18px; color: #3c4043; font-weight: 600; text-decoration: none; background: #fff; margin-top: 6px; }
.google-btn:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.login-msg { background: #fef2f2; color: #b91c1c; border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.login-msg.ok { background: #f0fdf4; color: var(--ok); }

/* Email Address column: main email + "+1" badge for the Secondary Work Email */
.email-with-more { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; vertical-align: middle; }
.email-with-more .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.more-badge {
  flex-shrink: 0; border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 10px; cursor: pointer;
}
.more-badge:hover, .more-badge[aria-expanded="true"] { background: var(--accent-soft); border-color: #bfd0f8; color: var(--accent); }
.more-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.email-card {
  position: fixed; z-index: 170; min-width: 260px; max-width: calc(100vw - 16px);
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); padding: 6px;
}
.email-card ul { list-style: none; margin: 0; padding: 0; }
.email-card-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; }
.email-card-row:hover { background: var(--bg); }
.email-card-row .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.email-card-copy { border: 1px solid var(--line); background: var(--white); border-radius: 5px; padding: 3px 8px; font-size: 12px; color: var(--muted); cursor: pointer; }
.email-card-copy:hover { color: var(--ink); border-color: #cbd5e1; }

/* ── Onboarding / Offboarding Queue layout (js/queues.js) ─────────── */
.tab-badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #4b5563; color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.tab.active .tab-badge { background: var(--brand); }
.tab-badge.urgent, .tab.active .tab-badge.urgent { background: var(--danger); }
.content[data-shows="queue"] { overflow: auto; background: var(--bg); }
.queue-area { min-height: 100%; }
.queue { max-width: 1320px; margin: 0 auto; padding: 18px 20px 40px; display: flex; flex-direction: column; gap: 16px; }
.q-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.q-title { margin: 0; font-size: 22px; }
.q-intro { margin: 4px 0 0; color: var(--muted); }
.q-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.q-filter-label { color: var(--muted); margin-right: 2px; }
.q-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-weight: 600; }
.q-chip:hover { border-color: #9ca3af; }
.q-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.q-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; flex: none; }
.q-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.q-stat { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: inset 3px 0 0 var(--c, transparent); }
.q-stat-label { color: #4b5563; font-weight: 600; }
.q-stat-value { font-size: 28px; font-weight: 700; color: var(--c, var(--ink)); line-height: 1.2; }
.q-stat-note { color: #4b5563; font-size: 12px; }
.q-table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.q-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.q-table th { text-align: left; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #4b5563; font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fafafa; }
.q-table td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.q-table tbody tr:last-child td { border-bottom: 0; }
.q-row { cursor: pointer; }
.q-row:hover { background: #f8fafc; }
.q-nowrap { white-space: nowrap; }
.q-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.q-person-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.q-avatar { flex: none; width: 34px; height: 34px; border-radius: 999px; background: #e5e7eb; color: #374151; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.q-name { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.q-name:hover { text-decoration: underline; }
.q-sub { color: #4b5563; font-size: 12px; }
.q-tag { display: inline-block; padding: 0 5px; border: 1px solid #9ca3af; border-radius: 4px; font-size: 11px; color: #374151; line-height: 16px; vertical-align: 1px; }
.q-tag.reason { border: 0; background: #f3f4f6; padding: 2px 8px; font-weight: 600; }
.q-tag.scope { border-color: #fcd34d; background: #fef3c7; color: #78350f; }
.q-date { display: block; }
.q-when { display: block; font-size: 12px; color: #4b5563; }
.q-when.late { color: #b91c1c; font-weight: 700; }
.q-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.q-step { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; background: none; white-space: nowrap; }
button.q-step { cursor: pointer; }
button.q-step:disabled { opacity: 0.55; cursor: progress; }
.q-step.done { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.q-step.todo { background: #fff; border-style: dashed; }
.q-step.todo.team-hr { color: #9a3412; border-color: #ea580c; }
.q-step.todo.team-it { color: #1e40af; border-color: #2563eb; }
.q-step.todo.team-ops { color: #166534; border-color: #16a34a; }
.q-step.todo.danger { background: #b91c1c; color: #fff; border: 1px solid #b91c1c; }
button.q-step:hover { filter: brightness(0.96); box-shadow: 0 0 0 1px currentColor; }
.q-count { font-size: 12px; color: #4b5563; font-variant-numeric: tabular-nums; margin-left: 4px; }
.q-wait { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-right: 10px; }
.q-wait.done { color: var(--ok); }
.q-empty { background: var(--white); border: 1px dashed var(--line); border-radius: 10px; padding: 28px; text-align: center; color: #4b5563; }
.q-empty.small { padding: 14px; }
.q-warn { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 6px; background: #fef3c7; color: #78350f; font-size: 12px; font-weight: 600; }
.q-section { display: flex; flex-direction: column; gap: 8px; }
.q-section-title { margin: 6px 0 0; font-size: 15px; }
.q-section-note { font-weight: 400; color: #4b5563; }
.q-card { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr) minmax(260px, 2fr) auto; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; cursor: pointer; }
.q-card:hover { border-color: #9ca3af; }
.q-alert { background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.q-alert-title { margin: 0; color: #991b1b; font-size: 15px; }
.btn.danger-solid { background: #b91c1c; border-color: #b91c1c; color: #fff; font-weight: 600; }
.btn.danger-solid:hover { background: #991b1b; }
@media (max-width: 900px) { .q-card { grid-template-columns: 1fr; } }

/* The checklist window */
.queue-modal { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 14px; background: var(--bg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.queue-modal::backdrop { background: rgba(17, 24, 39, 0.45); }
.qm { max-height: calc(100vh - 32px); overflow-y: auto; padding: 0 20px 20px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; }
.qm-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 10px; background: var(--bg); }
.qm-kind { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4b5563; }
.qm-top-actions { display: flex; align-items: center; gap: 8px; }
.qm-close { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); font-size: 15px; cursor: pointer; }
.qm-close:hover { background: #f3f4f6; }
.qm-header { display: grid; grid-template-columns: auto minmax(200px, 1.2fr) minmax(300px, 2fr) auto; align-items: center; gap: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.qm-avatar { width: 56px; height: 56px; border-radius: 999px; background: #1f2328; color: #fff; font-size: 19px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.qm-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qm-name { margin: 0; font-size: 22px; }
.qm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; }
.qm-fact { display: flex; flex-direction: column; min-width: 0; }
.qm-fact-label { font-size: 11px; color: #4b5563; }
.qm-fact-value { overflow-wrap: anywhere; }
.qm-total { display: flex; flex-direction: column; align-items: center; }
.qm-total-num { font-size: 30px; font-weight: 700; }
.qm-total-num span { font-size: 18px; color: #6b7280; font-weight: 600; }
.qm-total-label { font-size: 12px; color: #4b5563; }
.qm-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: #1e3a8a; }
.qm-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.qm-team { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.qm-team-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; }
.qm-team-head h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.qm-team-count { font-variant-numeric: tabular-nums; color: #4b5563; }
.qm-bar { height: 4px; background: #eef0f3; }
.qm-bar span { display: block; height: 100%; background: var(--c); }
.qm-steps { list-style: none; margin: 0; padding: 6px 0; }
.qm-step { padding: 0 8px; }
.qm-check { display: flex; align-items: flex-start; gap: 12px; padding: 9px 8px; border-radius: 8px; cursor: pointer; position: relative; }
.qm-check:hover { background: #f8fafc; }
.qm-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qm-box { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid #6b7280; border-radius: 5px; background: #fff; display: flex; align-items: center; justify-content: center; }
.qm-check input:checked + .qm-box { background: #14532d; border-color: #14532d; }
.qm-check input:checked + .qm-box::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.qm-check input:focus-visible + .qm-box { outline: 3px solid var(--accent); outline-offset: 2px; }
.qm-check input:disabled + .qm-box { opacity: 0.6; }
.qm-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qm-step-label { font-size: 14px; font-weight: 600; }
.qm-step-meta { font-size: 12px; color: #4b5563; }
.qm-step-done { font-size: 12px; color: #065f46; }
.qm-step.not-applicable .qm-step-label { color: #6b7280; }
.qm-notes { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.qm-notes h3 { margin: 0; font-size: 15px; }
.qm-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qm-note { background: #f3f4f6; border-radius: 8px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; }
.qm-note-head { font-size: 12px; color: #4b5563; }
.qm-note-head strong { color: var(--ink); }
.qm-note-text { white-space: pre-wrap; }
.qm-add-note { display: flex; flex-direction: column; gap: 6px; }
.qm-add-note label { font-weight: 600; }
.qm-add-note textarea { font: inherit; padding: 8px 10px; border: 1px solid #9ca3af; border-radius: 8px; resize: vertical; }
.qm-add-note textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.qm-add-note .btn { align-self: flex-end; }
@media (max-width: 900px) { .qm-header { grid-template-columns: auto 1fr; } .qm-facts, .qm-total { grid-column: 1 / -1; } .qm-total { align-items: flex-start; } }
.q-progress .q-steps { flex-wrap: nowrap; }
.q-progress { min-width: 440px; }
.q-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.q-from { color: #4b5563; }
.q-arrow { color: #6b7280; }
.q-tbc { color: #1e40af; font-weight: 600; }
.q-empty.big { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 24px; font-size: 14px; }
.q-empty.big strong { font-size: 17px; color: var(--ink); }
.empty-row td { padding: 28px 16px; text-align: center; color: #4b5563; background: var(--white); }

/* New people with no Google account yet (tables.js missingGoogle) */
.gflag { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; padding: 0 7px; border-radius: 999px; background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; font-size: 11px; font-weight: 700; line-height: 17px; vertical-align: 1px; white-space: nowrap; }
.gflag svg { width: 11px; height: 11px; }
.view-count.alert { background: var(--danger); color: #fff; border-radius: 999px; padding: 0 7px; font-weight: 700; }
tr.no-google > td { background: #fffbeb; }

/* Checklist window: grows in from slightly smaller, and shrinks away when closed */
@keyframes qm-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes qm-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes qm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes qm-fade-out { from { opacity: 1; } to { opacity: 0; } }
.queue-modal[open] { animation: qm-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.queue-modal[open]::backdrop { animation: qm-fade-in 0.22s ease-out; }
.queue-modal.closing { animation: qm-out 0.16s ease-in forwards; }
.queue-modal.closing::backdrop { animation: qm-fade-out 0.16s ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  .queue-modal[open], .queue-modal[open]::backdrop, .queue-modal.closing, .queue-modal.closing::backdrop { animation: none; }
}

/* Record panel: Deactivate is the main action; Delete is tucked away for Past Employees only */
.panel-status { margin-right: auto; align-self: center; color: var(--muted); font-size: 12px; }
.danger-zone { margin: 22px 0 6px; border: 1px solid #fecaca; border-radius: 8px; background: #fffafa; }
.danger-zone summary { cursor: pointer; padding: 9px 12px; font-size: 12px; font-weight: 600; color: #991b1b; list-style-position: inside; }
.danger-zone p { margin: 0 12px 10px; color: #4b5563; font-size: 12px; line-height: 1.5; }
.danger-zone .btn { margin: 0 12px 12px; }
.modal-text { margin: 0; line-height: 1.5; }
.modal-note { margin: 0; padding: 8px 10px; border-radius: 6px; background: #fffbeb; color: #78350f; font-size: 13px; line-height: 1.45; }
.modal-list { margin: 0; padding-left: 18px; color: #374151; line-height: 1.5; }
.modal-check { display: flex; align-items: center; gap: 8px; }
.modal .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* "Remove from Master Directory": the last step, an action button */
.q-step.final.todo { border-style: solid; }
.q-step.final.waiting { opacity: 0.6; border-style: dashed; }
.qm-step.final { padding: 4px 8px 8px; }
.qm-final { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed #93c5fd; border-radius: 8px; background: #f8fbff; }
.qm-final .qm-step-text { flex: 1; }
.qm-final-wait { font-size: 12px; color: #78350f; font-weight: 600; }

/* ── Top bar links: Home · Directory · Admin · Sign out (topnav.js) ── */
.top-links { display: flex; align-items: center; gap: 20px; margin-right: 16px; }
.top-links .topbar-link { font-size: 14px; white-space: nowrap; }
.topbar-link.on { color: #fff; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.top-signout { margin: 0; display: flex; }
button.topbar-link { border: 0; background: none; padding: 0; cursor: pointer; }
.acct-btn[data-acct-menu] { padding: 3px; }
@media (max-width: 900px) { .top-links { gap: 14px; margin-right: 10px; } .top-links .topbar-link { font-size: 13px; } }
.admin-page .sync-main { max-width: none; padding: 20px 0 120px; }
.sync-head h2 { margin: 0 0 6px; font-size: 18px; }

/* ── Change history (history.js) ── */
.history-box { border: 1px solid var(--line); border-radius: 8px; background: var(--white); margin-top: 14px; }
.history-box > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; font-size: 13px; color: var(--ink); list-style-position: inside; }
.history-box > summary:hover { background: var(--bg); border-radius: 8px; }
.history-body { padding: 2px 12px 10px; }
.history-body .link-btn { margin-top: 6px; }
.hlist { list-style: none; margin: 0; padding: 0; }
.hentry { padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; line-height: 1.45; }
.hentry:first-child { border-top: 0; }
.hhead { color: var(--ink); }
.hmeta { color: var(--muted); font-size: 12px; margin-left: 4px; white-space: nowrap; }
.hentry.deleted .hhead { color: #991b1b; }
.hchanges { list-style: none; margin: 4px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.hf { color: var(--muted); margin-right: 4px; }
.hf::after { content: ':'; }
.hv { color: var(--ink); overflow-wrap: anywhere; }
.hv.empty { color: var(--faint); font-style: italic; }
.hv.add { color: #166534; margin-right: 6px; }
.hv.del { color: #991b1b; margin-right: 6px; text-decoration: line-through; }
.harrow { color: var(--muted); margin: 0 3px; }
.hrec { font-weight: 600; color: var(--accent); text-decoration: none; }
a.hrec:hover { text-decoration: underline; }
.htype { font-size: 11px; font-weight: 600; color: #4b5563; background: #eef0f3; border-radius: 9px; padding: 1px 7px; margin-left: 2px; }
.hnone { margin: 6px 0 0; }
.qm-history { padding: 0; }
.qm-history .history-box { margin-top: 0; }

/* ── Add to directory / Apply change windows ── */
.modal-form.wide { width: auto; }
#modal:has(.modal-form.wide) { width: min(560px, calc(100vw - 32px)); }
.am-list { margin: 0; border: 1px solid var(--line); border-radius: 8px; }
.am-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line-soft); }
.am-row:first-child { border-top: 0; }
.am-row dt { color: var(--muted); }
.am-row dd { margin: 0; font-weight: 500; }
.am-change s { color: var(--muted); }
.am-missing { color: #9a3412; font-style: italic; font-weight: 400; }
.am-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.am-new { display: flex; flex-direction: column; gap: 8px; }
.am-new[hidden] { display: none !important; }

/* ── Devices to collect (offboarding window) ── */
.qm-devices { margin: 0; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.qm-devices h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.qm-device-list { list-style: none; margin: 0; padding: 0; }
.qm-device { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.qm-device:first-child { border-top: 0; }
.qm-device-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.qm-device-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.qm-devices .muted { margin: 0; }
.panel-emails { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.panel-emails .email { color: var(--accent); text-decoration: none; }
.panel-emails .email:hover { text-decoration: underline; }

/* ── When something breaks (errors.js) ── */
.page-error-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; background: #fff; color: #1f2937; border: 1px solid #fecaca; border-left: 4px solid #b91c1c; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); font: 14px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; max-width: 960px; margin: 0 auto; }
.page-error-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #b91c1c; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.page-error-text { flex: 1 1 320px; }
.page-error-btn { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid #9ca3af; background: #fff; color: #1f2937; border-radius: 8px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.page-error-btn.primary { background: #1f2328; border-color: #1f2328; color: #fff; }
.page-error-close { border: 0; background: none; font-size: 20px; line-height: 1; color: #6b7280; padding: 2px 6px; cursor: pointer; border-radius: 6px; }
.page-error-close:hover { background: #f3f4f6; }
.page-error-box { margin: 24px auto; max-width: 560px; padding: 18px 20px; background: #fff; border: 1px solid #fecaca; border-left: 4px solid #b91c1c; border-radius: 10px; color: #1f2937; font-size: 14px; line-height: 1.5; }
.page-error-box p { margin: 6px 0 12px; color: #4b5563; }
.page-error-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-error-box details { margin-top: 12px; }
.page-error-box summary { cursor: pointer; color: #6b7280; font-size: 13px; }
.page-error-box pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px; margin: 6px 0 0; }