/* =========== People management =========== */
.people-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.people-table th {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line);
}
.people-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.people-table tr:hover td { background: var(--bg-soft); }
.people-table .del {
  color: var(--fg-2);
  padding: 4px;
  border-radius: 4px;
}
.people-table .del:hover { color: var(--danger); background: color-mix(in oklab, var(--danger) 6%, var(--bg)); }

.access-seg { display: inline-flex; background: var(--bg-soft); border-radius: var(--radius); padding: 2px; }
.access-seg button {
  padding: 3px 10px; font-size: 13px;
  border-radius: 4px;
  color: var(--fg-2);
  font-weight: 500;
}
.access-seg button.on { background: #fff; color: var(--fg); box-shadow: var(--shadow-1); }
.access-seg button.on.mgr { color: var(--accent); }

/* ── People layout ── */
.people-wrapper { flex: 1; overflow: auto; padding: 24px 32px 40px; }
.people-container { max-width: 1200px; margin: 0 auto; }
.people-section { margin-bottom: 32px; }
.people-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.people-section-title { font-size: 18px; font-weight: 700; color: var(--fg); margin: 0; }
.people-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.people-group-header-row td { padding: 10px 12px; font-size: 12px; font-weight: 700; color: var(--fg-2); background: var(--bg-soft, var(--bg-2)); border-top: 2px solid var(--line); }
.people-empty { padding: 12px; color: var(--fg-3); font-size: 14px; text-align: center; }
.member-name-cell { display: flex; align-items: center; gap: 10px; }
.member-name { font-weight: 500; }
.member-you { color: var(--accent); font-size: 11px; margin-left: 6px; }
.people-role-select { font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--fg-2); cursor: pointer; }
.people-email { font-size: 12px; color: var(--fg-3); }
.people-last-active { font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.td-center { text-align: center; }
.oh-checkbox { accent-color: var(--accent); cursor: pointer; }
.member-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.salary-input { width: 90px; padding: 3px 6px; font-size: 12px; font-family: var(--font-mono); background: var(--bg); border: 1px solid var(--accent); border-radius: 4px; color: var(--fg); outline: none; }
.salary-btn { font-size: 12px; font-family: var(--font-mono); background: transparent; border: 1px dashed var(--line); border-radius: 4px; padding: 2px 7px; cursor: pointer; }
.salary-btn--has { color: var(--fg-2); }
.salary-btn--empty { color: var(--fg-3); }

/* ── Overhead section ── */
.oh-wrapper { padding: 16px 20px 20px; }
.oh-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.oh-desc { font-size: 14px; color: var(--fg-2); margin-bottom: 12px; line-height: 1.5; }
.oh-table thead tr { border-bottom: 1px solid var(--line); }
.oh-col-action { width: 32px; }

/* ── Overhead table ── */
.oh-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.oh-table th { text-align: left; padding: 8px 10px; color: var(--fg); font-weight: 600; font-size: 14px; }
.oh-table th.oh-num { text-align: right; width: 160px; white-space: nowrap; }
.oh-table td { padding: 6px 10px; }
.oh-table tr.oh-row { border-bottom: 1px solid var(--line-soft); }
.oh-table .oh-input {
  width: 100%; font-size: 14px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
}
.oh-table .oh-input-mono {
  width: 100%; font-size: 14px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
  font-family: var(--font-mono); text-align: right;
}
.oh-table .oh-input-new {
  width: 100%; font-size: 14px; padding: 6px 8px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
}
.oh-table .oh-input-new-mono {
  width: 100%; font-size: 14px; padding: 6px 8px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
  font-family: var(--font-mono); text-align: right;
}
.oh-table .oh-static {
  font-size: 14px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); color: var(--fg-2);
}
.oh-table .oh-static-mono {
  font-size: 14px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); color: var(--fg);
  font-family: var(--font-mono); text-align: right;
}
.oh-table .oh-del {
  background: none; border: none; color: var(--fg-2);
  cursor: pointer; font-size: 16px; padding: 0 4px; line-height: 1;
}
.oh-table .oh-del:hover { color: var(--danger); }
.oh-table .oh-add-btn {
  font-size: 14px; padding: 4px 10px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--bg);
  color: var(--accent); cursor: pointer; font-weight: 600;
}
.oh-group-header td { padding: 8px 10px; font-size: 13px; font-weight: 700; color: var(--fg-2); background: var(--bg-soft, var(--bg-2)); border-top: 1px solid var(--line); }
.oh-group-sum-num { font-weight: 600; font-family: var(--font-mono); color: var(--fg-3); font-size: 13px; text-align: right; white-space: nowrap; }
.oh-total { border-top: 2px solid var(--line); }
.oh-total td { padding: 10px 10px; font-size: 14px; font-weight: 600; color: var(--fg); }
.oh-total .mono { font-family: var(--font-mono); text-align: right; font-weight: 700; white-space: nowrap; }
.oh-md td { padding: 6px 10px 10px; font-size: 14px; color: var(--fg-2); }
.oh-md .mono { font-family: var(--font-mono); text-align: right; font-weight: 700; color: var(--accent); white-space: nowrap; }
.oh-preview { font-family: var(--font-mono); font-size: 14px; text-align: right; color: var(--fg-2); }

.banner {
  padding: 10px 14px;
  background: var(--accent-bg);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--fg-2);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.banner b { color: var(--accent); font-weight: 600; }
.banner .ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  flex: none;
  font-size: 13px;
  font-weight: 700;
}

/* ── Day notes ──────────────────────────────────────────── */
.day-note-btn {
  position: absolute;
  top: 4px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition: opacity 120ms, background 120ms, color 120ms;
  padding: 0;
}
.tl-row:hover .day-note-btn { opacity: 0.55; }
.day-note-btn:hover {
  opacity: 1;
  background: var(--bg-hover);
  color: var(--fg);
}
.day-note-btn.has-note {
  opacity: 1;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, var(--bg));
}
.day-note-btn.has-note:hover {
  background: color-mix(in oklab, var(--accent) 18%, var(--bg));
}
.day-note-btn.readonly {
  cursor: default;
}
.day-note-btn.readonly:hover {
  background: transparent;
  color: var(--fg-3);
}
.day-note-btn.readonly.has-note:hover {
  background: color-mix(in oklab, var(--accent) 12%, var(--bg));
  color: var(--accent);
}

.day-note-popover {
  position: fixed;
  z-index: 1000;
  width: 280px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.day-note-popover .dn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--fg-3);
}
.day-note-popover .dn-head .who {
  color: var(--fg);
  font-weight: 500;
}
.day-note-popover .dn-head .day {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--fg-3);
}
.day-note-popover textarea {
  width: 100%;
  min-height: 88px;
  max-height: 200px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--bg-soft);
  resize: vertical;
  outline: none;
}
.day-note-popover textarea:focus {
  border-color: var(--accent);
  background: var(--bg);
}
.day-note-popover textarea:disabled {
  color: var(--fg-2);
  cursor: default;
}
.day-note-popover .dn-foot {
  display: flex;
  align-items: center;
  gap: 6px;
}
.day-note-popover .dn-foot .counter {
  font-size: 10.5px;
  color: var(--fg-3);
  font-family: var(--font-mono);
}
.day-note-popover .dn-foot .spacer { flex: 1; }

.tb-picker {
  position: relative;
}
.tb-picker--draw {
  flex: none;
}
.tb-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.tb-picker--draw .tb-picker-btn {
  min-height: 32px;
  border-color: color-mix(in oklab, var(--accent) 32%, var(--line));
  background: var(--bg);
  box-shadow: 0 4px 12px rgba(20, 32, 52, .08);
}
.tb-picker--draw .tb-picker-btn:hover {
  border-color: var(--accent);
}
.tb-picker-btn:hover {
  background: var(--bg-hover);
  border-color: var(--line-strong);
}
.tb-picker-btn .swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.tb-picker-btn .label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.tb-picker-btn .chev {
  color: var(--fg-3);
  margin-left: 2px;
}
.tb-picker-btn .hint {
  font-size: 11.5px;
  color: var(--fg-3);
  font-weight: 400;
  margin-right: 2px;
}
.tb-picker--draw .tb-picker-btn .hint {
  color: var(--accent);
  font-weight: 700;
}
.tb-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 300px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.tb-picker-menu--floating {
  position: fixed;
  top: var(--tb-picker-top, auto);
  left: var(--tb-picker-left, auto);
  z-index: 1000;
  min-width: 0;
}
.tb-picker-filters {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.tb-picker-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 4px;
  height: 26px;
  color: var(--fg-3);
}
.tb-picker-search:focus-within { border-color: var(--accent); }
.tb-picker-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 11.5px;
  color: var(--fg);
  padding: 0;
  min-width: 0;
}
.tb-picker-search input::placeholder { color: var(--fg-3); }
.tb-picker-grp-select {
  flex: none;
  font-size: 11.5px;
  padding: 3px 20px 3px 7px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg-2);
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.tb-picker-grp-select:hover { color: var(--fg); }
.tb-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
.tb-picker-list::-webkit-scrollbar { width: 4px; }
.tb-picker-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
.tb-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 14px;
  color: var(--fg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.tb-picker-item:hover { background: var(--bg-hover); }
.tb-picker-item.on {
  background: color-mix(in oklab, var(--accent) 8%, var(--bg));
  color: var(--fg);
}
.tb-picker-item .swatch {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
}
.tb-picker-item .code {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-3);
}

.tb-member-picker-btn.active {
  border-color: color-mix(in oklab, var(--accent) 34%, var(--line));
  background: color-mix(in oklab, var(--accent) 7%, var(--bg));
}
.tb-member-picker-btn .label {
  max-width: 72px;
}
.tb-member-picker-clear {
  flex: none;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg-2);
  font-size: 11.5px;
  cursor: pointer;
}
.tb-member-picker-clear:hover {
  border-color: var(--line-strong);
  color: var(--fg);
  background: var(--bg-hover);
}
.tb-member-picker-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  color: var(--fg);
  cursor: pointer;
  text-align: left;
}
.tb-member-role-group + .tb-member-role-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.tb-member-role-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  background: var(--bg-soft);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.tb-member-role-head:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.tb-member-role-head.on {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 9%, var(--bg));
}
.tb-member-role-head.partial {
  color: var(--warn);
  background: color-mix(in oklab, var(--warn) 8%, var(--bg));
}
.tb-member-role-head em {
  font-style: normal;
  font-weight: 600;
  color: var(--fg-3);
  font-size: 11px;
}
.tb-member-picker-item:hover {
  background: var(--bg-hover);
}
.tb-member-picker-item.on {
  background: color-mix(in oklab, var(--accent) 7%, var(--bg));
}
.tb-member-check {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--accent);
  background: var(--bg);
}
.tb-member-picker-item.on .tb-member-check {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
}
.tb-member-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}
.tb-member-role {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-3);
  font-size: 11.5px;
}

/* Projects filter row — status chips + secondary filters */
.proj-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  min-height: 38px;
}
.proj-filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-3);
  cursor: pointer;
  white-space: nowrap;
}
.proj-filter-check input { cursor: pointer; }

/* Projects financial summary — fixed columns so every section aligns */
.proj-summary-scroll {
  flex: 1;
  overflow: auto;
  padding: 16px 10px 24px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.proj-summary-grid-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Tab bar */
.proj-tabs-bar {
  display: flex;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow-x: auto;
  flex: none;
}
.proj-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3);
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.proj-tab:hover { color: var(--fg); }
.proj-tab--active {
  color: var(--fg);
  font-weight: 600;
  border-bottom-color: var(--accent, oklch(0.65 0.20 250));
}
.proj-tab-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 0 5px;
  min-width: 18px;
  text-align: center;
}
.proj-tab--active .proj-tab-count {
  background: var(--accent, oklch(0.65 0.20 250));
  color: #fff;
}

/* Inline editable cells — read as plain text; reveal field only on hover */
.proj-editable {
  display: inline-flex;
  align-items: center;
  cursor: text;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  padding: 2px 6px;
  min-height: 24px;
  min-width: 36px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.proj-editable:hover {
  border-color: var(--line);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 12%, transparent);
}
.proj-editable:hover::after {
  content: "";
  width: 11px; height: 11px; margin-left: 5px;
  background: currentColor;
  opacity: .35;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>") center/contain no-repeat;
}
.proj-cell--num .proj-editable { justify-content: flex-end; }
.proj-inline-input {
  width: 100%;
  max-width: 110px;
  padding: 2px 6px;
  min-height: 24px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--accent, oklch(0.65 0.20 250));
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  outline: none;
  text-align: right;
  box-shadow: 0 0 0 2px oklch(0.65 0.20 250 / 0.18);
}
.proj-inline-select {
  width: 100%;
  max-width: 180px;
  padding: 2px 6px;
  min-height: 24px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--accent, oklch(0.65 0.20 250));
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  outline: none;
  box-shadow: 0 0 0 2px oklch(0.65 0.20 250 / 0.18);
}

.proj-summary-section {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
}
/* Status group — flat list (ClickUp-style): bold solid header pill, no card chrome */
.proj-status-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.proj-summary-section-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  color: var(--fg);
}
.proj-status-card > .proj-summary-section-head {
  padding: 4px 2px 8px;
  background: transparent;
  border-bottom: none;
}
/* Solid colour-filled status pill with white text */
.proj-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--status-color, var(--fg-2)) 64%, #000);
}
.proj-status-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  flex: none;
}
.proj-status-card .proj-section-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  text-transform: uppercase;
}
.proj-status-card .proj-section-count {
  background: transparent;
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
.proj-status-card .proj-section-count::before { content: ""; }
.proj-status-card .proj-section-sum {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.proj-section-chevron {
  font-size: 12px;
  color: var(--fg-3);
  width: 14px;
  flex: none;
}
.proj-section-count {
  font-weight: 600;
  color: var(--fg-3);
  font-size: 11px;
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 1px 7px;
}
.proj-summary-grand-title {
  padding: 8px 6px;
  border-bottom: none;
  font-weight: 700;
  font-size: 12px;
  color: var(--fg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.proj-summary-empty {
  padding: 24px;
  color: var(--fg-3);
  font-size: 14px;
  text-align: center;
}
.proj-summary-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.proj-summary-table--all {
  min-width: 1420px;
}
.proj-summary-table col.proj-col-name {
  width: auto;
}
.proj-summary-table--all col.proj-col-name {
  width: 280px;
}
.proj-summary-table col.proj-col-pm {
  width: 7%;
}
.proj-summary-table col.proj-col-num {
  width: 9.5%;
}
.proj-summary-head-row th {
  padding: 6px 12px 8px;
  vertical-align: middle;
  line-height: 1.2;
  font-weight: 500;
  color: var(--fg-3);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  border-bottom: 1px solid var(--line-soft, var(--line));
}
.proj-th-stack {
  display: block;
  line-height: 1.2;
}
.proj-th-sub {
  display: block;
  font-weight: 500;
  opacity: 0.88;
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.15;
}
.proj-cell {
  padding: 6px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line-soft, var(--line));
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.35;
}
/* Airy, flat rows with full-width hairline dividers (ClickUp-style) */
.proj-status-card .proj-summary-body-row { transition: background .12s ease; }
.proj-status-card .proj-summary-body-row:hover > .proj-cell {
  background: var(--bg-soft);
}
.proj-status-card .proj-subtotal .proj-cell {
  background: transparent;
  border-bottom: none;
  border-top: 1px solid var(--line);
  padding-top: 7px; padding-bottom: 7px;
  font-weight: 700;
  color: var(--fg-2);
}
/* Grand total — flat block, just an emphasised top rule */
.proj-summary-section--grand {
  background: transparent;
  border: none;
  border-top: 2px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  margin-top: 4px;
}
.proj-summary-section--grand > .proj-summary-grand-title {
  padding: 12px 4px 8px;
  background: transparent;
  border-bottom: none;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg-2);
}
.proj-summary-section--grand .proj-grand-total .proj-cell {
  border-bottom: none;
  font-size: 14px;
}
.proj-cell--name {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-name-text {
  font-weight: 500;
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-name-hover {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-name-tip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  background: var(--bg-2, #222);
  color: var(--fg-1, #eee);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  pointer-events: none;
}
.proj-name-hover:hover .proj-name-tip {
  display: block;
}
.proj-cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.proj-cell--pm {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.proj-pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  overflow: hidden;
}
.proj-pm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.proj-pm-name {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-pm-empty {
  color: var(--fg-3);
  font-size: 14px;
}
.cell-pm-select {
  min-width: 130px;
  max-width: 160px;
}

/* ── PM inline display in project detail ── */
.proj-pm-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--accent) 7%, var(--bg-soft));
  border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--line));
}
.proj-pm-inline--editable {
  padding: 5px 8px;
}
.proj-pm-inline--editable .pm-select-wrap {
  max-width: 100%;
}
.proj-pm-inline--editable .pm-select-trigger {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
}
.proj-pm-inline--editable .pm-select-trigger:hover:not(:disabled),
.proj-pm-inline--editable .pm-select-trigger--open {
  background: var(--bg);
  border-color: var(--accent);
  padding-left: 6px;
}
.proj-pm-inline-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  flex: none;
  min-width: 20px;
}
.proj-pm-inline-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
}
.proj-pm-inline-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── PM filter toggle in project bottom section ── */
.proj-pm-filter-seg {
  display: flex;
  gap: 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  flex: none;
}
.proj-pm-filter-btn {
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-soft);
  color: var(--fg-2);
  border: none;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.proj-pm-filter-btn + .proj-pm-filter-btn {
  border-left: 1px solid var(--line);
}
.proj-pm-filter-btn:hover {
  background: var(--bg);
  color: var(--fg);
}
.proj-pm-filter-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ── Projects modal search bar ── */
.projects-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.projects-search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.projects-search-icon {
  position: absolute;
  left: 10px;
  color: var(--fg-3);
  pointer-events: none;
  flex: none;
}
.projects-search-input {
  width: 100%;
  padding: 8px 32px 8px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--fg);
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.projects-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
  background: var(--bg);
}
.projects-search-input::placeholder {
  color: var(--fg-3);
}
.projects-search-clear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--fg-3);
  color: var(--bg);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.1s;
}
.projects-search-clear:hover { opacity: 1; }
.projects-search-result-count {
  white-space: nowrap;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  flex: none;
}

/* ── PmSearchSelect custom dropdown ── */
.pm-select-wrap {
  display: inline-block;
  width: 100%;
  max-width: 240px;
}
.pm-select-wrap--compact {
  max-width: 150px;
}
.pm-select-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s;
  min-height: 32px;
  overflow: hidden;
}
.pm-select-wrap--compact .pm-select-trigger {
  padding: 4px 6px;
  font-size: 13px;
  min-height: 28px;
}
.pm-select-trigger:hover:not(:disabled) {
  border-color: var(--accent);
}
.pm-select-trigger--open {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
}
.pm-select-trigger--empty .pm-sel-placeholder {
  color: var(--fg-3);
}
.pm-select-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pm-sel-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.pm-select-wrap--compact .pm-sel-avatar {
  width: 18px;
  height: 18px;
  font-size: 8px;
}
.pm-sel-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.pm-sel-placeholder {
  flex: 1;
  font-style: italic;
  font-size: 13px;
}
.pm-sel-chevron {
  flex: none;
  font-size: 12px;
  color: var(--fg-3);
  margin-left: 2px;
}
.pm-select-dropdown {
  /* position & coords injected inline via JS portal */
  z-index: 99999;
  min-width: 210px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  overflow: hidden;
}
.pm-select-search-wrap {
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--line);
}
.pm-select-search {
  width: 100%;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--fg);
  font-size: 13px;
  outline: none;
}
.pm-select-search:focus {
  border-color: var(--accent);
}
.pm-select-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}
.pm-select-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--fg);
  text-align: left;
  transition: background 0.08s;
}
.pm-select-opt:hover {
  background: var(--bg-soft);
}
.pm-select-opt--active {
  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
  font-weight: 600;
}
.pm-select-opt--none {
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.pm-sel-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--accent) 15%, var(--bg-soft));
  color: var(--accent);
  letter-spacing: 0.05em;
  flex: none;
}
.proj-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.proj-dot-status-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.proj-dot--clickable {
  cursor: pointer;
  transition: transform 0.15s;
  margin-right: 0;
}
.proj-dot--clickable:hover {
  transform: scale(1.8);
}
/* The name cell + its inner hover wrap clip with overflow:hidden (for name
   ellipsis). While the status dropdown is open, release that clipping on just
   those two ancestors so the absolutely-positioned dropdown isn't cut off. */
.proj-cell--name:has(.proj-status-dropdown),
.proj-name-hover:has(.proj-status-dropdown) {
  overflow: visible;
}
.proj-status-dropdown {
  position: absolute;
  top: 100%;
  left: -4px;
  z-index: 100;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  font-size: 12px;
  padding: 2px;
  min-width: 180px;
  outline: none;
}
.proj-status-dropdown option {
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.proj-status-dropdown option:hover,
.proj-status-dropdown option:checked {
  background: var(--accent-bg, #e8f0fe);
}
.proj-code {
  color: var(--fg-3);
  font-size: 11px;
  margin-right: 4px;
}
.proj-archived-tag {
  margin-left: 8px;
  font-size: 12px;
  color: var(--fg-3);
}
.proj-name-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.proj-name-line {
  display: block;
  line-height: 1.25;
  font-size: 13px;
}
.proj-pipeline-status {
  font-size: 11px;
  color: var(--fg-3);
  padding-left: 16px;
  line-height: 1.2;
}
.proj-pipeline-caps {
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 9px;
  color: var(--fg-3);
}
.proj-withhold {
  color: var(--danger, #e5484d);
}
.proj-withhold-sign {
  margin-right: 1px;
}
.proj-received {
  font-weight: 700;
  color: var(--ok, #3bb273);
}
.proj-profit-cell {
  text-align: right;
  min-width: 0;
}
.proj-profit-main {
  line-height: 1.25;
}
/* ── Profit % bar column ── */
.proj-col-date { width: 7%; }
.proj-col-progress { width: 7%; }
.proj-cell--progress { text-align: center; }
.proj-progress-wrap { display: inline-flex; align-items: center; gap: 3px; }
.proj-search-input { padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); width: 200px; outline: none; }
.proj-search-input:focus { border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent, #3b82f6) 20%, transparent); }
.proj-status-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.proj-status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--fg-2); cursor: pointer; white-space: nowrap; transition: all .15s; }
.proj-status-chip:hover { border-color: var(--accent, #3b82f6); color: var(--fg); }
.proj-status-chip--active { background: var(--accent, #3b82f6); color: #fff; border-color: var(--accent, #3b82f6); }
.proj-status-chip--clear { padding: 3px 6px; color: var(--fg-3); }
.proj-chip-count { opacity: .6; font-size: 10px; }
.proj-cell--date { font-size: 12px; color: var(--fg-2); }
.proj-date-range-wrap { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.proj-date-line { white-space: nowrap; }
.proj-dur-line { display: flex; gap: 3px; flex-wrap: wrap; }
.proj-date-range { font-variant-numeric: tabular-nums; }
.proj-date-part { font-variant-numeric: tabular-nums; cursor: pointer; }
.proj-date-part:hover { text-decoration: underline; }
.proj-date-sep { margin: 0 2px; color: var(--fg-3); }
.proj-col-pct { width: 10%; }
.proj-name-link { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; overflow: hidden; vertical-align: middle; }
.proj-name-link:hover .proj-name-text { text-decoration: underline; }
.proj-name-edit-icon { opacity: 0; cursor: pointer; margin-left: 4px; font-size: 12px; color: var(--fg-3); }
.proj-name-link:hover .proj-name-edit-icon { opacity: 1; }
.proj-name-edit-icon:hover { color: var(--accent, #3b82f6); }
.proj-sort-header { cursor: pointer; user-select: none; }
.proj-sort-header:hover { color: var(--accent, #3b82f6); }
.proj-date-popover {
  position: fixed; z-index: 9999;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.12);
  display: flex; flex-direction: column; gap: 4px; min-width: 180px;
}
.proj-date-popover-label { font-size: 11px; color: var(--fg-3); font-weight: 500; }
.proj-date-hint { font-weight: 400; opacity: .6; }
.proj-date-popover-input { font-size: 13px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg); width: 100%; box-sizing: border-box; }
.proj-date-dur-row { display: flex; gap: 4px; }
.proj-date-dur-row .proj-date-popover-input { flex: 1; }
.proj-date-dur-btn { font-size: 11px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-2, #f5f5f5); cursor: pointer; white-space: nowrap; }
.proj-date-dur-btn:hover { background: var(--accent-bg, #e8f0fe); }
.proj-date-save-btn { margin-top: 4px; font-size: 12px; padding: 5px; border: none; border-radius: 4px; background: var(--accent, #3b82f6); color: #fff; cursor: pointer; font-weight: 500; }
.proj-date-save-btn:hover { opacity: .9; }
.proj-progress-wrap { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.proj-progress-bar-track { height: 4px; border-radius: 2px; background: #e5e7eb; overflow: hidden; }
.proj-progress-bar-fill { display: block; height: 100%; border-radius: 2px; }
.proj-progress-label { font-size: 11px; font-weight: 600; }
.proj-dur-remaining { font-size: 10px; font-weight: 500; white-space: nowrap; }
.proj-dur-remaining.proj-dur-upcoming { color: #999; }
.proj-dur-remaining.proj-dur-active { color: #1e7e34; }
.proj-dur-remaining.proj-dur-past { color: #d32f2f; }
.proj-pm-subgroup { margin-left: 12px; }
.proj-pm-subgroup-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; color: var(--fg-2); font-weight: 500; }
.proj-cell--pct { padding: 4px 8px !important; }
.proj-pct-bar-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.proj-pct-bar-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--line, #e5e5e5);
  border-radius: 3px;
  overflow: hidden;
}
.proj-pct-bar-zero {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--fg-3, #999);
  opacity: 0.4;
}
.proj-pct-bar-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
}
.proj-pct-bar-fill.pos {
  background: var(--ok, #3bb273);
}
.proj-pct-bar-fill.neg {
  background: var(--danger, #e5484d);
}
.proj-pct-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.proj-pct-bar-cell.pos .proj-pct-label {
  color: color-mix(in oklab, var(--ok, #3bb273) 85%, var(--fg));
}
.proj-pct-bar-cell.neg .proj-pct-label {
  color: color-mix(in oklab, var(--danger, #e5484d) 85%, var(--fg));
}
/* Diff badge between expected vs actual */
.proj-diff-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 16px;
}
.proj-diff-badge.good {
  color: var(--ok, #3bb273);
  background: color-mix(in oklab, var(--ok, #3bb273) 12%, transparent);
}
.proj-diff-badge.bad {
  color: var(--danger, #e5484d);
  background: color-mix(in oklab, var(--danger, #e5484d) 12%, transparent);
}
/* Checkbox column & bulk actions */
.proj-summary-table col.proj-col-chk { width: 16px; }
.proj-cell--chk { text-align: center; padding: 0 !important; white-space: nowrap; width: 16px; max-width: 16px; min-width: 16px; box-sizing: border-box; overflow: hidden; }
.proj-cell--chk input[type="checkbox"] { opacity: 0; cursor: pointer; margin: 0; }
tr:hover .proj-cell--chk input[type="checkbox"],
.proj-row-selected .proj-cell--chk input[type="checkbox"],
th.proj-cell--chk input[type="checkbox"] { opacity: 1; }
.proj-row-selected { background: color-mix(in oklab, var(--accent, #3b82f6) 8%, var(--bg)) !important; }
.proj-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--accent-bg, #e8f0fe);
  border-radius: var(--radius);
  margin: 0 8px;
  font-size: 13px;
}
.proj-bulk-count { font-weight: 600; white-space: nowrap; }
.proj-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proj-bulk-group { display: flex; align-items: center; gap: 4px; }
.proj-bulk-label { color: var(--fg-2); font-size: 12px; }
.proj-bulk-select {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
}
.proj-bulk-btn {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}
.proj-bulk-btn:hover { background: var(--bg-2); }
.proj-bulk-btn--archive { color: var(--danger, #e5484d); border-color: var(--danger, #e5484d); }
.proj-bulk-btn--archive:hover { background: color-mix(in oklab, var(--danger, #e5484d) 10%, var(--bg)); }
.proj-profit-neg {
  color: var(--danger, #e5484d);
  font-weight: 600;
}
.proj-profit-pos {
  color: var(--ok, #3bb273);
  font-weight: 600;
}
.proj-subtotal .proj-cell {
  font-weight: 600;
  background: transparent;
  border-bottom: 2px solid var(--line);
}
.proj-grand-total .proj-cell {
  font-weight: 700;
  background: transparent;
  border-bottom: 2px solid var(--line);
}
.proj-loss-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--danger, #e5484d) 18%, var(--bg));
  color: var(--danger, #e5484d);
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────
   Tasks module styles (tasks.jsx, devperf.jsx)
   ───────────────────────────────────────────────────────── */

/* Modal scaffold */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.modal {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  width: 100%; max-width: 640px;
  max-height: 90vh;
  overflow: auto;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: var(--bg-soft);
  z-index: 1;
}
.modal-head h2 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.modal-body { padding: 18px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.x-btn {
  background: transparent; border: none; color: var(--fg-3);
  font-size: 22px; cursor: pointer; padding: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
}
.x-btn:hover { background: var(--bg); color: var(--fg); }
.field {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px;
}
.field > span:first-child { font-size: 13px; color: var(--fg-2); font-weight: 500; }
.field input, .field select, .field textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 10px;
  color: var(--fg);
  font-family: inherit; font-size: 14px;
}
.field textarea { resize: vertical; min-height: 60px; }
.field-help { font-size: 14px; color: var(--fg-3); margin-top: 4px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.btn {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  padding: 7px 14px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--line); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.danger {
  background: color-mix(in oklab, oklch(0.65 0.18 25) 15%, transparent);
  color: oklch(0.65 0.18 25);
  border-color: oklch(0.65 0.18 25);
}
.link-btn {
  background: transparent; border: none;
  color: var(--accent); cursor: pointer; font-size: 13px;
  text-decoration: underline; padding: 0;
}

/* Status badges + rating badges */
.status-badge {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.status-badge.lg { font-size: 13px; padding: 4px 10px; }
.rating-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
  cursor: pointer;
  background: transparent;
}
.rating-badge:disabled { cursor: default; }
.rate-btn {
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px dashed var(--fg-3);
  color: var(--fg-3);
  background: transparent;
  cursor: pointer;
}
.rate-btn:hover { border-color: var(--accent); color: var(--accent); }
.priority-icon { font-weight: 700; font-size: 13px; }

/* Status picker */
.status-picker { position: relative; display: inline-block; }
.status-picker-trigger {
  background: transparent; border: none;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; padding: 0;
}
.status-picker-trigger .caret { font-size: 12px; color: var(--fg-3); }
.status-picker-trigger:disabled { cursor: default; opacity: 0.7; }
.status-menu {
  position: absolute; z-index: 10;
  top: 100%; left: 0; margin-top: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  min-width: 160px;
  padding: 4px;
}
.status-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 6px 10px; font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  border-radius: 4px;
}
.status-menu-item:hover { background: var(--bg); }
.status-menu-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* Task card */
.task-card {
  background: var(--bg-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--line));
  border-radius: var(--radius-sm, 8px);
  padding: 10px 12px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  display: flex; flex-direction: column; gap: 6px;
}
.task-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.task-card-head { display: flex; align-items: flex-start; gap: 8px; }
.task-title { flex: 1; font-size: 13px; font-weight: 500; color: var(--fg); line-height: 1.3; }
.task-card-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3); flex-wrap: wrap; }
.task-card-meta.sub { font-size: 10.5px; }
.task-proj { font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.task-due { color: var(--fg-2); }
.task-due.overdue { color: oklch(0.65 0.18 25); font-weight: 600; }
.task-complexity { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.task-bugs { color: oklch(0.65 0.18 25); font-weight: 600; }
.task-att { color: var(--fg-2); }
.task-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 6px;
  border-top: 1px solid var(--line);
}

/* My Tasks view */
.my-tasks-view {
  padding: 24px;
  overflow-y: auto;
}
.my-tasks-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
}
.my-tasks-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.count-pill {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  min-width: 70px;
}
.count-pill:hover:not(:disabled) { border-color: var(--accent); }
.count-pill:disabled { opacity: 0.4; cursor: default; }
.count-pill.warn { border-color: oklch(0.72 0.14 80); }
.count-pill.bug  { border-color: oklch(0.65 0.18 25); }
.count-num { font-size: 22px; font-weight: 700; color: var(--fg); line-height: 1; }
.count-lbl { font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.report-bug-btn {
  background: color-mix(in oklab, oklch(0.65 0.18 25) 12%, transparent);
  color: oklch(0.65 0.18 25);
  border-color: oklch(0.65 0.18 25);
}
.task-sections { display: flex; flex-direction: column; gap: 24px; }
.task-section { }
.task-section-head {
  font-size: 14px; font-weight: 600; color: var(--fg);
  margin: 0 0 10px 0;
  display: flex; align-items: center; gap: 8px;
}
.task-section-head .count {
  font-size: 13px; color: var(--fg-3); font-weight: 400;
  background: var(--bg-soft); padding: 1px 7px; border-radius: 999px;
}
.task-section-empty {
  padding: 16px; color: var(--fg-3); font-size: 14px;
  background: var(--bg-soft); border-radius: 8px;
}
.task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.my-tasks-loading { padding: 60px; text-align: center; color: var(--fg-3); }

/* My Stats */
.my-stats-section {
  margin-top: 32px; padding: 20px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
}
.my-stats-section h2 {
  margin: 0 0 16px 0; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.period-hint { font-size: 14px; color: var(--fg-3); font-weight: 400; }
.stats-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.kpi {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px;
}
.kpi-label { font-size: 13px; color: var(--fg-3); margin-bottom: 4px; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--fg); line-height: 1.1; }
.kpi-value.good { color: oklch(0.70 0.16 155); }
.kpi-value.warn { color: oklch(0.72 0.14 80); }
.kpi-value.bad  { color: oklch(0.65 0.18 25); }
.kpi-sub { font-size: 13px; color: var(--fg-3); margin-top: 4px; }

/* Distribution bar */
.distribution { margin-top: 12px; }
.dist-bar-wrap { display: flex; flex-direction: column; gap: 8px; }
.dist-bar {
  height: 22px; border-radius: 999px; overflow: hidden;
  display: flex; background: var(--bg);
  border: 1px solid var(--line);
}
.dist-seg { height: 100%; }
.dist-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--fg-2); }
.dist-legend-item { display: flex; align-items: center; gap: 5px; }
.dist-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Recent ratings */
.recent-ratings { margin-top: 16px; }
.recent-ratings h3 { font-size: 13px; font-weight: 600; color: var(--fg-2); margin: 0 0 8px 0; }
.recent-rating-row {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 6px;
  cursor: pointer;
}
.recent-rating-row:hover { border-color: var(--accent); }
.recent-rating-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recent-rating-title { flex: 1; font-size: 13px; }
.recent-rating-note { font-size: 14px; color: var(--fg-2); margin-top: 6px; font-style: italic; }
.proj-pill {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px; border: 1px solid;
}

/* Rating popover */
.rating-popover {
  position: absolute; z-index: 50;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 10px;
  width: 280px; padding: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.rating-popover-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
}
.rating-popover-head > span:first-child { flex: 1; }
.rating-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rating-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  border: 1px solid;
  cursor: pointer; font-size: 13px;
  text-align: left;
}
.rating-btn:disabled { opacity: 0.5; cursor: wait; }
.rating-btn.active { box-shadow: 0 0 0 2px var(--bg); outline: 2px solid currentColor; }
.rating-icon { font-size: 16px; width: 20px; text-align: center; }
.rating-lbl { flex: 1; }
.rating-key {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background: var(--bg); padding: 2px 6px; border-radius: 3px;
  color: var(--fg-3);
}
.rating-note textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 6px 8px;
  font-family: inherit; font-size: 14px; color: var(--fg);
  resize: vertical;
}
.rating-note-help { font-size: 14px; color: var(--fg-3); margin-top: 4px; }
.rating-popover-anchor { position: relative; }

/* Attachment picker */
.att-picker { display: flex; flex-direction: column; gap: 8px; }
.att-dropzone {
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 12px; text-align: center;
  font-size: 13px; color: var(--fg-3);
  cursor: pointer;
  transition: border-color 0.1s;
}
.att-dropzone:hover { border-color: var(--accent); color: var(--accent); }
.att-dropzone.uploading { border-color: var(--accent); color: var(--accent); }
.att-dropzone.disabled { cursor: not-allowed; opacity: 0.5; }
.att-list { display: flex; flex-wrap: wrap; gap: 8px; }
.att-list.inline { margin-top: 6px; }
.att-item { position: relative; display: inline-flex; align-items: center; }
.att-thumb { display: inline-block; }
.att-thumb img {
  display: block; max-width: 120px; max-height: 80px;
  border-radius: 4px; border: 1px solid var(--line);
}
.att-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 10px; font-size: 13px;
}
.att-pill a { color: var(--fg); text-decoration: none; }
.att-pill a:hover { color: var(--accent); }
.att-size { font-size: 12px; color: var(--fg-3); }
.att-remove {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--fg-3); cursor: pointer;
  font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.att-remove:hover { background: oklch(0.65 0.18 25); color: white; border-color: transparent; }

/* Task detail modal — wider */
.task-detail-modal { max-width: 760px; }
.task-detail-head-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.bugs-pill {
  font-size: 13px; color: oklch(0.65 0.18 25);
  background: color-mix(in oklab, oklch(0.65 0.18 25) 15%, transparent);
  padding: 2px 6px; border-radius: 4px;
}
.task-detail-body { display: flex; flex-direction: column; gap: 16px; }
.task-detail-title { font-size: 18px; font-weight: 600; margin: 0; }
.title-input {
  font-size: 18px; font-weight: 600; padding: 8px 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg); font-family: inherit;
}
.task-detail-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--fg-2); }
.task-detail-desc {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 12px 14px;
  white-space: pre-wrap; font-size: 14px; line-height: 1.5;
}
.rating-section, .att-section {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 12px 14px;
  position: relative;
}
.rating-section strong, .att-section strong { font-size: 13px; color: var(--fg-2); margin-right: 8px; }
.rating-note-display {
  margin-top: 8px; font-style: italic; color: var(--fg-2); font-size: 14px;
}
.action-row { display: flex; gap: 8px; align-items: center; }

/* Comments */
.comments-section { margin-top: 8px; }
.comments-section h3 { font-size: 13px; font-weight: 600; margin: 0 0 12px 0; }
.comments-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; max-height: 320px; overflow-y: auto; }
.comment-row { display: flex; gap: 10px; }
.comment-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: white; flex: 0 0 auto;
}
.comment-body { flex: 1; }
.comment-meta { font-size: 13px; color: var(--fg-3); margin-bottom: 4px; }
.comment-meta strong { color: var(--fg); font-weight: 600; margin-right: 6px; }
.comment-meta em { font-style: normal; }
.comment-time { margin-left: 8px; }
.comment-text { font-size: 14px; line-height: 1.4; white-space: pre-wrap; }
.comment-row.kind-status_change { opacity: 0.7; }
.comment-row.kind-status_change .comment-text { color: var(--fg-3); font-size: 13px; }
.comment-row.kind-rating .comment-meta em::before { content: '★ '; color: oklch(0.70 0.16 155); }
.comment-composer {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px;
}
.comment-composer textarea {
  width: 100%; box-sizing: border-box;
  background: transparent; border: none; outline: none;
  font-family: inherit; font-size: 14px; color: var(--fg);
  resize: vertical; min-height: 50px;
  margin-bottom: 6px;
}

/* Task board */
.taskboard-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: stretch; justify-content: stretch;
}
.taskboard {
  width: 100%; height: 100%;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.taskboard-head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.taskboard-head h2 {
  margin: 0; font-size: 15px; font-weight: 600; flex: 1;
  display: flex; align-items: center; gap: 10px;
}
.taskboard-filters { display: flex; gap: 8px; }
.taskboard-filters select, .taskboard-filters input {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 8px; font-size: 13px; color: var(--fg);
}
.taskboard-cols {
  flex: 1; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; padding: 12px; overflow: auto;
}
.tb-col {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px;
  display: flex; flex-direction: column; min-height: 200px;
}
.tb-col-bug { border-color: oklch(0.65 0.18 25); }
.tb-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.tb-col-title { font-size: 13px; font-weight: 600; }
.tb-col-count { font-size: 13px; color: var(--fg-3); }
.tb-quickadd {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.tb-quickadd input, .tb-quickadd select {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 8px; font-size: 13px; color: var(--fg);
}
.tb-col-body {
  flex: 1; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.tb-card-wrap { position: relative; }
.tb-hidden-hint {
  text-align: center; font-size: 13px; color: var(--fg-3);
  padding: 8px; cursor: pointer;
}

/* ── Projects: stage modes (tabs + KPI summary) ───────────────────────── */
.proj-stage-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px 0;
}
.proj-stage-tab {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  min-width: 124px; padding: 8px 16px;
  border: 1px solid var(--line-soft, var(--line)); border-radius: 12px;
  background: var(--bg); color: var(--fg-2);
  cursor: pointer;
  transition: box-shadow .15s ease, background .15s, border-color .15s, color .15s;
}
.proj-stage-tab:hover {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
  background: var(--bg-soft); color: var(--fg);
}
.proj-stage-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.proj-stage-tab.active {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 90%, white), var(--accent));
  border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 16px -7px color-mix(in oklab, var(--accent) 65%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .18);
}
.proj-stage-tab-label { font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
.proj-stage-tab-meta { font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.proj-stage-tab:hover .proj-stage-tab-meta { color: var(--fg-2); }
.proj-stage-tab.active .proj-stage-tab-meta { color: rgba(255, 255, 255, .88); }
.proj-stage-tab--muted { min-width: auto; opacity: .9; justify-content: center; }
.proj-stage-tab--muted .proj-stage-tab-label { color: var(--fg-3); font-weight: 600; }
.proj-stage-tab--muted.active {
  background: var(--fg-2); border-color: var(--fg-2); color: #fff;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .4);
}
.proj-stage-tab--muted.active .proj-stage-tab-label { color: #fff; }

.proj-stage-summary {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--line-soft, var(--line));
}
.proj-kpi { display: inline-flex; align-items: baseline; gap: 8px; }
.proj-kpi-val { font-size: 21px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.proj-kpi-label { font-size: 10.5px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
/* Alert / status KPIs as pills */
.proj-kpi--alert, .proj-kpi--warn, .proj-kpi--ok {
  align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px;
}
.proj-kpi--alert { background: color-mix(in oklab, #ef4444 13%, var(--bg)); }
.proj-kpi--alert .proj-kpi-val { font-size: 15px; color: #dc2626; }
.proj-kpi--alert .proj-kpi-label { color: #dc2626; }
.proj-kpi--warn { background: color-mix(in oklab, #f59e0b 16%, var(--bg)); }
.proj-kpi--warn .proj-kpi-val { font-size: 15px; color: #b45309; }
.proj-kpi--warn .proj-kpi-label { color: #b45309; }
.proj-kpi--ok { background: color-mix(in oklab, #22c55e 15%, var(--bg)); }
.proj-kpi--ok .proj-kpi-val { font-size: 13px; color: #15803d; }
.proj-kpi--ok .proj-kpi-label { color: #15803d; }

.proj-section-sum {
  margin-left: 10px; font-size: 12px; font-weight: 500;
  color: var(--fg-3); font-variant-numeric: tabular-nums;
}
.proj-na { color: var(--fg-3); }

/* Bigger, clearer per-row status dot with a soft colour halo (ClickUp-style) */
.proj-status-card .proj-dot--clickable {
  width: 10px; height: 10px; margin-left: 2px; margin-right: 2px;
}
.proj-status-pill > svg { display: block; flex: none; }

/* ── Polish pass: calm the noisy detail elements ─────────────────────── */
.proj-summary-scroll {
  padding: 14px 20px 32px;
  background: var(--bg);
}
.proj-summary-grid-wrap { gap: 26px; }

/* Planning badge in the table: quiet by default, subtle green when done */
.proj-status-card .proj-planning-badge {
  font-size: 10px; font-weight: 600; padding: 2px 7px; margin-left: 8px;
}
.proj-status-card .proj-planning-badge.is-incomplete {
  color: var(--fg-3);
  border-color: var(--line-soft, var(--line));
  background: var(--bg-soft);
}
.proj-status-card .proj-planning-badge.is-complete {
  color: #15803d;
  border-color: color-mix(in oklab, #22c55e 28%, var(--line));
  background: color-mix(in oklab, #22c55e 8%, var(--bg));
}
/* Financial-data completeness badge — amber so "missing data" reads clearly
   as a to-do, distinct from a genuine loss (which stays red in profit cols). */
.proj-status-card .proj-planning-badge.is-data {
  font-size: 10px; font-weight: 600; padding: 2px 7px; margin-left: 6px;
  border: 1px solid color-mix(in oklab, #f59e0b 38%, var(--line));
  border-radius: 999px;
  color: #b45309;
  background: color-mix(in oklab, #f59e0b 12%, var(--bg));
}
/* Amber "ยังไม่ลงต้นทุน" pill used inside cost/profit cells in place of "—" */
.proj-incomplete-pill {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; line-height: 1.4;
  padding: 1px 7px; border-radius: 999px;
  color: #b45309;
  border: 1px solid color-mix(in oklab, #f59e0b 36%, var(--line));
  background: color-mix(in oklab, #f59e0b 10%, var(--bg));
  white-space: nowrap;
}

/* Timeline mini-bar: cleaner track + tighter typography */
.proj-status-card .proj-progress-bar-track {
  background: var(--line-soft, #eceef1);
  height: 5px; border-radius: 3px;
}
.proj-status-card .proj-progress-bar-fill { border-radius: 3px; }
.proj-status-card .proj-progress-label { font-size: 11px; font-weight: 700; color: var(--fg-2); }
.proj-status-card .proj-dur-remaining { font-size: 10px; font-weight: 500; }

/* Project name: stronger primary, refined hover */
.proj-status-card .proj-name-text { font-weight: 600; color: var(--fg); }
.proj-status-card .proj-name-link:hover .proj-name-text {
  text-decoration: none;
  color: var(--accent);
}

/* Customer chip: softer, rounded */
.proj-status-card .proj-customer-empty { color: var(--fg-3); font-size: 11px; font-style: normal; }


/* Projects table column sizing — keeps pipeline readable after QT + time columns. */
.proj-summary-table col.proj-col-customer { width: 14%; }
.proj-summary-table col.proj-col-status-age { width: 7.5%; }
.proj-summary-table col.proj-col-qt { width: 11.5%; }
.proj-cell--status-age { text-align: center; color: var(--fg-2); }
.proj-cell--qt { text-align: center; }
.proj-qt-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-QT chip button wrapper */
.proj-qt-chips-btn {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.proj-qt-chips-btn:hover .proj-qt-chip { border-color: color-mix(in oklab, oklch(0.5 0.16 250) 60%, var(--line)); background: color-mix(in oklab, oklch(0.5 0.16 250) 10%, var(--bg-soft)); }
.proj-qt-chip--more { background: transparent; border-style: dashed; color: var(--fg-3); }

/* Clickable Flow cell: each chip opens its FlowAccount document; the trailing
   "+" opens the picker to link/manage more. */
.proj-qt-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 4px;
  padding: 2px 0;
  max-width: 100%;
  min-width: 0;
}
button.proj-qt-chip {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
/* The serial chip may shrink (ellipsis) so the +N / + controls stay visible. */
.proj-qt-cell .proj-qt-chip--link { flex: 0 1 auto; min-width: 0; }
.proj-qt-cell .proj-qt-chip--more,
.proj-qt-cell .proj-qt-add { flex: none; }
button.proj-qt-chip:hover {
  border-color: color-mix(in oklab, oklch(0.5 0.16 250) 60%, var(--line));
  background: color-mix(in oklab, oklch(0.5 0.16 250) 12%, var(--bg-soft));
  color: oklch(0.45 0.16 250);
}
.proj-qt-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.proj-qt-add:hover {
  border-style: solid;
  border-color: color-mix(in oklab, oklch(0.5 0.16 250) 60%, var(--line));
  background: color-mix(in oklab, oklch(0.5 0.16 250) 12%, var(--bg-soft));
  color: oklch(0.45 0.16 250);
}

/* Draft/FlowAccount customer source marker in Projects pipeline. */
.proj-customer-cell.is-flow { justify-content: center; }
.proj-customer-chip.is-flow { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.proj-customer-source {
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Projects pipeline: FlowAccount QT manager — linked section. */
.proj-qt-linked-section { margin-bottom: 12px; border: 1px solid color-mix(in oklab, oklch(0.58 0.16 150) 45%, var(--line)); border-radius: 10px; overflow: hidden; }
.proj-qt-section-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: oklch(0.43 0.15 150); text-transform: uppercase; letter-spacing: .04em; padding: 7px 12px; background: color-mix(in oklab, oklch(0.58 0.16 150) 10%, var(--bg-soft)); border-bottom: 1px solid color-mix(in oklab, oklch(0.58 0.16 150) 30%, var(--line)); }
.proj-qt-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: none; background: oklch(0.43 0.15 150); color: #fff; }
.proj-qt-row.is-linked { grid-template-columns: 48px 124px 1fr auto auto; background: color-mix(in oklab, oklch(0.58 0.16 150) 5%, transparent); border-radius: 0; }
.proj-qt-row.is-linked:hover { background: color-mix(in oklab, oklch(0.5 0.16 25) 6%, transparent); }
.proj-qt-row.is-linked .proj-qt-type { color: oklch(0.43 0.15 150); background: color-mix(in oklab, oklch(0.58 0.16 150) 18%, transparent); }
.proj-qt-linked-total { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-top: 1px solid color-mix(in oklab, oklch(0.58 0.16 150) 25%, var(--line)); background: color-mix(in oklab, oklch(0.58 0.16 150) 7%, var(--bg-soft)); font-size: 12px; font-weight: 700; color: oklch(0.43 0.15 150); }
.proj-qt-linked-total .mono { font-size: 13px; color: var(--fg); }
.proj-qt-unlink { font-size: 11px; font-weight: 700; color: oklch(0.52 0.16 25); white-space: nowrap; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; background: transparent; cursor: pointer; opacity: .8; }
.proj-qt-unlink:hover:not(:disabled) { opacity: 1; background: color-mix(in oklab, oklch(0.52 0.16 25) 10%, transparent); }
.proj-qt-unlink:disabled { opacity: .4; cursor: default; }
.proj-flow-chain-wrap { padding: 10px 12px 12px; background: color-mix(in oklab, oklch(0.58 0.16 150) 4%, transparent); }
.proj-flow-chain-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12px; font-weight: 800; color: var(--fg-2); }
.proj-flow-chain-head em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 600; color: oklch(0.50 0.17 35); }
.proj-flow-chain { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.proj-flow-step-arrow { flex: 0 0 auto; align-self: center; display: inline-flex; color: var(--fg-3); }
.proj-flow-step { flex: 0 0 min(220px, 72vw); display: grid; gap: 6px; border: 1px solid color-mix(in oklab, oklch(0.58 0.16 150) 35%, var(--line)); border-radius: 8px; padding: 9px 10px; background: var(--bg); box-shadow: 0 1px 0 color-mix(in oklab, #fff 70%, transparent) inset; }
.proj-flow-step.is-quotation { border-color: color-mix(in oklab, oklch(0.55 0.16 250) 38%, var(--line)); background: color-mix(in oklab, oklch(0.55 0.16 250) 5%, var(--bg)); }
.proj-flow-step.is-billingNote { border-color: color-mix(in oklab, oklch(0.56 0.15 70) 42%, var(--line)); background: color-mix(in oklab, oklch(0.72 0.15 75) 7%, var(--bg)); }
.proj-flow-step.is-taxInvoice, .proj-flow-step.is-cashInvoice { border-color: color-mix(in oklab, oklch(0.58 0.16 150) 42%, var(--line)); background: color-mix(in oklab, oklch(0.58 0.16 150) 6%, var(--bg)); }
.proj-flow-step-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.proj-flow-step-top.no-action { grid-template-columns: auto minmax(0, 1fr); }
.proj-flow-step-type { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px; border-radius: 6px; background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg-2); font-size: 10px; font-weight: 900; }
.proj-flow-step-serial { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--fg); }
.proj-flow-step-unlink { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; color: oklch(0.50 0.16 25); background: transparent; border: 0; cursor: pointer; }
.proj-flow-step-unlink:hover:not(:disabled) { background: color-mix(in oklab, oklch(0.55 0.18 25) 10%, transparent); }
.proj-flow-step-unlink:disabled { opacity: .45; cursor: default; }
.proj-flow-step-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--fg-3); }
.proj-flow-step-meta .mono { color: var(--fg); font-weight: 800; }
.proj-flow-step-status { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 800; color: var(--fg-2); }
.proj-flow-step-status i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background: oklch(0.52 0.14 70); }
.proj-flow-step-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-flow-step.tone-ok .proj-flow-step-status { color: oklch(0.43 0.15 150); }
.proj-flow-step.tone-ok .proj-flow-step-status i { background: oklch(0.58 0.16 150); }
.proj-flow-step.tone-mid .proj-flow-step-status { color: oklch(0.46 0.16 250); }
.proj-flow-step.tone-mid .proj-flow-step-status i { background: oklch(0.58 0.18 250); }
.proj-flow-step.tone-warn .proj-flow-step-status { color: oklch(0.50 0.14 70); }
.proj-flow-step.tone-warn .proj-flow-step-status i { background: oklch(0.65 0.16 75); }
.proj-flow-step.tone-void .proj-flow-step-status { color: oklch(0.50 0.18 25); }
.proj-flow-step.tone-void .proj-flow-step-status i { background: oklch(0.58 0.20 25); }
.proj-flow-step.tone-muted .proj-flow-step-status { color: var(--fg-3); }
.proj-flow-step.tone-muted .proj-flow-step-status i { background: var(--fg-3); }

/* Projects pipeline: FlowAccount QT picker. */
.proj-qt-modal { max-width: 780px; }
.proj-qt-modal-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.proj-qt-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 0 10px; }
.proj-qt-search input { border: 0; background: transparent; width: 100%; padding: 10px 0; outline: none; font: inherit; color: var(--fg); }
.proj-qt-hint { font-size: 14px; color: var(--fg-3); margin: 8px 0 10px; }
.proj-qt-list { max-height: 430px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.proj-qt-empty { padding: 18px; text-align: center; color: var(--fg-3); font-size: 14px; }
.proj-qt-row { display: grid; grid-template-columns: 48px 124px 1fr 92px 108px auto 86px; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; border-radius: 9px; padding: 9px 10px; cursor: pointer; font: inherit; text-align: left; color: var(--fg); }
.proj-qt-row:hover:not(:disabled) { background: color-mix(in oklab, oklch(0.5 0.16 250) 8%, transparent); }
.proj-qt-row:disabled { opacity: .6; cursor: default; }
.proj-qt-type { font-size: 10px; font-weight: 900; text-align: center; border-radius: 6px; padding: 2px 0; color: var(--fg-2); background: var(--line-soft, color-mix(in oklab, var(--fg) 8%, transparent)); }
.proj-qt-serial, .proj-qt-amount { font-weight: 700; }
.proj-qt-customer { color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-qt-date { color: var(--fg-3); }
.proj-qt-pick { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; color: oklch(0.48 0.16 250); font-size: 12px; font-weight: 800; white-space: nowrap; }
.proj-qt-status { font-size: 11px; color: var(--fg-3); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.proj-qt-modal .fl-stag { border: 1px solid currentColor; font-weight: 800; }
.proj-qt-modal .fl-stag--wait { color: oklch(0.50 0.14 70); background: color-mix(in oklab, oklch(0.75 0.16 75) 22%, transparent); }
.proj-qt-modal .fl-stag--mid  { color: oklch(0.46 0.16 250); background: color-mix(in oklab, oklch(0.58 0.18 250) 18%, transparent); }
.proj-qt-modal .fl-stag--ok   { color: oklch(0.43 0.15 150); background: color-mix(in oklab, oklch(0.58 0.16 150) 20%, transparent); }
.proj-qt-modal .fl-stag--void { color: oklch(0.50 0.18 25); background: color-mix(in oklab, oklch(0.60 0.20 25) 16%, transparent); }
@media (max-width: 760px) {
  .proj-qt-row { grid-template-columns: 42px 1fr auto; }
  .proj-qt-customer, .proj-qt-date, .proj-qt-amount { display: none; }
  .proj-flow-chain-wrap { padding: 9px; }
  .proj-flow-chain-head { display: block; }
  .proj-flow-chain-head em { display: block; margin-top: 3px; }
  .proj-flow-step { flex-basis: min(210px, 76vw); }
}

/* Immediate custom tooltip for table badges; native title is delayed/unclear and cells clip overflow. */
.proj-cell--name:has(.proj-planning-badge:hover),
.proj-name-hover:has(.proj-planning-badge:hover),
.proj-name-link:has(.proj-planning-badge:hover) {
  overflow: visible;
  position: relative;
  z-index: 20;
}
.proj-planning-badge[data-tooltip] {
  position: relative;
  cursor: help;
}
.proj-planning-badge[data-tooltip]:hover::after,
.proj-planning-badge[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(360px, 70vw);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, #f59e0b 34%, var(--line));
  background: color-mix(in oklab, #1f2937 96%, #f59e0b 4%);
  color: #fff7ed;
  box-shadow: 0 12px 32px color-mix(in oklab, #000 24%, transparent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  z-index: 999;
}
.proj-planning-badge[data-tooltip]:hover::before,
.proj-planning-badge[data-tooltip]:focus-visible::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: color-mix(in oklab, #1f2937 96%, #f59e0b 4%);
  border-right: 1px solid color-mix(in oklab, #f59e0b 34%, var(--line));
  border-bottom: 1px solid color-mix(in oklab, #f59e0b 34%, var(--line));
  pointer-events: none;
  z-index: 998;
}

/* Projects QT picker: hover/focus preview of document line items. */
.proj-qt-row { position: relative; }
.proj-qt-preview {
  position: absolute; left: 58px; right: 12px; top: calc(100% - 2px); z-index: 50;
  padding: 10px 12px; border: 1px solid var(--border-strong, #d4d4d8); border-radius: 11px;
  background: color-mix(in oklab, var(--bg) 96%, white 4%); box-shadow: 0 14px 40px rgba(15, 23, 42, .16);
  color: var(--fg-2); font-size: 12px; pointer-events: none;
}
.proj-qt-preview.is-error { color: oklch(0.55 0.18 25); }
.proj-qt-preview-title { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.proj-qt-preview-item { display: flex; justify-content: space-between; gap: 14px; line-height: 1.35; padding: 3px 0; }
.proj-qt-preview-item span { min-width: 0; }
.proj-qt-preview-item b { display: block; color: var(--fg); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-qt-preview-item em { display: block; color: var(--fg-3); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-qt-preview-item strong { color: var(--fg); white-space: nowrap; }
.proj-qt-preview-more { margin-top: 4px; color: var(--fg-3); font-size: 11px; }
@media (max-width: 760px) { .proj-qt-preview { display: none; } }

/* Projects QT picker: use a stable preview panel instead of an overlapping hover popover. */
.proj-qt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.proj-qt-layout .proj-qt-list { max-height: 430px; }
.proj-qt-preview { display: none !important; }
.proj-qt-preview-panel {
  min-height: 180px; max-height: 430px; overflow: auto; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--line-soft, color-mix(in oklab, var(--fg) 3%, transparent));
  color: var(--fg-2); font-size: 12px;
}
.proj-qt-preview-panel.is-empty { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--fg-3); }
.proj-qt-preview-panel.is-error { color: oklch(0.55 0.18 25); }
.proj-qt-preview-doc { color: var(--fg-3); margin: -2px 0 8px; }
@media (max-width: 860px) {
  .proj-qt-layout { grid-template-columns: 1fr; }
  .proj-qt-preview-panel { max-height: 220px; }
}

.proj-qt-preview-company { font-size: 13px; font-weight: 800; color: var(--fg); margin: -2px 0 2px; line-height: 1.25; }

/* Projects QT picker: make company name visible directly in search rows. */
.proj-qt-row { grid-template-columns: 48px 124px minmax(220px, 1.5fr) 92px 108px auto 86px; }
.proj-qt-customer { color: var(--fg); font-weight: 700; white-space: normal; line-height: 1.25; }
@media (max-width: 760px) {
  .proj-qt-row { grid-template-columns: 42px 1fr auto; }
  .proj-qt-customer { display: block; grid-column: 2 / 3; font-size: 12px; color: var(--fg-2); }
}

/* Projects QT picker: separate preview row from the actual link action. */
.proj-qt-row { cursor: default; }
.proj-qt-row:hover, .proj-qt-row.is-active { background: color-mix(in oklab, oklch(0.5 0.16 250) 8%, transparent); }
.proj-qt-row:disabled { opacity: 1; }
.proj-qt-pick { border: 0; background: transparent; cursor: pointer; padding: 4px 0; }
.proj-qt-pick:hover:not(:disabled) { text-decoration: underline; }
.proj-qt-pick:disabled { opacity: .55; cursor: default; text-decoration: none; }

/* Projects QT picker: dense search rows show date and money clearly. */
.proj-qt-row { grid-template-columns: 48px 124px minmax(240px, 1.4fr) 104px 112px 112px auto 86px; padding-block: 10px; }
.proj-qt-customer b { display: block; color: var(--fg); font-weight: 800; }
.proj-qt-customer em { display: block; color: var(--fg-3); font-style: normal; font-size: 11px; margin-top: 1px; }
.proj-qt-date, .proj-qt-amount, .proj-qt-vat { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; color: var(--fg); font-weight: 800; }
.proj-qt-date small, .proj-qt-amount small, .proj-qt-vat small { font-family: inherit; font-size: 10px; font-weight: 700; color: var(--fg-3); }
.proj-qt-vat { color: var(--fg-2); }
@media (max-width: 920px) {
  .proj-qt-row { grid-template-columns: 42px 1fr auto; row-gap: 5px; }
  .proj-qt-date, .proj-qt-amount, .proj-qt-vat, .proj-qt-row .fl-stag, .proj-qt-status { display: inline-flex; grid-column: 2 / 3; flex-direction: row; gap: 5px; }
}

/* Projects QT picker: never hide core metadata in the modal search rows. */
.proj-qt-modal .proj-qt-row {
  grid-template-columns: 48px 128px minmax(180px, 1fr) 92px 108px 108px auto 70px;
}
.proj-qt-modal .proj-qt-date,
.proj-qt-modal .proj-qt-amount,
.proj-qt-modal .proj-qt-vat,
.proj-qt-modal .proj-qt-row .fl-stag,
.proj-qt-modal .proj-qt-status,
.proj-qt-modal .proj-qt-pick { display: inline-flex; }
@media (max-width: 920px) {
  .proj-qt-modal .proj-qt-row { grid-template-columns: 48px 128px minmax(180px, 1fr) auto; align-items: start; row-gap: 6px; }
  .proj-qt-modal .proj-qt-customer { grid-column: 3 / 5; }
  .proj-qt-modal .proj-qt-date { grid-column: 3 / 4; grid-row: 2; }
  .proj-qt-modal .proj-qt-amount { grid-column: 4 / 5; grid-row: 2; justify-self: start; }
  .proj-qt-modal .proj-qt-vat { grid-column: 3 / 4; grid-row: 3; }
  .proj-qt-modal .proj-qt-row .fl-stag,
  .proj-qt-modal .proj-qt-status { grid-column: 4 / 5; grid-row: 3; justify-self: start; }
  .proj-qt-modal .proj-qt-pick { grid-column: 4 / 5; grid-row: 1; justify-self: end; }
}
@media (max-width: 620px) {
  .proj-qt-modal .proj-qt-row { grid-template-columns: 42px 122px 1fr; }
  .proj-qt-modal .proj-qt-customer { grid-column: 3 / 4; }
  .proj-qt-modal .proj-qt-date,
  .proj-qt-modal .proj-qt-amount,
  .proj-qt-modal .proj-qt-vat,
  .proj-qt-modal .proj-qt-row .fl-stag,
  .proj-qt-modal .proj-qt-status,
  .proj-qt-modal .proj-qt-pick { grid-column: 3 / 4; grid-row: auto; justify-self: start; }
}

/* Projects QT picker: use the available viewport instead of a narrow dialog. */
.proj-qt-modal {
  width: min(1180px, calc(100vw - 48px));
  max-width: min(1180px, calc(100vw - 48px)) !important;
}
.proj-qt-layout { grid-template-columns: minmax(0, 1fr) 340px; }
.proj-qt-modal .proj-qt-list { max-height: min(58vh, 560px); }
.proj-qt-preview-panel { max-height: min(58vh, 560px); }
@media (max-width: 760px) {
  .proj-qt-modal { width: calc(100vw - 20px); max-width: calc(100vw - 20px) !important; }
}

/* Projects QT picker: full-width list rows; no clipped date/money columns. */
.proj-qt-layout { grid-template-columns: 1fr !important; }
.proj-qt-preview-panel { max-height: 240px; }
.proj-qt-modal .proj-qt-row {
  grid-template-columns: 48px 132px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "type serial customer pick"
    "type serial date status"
    "type serial amount vat";
  align-items: center;
  gap: 5px 12px;
}
.proj-qt-modal .proj-qt-type { grid-area: type; }
.proj-qt-modal .proj-qt-serial { grid-area: serial; }
.proj-qt-modal .proj-qt-customer { grid-area: customer; min-width: 0; }
.proj-qt-modal .proj-qt-date { grid-area: date; }
.proj-qt-modal .proj-qt-amount { grid-area: amount; }
.proj-qt-modal .proj-qt-vat { grid-area: vat; justify-self: start; }
.proj-qt-modal .proj-qt-row .fl-stag,
.proj-qt-modal .proj-qt-status { grid-area: status; justify-self: start; }
.proj-qt-modal .proj-qt-pick { grid-area: pick; justify-self: end; }
.proj-qt-modal .proj-qt-date,
.proj-qt-modal .proj-qt-amount,
.proj-qt-modal .proj-qt-vat {
  display: inline-flex !important;
  flex-direction: row;
  gap: 6px;
  white-space: nowrap;
}
.proj-qt-modal .proj-qt-customer b,
.proj-qt-modal .proj-qt-customer em { overflow: visible; text-overflow: clip; white-space: normal; }
@media (max-width: 620px) {
  .proj-qt-modal .proj-qt-row {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "type serial pick"
      "type customer customer"
      "type date date"
      "type amount amount"
      "type vat vat"
      "type status status";
  }
}

/* Projects: PM reminder to keep team slots complete. */
.proj-pm-slot-alert {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 18px 0; padding: 10px 12px;
  border: 1px solid color-mix(in oklab, oklch(0.72 0.16 75) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, oklch(0.86 0.12 85) 20%, var(--bg));
  color: var(--fg); font-size: 13px; line-height: 1.45;
}
.proj-pm-slot-alert-icon { color: oklch(0.52 0.14 70); display: inline-flex; margin-top: 1px; }
.proj-pm-slot-alert b { font-weight: 800; }
.proj-pm-slot-alert span { color: var(--fg-2); }

/* Missing FlowAccount QT callout shown as a compact action badge in project tables. */
.proj-qt-missing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, oklch(0.62 0.18 42) 58%, var(--line));
  background: color-mix(in oklab, oklch(0.86 0.12 55) 26%, var(--card));
  color: oklch(0.48 0.15 38);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, white 35%, transparent);
}
.proj-qt-missing-badge:hover {
  border-color: oklch(0.58 0.18 38);
  background: color-mix(in oklab, oklch(0.82 0.16 48) 34%, var(--card));
}
.proj-qt-missing-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 16%, transparent);
  flex: none;
}

/* Draft contract value is explicitly non-final until a FlowAccount QT is linked. */
.proj-draft-value-wrap {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
  align-items: center;
  gap: 1px;
  max-width: 100%;
  white-space: normal;
  line-height: 1.1;
}
.proj-draft-value-wrap .proj-editable {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-end;
}
.proj-draft-value-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #f59e0b 42%, var(--line));
  background: color-mix(in oklab, #f59e0b 8%, var(--bg));
  color: #9a5b05;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1.35;
  pointer-events: auto;
}

/* Price estimation modal — spreadsheet-like but compact. */
.proj-estimate-modal { max-width: min(1280px, 98vw); }
.proj-estimate-sub { margin-top: 2px; color: var(--fg-3); font-size: 14px; }
.proj-estimate-section-title { margin: 14px 0 8px; font-size: 14px; font-weight: 900; color: var(--fg-2); letter-spacing: .02em; }
.proj-estimate-buffer-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1.25px solid #d6b600;
  border-radius: 10px;
  background: #fff8c5;
  font-size: 13px;
  font-weight: 850;
  color: var(--fg-2);
}
.proj-estimate-buffer-control input { width: 82px; }
.proj-estimate-buffer-control em { color: var(--fg-3); font-style: normal; font-weight: 600; }
.proj-estimate-grid { display: grid; gap: 6px; align-items: center; overflow-x: visible; padding-bottom: 2px; }
.proj-estimate-grid > div { font-size: 14px; font-weight: 800; color: var(--fg-3); }
.proj-estimate-grid.role { grid-template-columns: 72px 88px 88px minmax(74px, .8fr) minmax(74px, .8fr) minmax(82px, .9fr) minmax(132px, 1.6fr); }
.proj-estimate-grid.pricing { grid-template-columns: minmax(150px, 1.5fr) 88px minmax(74px, .8fr) minmax(74px, .8fr) minmax(82px, .9fr) minmax(132px, 1.6fr); }
.proj-estimate-grid input,
.proj-estimate-cost-row input,
.proj-estimate-input,
.proj-estimate-textarea {
  min-width: 0;
  padding: 8px 10px;
  border: 1.25px solid #d6b600;
  border-radius: 8px;
  background: #fff8c5;
  color: #111827;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 1px 0 rgba(0,0,0,.04);
  font: inherit;
  font-size: 14px;
}
.proj-estimate-grid input:not(.proj-estimate-auto):focus,
.proj-estimate-cost-row input:focus,
.proj-estimate-input:focus,
.proj-estimate-textarea:focus {
  outline: none;
  border-color: #b77900;
  background: #fff3a3;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .24), inset 0 0 0 1px rgba(255,255,255,.65);
}
.proj-estimate-editable-field { background: #fff8c5 !important; border-color: #d6b600 !important; }
.proj-estimate-md-field { font-weight: 850; }
.proj-estimate-auto {
  border-color: #cbd5e1 !important;
  background: #eef2f7 !important;
  color: #334155 !important;
  box-shadow: none !important;
  cursor: default;
}
.proj-estimate-server-cost {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 92px 92px minmax(110px, auto);
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px;
  border: 1.25px solid color-mix(in oklab, #0ea5e9 45%, var(--line));
  border-radius: 12px;
  background: linear-gradient(180deg, #f0f9ff, #ffffff);
}
.proj-estimate-server-cost strong,
.proj-estimate-server-cost span { display: block; }
.proj-estimate-server-cost strong { font-size: 14px; font-weight: 900; color: var(--fg-2); }
.proj-estimate-server-cost span { margin-top: 2px; font-size: 12px; color: var(--fg-3); }
.proj-estimate-server-metric { padding: 7px 9px; border: 1px solid #bae6fd; border-radius: 9px; background: #f8fafc; }
.proj-estimate-server-metric b { display: block; margin-top: 2px; color: #075985; font-family: var(--font-mono); text-align: right; }
.proj-estimate-server-total { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; padding: 8px 10px; border-radius: 9px; background: #e0f2fe; color: #075985; font-weight: 900; }
.proj-estimate-costs { display: grid; gap: 6px; }
.proj-estimate-cost-row { display: grid; grid-template-columns: minmax(160px, 1fr) 110px 96px 90px 92px 52px; gap: 6px; align-items: center; }
.proj-estimate-cost-row label { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--fg-2); }
.proj-estimate-muted { padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; color: var(--fg-3); font-size: 14px; }

.proj-estimate-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 6px;
}
.proj-estimate-risk-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--fg-2);
  font-size: 14px;
}
.proj-estimate-risk-grid .proj-estimate-profit-input {
  justify-content: space-between;
  font-weight: 800;
}
.proj-estimate-profit-input input { width: 76px; }
.proj-estimate-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.proj-estimate-choice-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.proj-estimate-choice-card.is-selected {
  border-color: color-mix(in oklab, var(--accent) 70%, var(--line));
  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent);
}
.proj-estimate-choice-card span { font-size: 14px; font-weight: 900; }
.proj-estimate-choice-card em { color: var(--fg-3); font-size: 14px; font-style: normal; }
.proj-estimate-choice-card b { margin-top: 4px; font-size: 20px; text-align: right; }
.proj-estimate-choice-card small { color: var(--fg-3); font-size: 14px; text-align: right; }
.proj-estimate-choice-card strong { justify-self: end; color: var(--accent); font-size: 14px; }

.proj-estimate-summary-text { display: grid; gap: 8px; padding: 12px 14px; border: 1.25px solid color-mix(in oklab, #16a34a 36%, var(--line)); border-radius: 13px; background: linear-gradient(180deg, #f0fdf4, #ffffff); color: var(--fg-2); }
.proj-estimate-summary-text > strong { font-size: 14px; font-weight: 950; color: #14532d; }
.proj-estimate-calc-lines { display: grid; gap: 3px; }
.proj-estimate-calc-lines > div { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline; padding: 3px 0; font-size: 14px; }
.proj-estimate-calc-lines span { color: var(--fg-2); }
.proj-estimate-calc-lines b { font-family: var(--font-mono); color: var(--fg); }
.proj-estimate-calc-lines .is-total { margin-top: 2px; padding-top: 7px; border-top: 1px dashed color-mix(in oklab, #16a34a 28%, var(--line)); font-weight: 900; }
.proj-estimate-calc-lines .is-total b { color: #047857; font-size: 16px; }
.proj-estimate-calc-lines .is-quote { margin: 2px 0; padding: 8px 10px; border: 1.5px solid #047857; border-radius: 10px; background: #ecfdf5; font-weight: 950; }
.proj-estimate-calc-lines .is-quote b { color: #047857; font-size: 20px; }
.proj-estimate-profit-line { color: var(--fg-3); font-size: 13px; text-align: right; }
.proj-estimate-textarea { width: 100%; min-height: 76px; margin-top: 10px; resize: vertical; }
.proj-estimate-input { width: 100%; margin-top: 8px; }
.proj-draft-value-badge { cursor: pointer; }
.proj-draft-value-badge:hover { background: color-mix(in oklab, #f59e0b 16%, var(--bg)); }

/* Status-health warning badge in the project name cell. */
.proj-health-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  color: oklch(0.45 0.14 70);
  background: oklch(0.95 0.06 80);
  border: 1px solid oklch(0.82 0.10 75);
  cursor: help;
}

/* Clickable health-count KPI that toggles the only-flagged filter. */
.proj-kpi-btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.proj-kpi-btn:hover { border-color: oklch(0.82 0.10 75); }
.proj-kpi-btn.is-active {
  border-color: oklch(0.70 0.14 70);
  background: oklch(0.93 0.07 80);
}