/* One slate scale, named by the job each step does rather than by its colour, so the dark
   theme can invert the scale without touching a single rule below. Brand blues, reds and
   project colours are deliberately NOT in here: they mean the same thing in both themes. */
:root {
  --bg: #f4f5f8;
  --surface: #ffffff;      /* panels, cards, dialogs */
  --surface-2: #f8fafc;    /* hover fills, zebra rows */
  --surface-3: #f1f5f9;    /* pressed and selected fills */
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-2: #334155;
  --text-3: #475569;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --panel: var(--surface);
  --line: var(--border);
  /* The schedule grid needs its own weights. --border is right for panel and card edges but
     disappears when it is the only thing separating one person's row from the next; the
     horizontal rules carry the structure, so they sit a step darker than the day columns. */
  --row-line: #bfc8d8;
  --grid-line: #ced6e2;
  --ink: var(--text);
  --accent: #2563eb;
  --non-working: #eef0f4;
  --hatch: #e3e7ef;
  --this-week-bg: #dfe4ec;
  --timeoff-bg: #e0f2fe;
  --timeoff-bg-full: #dbeafe;
  --timeoff-border: #bae6fd;
  --timeoff-text: #0c4a6e;
  --timeoff-stripe: rgba(255, 255, 255, 0.85);
  --page-gradient: radial-gradient(circle at 0% 0%, #edf5ff 0, var(--bg) 42%, var(--surface-3) 100%);
}

/* Dark. Near-black surfaces with the accent kept bright, so it sits beside a ClickUp
   dashboard rather than glowing next to it. Only the scale is redefined. */
body.theme-dark {
  --bg: #0b0b0c;
  --surface: #161618;
  --surface-2: #1d1d20;
  --surface-3: #26262a;
  --border: #2d2d32;
  --border-strong: #3c3c43;
  --text: #f2f2f3;
  --text-2: #dcdce0;
  --text-3: #c2c2c8;
  --muted: #9a9aa3;
  --muted-2: #7c7c85;
  --row-line: #313138;
  --grid-line: #232327;
  --accent: #6366f1;
  --non-working: #141416;
  --page-gradient: none;
  /* These three MUST be repeated here. A custom property whose value is another var() is
     substituted where it is DECLARED, so `--panel: var(--surface)` on :root stays white no
     matter what the body says — which is exactly how the board kept its white background
     while every other surface went dark. */
  --panel: #161618;
  --line: #2d2d32;
  --ink: #f2f2f3;
  --hatch: #202024;
  --this-week-bg: #2b2b33;
  --timeoff-bg: #15314a;
  --timeoff-bg-full: #173a58;
  --timeoff-border: #27567d;
  --timeoff-text: #cfe6fb;
  --timeoff-stripe: rgba(255, 255, 255, 0.10);
}

/* Set by the inline script in <head> before the first paint, so a dark-theme reload does not
   flash white. main.js removes it as soon as the body carries the real theme class. */
html.pre-dark, html.pre-dark body { background: #0b0b0c; }

/* A real switch rather than three buttons: the choice is binary, and a first visit follows
   the operating system without needing an "Auto" position to say so. */
/* The selection box. Fixed to the viewport so its coordinates are the same ones every
   getBoundingClientRect returns — no scroll maths, and it stays put if the pane scrolls
   under it. pointer-events:none so it never swallows the pointerup that ends the drag. */
.marquee {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 3px;
}
/* While a box is being drawn, nothing on the board should look draggable or selectable. */
body.marquee-active { user-select: none; }
body.marquee-active .alloc { cursor: default; }

.switch-row { cursor: pointer; }
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 36px;
  height: 20px;
  flex: none;
  margin: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.15s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page-gradient), var(--bg);
  height: 100vh;
  overflow: hidden;
}

.app-shell {
  display: grid;
  grid-template-columns: 180px 1fr;
  height: 100vh;
  min-height: 0;
}

.side-nav {
  border-right: 1px solid var(--line);
  background: var(--surface-3);
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.side-nav h1 {
  margin: 0 0 12px;
  font-size: 24px;
}

.nav-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.nav-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-3);
}

.main {
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.toolbar {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 6px;
}

#addPersonBtn {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  padding: 6px 10px;
}

.multi-select { position: relative; }

#tagDropdownBtn {
  border: 1px solid #94a3b8;
  border-radius: 10px;
  background: var(--surface-3);
  color: #25364d;
  cursor: pointer;
  padding: 7px 12px;
  min-width: 110px;
  text-align: left;
}

.multi-select-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 360px;
  max-height: 540px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 28px rgba(15, 23, 42, 0.18);
  padding: 0;
  z-index: 40;
  overflow: hidden;
}

.hidden { display: none; }

.filter-search-wrap {
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

#tagSearchInput {
  width: 100%;
  border: 1px solid #c7d2e3;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
}

.filter-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}

.filter-pill {
  font-size: 13px;
  border: 1px solid #93a6c3;
  background: var(--surface-3);
  border-radius: 999px;
  padding: 4px 10px;
}

#clearFiltersBtn {
  border: 1px solid #c7d2e3;
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  padding: 5px 9px;
}

#tagOptionsList {
  max-height: 410px;
  overflow: auto;
  padding: 6px 0;
}

.multi-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.multi-option:hover { background: var(--surface-3); }
.multi-option input { width: 18px; height: 18px; }
.multi-empty { padding: 12px; color: var(--muted); font-size: 13px; }

.date-controls button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  padding: 6px 10px;
}

.view { display: none; min-height: 0; }
.view.active { display: block; flex: 1; min-height: 0; overflow: auto; }

#scheduleView.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.settings-grid label {
  display: grid;
  gap: 6px;
}

.settings-grid textarea {
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  font-family: inherit;
}

.legend {
  margin-bottom: 8px;
  color: var(--muted);
  display: flex;
  gap: 14px;
}

.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 5px;
}
.swatch.green { background: #0891b2; }
.swatch.orange { background: #f97316; }
.swatch.gray { background: #b1b7c5; }

.schedule-board {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  height: 100%;
  position: relative;
  min-height: 0;
  flex: 1;
}

.sched-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100%;
  min-height: 0;
}

.people-col {
  border-right: 1px solid var(--line);
  display: grid;
  grid-template-rows: 44px 1fr;
  background: var(--surface-2);
  position: relative;
  z-index: 5;
  min-height: 0;
}

.calendar-col {
  display: grid;
  grid-template-rows: 44px 1fr;
  min-width: 0;
  min-height: 0;
}

.sched-person-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  z-index: 6;
}

.people-body {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  height: 100%;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sched-person-row {
  border-bottom: 1px solid var(--line);
}

.calendar-head {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.calendar-body {
  overflow: auto;
  min-height: 0;
  height: 100%;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sched-day-heads {
  display: grid;
  grid-template-columns: repeat(14, 96px);
  width: max-content;
  background: var(--surface-2);
}

.sched-day-heads > div {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.sched-person {
  padding: 10px;
  background: var(--surface-2);
}

.person-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.person-name { font-weight: 600; font-size: 14px; }
.person-meta { color: var(--muted); font-size: 12px; }
.person-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.tag-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-2);
  background: var(--surface-3);
}

.edit-person-btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
}

/* The row height is computed per render; the day grid follows it. Both this and .day-cell
   used to carry a hardcoded 120px floor left over from the fixed-height board, so the
   columns and weekend hatching overflowed the row and stopped lining up with the people
   column. The separator is drawn by .sched-calendar-row — drawing it here too doubled it. */
.sched-days {
  display: grid;
  grid-template-columns: repeat(14, 96px);
  grid-auto-rows: 100%;
  position: relative;
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
  width: max-content;
}

.sched-calendar-row {
  border-bottom: 1px solid var(--line);
}

.day-cell {
  border-right: 1px solid var(--grid-line);
  min-height: 0;
  box-sizing: border-box;
}

.day-cell.non-working {
  background: repeating-linear-gradient(135deg, var(--non-working) 0, var(--non-working) 6px, var(--hatch) 6px, var(--hatch) 12px);
}

.day-cell.overbooked {
  background: linear-gradient(135deg, var(--overbooked, #fff4e8) 0%, var(--surface) 100%);
}

.alloc {
  position: absolute;
  border-radius: 8px;
  color: white;
  font-size: 12px;
  padding: 6px 8px;
  cursor: grab;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  user-select: none;
}

.alloc.dragging { opacity: 0.65; cursor: grabbing; }
.alloc .hours { opacity: 0.95; font-size: 11px; }

.alloc.overtime {
  box-shadow: 0 0 0 2px #f97316 inset, 0 6px 12px rgba(0, 0, 0, 0.2);
}

.resize-handle,
.resize-v-handle {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
}

.resize-handle {
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
}

.resize-v-handle {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  cursor: ns-resize;
}

.hours-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed #f97316;
  pointer-events: none;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.kpi {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px;
}

.kpi .label { color: var(--muted); font-size: 12px; }
.kpi .value { font-size: 28px; font-weight: 700; }

.util-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
}

.util-table th, .util-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  font-size: 13px;
  text-align: left;
}

.report-controls {
  display: flex;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}

.report-controls input,
.report-controls button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.report-controls button { background: var(--surface-3); cursor: pointer; }
.report-controls button:hover { background: var(--border); }
/* A date input draws its own calendar glyph in the UA's colour; on a dark field the black
   one disappears. Inverting it is the only hook the browser gives. */
body.theme-dark .report-controls input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.7);
}

.project-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 220px;
  overflow: auto;
  background: var(--surface);
}

.project-list-item {
  padding: 8px 10px;
  border-bottom: 1px solid #eef2f7;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.project-list-item:last-child { border-bottom: 0; }
.project-list-item:hover { background: var(--surface-3); }
.project-list-item.active { background: var(--surface-3); }

.alloc-actions {
  position: absolute;
  top: 2px;
  right: 10px;
  display: flex;
  gap: 4px;
}

.alloc-actions button {
  border: 0;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  color: var(--text);
  background: rgba(255, 255, 255, 0.86);
}

.person-dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(560px, 94vw);
  padding: 0;
}

.person-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }

#personForm {
  padding: 14px;
  display: grid;
  gap: 10px;
}

#personForm label,
#personForm fieldset {
  display: grid;
  gap: 6px;
}

#personForm input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

#personForm select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

/* The chip control sizes itself to its chips; the old 120px floor was for a list box. */
#personTagsField {
  min-height: 40px;
}

#personForm .tag-entry { border: 0; padding: 4px 2px; }

#personForm fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dialog-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  padding: 8px 12px;
}

.dialog-actions #savePersonBtn {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}

.dialog-actions #archivePersonBtn {
  margin-right: auto;
  border-color: #fecaca;
  color: #991b1b;
  background: #fff5f5;
}

@media (max-width: 1000px) {
  .toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .app-shell { grid-template-columns: 1fr; }
  .side-nav { flex-direction: row; align-items: center; }
}

/* ---------------------------------------------------------------- Settings */

.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 20px;
  max-width: 1100px;
}

.settings-card h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
}

.settings-hint {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.settings-card label > .settings-hint {
  margin: 4px 0 0;
  display: block;
}

.optional {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 4px;
}

.settings-card .settings-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-2);
}

.settings-card input[type="text"],
.settings-card input[type="password"] {
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.settings-card input:focus {
  outline: 2px solid #2563eb;
  outline-offset: -1px;
  border-color: #2563eb;
}

/* Connection status */

.cu-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 16px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
}

.cu-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
  flex: 0 0 auto;
}

.cu-dot.ok   { background: #16a34a; }
.cu-dot.warn { background: #d97706; }
.cu-dot.bad  { background: #dc2626; }

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.settings-actions button,
.settings-card > button {
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}

.settings-actions button:hover:not(:disabled) {
  background: var(--surface-3);
}

.settings-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button.primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

button.primary:hover:not(:disabled) {
  background: #1d4ed8;
}

button.danger {
  color: #b91c1c;
  border-color: #fecaca;
}

button.danger:hover:not(:disabled) {
  background: #fef2f2;
}

/* Sync result panel */

.cu-result {
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.65;
  border: 1px solid;
}

.cu-result.ok   { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.cu-result.warn { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.cu-result.bad  { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }

/* -------------------------------------------------- Allocation bars & status */

.alloc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  overflow: hidden;
}

.alloc-title {
  /* Never the thing that gives way. A flex column shrinks whatever it can when the
     content is taller than the bar, and the title — nowrap, overflow hidden — shrank to
     zero height, so a bar carrying both a client and a version lost the task name. */
  flex: none;
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alloc-sub {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 10.5px;
  line-height: 1.3;
  opacity: 0.95;
}

/* Who the work is for, and which revision it is — stacked under the task name, client first.
   Badges rather than plain text so both read at a glance against a solid project colour. */
.alloc-client,
.alloc-version {
  display: inline-block;
  padding: 0 4px;
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: 700;
  /* Client and version stack under the title, above the hours. Four lines have to fit the
     48px content box of a standard 8h bar, so these rows are tighter than the group badge
     they share a shape with. Their position must not depend on bar height: a version that
     sinks to the bottom of a 15h bar reads as belonging to the hours, not to the client. */
  line-height: 11px;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}
.alloc.status-tentative .alloc-client,
.alloc.status-tentative .alloc-version { background: rgba(0, 0, 0, 0.08); }

/* A client name is free text and can be long; the bar is not. */
.alloc-client {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

/* Short bars only have room for the title. */
.alloc.compact .alloc-sub { display: none; }
.alloc.compact .alloc-title { font-size: 10.5px; }

.group-badge {
  display: inline-block;
  padding: 0 4px;
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 14px;
  background: rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}

.alloc.status-tentative .group-badge {
  background: rgba(0, 0, 0, 0.08);
}

.alloc-check {
  font-weight: 700;
  margin-right: 3px;
}

/* Hours sit bottom-right, as in Float. */
.alloc-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}

.alloc.compact .alloc-foot { display: none; }

/* GUIDANCE UX3 — status by fill treatment. Inline styles carry the project colour;
   these rules carry the weight and affordances that colour cannot. */
.alloc.status-tentative { font-weight: 600; }
.alloc.status-confirmed { font-weight: 600; }
.alloc.status-completed { font-weight: 500; }

.alloc.status-tentative .alloc-menu-btn { color: inherit; }

/* Overtime keeps its warning outline regardless of status. */
.alloc.overtime {
  box-shadow: 0 0 0 2px #ea580c inset;
}

/* ------------------------------------------------------------------ Time off */
/* GUIDANCE UX5 — time off never borrows project colour. */

.timeoff-block {
  position: absolute;
  border-radius: 5px;
  background-color: var(--timeoff-bg);
  background-image: repeating-linear-gradient(
    45deg,
    var(--timeoff-stripe) 0,
    var(--timeoff-stripe) 5px,
    transparent 5px,
    transparent 10px
  );
  border: 1px solid var(--timeoff-border);
  color: var(--timeoff-text);
  font-size: 11.5px;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}

.timeoff-block .alloc-title {
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeoff-block .alloc-foot {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.75;
}

.timeoff-block.compact .alloc-foot { display: none; }
.timeoff-block.compact .alloc-title { font-size: 10.5px; }

/* A full day reads like the weekend blockoff: denser hatch, no rounded gap. */
.timeoff-block.full-day {
  background-color: var(--timeoff-bg-full);
  background-image: repeating-linear-gradient(
    45deg,
    var(--timeoff-stripe) 0,
    var(--timeoff-stripe) 4px,
    transparent 4px,
    transparent 8px
  );
  border-color: var(--timeoff-border);
}

.timeoff-block:hover { border-color: #7dd3fc; }
.timeoff-block.dragging { opacity: 0.65; cursor: grabbing; }

/* Time off uses the same resize affordances as allocations. */
.timeoff-block .resize-handle,
.timeoff-block .resize-v-handle {
  position: absolute;
}
.timeoff-block .resize-handle {
  top: 0; right: 0; width: 6px; height: 100%; cursor: ew-resize;
}
.timeoff-block .resize-v-handle {
  left: 0; bottom: 0; width: 100%; height: 6px; cursor: ns-resize;
}

/* --------------------------------------------------------------- Dialog bits */

.wide-dialog { min-width: 460px; max-width: 560px; }

.dialog-meta {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.dialog-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px 14px;
  margin: 0 0 14px;
}

.dialog-section legend {
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
  padding: 0 5px;
}

.inline-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 400;
  margin: 8px 0;
}

.split-day-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
  max-height: 150px;
  overflow-y: auto;
}

.split-day {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 400;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  white-space: nowrap;
}

.split-day:has(input:not(:checked)) {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
  text-decoration: line-through;
}

/* The action affordance appears on hover, as in Float, so it never covers the title. */
.alloc .alloc-actions {
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.alloc:hover .alloc-actions,
.alloc:focus-within .alloc-actions {
  opacity: 1;
  pointer-events: auto;
}

/* Keep the title clear of the button's hover target. */
.alloc:hover .alloc-title {
  padding-right: 18px;
}

/* Leading-edge resize: drag the left edge to move the start date, the right edge to move
   the end date. Both allocations and time off get both handles. */
.alloc .resize-handle-left,
.timeoff-block .resize-handle-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
}

/* ==========================================================================
   Allocation dialog — modelled on Float's allocation modal.
   Underlined inputs inside a grey summary panel; bordered fields below it;
   blue used only for links and the primary action.
   ========================================================================== */

.fl-dialog {
  border: none;
  border-radius: 12px;
  padding: 28px 30px 24px;
  width: 560px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
  color: var(--text);
  font-size: 14px;
}

.fl-dialog::backdrop { background: rgba(15, 23, 42, 0.35); }

.fl-title {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- grey summary panel --- */

.fl-panel {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin-bottom: 22px;
}

.fl-panel-grid {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px 28px;
  align-items: end;
}

.fl-field { display: flex; flex-direction: column; gap: 8px; }

.fl-panel-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.fl-panel-value { display: flex; align-items: baseline; gap: 7px; }

/* Underline-only inputs, as in Float's panel. */
.fl-panel-value input {
  font: inherit;
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border-strong);
  background: transparent;
  padding: 0 0 3px;
  border-radius: 0;
}

.fl-panel-value input:focus {
  outline: none;
  border-bottom-color: #2563eb;
  border-bottom-width: 2px;
  padding-bottom: 2px;
}

#actionHoursField { width: 58px; }
.fl-unit { font-size: 13px; color: var(--muted); }
.fl-total { font-size: 19px; font-weight: 500; color: var(--muted-2); }

.fl-dates { gap: 10px; }
.fl-dates input { font-size: 15px; width: 140px; }
.fl-arrow { color: var(--muted-2); font-size: 17px; }

/* --- labels and fields below the panel --- */

/* Two optional pickers side by side, so neither pushes the dialog's real content down a
   whole row on its own. */
.fl-pair { display: flex; gap: 14px; align-items: flex-start; }
.fl-pair-col { flex: 1 1 0; min-width: 0; }
.fl-pair-col .fl-label { display: block; }

.fl-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  margin: 0 0 7px;
}

.fl-select-wrap { position: relative; display: block; }

.fl-swatch {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #cbd5e1;
  pointer-events: none;
}

.fl-select,
.fl-assign-select,
.fl-textarea {
  font: inherit;
  font-size: 14px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.fl-select { padding-right: 54px; appearance: none; background-image: none; }

.fl-select:focus,
.fl-assign-select:focus,
.fl-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.fl-textarea { min-height: 84px; resize: vertical; margin-bottom: 20px; }
.fl-textarea::placeholder { color: var(--muted-2); }

.fl-assign { margin-bottom: 20px; }

/* --- inline blue links row --- */

.fl-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 9px 0 20px;
}

.fl-link {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.fl-link:hover { text-decoration: underline; }

.fl-meta-inline { font-size: 12.5px; color: var(--muted-2); }

/* --- split panel --- */

.fl-split {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 15px;
  margin: -8px 0 20px;
  background: var(--surface-2);
}

.fl-hint { margin: 0 0 11px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* --- status chips --- */

.fl-chips { display: flex; gap: 8px; margin-bottom: 8px; }

.fl-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--surface-3);
  color: var(--text-2);
  cursor: pointer;
}

.fl-chip:hover { background: #e2e8f0; }

.fl-chip.active {
  background: #dbeafe;
  border-color: #2563eb;
  color: #1d4ed8;
  font-weight: 600;
}

.fl-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-3);
  margin: 0 0 20px;
}

.fl-chips + .fl-check[hidden] { display: none; }
.fl-chips { margin-bottom: 20px; }
.fl-check:not([hidden]) ~ * { margin-top: 0; }

/* --- footer --- */

.fl-footnote {
  margin: 4px 0 20px;
  font-size: 12.5px;
  color: var(--muted-2);
}

.fl-actions { display: flex; align-items: center; gap: 10px; }

.fl-btn-primary,
.fl-btn-secondary {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}

.fl-btn-primary { background: #2f4bde; color: #fff; }
.fl-btn-primary:hover { background: #2740c4; }
.fl-btn-secondary { background: var(--surface-3); color: var(--text-2); }
.fl-btn-secondary:hover { background: #e2e8f0; }

.fl-actions-menu { margin-left: auto; position: relative; }
.fl-actions-toggle { font-size: 14px; }

.fl-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  padding: 6px;
  min-width: 190px;
  z-index: 5;
}

.fl-menu button {
  font: inherit;
  font-size: 13.5px;
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}

.fl-menu button:hover { background: var(--surface-3); }
.fl-menu button.danger { color: #dc2626; }
.fl-menu button.danger:hover { background: #fef2f2; }

/* --- allocation dialog refinements --- */

.fl-dialog { width: 600px; }

.fl-panel-grid { gap: 10px 22px; }

/* The date pair must fit the panel without clipping. */
.fl-dates input { width: 126px; font-size: 14px; }
.fl-dates { gap: 8px; }
.fl-field-dates { min-width: 0; }

/* Float's hours field has no spinner. */
#actionHoursField { -moz-appearance: textfield; appearance: textfield; }
#actionHoursField::-webkit-outer-spin-button,
#actionHoursField::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Native selects lose their arrow under appearance:none, so draw one. */
.fl-select-wrap::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #64748b;
  border-bottom: 1.5px solid #64748b;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.fl-assign { position: relative; }
.fl-assign-select { appearance: none; padding-right: 40px; }
.fl-assign::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #64748b;
  border-bottom: 1.5px solid #64748b;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Date inputs: hide the native calendar glyph so the row reads like Float's. */
.fl-dates input::-webkit-calendar-picker-indicator {
  opacity: 0.35;
  cursor: pointer;
}

/* The overtime marker is scoped to the day it occurs on, so `left`/`width` are set inline
   per day rather than stretching the full row. */
.hours-line {
  right: auto;
  border-top-width: 2px;
  border-top-color: #ea580c;
  z-index: 1;
}


/* Blocks sit flush inside their day cells (Float alignment): a full-capacity block fills
   its row top to bottom, and the only horizontal gap is the 2px gutter set inline. */
.alloc, .timeoff-block {
  border-radius: 4px;
  box-sizing: border-box;
}

.alloc { padding: 3px 6px; }
.timeoff-block { padding: 4px 8px; }

/* ==========================================================================
   App shell — sidebar + topbar, modelled on Float.
   ========================================================================== */

body { margin: 0; }

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--surface);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
}

/* --- sidebar --- */

.side-nav {
  width: 232px;
  flex: 0 0 232px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 10px 10px 8px;
  background: var(--surface);
  transition: width 0.16s ease, flex-basis 0.16s ease;
  overflow: hidden;
}

.app-shell.nav-collapsed .side-nav {
  width: 0;
  flex-basis: 0;
  padding-left: 0;
  padding-right: 0;
  border-right: none;
}

.ws-switcher { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }

.ws-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 5px 6px;
  border-radius: 7px;
  color: var(--text);
}
.ws-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* An organization's own mark, in the slot its initial otherwise fills. A white tile rather
   than the tinted one: a logo brings its own colour and should not sit on someone else's. */
.ws-avatar { position: relative; overflow: hidden; }
.ws-avatar.has-logo { background: var(--surface); box-shadow: inset 0 0 0 1px #e6e9ee; }
.ws-avatar img { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: contain; }
.ws-avatar.has-logo .ws-initial { visibility: hidden; }

/* Logo-only: the mark IS the name, so it gets the whole row and the text is dropped. It
   takes the sidebar's full content width, which makes its margins the sidebar's own padding
   — the same 10px against the window on the left as against the border on the right — and
   makes it as large as proportional scaling allows. `object-fit: contain` does the scaling:
   the box is always full width, and a mark too square to fill it at max-height is centred
   inside that box rather than stretched. One rule covers a 5:1 wordmark and a square badge. */
.ws-btn.logo-only { padding: 2px 0; }

.ws-wordmark {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76px;   /* 211px of content width at ~2.8:1, the usual wordmark shape */
  object-fit: contain;
  object-position: center;
}

.ws-avatar {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  border-radius: 6px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.ws-avatar.user {
  border-radius: 50%;
  background: #cbd5e1;
  color: var(--text-2);
  border: none;
  cursor: pointer;
  width: 28px; height: 28px; flex-basis: 28px;
}

/* The Hover mark itself — used wherever the product is identified rather than a workspace.
   (The sidebar's .ws-avatar stays a letter: it names the tenant, not the app.) The artwork
   carries its own rounded tile and shadow, so it needs no background, radius or border. */
.brand-mark { display: block; flex: none; object-fit: contain; }

.caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid #94a3b8;
  border-bottom: 1.5px solid #94a3b8;
  transform: rotate(45deg) translateY(-2px);
  flex: 0 0 auto;
  margin-left: auto;
}

.nav-list { display: flex; flex-direction: column; gap: 1px; }

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}

.nav-btn:hover { background: var(--surface-3); }
.nav-btn.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
.nav-ico { width: 17px; text-align: center; opacity: 0.65; font-size: 13px; }

.nav-group { margin-top: 16px; }

.nav-group-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
}

.nav-group-btn:hover { background: var(--surface-3); }
.nav-sub { display: flex; flex-direction: column; gap: 1px; padding-left: 12px; }
.nav-sub[hidden] { display: none; }
.nav-btn.sub { font-size: 13.5px; padding-left: 16px; }

.nav-footer { margin-top: auto; padding-top: 10px; }

/* --- topbar --- */

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

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.page-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

.nav-toggle .ico { transition: transform 0.16s ease; }
.app-shell.nav-collapsed .nav-toggle .ico { transform: rotate(180deg); }

.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}

.tb-btn:hover { background: var(--surface-2); }
.tb-btn.active { background: var(--surface-3); border-color: var(--border-strong); }
.tb-ico { font-size: 12px; opacity: 0.7; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-3);
  cursor: pointer;
}

.icon-btn:hover { background: var(--surface-2); }

.add-btn {
  width: 32px; height: 32px;
  font-size: 19px;
  line-height: 1;
  border: none;
  border-radius: 8px;
  background: #2f4bde;
  color: #fff;
  cursor: pointer;
}

.add-btn:hover { background: #2740c4; }

/* --- popovers --- */

.menu-wrap { position: relative; }

.popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
  padding: 6px;
  z-index: 40;
}

.popover.align-right { left: auto; right: 0; }
.popover.wide { min-width: 230px; }
.popover[hidden] { display: none; }

.pop-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.pop-item:hover { background: var(--surface-3); }
.pop-item em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.pop-item.active { font-weight: 600; }
.pop-item.active::after { content: "\2713"; margin-left: auto; color: #2563eb; }
.pop-item.shortcut kbd {
  margin-left: auto;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-3);
  border-radius: 4px;
  padding: 1px 6px;
}

.pop-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 10px 4px;
}

.pop-sep { height: 1px; background: #e2e8f0; margin: 5px 0; }

.pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-2);
}

.pop-search { padding: 6px; }
.pop-search input {
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
}

.pop-list { max-height: 260px; overflow-y: auto; }

.clause-chip {
  background: var(--surface-3);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12.5px;
  font-weight: 500;
}

.clause-op { color: var(--muted); font-size: 12.5px; }

.seg { display: inline-flex; margin-left: auto; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.seg-btn {
  font: inherit; font-size: 12.5px; padding: 4px 10px;
  border: none; background: var(--surface); color: var(--text-3); cursor: pointer;
}
.seg-btn.active { background: var(--surface-3); color: var(--text); font-weight: 600; }

/* --- schedule toolbar --- */

.sched-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--surface-3);
  flex: 0 0 auto;
}

.range-total { font-size: 14px; font-weight: 600; color: var(--text); }
.range-label { font-size: 12.5px; color: var(--muted-2); margin-left: auto; }

.view { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
.view.active { display: flex; }

#scheduleBoard { flex: 1; min-height: 0; }


/* ==========================================================================
   Row alignment. The people column and the calendar are separate scroll panes,
   so their rows must share an IDENTICAL box model or they drift apart and the
   drift accumulates down the board. Both get the same explicit height, the same
   border, border-box sizing, and hidden overflow so content can never push a
   row taller than its computed height.
   ========================================================================== */

.sched-person-row,
.sched-calendar-row {
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  margin: 0;
}

/* Only the people column clips: its text must never push the row taller.
   The calendar row must NOT clip, or it would cut off the full-width day grid
   and kill horizontal scrolling. Its height is fixed inline and the blocks are
   laid out to fit, so nothing overflows vertically anyway. */
.sched-person-row { overflow: hidden; }

.sched-person {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The person block must never grow the row: long roles truncate instead of wrapping. */
.person-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-tags {
  display: flex;
  gap: 4px;
  overflow: hidden;
  flex-wrap: nowrap;
}

/* --- person cell (Float layout) --- */

.sched-person {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
}

.person-avatar {
  width: 26px; height: 26px;
  /* Never let a flex parent size one axis: width and height move together. */
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 10.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
/* ClickUp profile photo, when the import carried one. The initials stay underneath so a
   broken image degrades to the old look instead of an empty circle. */
.person-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.person-avatar.has-photo .avatar-initials { visibility: hidden; }

.person-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.person-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-meta { font-size: 11.5px; color: var(--muted); }
.person-meta.subtle { color: var(--muted-2); }

.person-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.person-hours { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }

.edit-person-btn {
  font: inherit; font-size: 14px; line-height: 1;
  border: none; background: none; color: var(--muted-2);
  padding: 2px 4px; border-radius: 5px; cursor: pointer;
}
.edit-person-btn:hover { background: #e2e8f0; color: var(--text-2); }

.tag-chip {
  font-size: 10px; font-weight: 600;
  background: var(--surface-3); color: var(--text-3);
  padding: 1px 6px; border-radius: 5px;
  white-space: nowrap;
}
.tag-chip.more { background: #e2e8f0; color: var(--muted); }

.placeholder { padding: 48px; color: var(--muted); }
.placeholder h3 { margin: 0 0 6px; color: var(--text); font-size: 18px; }

/* density */
body[data-density="comfortable"] .sched-person { padding: 12px 12px; }
body[data-density="spacious"] .sched-person { padding: 18px 14px; }

/* --- timeline header: week band + day columns --- */

.week-band { display: flex; height: 26px; border-bottom: 1px solid var(--surface-3); }

.week-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  box-sizing: border-box;
  border-right: 1px solid var(--surface-3);
  font-size: 11.5px;
  color: var(--muted-2);
  overflow: hidden;
  white-space: nowrap;
}

.week-num { font-weight: 700; color: var(--muted); }
.week-months { color: var(--muted-2); }

.day-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 8px;
  box-sizing: border-box;
  font-size: 12px;
  color: var(--text-3);
}

.day-head .dow { font-weight: 500; }
.day-head .dom { font-weight: 600; color: var(--text); }
.day-head.weekend { color: var(--muted-2); }
.day-head.weekend .dom { color: var(--muted-2); }

/* Today reads as a chip on the date, matching Float. */
.day-head.today .dow { color: #2f4bde; font-weight: 600; }
.day-head.today .dom {
  background: #2f4bde;
  color: #fff;
  border-radius: 5px;
  padding: 1px 6px;
}

/* The people header mirrors the calendar header exactly: a week-band-height spacer
   above the "Team" label, so both panes start at the same y. */
.sched-person-head {
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}

.week-band-spacer {
  height: 26px;
  border-bottom: 1px solid var(--surface-3);
  flex: 0 0 26px;
}

.team-label {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  display: flex;
  align-items: center;
  flex: 1;
}


/* The header now stacks a week band above the day columns, so it can no longer be a
   fixed 44px - that clipped the day row entirely. Height is driven by its content. */
.calendar-head {
  height: auto !important;
  min-height: 0;
  overflow: hidden;
}

.sched-day-heads { height: 28px; }
.day-head { height: 28px; align-items: center; }

/* The header is now two stacked bands (week numbers + day columns), so the header row
   must size to its content instead of the old fixed 44px, in BOTH columns. */
.calendar-col,
.people-col {
  grid-template-rows: auto 1fr !important;
}

/* The old day-head rule forced a 44px floor; the day band is 28px now. */
.sched-day-heads > div {
  min-height: 0;
  height: 28px;
  justify-content: flex-start;
  border-right: 1px solid var(--line);
}

/* The Team label must be exactly as tall as the day-column band (28px) so the two
   headers total the same height; otherwise every row below inherits the difference. */
.team-label {
  height: 28px;
  flex: 0 0 28px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* --- right-click tool menu --- */

.ctx-menu {
  position: fixed;
  z-index: 200;
  min-width: 210px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.2);
  padding: 8px;
}

.ctx-menu[hidden] { display: none; }

.ctx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font: inherit;
  font-size: 15px;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.ctx-item:hover { background: var(--surface-3); }
.ctx-item.active { background: var(--surface-3); font-weight: 600; }
.ctx-ico { width: 18px; text-align: center; opacity: 0.75; font-size: 14px; }
.ctx-item kbd {
  margin-left: auto;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
}

/* Cursor reflects the active tool, so the mode is never invisible. */
body[data-tool="quick-add"] .day-cell { cursor: copy; }
body[data-tool="split"] .alloc { cursor: col-resize; }
body[data-tool="delete"] .alloc,
body[data-tool="delete"] .timeoff-block { cursor: not-allowed; }
body[data-tool="complete"] .alloc { cursor: pointer; }
body[data-tool="link"] .alloc { cursor: alias; }

/* Link tool: show which blocks are staged for linking. */
.alloc.link-picked { outline: 3px solid #2f4bde; outline-offset: -3px; }

/* Separates the modes above from the action below: picking a tool changes what a click does,
   this one does something on the spot. */
.tool-menu-sep { height: 1px; background: #e2e8f0; margin: 4px 0; }

.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 6px;
  padding: 3px 9px;
}

/* ==========================================================================
   Data studio list pages — Roles, Tags, Teams, Departments.
   Modelled on Float's Departments screen.
   ========================================================================== */

.settings-view { overflow-y: auto; }

.settings-page { padding: 32px 40px; max-width: 1100px; }

.settings-title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.settings-lede { margin: 0 0 26px; font-size: 14px; color: var(--text-3); }

.settings-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 30px 22px;
}

.list-add-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 7px;
}

.list-add-row { display: flex; gap: 10px; align-items: center; }

.list-add-input {
  font: inherit;
  font-size: 14px;
  flex: 1;
  max-width: 780px;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}

.list-add-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.fl-btn-primary:disabled { background: #e2e8f0; color: var(--muted-2); cursor: not-allowed; }

.list-hint { font-size: 12.5px; color: var(--muted); margin: 7px 0 24px; }
.list-error { font-size: 13px; color: #b91c1c; margin-bottom: 14px; }

.list-head,
.list-row {
  display: grid;
  /* Set per list: the project-side lists carry a Phase column and their own count columns. */
  grid-template-columns: var(--list-cols, 1fr 130px 40px);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.list-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}

.list-head span:nth-child(2) { text-align: right; }

.list-row { border-radius: 8px; font-size: 14px; }
.list-row:nth-child(odd) { background: var(--surface-2); }

.list-name { font-weight: 500; color: var(--text); }
.list-count { text-align: right; color: #2563eb; font-weight: 600; }

.list-remove {
  font: inherit;
  font-size: 18px;
  line-height: 1;
  border: none;
  background: none;
  color: var(--muted-2);
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
}

.list-remove:hover:not(:disabled) { background: #fef2f2; color: #dc2626; }
.list-remove:disabled { opacity: 0.3; cursor: not-allowed; }

.list-empty { padding: 18px 14px; font-size: 13.5px; color: var(--muted-2); }

/* Tasks carry a Phase, picked inline so filing a task takes one click. */
.list-add-select,
.list-phase-select {
  font: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.list-add-select { padding: 11px 13px; min-width: 180px; }
.list-phase-select { width: 100%; max-width: 190px; }
.list-phase .field-empty { font-size: 12.5px; }
.list-phase-filter { margin: 0 0 14px; }

/* Row separators must read at every row height. A single hairline can disappear against
   the block fill on tall rows, so the separator is drawn on the row itself and the people
   column repeats it, guaranteeing both sides show the same divider. */
.sched-person-row,
.sched-calendar-row {
  border-bottom: 1px solid var(--border);
  background-clip: padding-box;
}

.sched-calendar-row:last-child,
.sched-person-row:last-child { border-bottom: 1px solid var(--border); }

/* Blocks must never paint over the row's bottom edge. */
.alloc, .timeoff-block { z-index: 1; }


/* The person cell must be measurable at its natural height so the row can size to it.
   Clipping here is what cut off tag chips. */
.sched-person { overflow: visible; }
.sched-person-row { overflow: hidden; }
.person-tags { flex-wrap: wrap; }

/* Right-click tool menu on the schedule board (Float parity). */
.tool-menu {
  position: fixed;
  z-index: 60;
  min-width: 190px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid #e2e5ea;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
.tool-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.tool-menu button:hover { background: #f2f4f7; }
.tool-menu button.active { background: var(--surface-3); color: #3d1cba; }
.tool-menu button.danger { color: #c0392b; }
.tool-menu-label { display: none; padding: 6px 10px 4px; font-size: 12px; color: var(--muted-2); }
/* Over a multi-selection the menu is a bulk-action menu: just the actions that apply to a set,
   and no shortcut hints, since the keys arm a tool rather than act on the selection. */
.tool-menu[data-bulk] .tool-menu-label { display: block; }
.tool-menu[data-bulk] [data-tool]:not([data-tool="complete"]):not([data-tool="delete"]) { display: none; }
.tool-menu[data-bulk] kbd { display: none; }
.tool-menu kbd {
  font: inherit;
  font-size: 11px;
  color: var(--muted-2);
  border: 1px solid #e2e5ea;
  border-radius: 4px;
  padding: 0 5px;
}

/* Entry dialog tabs — Allocation / Time off / Status live on one popup. */
.fl-tabs {
  display: flex;
  gap: 4px;
  margin: -4px -4px 14px;
  border-bottom: 1px solid var(--border);
}
.fl-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 12px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.fl-tab:hover { color: var(--text); }
.fl-tab.active { color: #3d1cba; border-bottom-color: #3d1cba; }
.entry-pane[hidden] { display: none; }

/* --- stale-API banner ---------------------------------------------------- */
.stale-banner {
  padding: 10px 16px;
  background: #fff4e5;
  border-bottom: 1px solid #f0c894;
  color: #7a4a06;
  font-size: 13px;
  font-weight: 500;
}

/* --- project intake webhook ---------------------------------------------- */
.settings-subtitle { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.webhook-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 6px; }
.webhook-url {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
}
.webhook-help { margin-top: 10px; font-size: 12px; }
.webhook-help summary { cursor: pointer; color: #3d1cba; }
.webhook-help pre {
  margin: 8px 0 0;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 11.5px;
  line-height: 1.5;
}

/* --- tag input (Float chip control) -------------------------------------- */
.tag-input-label { display: block; }
.tag-input {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: text;
}
.tag-input:focus-within { border-color: #3d1cba; box-shadow: 0 0 0 2px rgba(61, 28, 186, 0.12); }
.tag-chips { display: contents; }
/* Scoped to the input: `.tag-chip` is also the schedule sidebar's read-only chip and must
   keep its own, tighter styling there. */
.tag-input .tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--surface-3);
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}
.tag-input .tag-chip-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.tag-input .tag-chip-x:hover { color: #c0392b; }
.tag-entry {
  flex: 1;
  min-width: 90px;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 13px;
  padding: 4px 2px;
  background: transparent;
}
.tag-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.tag-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.tag-menu button:hover { background: #f2f4f7; }

/* --- People tab ----------------------------------------------------------- */
.people-page { padding: 24px 28px; }
.people-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.people-count { margin: 0; font-size: 22px; font-weight: 700; }
.people-filters { display: flex; gap: 4px; padding: 3px; background: var(--surface-3); border-radius: 8px; }
.people-filters button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
}
.people-filters button.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.people-head .fl-btn-primary { margin-left: auto; }
.people-table { border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; background: var(--surface); }
.people-row {
  display: grid;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  grid-template-columns: 28px 210px 60px 140px 150px 120px 210px 110px 110px 100px 180px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.people-row:last-child { border-bottom: 0; }
.people-row[data-person-id] { cursor: pointer; }
.people-row[data-person-id]:hover { background: var(--surface-2); }
.people-header { background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--muted); }
.people-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.people-tags { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.src-pill {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-3);
  color: #3d1cba;
}
.src-pill.local { background: var(--surface-3); color: var(--muted); }

/* --- project colour picker ------------------------------------------------ */
.fl-swatch.clickable { cursor: pointer; }
.fl-swatch.clickable:hover { outline: 2px solid rgba(61, 28, 186, 0.35); outline-offset: 2px; }
.color-pop {
  position: fixed;
  z-index: 70;
  width: 300px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
}
.color-hex {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
}
.color-hex span { color: var(--muted-2); }
.color-hex input { flex: 1; border: 0; outline: none; font: inherit; text-transform: uppercase; }
.color-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  margin: 8px 0 12px;
}
.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; }

/* The project swatch is a control, not decoration: Float puts it left of the name and you
   click it to recolour the project. It must sit above the <select> to be clickable. */
.fl-select-wrap .fl-swatch {
  left: 12px;
  right: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: auto;
}
.fl-select-wrap .fl-select { padding-left: 40px; }

/* --- in-app alert / confirm / prompt -------------------------------------- */
.app-dialog {
  border: 0;
  border-radius: 12px;
  padding: 22px 24px 18px;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  color: var(--text);
}
.app-dialog::backdrop { background: rgba(15, 23, 42, 0.42); }
.app-dialog h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.app-dialog h3[hidden] { display: none; }
.app-dialog p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); white-space: pre-line; max-height: 50vh; overflow-y: auto; }
.app-dialog-input {
  width: 100%;
  margin-top: 14px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  box-sizing: border-box;
}
.app-dialog-input[hidden] { display: none; }
.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.app-dialog-actions button[hidden] { display: none; }
/* A solid red button is a filled button: white text, like the blue one. */
.app-dialog-actions .fl-btn-primary.danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.app-dialog-actions .fl-btn-primary.danger:hover { background: #a93226; color: #fff; }

/* A block being dragged inside its own row is being reordered, not moved. */
.alloc.dragging { opacity: 0.85; z-index: 20; }

/* --- toast (undo feedback) ------------------------------------------------ */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 90;
  padding: 10px 16px;
  border-radius: 8px;
  background: #1f2733;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.app-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* --- density: the person cell breathes with the row ----------------------- */
body[data-density="compact"] .sched-person { padding: 6px 10px; gap: 1px; }
body[data-density="compact"] .person-name { font-size: 13px; }
body[data-density="compact"] .person-meta { font-size: 11px; }

body[data-density="comfortable"] .sched-person { padding: 10px; gap: 2px; }

body[data-density="spacious"] .sched-person { padding: 14px 12px; gap: 4px; }
body[data-density="spacious"] .person-name { font-size: 15px; }
body[data-density="spacious"] .sched-person .person-avatar { width: 34px; height: 34px; font-size: 13px; }

/* Months packs ~42px columns; labels inside bars stop fitting, so drop to the bar alone. */
body[data-zoom="months"] .alloc .hours { display: none; }
body[data-zoom="months"] .sched-person .person-tags { display: none; }

/* An unsaved ClickUp selection: the panel and the server disagree until Save is pressed. */
#cuSaveBtn.attention {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28);
}

/* --- project tagging map -------------------------------------------------- */
.tagmap-head,
.tagmap-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.4fr 32px;
  gap: 10px;
  align-items: center;
}
.tagmap-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  margin-top: 10px;
}
.tagmap-row { padding: 6px 0; }
.tagmap-target,
.tagmap-label,
.tagmap-source {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
  background: var(--surface);
}
.tagmap-remove {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.tagmap-remove:hover { color: #c0392b; }
.tagmap-actions { display: flex; gap: 8px; margin-top: 12px; }

/* --- Projects tab --------------------------------------------------------- */
.projects-page { padding: 24px 28px; }
.projects-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.projects-count { margin: 0; font-size: 22px; font-weight: 700; }
.projects-note { font-size: 12px; color: var(--muted); }
.projects-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-x: auto;
  background: var(--surface);
}
.projects-row {
  display: grid;
  grid-template-columns: var(--projects-cols);
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}
.projects-row:last-child { border-bottom: 0; }
.projects-header { background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--muted); }
.projects-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projects-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.projects-tags { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.project-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: none;
}
.project-swatch:hover { outline: 2px solid rgba(61, 28, 186, 0.35); outline-offset: 2px; }
/* A mapped value the payload did not carry. Named, not blank, so the row still reads. */
.field-empty { color: #a2abba; font-style: italic; }

/* Data studio rows: the ⋮ opens the same menu as a right-click. */
.list-row { position: relative; }
.list-row:hover { background: var(--surface-2); }
.list-menu-btn {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.list-menu-btn:hover { background: var(--surface-3); color: var(--text); }
.people-cell.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* Row separators: the schedule's primary structure, so they read a step darker than the
   surrounding chrome. Both columns use the same weight or the halves look misaligned even
   when they are pixel-perfect.

   The calendar side draws its line on .sched-days, not on the row. The row box is only as
   wide as the viewport while the grid inside it is the full timeline (8000px+), so a border
   on the row stops at the right edge of the visible area and leaves the scrolled-to region
   unruled. Both boxes are border-box and the grid is height:100%, so drawing it inside costs
   no height and the two columns still line up. */
.sched-person-row {
  border-bottom-color: var(--row-line);
}
.sched-calendar-row {
  border-bottom: 0;
}
.sched-days {
  border-bottom: 1px solid var(--row-line);
}
.sched-person-head,
.calendar-head,
.sched-day-heads > div {
  border-bottom-color: var(--row-line);
}

/* --- projects: selection + bulk bar --------------------------------------- */
.projects-pick { display: flex; align-items: center; justify-content: center; }
.projects-row.selected { background: var(--surface-3); }
.project-open {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-open:hover { color: #3d1cba; text-decoration: underline; }
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #1f2733;
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
}
.bulk-bar button {
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  padding: 6px 11px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.bulk-bar button:hover { background: rgba(255, 255, 255, 0.26); }
.bulk-bar button.danger { background: rgba(220, 38, 38, 0.85); }
.bulk-bar button.danger:hover { background: #dc2626; }
.bulk-bar .bulk-clear { margin-left: auto; background: transparent; text-decoration: underline; }

/* --- project drawer (Float's project panel) -------------------------------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 23, 42, 0.35);
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  width: min(560px, 100vw);
  display: flex;
  flex-direction: column;
  background: #f5f7fb;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.2);
}
.drawer[hidden] { display: none; }
.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}
.drawer-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: none;
}
.drawer-link { font-size: 12px; color: #3d1cba; }
.drawer-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: grid; gap: 14px; }
.drawer-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.drawer-subtitle { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.drawer-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.drawer-row > span:first-child { color: var(--text-2); }
.drawer-row-stack { align-items: start; }
.drawer-row input:not([type="checkbox"]),
.drawer-row select,
.drawer-row textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
  background: var(--surface);
}
.drawer-row input[readonly] { background: var(--surface-3); color: var(--muted); }
.drawer-row .fl-dates { display: flex; align-items: center; gap: 8px; }
.drawer-row .fl-textarea { min-height: 90px; margin: 0; }
.drawer-note { margin: -6px 0 0 142px; font-size: 11.5px; color: var(--muted); }
.drawer-fields { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.drawer-fields dt { color: var(--text-2); }
.drawer-fields dd { margin: 0; }
.drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* The `hidden` attribute is only `display: none` at UA-stylesheet strength, so ANY class rule
   that sets display (flex/grid/block) silently defeats it. That is how the bulk bar rendered
   "0 selected" with nothing selected. One global rule beats every such case at once. */
[hidden] {
  display: none !important;
}

/* A label that names itself: the built-in field's own name, not something to type. */
.tagmap-label:disabled { background: var(--surface-3); color: var(--muted); }


/* --- filter bar + picker (Float's typed filter) ---------------------------- */
.filter-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.filter-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.filter-bar[hidden] { display: none; }
.f-chip {
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-3);
  font-size: 13px;
  line-height: 1;
}
.f-chip-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 7px 8px 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  max-width: 420px;
}
.f-chip-main:hover { background: #e3e8f0; }
.f-chip-ico { color: var(--muted); font-size: 12px; }
.f-chip-field { font-weight: 600; }
.f-chip-op { color: var(--muted); padding: 0 2px; }
.f-chip-op.not { color: #b91c1c; font-weight: 600; }
.f-chip-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-chip-x {
  border: 0;
  border-left: 1px solid var(--this-week-bg);
  background: transparent;
  padding: 0 9px;
  font-size: 15px;
  color: var(--text-3);
  cursor: pointer;
}
.f-chip-x:hover { background: #e3e8f0; color: var(--text); }
.f-add, .f-save, .f-clear {
  border: 1px solid transparent;
  background: var(--surface-3);
  border-radius: 8px;
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.f-add { font-size: 16px; line-height: 1; padding: 5px 11px 6px; }
.f-add:hover, .f-save:hover { background: #e3e8f0; }
.f-save { background: var(--surface); border-color: var(--border-strong); display: inline-flex; align-items: center; gap: 6px; }
.f-save-ico { color: var(--muted); }
.f-clear { background: transparent; }
.f-clear:hover { text-decoration: underline; }

/* A third operator ("contains") made the header row too wide for 300px: "is not" wrapped
   mid-phrase. The panel gets a little more room, and the row wraps as a row if it still has
   to — never inside a button. */
.filter-pop { min-width: 340px; max-width: 380px; padding: 0; overflow: hidden; }
.f-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.f-search-ico { color: var(--muted-2); }
.f-search input {
  flex: 1;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 14px;
  background: transparent;
}
.f-list { max-height: 420px; overflow-y: auto; padding: 6px; }
.f-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  padding: 9px 10px;
  border-radius: 7px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.f-item:hover { background: var(--surface-3); }
.f-ico { width: 16px; text-align: center; color: var(--muted); font-size: 13px; flex: 0 0 16px; }
.f-item-note { margin-left: auto; font-size: 11px; color: var(--muted-2); }
.f-hit-field { font-weight: 600; }
.f-hit-sep { color: var(--muted-2); font-size: 12px; }
.f-sep { height: 1px; background: #e2e8f0; margin: 5px 4px; }
.f-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-2); padding: 8px 10px 2px;
}
.f-saved { display: flex; align-items: center; }
.f-saved .f-item { flex: 1; }
.f-saved-x { border: 0; background: none; color: var(--muted-2); font-size: 15px; cursor: pointer; padding: 4px 8px; }
.f-saved-x:hover { color: #b91c1c; }
.f-empty { padding: 14px 12px; color: var(--muted); font-size: 13px; }
.f-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 4px; }
.f-back { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--text-2); padding: 2px 6px; }
.f-field-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-3); border-radius: 7px; padding: 6px 10px; font-size: 13px; font-weight: 600;
}
.f-ops { display: inline-flex; gap: 2px; margin-left: auto; }
.f-op {
  border: 0; background: none; padding: 6px 8px; border-radius: 6px;
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.f-op.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
.f-values { max-height: 360px; }
.f-value {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px; border-radius: 7px; font-size: 13.5px; cursor: pointer;
}
.f-value:hover { background: var(--surface-3); }
.f-value.checked { background: var(--surface-3); }
.f-value input { width: 17px; height: 17px; accent-color: #2f5ad6; }

/* "contains" is typed, not checked: the terms already added sit as removable chips above a
   line naming the values they currently reach. */
.f-contains { padding: 6px 4px 10px; }
.f-terms { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 8px; }
.f-term {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-3); color: #1e293b; border-radius: 7px;
  padding: 4px 6px 4px 9px; font-size: 13px; font-weight: 600;
}
.f-term-x {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 0 2px;
}
.f-term-x:hover { color: #b91c1c; }
.f-contains-note { padding: 2px 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.sched-empty { padding: 28px 14px; color: var(--muted); font-size: 14px; }
.people-pick { display: flex; align-items: center; }

/* Hide from the schedule: a switch, not a checkbox, because it changes what another view
   shows rather than recording a fact about the person. */
.people-hide { display: flex; align-items: center; }
.hide-toggle {
  width: 38px; height: 22px; padding: 2px; border: 0; border-radius: 999px;
  background: #d8dee9; cursor: pointer; display: inline-flex; align-items: center;
  transition: background 120ms ease;
}
.hide-toggle:hover { background: #c7d0de; }
.hide-toggle.on { background: #2f5ad6; }
.hide-toggle.on:hover { background: #2749b4; }
.hide-knob {
  width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
  transition: transform 120ms ease;
}
.hide-toggle.on .hide-knob { transform: translateX(16px); }
.people-row.hidden-person .people-name { color: var(--muted); }
.people-pick input { width: 16px; height: 16px; accent-color: #2f5ad6; cursor: pointer; }
.people-row.selected { background: var(--surface-3); }

/* --- inline line icons (no emoji: they render as colour glyphs and ignore the palette) --- */
.ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.tb-ico { display: inline-flex; align-items: center; color: var(--muted); }
.icon-btn .ico { margin: 0 auto; }
.sched-controls { display: flex; align-items: center; gap: 6px; }
.sched-controls[hidden] { display: none; }

/* --- shift tool: a single right-pointing arrow cursor, and the selected set --- */
body[data-tool="shift"] .sched-days,
body[data-tool="shift"] .alloc {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 12h15M12 5l7 7-7 7' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/><path d='M3 12h15M12 5l7 7-7 7' fill='none' stroke='%231f2733' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") 12 12, e-resize;
}
.alloc.shift-selected {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
}

.people-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.people-head-actions .fl-btn-secondary { display: inline-flex; align-items: center; gap: 6px; }
.people-head .fl-btn-primary { margin-left: 0; }

/* --- selection + option-drag duplicate --- */
.alloc.selected {
  outline: 2px solid #2f5ad6;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(47, 90, 214, 0.28);
}
body.dup-drag .alloc.dragging { cursor: copy; }
.alloc.dup-ghost { opacity: 0.75; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25); }
.alloc.dup-origin { opacity: 0.45; pointer-events: none; }
.projects-head .fl-btn-primary { margin-left: auto; }

/* --- profile photo editor (person dialog) --- */
.avatar-field { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.avatar-field .person-avatar { width: 64px; height: 64px; font-size: 20px; }
.avatar-actions { display: flex; flex-direction: column; gap: 6px; }
.avatar-actions button { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; text-align: left; }
.avatar-actions button:hover { background: var(--surface-2); }
.avatar-actions button.danger { color: #b91c1c; border-color: #fecaca; }
.avatar-hint { font-size: 11.5px; color: var(--muted-2); }
.avatar-dialog { border: 0; border-radius: 14px; padding: 22px 24px; width: 340px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.avatar-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.avatar-dialog h3 { margin: 0 0 12px; font-size: 16px; }
.avatar-stage {
  width: 240px; height: 240px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden;
  background: #e2e8f0; cursor: grab; touch-action: none; position: relative;
  box-shadow: 0 0 0 1px #cbd5e1 inset;
}
.avatar-stage.dragging { cursor: grabbing; }
.avatar-stage canvas { display: block; width: 240px; height: 240px; }
.avatar-zoom { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.avatar-zoom input { flex: 1; }
.avatar-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.avatar-dialog .fl-btn-primary { background: #2f5ad6; color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.avatar-dialog .fl-btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13.5px; cursor: pointer; }

/* --- sortable headers --- */
.th-sort {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; font-weight: inherit; color: inherit; cursor: pointer;
  white-space: nowrap; text-align: left;
}
.th-sort:hover .th-label { text-decoration: underline; }
.th-arrow { font-size: 10px; color: #cbd5e1; }
.th-sort.active .th-arrow { color: #2f5ad6; }
.th-order {
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: #2f5ad6; color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.util-table th { text-align: left; }
.fl-dates input[readonly] { background: var(--surface-2); color: var(--text-3); }

/* --- timeline header: Float's per-zoom formatting --------------------------- */
.week-cell { gap: 0; }
.week-cell .week-num { flex: 0 0 auto; font-size: 12px; color: var(--text-2); }
.week-cell .week-months { flex: 1; text-align: center; font-size: 12px; color: var(--text-3); padding-right: 8px; }
.day-head { border-right-color: #eef1f5; }
.day-head.this-week { background: var(--this-week-bg); color: var(--text); }
.day-head.this-week .dom { color: var(--text); }
/* The today chip keeps white text whatever the week band does around it. */
.day-head.today .dom, .day-head.this-week.today .dom { color: #fff; }
.day-head.this-week.weekend { color: var(--muted); }
.day-head.this-week.weekend .dom { color: var(--muted); }
.day-head.today { position: relative; }
.day-head.today .dow { color: #2f4bde; }
.day-head.today::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #2f4bde;
}
/* Weeks: "Mon 31" inline. Days: roomier and larger. Months: the number alone, centred —
   at 42px a weekday name only ever overlapped its neighbour. */
body[data-zoom="days"] .day-head { font-size: 13.5px; gap: 6px; padding-left: 12px; }
body[data-zoom="days"] .day-head .dom { font-size: 13.5px; }
body[data-zoom="months"] .day-head { justify-content: center; padding: 0; gap: 0; font-size: 11.5px; }
body[data-zoom="months"] .day-head .dow { display: none; }
body[data-zoom="months"] .day-head.today .dom { padding: 1px 5px; }
body[data-zoom="months"] .week-cell { padding: 0 6px; }
body[data-zoom="months"] .week-cell .week-months { text-align: left; padding-left: 8px; }

/* --- allocation hover card --- */
.alloc-hover {
  position: fixed; z-index: 90; max-width: 360px;
  background: #1f2733; color: #fff; border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.45; box-shadow: 0 12px 30px rgba(15, 23, 42, .35);
  pointer-events: none;
}
.alloc-hover[hidden] { display: none; }
.hover-title { font-weight: 700; font-size: 13.5px; }
.hover-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.hover-code { font-weight: 500; color: #cbd5e1; font-size: 12px; margin-left: 8px; }
.hover-sub { color: #cbd5e1; margin-top: 1px; }
.hover-row { color: #e2e8f0; margin-top: 4px; }
.hover-status { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.18); }
.hover-status.status-tentative { background: transparent; border: 1px solid var(--border-strong); }
.hover-status.status-completed { background: rgba(255,255,255,.35); }
/* Client and version, in the same pill shape the status uses so the card reads as one list. */
.hover-pill {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
}
.hover-notes { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.15); color: #e2e8f0; white-space: pre-line; }
.bulk-bar button.danger { color: #fff; }

/* --- account menu + users admin --- */
.user-menu-wrap .popover { top: auto; bottom: calc(100% + 8px); left: 0; min-width: 210px; }
.user-pop-name { font-weight: 600; padding: 8px 10px 0; font-size: 13.5px; }
.user-pop-role { color: var(--muted); font-size: 12px; padding: 0 10px 6px; }

.user-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  min-width: 0;
  font: inherit;
  padding: 5px 6px;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  text-align: left;
}
.user-btn:hover { background: var(--surface-3); }
.user-btn-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Organization settings: the preview draws the real sidebar chrome, at sidebar width, so
   the Logo-only choice can be made by looking at it rather than by guessing. */
.org-brand-row { display: flex; align-items: flex-start; gap: 18px; margin: 14px 0 18px; }
.org-preview {
  width: 212px;
  flex: 0 0 212px;
  padding: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
}
.org-preview .ws-btn { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }

.org-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 6px; cursor: pointer; }
.org-check input { margin-top: 2px; }
.org-check span { display: flex; flex-direction: column; gap: 2px; }
.org-check .settings-hint { margin: 0; }

/* The account face is an ordinary .person-avatar, one size up. */
.person-avatar.avatar-user { width: 28px; height: 28px; font-size: 11px; }

/* Admin opens inside the menu rather than navigating, so its two entries sit under it. */
.pop-parent { justify-content: space-between; }
.pop-parent .caret { transition: transform 0.15s ease; }
/* .caret is a rotated corner, so flipping it means adding 180 to its own 45 — setting a
   bare rotate(180deg) here would drop the 45 and draw a plain corner instead of a chevron. */
.pop-parent.open .caret { transform: rotate(225deg) translateY(-2px); }
.pop-item.sub { padding-left: 26px; font-size: 13px; color: var(--text-3); }
.users-head, .users-row { display: grid; grid-template-columns: 1.6fr 1.6fr .7fr .8fr 1.2fr 32px; gap: 12px; align-items: center; }
.users-row .list-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.users-row { cursor: pointer; }
.users-row.inactive .list-name { color: var(--muted-2); }
.you-pill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: #3d1cba; font-size: 11px; font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* --- Agent access (MCP) --- */
.mcp-new { margin-bottom: 4px; }
.mcp-reveal {
  margin: 14px 0 4px; padding: 12px 14px;
  border: 1px solid #fcd34d; border-radius: 9px; background: #fffbeb;
  font-size: 13px; color: #78350f;
}
.mcp-reveal .webhook-row { margin: 8px 0 4px; }
.mcp-reveal .settings-hint { color: #92400e; }

.mcp-tokens { margin: 16px 0 22px; }
.mcp-token-head,
.mcp-token-row {
  display: grid; grid-template-columns: 1fr 130px 110px 140px 90px;
  gap: 12px; align-items: center; padding: 10px 12px;
}
.mcp-token-head { font-size: 12.5px; font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--border); }
.mcp-token-row { font-size: 13.5px; border-radius: 8px; }
.mcp-token-row:nth-child(odd) { background: var(--surface-2); }
.mcp-token-row.revoked { color: var(--muted-2); }
.mcp-token-name { font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 8px; }
.mcp-token-row.revoked .mcp-token-name { color: var(--muted-2); }
.mcp-token-name code {
  font-size: 11.5px; color: var(--muted); background: var(--surface-3);
  padding: 2px 6px; border-radius: 5px;
}
.mcp-revoked { font-style: normal; font-size: 12.5px; }
.mcp-revoke {
  font: inherit; font-size: 12.5px; padding: 5px 10px; cursor: pointer;
  border: 1px solid #fecaca; border-radius: 7px; background: #fff5f5; color: #991b1b;
}
.mcp-revoke:hover { background: #fee2e2; }

.mcp-steps { display: grid; gap: 14px; margin: 10px 0 6px; }
.mcp-step-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
/* The snippets are read and copied, never typed into — monospace, and no resize handle
   fighting the layout. */
.mcp-code {
  flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  line-height: 1.55; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface-2); color: var(--text); resize: vertical; white-space: pre;
}
.mcp-step .webhook-row { align-items: flex-start; }

/* --- project combobox (entry dialog) --- */
.fl-combo { position: relative; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 10px 0 12px; background: var(--surface); margin-bottom: 10px; }
.fl-combo:focus-within { border-color: #2f5ad6; box-shadow: 0 0 0 3px rgba(47, 90, 214, .18); }
.fl-combo-input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 14px; padding: 10px 0; background: transparent; min-width: 0; }
.fl-combo .fl-swatch { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 14px; }
.fl-combo-caret { border: 0; background: none; font-size: 14px; color: var(--muted); cursor: pointer; padding: 4px; line-height: 1; }
.fl-combo-menu {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
  max-height: 300px; overflow-y: auto; padding: 6px;
}
.fl-combo-menu[hidden] { display: none; }
.fl-combo-group { font-weight: 700; font-size: 13px; color: var(--text-2); padding: 10px 10px 4px; }
.fl-combo-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: none; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer;
}
.fl-combo-item:hover, .fl-combo-item.active { background: var(--surface-3); }
.fl-combo-item.selected { background: var(--surface-3); }
.fl-combo-dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px; }
.fl-combo-text { display: flex; flex-direction: column; min-width: 0; }
.fl-combo-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-combo-code { font-size: 12px; color: var(--muted-2); }
.fl-combo-plus { width: 22px; text-align: center; font-size: 20px; color: var(--muted); flex: 0 0 22px; }
.fl-combo-add { color: var(--text-2); }
.fl-combo-empty { padding: 12px; color: var(--muted); font-size: 13px; }

/* =============================================================================
   One dialog language. Every <dialog> carries .hv-dialog: the same shell (radius, shadow,
   backdrop, padding), the same title, stacked labels, inputs and the same action row as
   the allocation dialog. Specific dialogs only add layout on top.
   ============================================================================= */
.hv-dialog {
  border: 0;
  border-radius: 14px;
  padding: 26px 28px 22px;
  width: min(560px, calc(100vw - 32px));
  box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .26);
  font-size: 14px;
}
.hv-dialog::backdrop { background: rgba(15, 23, 42, .4); }
.hv-title { margin: 0 0 18px; font-size: 18px; font-weight: 700; color: var(--text); }
.hv-form { display: grid; gap: 14px; padding: 0; }
.hv-form > label, .hv-form fieldset {
  display: grid; gap: 6px; margin: 0;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.hv-form > label .optional { font-weight: 500; color: var(--muted-2); margin-left: 4px; }
.hv-form input:not([type="checkbox"]):not([type="file"]), .hv-form select, .hv-form textarea, .app-dialog-input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--text);
  padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
}
.hv-form input:focus, .hv-form select:focus, .hv-form textarea:focus, .app-dialog-input:focus {
  outline: 2px solid #2f5ad6; outline-offset: -1px; border-color: #2f5ad6;
}
/* Shown for reference but not editable — it has to look that way rather than inviting a
   click that does nothing. Must follow the rule above, which is more specific than a bare
   `.hv-form input:disabled` and would otherwise repaint it white. */
.hv-form input:not([type="checkbox"]):not([type="file"]):disabled {
  background: var(--surface-3); color: var(--muted); cursor: not-allowed;
}
.hv-form fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px 12px; }
.hv-form fieldset legend { padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.hv-form fieldset > div, .hv-form fieldset { display: block; }
.hv-form fieldset label { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-weight: 500; color: var(--text); font-size: 13px; }
.hv-form fieldset input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2f5ad6; }
.hv-hint { font-weight: 400; color: var(--muted); font-size: 12px; }
/* A single on/off setting inside a form of labelled fields: the box sits beside its label
   rather than under it, so it does not read as an empty text input. */
.hv-form > label.hv-check {
  grid-template-columns: 16px 1fr; align-items: start; gap: 10px;
  font-weight: 500; color: var(--text); font-size: 13.5px;
}
.hv-form > label.hv-check input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: #2f5ad6; }
.hv-form > label.hv-check .hv-hint { display: block; margin-top: 3px; }
.hv-form .tag-input { padding: 4px 8px; }
.hv-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.hv-actions-spacer { flex: 1; }
.hv-actions .fl-btn-primary, .hv-actions .fl-btn-secondary, .hv-actions .fl-btn-danger-soft {
  font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
}
.hv-actions .fl-btn-primary { background: #2f4bde; color: #fff; }
.hv-actions .fl-btn-primary:hover { background: #2740c4; }
.hv-actions .fl-btn-secondary { background: var(--surface-3); color: var(--text-2); }
.hv-actions .fl-btn-secondary:hover { background: #e2e8f0; }
.fl-btn-danger-soft { background: #fff5f5; color: #991b1b; border-color: #fecaca !important; }
.fl-btn-danger-soft:hover { background: #fee2e2; }
.person-dialog.hv-dialog { padding: 26px 28px 22px; }
.person-dialog.hv-dialog #personForm { padding: 0; }
.avatar-dialog.hv-dialog { width: 340px; }
.app-dialog.hv-dialog { width: min(440px, calc(100vw - 32px)); }
.app-dialog.hv-dialog h3 { font-size: 18px; margin-bottom: 8px; }
.app-dialog-actions { margin-top: 18px; }
.app-dialog-actions .fl-btn-primary, .app-dialog-actions .fl-btn-secondary { padding: 10px 18px; }
.fl-dialog.hv-dialog { width: 600px; }